个人项目前端

Api.js

import axios from 'axios'
import {Message} from 'element-ui'
import da from "element-ui/src/locale/lang/da";

axios.interceptors.response.use(success => {
    if (success.status && success.status == 200 && success.data.status == 500) {
        Message.error(success.data.msg)
        return;
    }
    return success.data;

}, error => {
    if (error.status == 504 || error.status == 404) {
        Message.error('服务器被炸了');
    } else if (error.status == 403) {
        Message.error('权限不足');
    } else if (error.status == 401) {
        Message.error('尚未登陆');
    } else {
        Message.error(error.response.data.msg)
    }
    return;
});

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 params) {
                    ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&'
                }
                return ret;
            }
        ],
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
}

vue.config.js

let proxyObj = {};
proxyObj['/'] = {
    ws: false,
    target: 'http://localhost:8081',
    changeOrigin: true,
    pathRewrite: {
        '^/': ''
    }
}
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
    },
}

Login.vue

<template>
    <div class="loginContainer">
        <div class="titleContainer">
            <h1>系统登陆</h1>
        </div>
        <el-form :model="loginForm" ref="loginForm" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-checkbox  class="checkBox" v-model="remember">记住我</el-checkbox>
            <el-form-item>
                <el-button type="primary" @click="submit()">登陆</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import {postKeyValueRequest} from "../utils/api";

    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: '123'
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                },
                remember: false
            }
        },
        methods:{
            submit(){
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        postKeyValueRequest('/doLogin',this.loginForm)
                        .then(resp=>{
                            if (resp){
                                alert(JSON.stringify(resp))
                            }
                        })
                    } else {
                        this.$message.warning('请填写所有信息')
                        return false;
                    }
                });
            }
        }

    }
</script>

<style>
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 5px 35px;
        background: white;
        border: 1px solid silver;
        box-shadow: 0 0 25px silver;
    }

    .titleContainer {
        text-align: center;
        color: gray;
        margin: 5px auto 5px auto;
    }
    .checkBox{
        margin: 0px 0px 15px 0px;
    }
</style>