课程名称：前端工程师
课程章节： 第三章 项目登录&注册页开发
主讲老师：Dell
课程内容： 第三章 登录&注册页开发
3.3注册页面开发及路由串联复习
1.登录注册逻辑:
- 第一步: 默认先跳到登录页:
- 第二步: 点击 “立即注册” 设置 localStorage.isLogin=true
- 第三步: 点击登录 跳转到 “首页”
- 第四步: 设置登录后的 “守护路由”, 即登录后就不能进入 “login”, ‘register’
其实注册页面与登陆页面很相似，但是从项目角度来看，还是分开来写比较好，方便后期拓展。
2. 当登陆页面，点击去注册页面 @handleRegisterClick ：登陆页面点击“注册”按钮跳转到注册路由页面
3. 注册页面，点击后，跳转到登陆页面
3-4 使用axios 发送登陆 Mock 请求
只是模拟的功能，不是真实上线的功能。因为我们登陆和注册时，需要用到后端的接口和服务器，对数据进行交互。比如，用户输入的账号和密码和服务器的密码是否匹配，如果真的匹配，后端就告诉我们登陆成功才能跳转到首页。否则就登陆不成功，进不了页面。
1）axios的知识
axios.post(url[,data[,config]]). url不能省略
axios是一个基于Promise的第三方库，所以后面要用then\catch
2、POST和GET的区别：
get请求会缓存，post请求不会被缓存，原因如下：
HTTP缓存的目的就是使应用执行的更快，更易扩展，但HTTP缓存通常只适用于查询请求，也就是不更新服务端数据的请求，这也就导致了在HTTP的世界里，一般都是对GET请求做缓存，POST请求很少有缓存。
也就是像同学所说的get多用来查询数据，不会修改服务端数据，所以会被浏览器缓存。而post则是发送数据到服务器端去存储，数据必须放在数据库，所以一般都得去访问服务器端，而极少需要缓存。
而是说get请求的数据会被前端缓存，当浏览器发送了一条get请求，浏览器会把返回的数据记录下来，当再次发送该请求的时候，浏览器并不真的再发送这条请求，而是从历史记录里把这个数据读取出来，这是浏览器自己的决策，后端并不知道也并没有收到任何请求。而post请求就不会缓存数据，每次请求都会重新去访问后台获取数据。
3、cookie、localStorage、sessionStorage的区别：
localStorage存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据;
4、双向绑定：reactive、v-model都可以进行双向绑定，效果一样。
目的是将用户输入的用户名和密码存储起来
这里双向绑定是为了让输入的密码和传送到后端接口的密码一致
然后再将传送的密码和后台数据库中的进行匹配。
此处不涉及匹配，只是前端数据传输
reactive：composition API中的知识
使用reactive是为了让input输入的数据是响应式的
v-model ：双向绑定input内容改变，显示的也改变；显示的数值改变，input中内容也改变
5、安装axios工具：npm install axios --save
6、引入工具： import axios from ‘axios’
原理1: 双向数据绑定，定义在data中
原理2：后端接口中，errno的值为0的时候，表示没有错误可以登陆
7. fastmock 虚拟后端接口
8、content-type请求要是json content-type默认的修改方法
使用axios封装后的get和post的代码：
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd',
timeout: 10000
})
//get
// https://mobile-ms.uat.homecreditcfc.cn/mock/62aeca861dcd180027114309/jd
// https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd
export const get = (url, params = {}) => {
return new Promise((resolve, reject) => {
instance.get(url, { params }).then((response) => {
// response是啥意思？处理返回的结果
resolve(response.data)
}, err => {
// err是一个内置对象，表示捕获的错误
reject(err)
})
})
}
// 封装Post
export const post = (url, data = {}) => {
return new Promise((resolve, reject) => {
instance.post(url, data, {
// content-type请求要是json格式content-type默认的修改方法
// axios.defaults.headers.post['Content-Type'] ='application/json'
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {
// response是啥意思？处理返回的结果
resolve(response.data)
}, err => {
reject(err)
})
})
}
处理注册流程代码：
// （一）处理注册流程
const useRegisterEffcet = (showToast) => {
const router = useRouter();
const data = reactive({
username: "",
password: "",
ensurement: "",
});
const handleRegister = async () => {
// 发一个请求
try {
const result = await post("/api/user/register", {
username: data.username,
password: data.password,
});
if (result?.errno === 0) {
router.push({ name: "Login" });
} else {
showToast("注册失败");
}
} catch (e) {
showToast("请求失败");
}
};
console.log(data,"data")
const { username, password, ensurement } = toRefs(data);
r
学习收获：
学会使用axios封装后的get和post的代码，加油！