1000字范文 > 【Vue 实战项目】后台管理系统登录页详解附源码

【Vue 实战项目】后台管理系统登录页详解附源码

时间：2020-06-26 15:51:59

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

文章目录

一、先看效果图二、实战步骤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>