基于JavaWeb+MySQL的简历信息管理系统

大家好，欢迎来到IT知识分享网。

<template>
    <div class="container">
        <h1> 简历中心</h1>
        <a-form id="login" :form="form" class="login-form" @submit="handleLogin">
            <a-form-item>
                <a-input size="large" v-decorator="['username',{ rules: [{ required: true, message: '请输入用户名!' }] }]" placeholder="请输入用户名">
                    <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-input size="large" v-decorator="['password',{ rules: [{ required: true, message: '请输入密码!' }] }]" type="password" autocomplete="false" placeholder="请输入密码">
                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" size="large" html-type="submit" class="login-form-button" :loading="loading" :disabled="btnValue">
                    登录
                </a-button>
            </a-form-item>
        </a-form>
        <div class="copyright-info">版权所有：简历中心</div>
    </div>
</template>

<script>
    import { Login,checkToken } from "@/request/requests";
    export default {
        name: "Login",
        data() {
            return {
                form: this.$form.createForm(this),
                loading: false,
                btnValue:true
            };
        },
        created() {
            this.initData();
        },
        methods: {
            async handleLogin(e) {
                e.preventDefault();
                this.form.validateFields(
                    null,
                    { force: true },
                    async (errors) => {
                        if (errors) {
                            return;
                        }
                        this.loading = true;
                        let formValues = this.form.getFieldsValue();
                        let result = await Login(formValues);
                        if (result.status != "200") {
                            this.$notification.error({
                                message: "登录失败",
                                description: result.msg
                            });
                            this.loading = false;
                            return;
                        }
                        this.loading = false;
                        this.loginRes(result);
                    }
                );
            },
            initData:async function () {
                window.console.log("---------login")
                let now = new Date().getTime();
                let deadline = sessionStorage.getItem("deadline");
                let token = sessionStorage.getItem("token");
                let userInfo = sessionStorage.getItem("userInfo");
                if (!deadline||!token||!userInfo){
                    this.btnValue=false;
                }else {
                    if (deadline > now) {
                        /
                         * 请求会出现401  比如注销的token
                         */
                        try {
                            let res = await checkToken({token: token});
                            if (res.status != "200") {
                                this.btnValue = false;
                            } else {
                                this.$message.success(
                                    '成功返回首页',
                                    1
                                );
                                this.$router.push({name: "backhome"});
                            }
                        }catch(err){
                            this.btnValue = false;
                            window.console.log("------------------"+err)
                        }
                    } else {
                        this.btnValue = false;
                    }
                }
            },
            loginRes:function (result) {
                let { userInfo, token, deadline } = result.data;
                let { name: name } = userInfo;
                sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
                sessionStorage.setItem("token", token);
                sessionStorage.setItem("deadline", Date.parse(deadline));
                this.$notification.success({
                    message: "登录成功",
                    description: `欢迎回来，${name}`
                });
                this.$router.push({ name: "backhome" });
            }
        }
    };
</script>

<style lang="less" scoped>
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: auto;
        height: 100%;
        background-image: url(https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        /*background-position: center 110px;*/
        padding: 150px 0;
        background-color: rgb(240, 242, 245);

        h1 {
            text-align: center;
            font-size: 30px;
            font-weight: bold;

            .logo {
                vertical-align: text-top;
                border-style: none;
                height: 35px;
            }
        }

        .login-form {
            width: 50%;
            max-width: 500px;
            // height: 100%;
            margin: 0 auto;

            .login-form-button {
                width: 100%;
            }

            .login-form-remember {
                float: left;
            }
        }

        .copyright-info {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            text-align: center;
            margin: 18px 0;
        }
    }
</style>