前后端登陆接口对接

安装

D:\javaspa\vue2>npm install axios -s

创建目录utils
前端api.js封装所有请求

import axios from 'axios' //导入
import {Message} from 'element-ui'

/**
 * 拦截器拦截请求 响应200是上面.400是下面
 */
axios.interceptors.response.use(data => {//{status:200,data:{}}
    if (data.status && data.status == 200 && data.data.status == 500) {
        Message.error({message: data.data.msg});
        return;
    }
    if (data.data.msg) {
        Message.success({message: data.data.msg});
    }
    return data.data;
}, err => {
    if (err.response.status == 504 || err.response.status == 404) {
        Message.error({message: '服务器被吃了⊙﹏⊙∥'});
    } else if (err.response.status == 403) {
        Message.error({message: '权限不足,请联系管理员!'});
    } else if (err.response.status == 401) {
        Message.error({message: err.response.data.msg});
    } else {
        if (err.response.data.msg) {
            Message.error({message: err.response.data.msg});
        } else {
            Message.error({message: '未知错误!'});
        }
    }
    // return Promise.resolve(err);
})
let base = '';
export const postKeyValueRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
            'Content-Type': 'application/json'
        }
    });
}
export const uploadFileRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });
}
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params,
        headers: {
            'Content-Type': 'application/json'
        }
    });
}
export const deleteRequest = (url) => {
    return axios({
        method: 'delete',
        url: `${base}${url}`
    });
}
export const getRequest = (url) => {
    return axios({
        method: 'get',
        url: `${base}${url}`
    });
}

Login.vue引入api.js里postKeyValueRequest请求方法

<template>
    <div style="display: flex;justify-content: center">
        <el-card class="box-card" style="width:400px;margin-top: 100px">
            <div slot="header" class="clearfix">
                <span>登陆</span>
            </div>
            <div>
                 <table>
                <tr>
                    <td>用户名</td>
                 <td>
                     <el-input v-model="user.username" placeholder="请输入内容"></el-input>
                 </td>
                </tr>
                <tr>
                    <td>密码</td>
                <td><el-input placeholder="请输入密码" v-model="user.password" show-password
                              @keydown.enter.native="doLogin"></el-input>
                </td>
             </tr>
                 <tr>
                <td colspan="2">
                    <el-button type="primary" round style="width: 280px;" @click="doLogin" >登陆</el-button>
                </td>
                    </tr>
                </table>
            </div>
        </el-card>
    </div>
</template>
<script>
    import {postKeyValueRequest} from "../utils/api";
    export default {
        name: "Login ",
        data(){
            return{
                user:{
                    username:``,
                    password:``
                }
            }
        },
        methods:{
            doLogin(){             postKeyValueRequest('/doLogin',this.user).then(resp=>{
                    if (resp){
                        console.log('login success')
                    }
                })
            }
        }
    }
</script>
<style scoped>
</style>

vue.config.js文件
请求转发把所有地址请求拦截下来,发到8081服务端端口,响应给nod.js.用node.js做一个中转给8080

// 生成代理配置对象
let proxyObj = {};
proxyObj['/'] = {
    ws: false,
    target: "http://localhost:8081",
    changeOrigin: true,
    pathRewrite: {
        '^/': ''
    }
};
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
    }
}

admin 123登陆成功,提示信息是后端所发出来的

登陆失败