微人事项目学习之登陆页面制作（四）

学习SpringBoot+Vue前后端分离项目，原项目GitHub地址，项目作者江雨一点雨博客。

前后端接口对接

这次需要同时启动两个项目，那就不能都用8080这个接口了，我们把后端的接口改为8081，在applicaiton.properties中添加就行。

server.port=8081

异常处理

使用axios处理网络请求，统一处理请求异常。

命令行运行 npm install axios

安装成功，依赖中出现axios

 "axios": "^0.19.2"

将axios进行简单封装，在src/utils下创建api.js

import axios from 'axios';  //引入axios
import { Message } from 'element-ui';  //引入element-ui的message
import router from '../router';  //导入路由


//响应拦截器
axios.interceptors.response.use(success=>{   //成功的响应
	//注意：success.status是httpstatus  
	//success.data.status是返回的JSON中的status  
    if (success.status &&success.status==200&&success.data.status==500){
        //msg为后端的RespBean中的msg
		//Message为element-ui的Message
        Message.error({message:success.data.msg})
        //返回空值是为了在请求调用的地方判断值是否为空，为空说明请求失败
        return;
    }
    if (success.data.msg){
        Message.success({message:success.data.msg})
    }

    return success.data;
},error => { //异常的响应
    if (error.response.status == 504||error.response.status==404){
        Message.error({message:'服务器挂了'})
    }else if (error.response.status==403){
        Message.error({message:'权限不足，请联系管理员'})
    }else if (error.response.status == 401){
        Message.error({message:'尚未登录，请登录'})
        //跳转到登录页面
        router.replace("/")

    }else {
        if (error.response.data.msg){
            Message.error({message:error.response.data.msg})
        }else {
            Message.error({message:'未知错误'})
        }
    }
    return;
})
//全局变量 方便添加前缀
//url:`${base}${url}`
let base='';
//请求封装 
export const postKeyValueRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params,
        transformRequest:[function (data) {
            let ret='';
            for (let i in data){

                ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
            }
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    });
}
//直接传递JSON对象
export const  postRequest=(url,params)=>{
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params
    })
}

export const  putRequest=(url,params)=>{
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}

export const  getRequest=(url,params)=>{
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
}

export const  deleteRequest=(url,params)=>{
    return axios({
        method: 'delete',
        url: `${base}${url}`,
        data: params
    })
}

在Login.vue中调用postKeyValueRequest方法，记得要在script标签里面导入

import {postKeyValueRequest} from "../utils/api";

methods:{
            submitLogin(){
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        //alert('submit!');
                   //请求成功处理
                        postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
                            if (resp) {
                                alert(JSON.stringfy(resp));//将JSON对象resp转化为字符串输出
                            }
                        })
                    } else {
                        this.$message.error('错了哦，这是一条错误消息');
                        return false;
                    }
                });
            }
        }

创建vue.config.js 用于请求转发

let proxyObj ={};
//拦截http请求
proxyObj['/']={
    ws:false, //关闭websocket 
    target:'http://localhost:8081', //拦截的http请求转发到8081
    changeOrigin:true, //默认是false：请求头中host仍然是浏览器发送过来的host 如果设置成true：发送请求头中host会设置成target
    //地址修改
    pathRewrite:{
        '^/':''  //不修改
    }
}
module.exports={
	//开发环境配置
    devServer:{
        host:'localhost',
        port:8080,
        proxy:proxyObj
    }
}

启动项目，输入admin和123，登录成功，显示出了后端的数据。
输入错误的用户名和密码，提示“用户名或密码错误”，测试成功。

制作前端请求方法插件

之前我们使用请求方法的时候需要导入，十分麻烦，可以将所有请求方法制作成插件，以后只需要导入插件，就可以使用所有方法，无需一一导入。
在main.js中导入所有的请求方法，然后用Vue.prototype引用请求方法

import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {getRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
import {postKeyValueRequest} from "./utils/api";

Vue.prototype.postRequest=postRequest;
Vue.prototype.putRequest=putRequest;
Vue.prototype.getRequest=getRequest;
Vue.prototype.deleteRequest=deleteRequest;
Vue.prototype.postKeyValueRequest=postKeyValueRequest;

制作完成，类似上文中的方法导入就可以删掉，然后用this.方法名就可以调用请求方法了。

登陆页面跳转

将登录获取到的用户信息保存到sessionStorge中（页面一关闭，信息不再存在）
创建src/views/Home.vue,并将其导入到路由中
改写submitLogin

this.postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
                            if (resp) {
							    window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                                let path=this.$route.query.redirect;
 								 //两个方法：replace和push
 								 //区别：push可以页面后退 replace不可以
                                this.$router.replace('/home');
                            }
                        })

启动项目，登录，跳转到/home，测试成功。