提示:前端查漏补缺,仅代表个人观点。
文章目录
一、先看效果图二、实战步骤1. 创建项目2. 引入库3. 登录页关键代码三、页面源代码总结提示:项目源代码除了登录页面还有动态路由
一、先看效果图
二、实战步骤
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; letflag/*** 节流原理:在一定时间内,只能触发一次** @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 = falsetypeof 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 = truethrottle(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>
总结
这是一个模板化的后台管理系统登录页,除了登录页,还有动态路由。
想要源码的博友,记得点赞后私信我邮箱!!!