Vue后台管理系统-前端登录设计

<template>
    <div class="login-box">

        <el-card shadow="always">

            <el-form
                ref="loginForm"
                autocomplete="on"
                :model="loginForm"
                :rules="loginRules"
                label-position="left">
            
                <el-form-item prop="username">
                    <span style="font-size:16px">账户</span>
                    <el-input
                        type="text"
                        tabindex="1"
                        ref="username"
                        name="username"
                        autocomplete="on"
                        prefix-icon="el-icon-user"
                        placeholder="请输入账户名称"
                        v-model="loginForm.username"
                    />
                </el-form-item>

                <el-form-item prop="password">
                    <span style="font-size:16px">密 码</span>
                    <el-tooltip
                        manual
                        placement="right"
                        v-model="capsTooltip"
                        content="已开启大写锁定">
                        <el-input
                            tabindex="2"
                            show-password
                            ref="password"
                            name="password"
                            autocomplete="on"
                
                            :key="passwordType"
                            :type="passwordType"

                            placeholder="请输入密码"
                            prefix-icon="el-icon-lock"

                            @blur="capsTooltip = false"
                            v-model="loginForm.password"
                            @keyup.native="checkCapslock"
                            @keyup.enter.native="handleLogin"
                        />
                    </el-tooltip>
                </el-form-item>
         

                <el-button
                    type="primary"
                    :loading="loading"
                    @click.native.prevent="handleLogin">
                    <i class="el-icon-s-promotion"/>登 录
                </el-button>


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

<script>

export default {
    name: "Login",
    data() {
        return {
            // 登录重定向
            redirect:"",
            // 重定向参数
            otherQuery: {},

            // 是否正在登录
            loading: false,
            // 开启大写提示
            capsTooltip: false,
            // 密码控件类型
            passwordType: "password",

            // 登录表单控件
            loginForm:{
                username: "",
                password: "",
            },
            // 控件校验规则
            loginRules: {
                username: [{required: true, trigger: "blur", message: '用户名不能为空' }],
                password: [{required: true, trigger: "blur", message: '密码不能为空'}],
            },

        };
    },
    watch: {

        $route: {
            handler: function (route) {
                const query = route.query;
                if (query) {
                    // 包含第一个参数的重定向
                    this.redirect = query.redirect;
                    // 重定向其它的查询参数
                    this.otherQuery = this.getOtherQuery(query);
                }
            },
            // 立即执行
            immediate: true,
        },
    },

    mounted() {

        // 输入自动聚焦
        if (this.loginForm.username === "") {
            this.$refs.username.focus();
        } else if (this.loginForm.password === "") {
            this.$refs.password.focus();
        }

    },


    methods: {

        // 检测大小写
        checkCapslock(e) {
            const { key } = e;
            this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
        },


        // 点击按钮登录
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;

                    // 通过状态管理提交用户信息
                    this.$store.dispatch("user/login", this.loginForm).then(() => {
                        this.$router.push({
                            path: this.redirect || "/",
                            query: this.otherQuery,
                        });
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    });
                } else {
                    return false;
                }
            });
        },


        // 获取查询参数
        getOtherQuery(query) {
            return Object.keys(query).reduce((obj, value) => {
                // 排除重定向和第一个查询能数
                if (value !== "redirect") {
                    obj[value] = query[value];
                };
                return obj;
            },{});
        }

    },
    
};
</script>

<style lang="scss">


.login-box{
    height: 100%; 
    overflow: hidden;
    background-image:url(./background.png);
    background-size:100% 100%;
    .el-input__inner{
        height: 40px;
        font-size: 16px;
        padding-left: 35px;
    }
}

@media screen and (max-device-width: 1920px) {
    .login-box .el-card {
        width: 30%;
        margin: 10% auto;
        height: 50%;
        padding: 40px 10px;
        border-radius: 4%;
    }
}

@media screen and (max-device-width: 600px) {
    .login-box .el-card {
        width: 100%;
        height: 100%;
        margin: auto;
        padding-top: 25%;
        border-radius: 0;
    }

}

</style>