提示：前端查漏补缺，仅代表个人观点。

提示：项目源代码除了登录页面还有动态路由

一、先看效果图

二、实战步骤

1. 创建项目

// 命令行创建
vue create 项目名

项目配置如下图所示：

2. 引入库

• 项目使用 Element UI 框架，引入到项目中的方式就不在这里说了，可点击移步框架使用文档。

• 网络请求用axios

yarn add axios

3. 登录页关键代码

• 监听用户输入

// 对账号和密码进行监听，账户名不为空，密码长度大于8才可以登录
computed: {
        canlogin() {
            if (this.account != '' && this.password.length >= 8) { return true }
            else { return false }
        }
    },

• 节流处理 （用户发起登录请求操作）

// 节流函数
let timer; let
    flag
/**
 * 节流原理：在一定时间内，只能触发一次
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function throttle(func, wait = 500, immediate = true) {
    if (immediate) {
        if (!flag) {
            flag = true
            // 如果是立即执行，则在wait毫秒内开始时执行
            typeof func === 'function' && func()
            timer = setTimeout(() => {
                flag = false
            }, wait)
        }
    } else if (!flag) {
        flag = true
        // 如果是非立即执行，则在wait毫秒内的结束处执行
        timer = setTimeout(() => {
            flag = false
            typeof func === 'function' && func()
        }, wait)
    }
}
export default throttle

• 在页面中的用法

import throttle from '../lib/throttle'

// this.go为你要执行的method，后者为延时的时间参数

 throttle(this.go,2000)

三、页面源代码

<template>
    <div id="login-page" class="both-center">
        <div class="container-news space-between hor-center">
            <div class="left">
                <img src="@/assets/svg/login/login01.svg" alt="">
            </div>
            <div class="right col relative">
                <div class="qrcode"><img src="@/assets/svg/login/qrcode.svg" alt=""></div>
                <div class="col stgap4">
                    <div class="title">欢迎使用本系统</div>
                    <div class="col stgap3">
                        <el-input placeholder="请输入用户名" v-model="account" autofocus>

                        </el-input>
                        <el-input placeholder="请输入密码" v-model="password" maxlength="12" show-password @keyup.enter.native="login()"></el-input>
                    </div>
                    <div class="col stgap2">
                        <el-button style="width:100%" type="primary" :disabled="!canlogin" size="medium"
                            :loading="loading" @click="login()">
                            登录</el-button>
                        <div class="space-between hor-center">
                            <el-checkbox v-model="checked" @click="save()">记住密码</el-checkbox>
                            <el-button type="text">忘记密码？</el-button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</template>

<script>
import throttle from '../lib/throttle'
export default {
    name: "Login",
    data() {
        return {
            account: 'joe',
            password: '88888888',
            checked: false,
            loading: false,
        }
    },
    computed: {
        canlogin() {
            if (this.account != '' && this.password.length >= 8) { return true }
            else { return false }
        }
    },
    methods: {
        save() {
            this.checked = !this.checked
        },
        login() {
            if (this.account != 'joe' || this.password != '88888888') {
                this.$message({
                    showClose: true,
                    message: '账号密码有误',
                    type: 'error',
                    duration: 1800
                });
                return
            }
            this.loading = true
            throttle(this.go,2000)
            
        },
        go(){
            this.$message({
                showClose: true,
                message: '登录成功!',
                type: 'success',
                duration: 1800
            });
            this.$router.push('/')
        }
    }

}
</script>

<style scoped>
#login-page {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #F9F9F9;
    background-image: url('../assets/svg/login/bg2.svg');
    background-size: cover;
}

.left {
    width: 571px;
    height: 571px;
}

.right {
    width: 460px;
    height: 516px;
    padding: 40px;
    border-radius: 12px;

    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 2px rgba(0, 0, 0, 0.04);
}

.title {
    font-family: HarmonyOS_Sans_SC_Bold;
    font-size: 20px;
    font-weight: bold;
    line-height: 28px;
    letter-spacing: 0px;
    color: #000000;
}

.qrcode {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
</style>

总结

这是一个模板化的后台管理系统登录页，除了登录页，还有动态路由。