首页手记【学习打卡】第6天...

【学习打卡】第6天项目实战：Vue.js仿京东到家电商全栈项目前端开发

标签：

Html5 JavaScript Vue.js

课程名称：前端工程师
课程章节：第三章项目登录&注册页开发
主讲老师：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