6.前后端接口对接

更改后端接口

server.port=8081

安装axios

npm install axios

封装网络请求

新建utils/api.js

import axios from 'axios'
//将element-ui的错误信息的弹框引入进来
////单独引入 此时调用方法为 Message(options)。
// 我们也为每个 type 定义了各自的方法，如 Message.success(options)。
// 并且可以调用 Message.closeAll() 手动关闭所有实例。
import {Message} from 'element-ui';


//编写处理信息响应的拦截器，该拦截器有success和error两个回调函数，做一些判断
//处理响应信息的响应拦截器
/*上面已经导入了axios的对象了，这个对象里面有个响应的拦截器axios.interceptors.response.use(),
use里面的data是服务端响应给你的数据，该拦截器有两个回调函数，一个是success，一个是error,和jQuery
里面的ajax一样请求数据的时候也有两个回调函数，一个success，一个error,可以简单的理解为
http的响应码是200的，它会进入到success方法中来，400以上的会进入到error来，
*/
axios.interceptors.response.use(success=>{
    //success.status:http的响应码    success.status ==200   success.data.status == 500:返回json的status
    if(success.status && success.status == 200&& success.data.status == 500){
        //把后台的出错信息打印出来
        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:'尚未登录，请登录'})
    }else{
        //服务端返回的错误信息
        if(error.response.data.msg){
            Message.error({message:error.response.data.msg})
        }else{
            Message.error({message:'未知错误'})
        }
    }
    return;
})
//请求封装
let  base=''; ////防止有一天要给所有请求加前缀要一个一个去改，太麻烦
//请求地址  请求参数param
export const postKeyValueRequest=(url,params)=>{
    return axios({ //和ajax请求差不多
        method:'post',
        url:`${base}${url}`,
        data:params, //直接这样会以json的形式传给服务器，这是不支持的
        transformRequest:[function(data){
            let  ret='';
            for(let i in data){
                //往ret上面追加变量
                ret+=encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&'
            }
            console.log(ret)
            return ret;
        }],
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        }
    }
    )
}

配置请求转发的代理vue.config.js

//配置请求转发的代理
//定义代理的对象
let proxyObj ={}

proxyObj['/']={ //拦截的http请求
    ws:false,   //关掉websocket
    target:'http://localhost:8081', //目标转发地址
    changeOrigin: true,
    pathRewrite:{   //请求地址重写
        '^/':''     //拦截到的地址不去修改它
    }
}
//把这个导出来
module.exports={  //配置开发环境
    devServer:{
        host:'localhost',  //端口号
        port:8080,
        proxy:proxyObj   //代理对象
    }
}

设置Login.vue

methods:{
            submitLogin(){
                this.$refs.loginForm.validate((valid) => {
                    if(valid){
                        postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
                            //resp：从服务端拿到的数据  用户的数据要保存到哪里？ 保存在sessionSto  打开就没了
                            if(resp){
                                alert(JSON.stringify(resp))
                                // window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                                // this.$router.replace('/home') //replace替换 push压入
                            }
                        })
                    }else{
                        this.$message.error('请输入所有字段')
                        return false;
                    }
                })
            }
        }

运行点击登录按钮