个人项目前端

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;
    }
    if (success.data.msg) {
        Message.success(success.data.msg)
    }
    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'
        }
    })
}
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,
    })
}

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 type="password" 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>

    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) {
                        this.$postKeyValueRequest('/doLogin', this.loginForm)
                            .then(resp => {
                                if (resp) {
                                    window.sessionStorage.setItem('user', JSON.stringify(resp));
                                    this.$message.success('登陆成功！');
                                    this.$router.replace('/Home')

                                }
                            })
                    } 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>

Home

<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <div class="title">
                    微人事
                </div>
                <el-dropdown class="userInfo" @command="commandHandler">
  <span class="el-dropdown-link">
   <i><img :src="user.userface" alt=""></i> {{user.name}}
  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                        <el-dropdown-item command="setting">设置</el-dropdown-item>
                        <el-dropdown-item divided command="logout">注销登陆</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                            class="el-menu-vertical-demo"
                            background-color="#57606f"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            router>
                        <el-submenu index="1" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden"
                                    :key="index">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item :index="child.path" v-for="(child,indexj) in item.children" :key="indexj">
                                {{child.name}}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                user: JSON.parse(window.sessionStorage.getItem('user'))
            }
        },
        methods: {
            commandHandler(cmd) {
                if (cmd == 'logout') {
                    this.$confirm('此操作将注销登陆, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(() => {
                        this.$getRequest('/logout', null);
                        this.$router.replace('/');
                    }).catch(() => {
                        this.$message.success('已取消注销操作！');
                    })
                }
            },
        }
    }
</script>

<style scoped>
    .homeHeader {
        background: #1787a3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 15px;
        box-sizing: border-box;
    }

    .homeHeader .title {
        font-size: 35px;
        font-family: 微软雅黑;
        margin-left: 25px;
        color: white;
    }

    .homeHeader .userInfo {
        cursor: pointer;
    }

    .el-dropdown-link {
        display: flex;
        align-items: center;
        color: white;
        margin-right: 20px;
        font-size: 20px;
    }

    .el-dropdown-link img {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-top: 5px;
        margin-right: 15px;
    }
</style>