第九课 实现登录功能的全流程

一、在src/api/，创建login.js

import myaxios from "@/utils/myaxios"

export function login(username,password){
    return myaxios({
        url:'/login',
        method: "post",
        data:{
            username,
            password
        }
    })
}

export function getUserInfo(token){
    return myaxios({
        url:`/user/info?token=${token}`,
        method: "get",
    })
}

二、修改src/views/login/index.vue

import {login,getUserInfo} from "@/api/login"


methods: {
    onSubmitLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // alert("条件满足");
          login(this.form.username, this.form.password).then((response) => {
            const resp = response.data;
            if (resp.flag) {
              getUserInfo(resp.data.token).then((response) => {
                const respUser = response.data;
                if (respUser.flag) {
                  localStorage.setItem(
                    "manager-user",
                    JSON.stringify(respUser.data)
                  );
                  localStorage.setItem(
                    "manager-token",
                    JSON.stringify(resp.data.token)
                  );
                } else {
                  this.$message({
                    message: respUser.message,
                    type: "warning",
                  });
                }
              });
            }else{
                this.$message({
                  message:respUser.message,
                  type:"warning"
                })
              }
          });
        } else {
          return false;
        }
      })
    }
  }

三、修改.env.development中的端口

# 接口服务器地址
VUE_APP_SERVER_URL = 'http://localhost:8090'

四、修改server-api/mocks/login.js

/**
 * 后台登录接口
 *
 * @url login?username=123&password=123
 *
 */

然后输入http://localhost:8888/login，开始测试登录功能