vue 前端实现login页登陆 验证码

实现效果

// template
<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container"><span class="tool-bar"></span><h2 class="title">用户登陆</h2><el-form-item prop="account"><el-input type="text" v-model.trim="loginForm.account" auto-complete="false" placeholder="账号"></el-input></el-form-item><el-form-item prop="password" class="item-m10"><el-input type="password" v-model.trim="loginForm.password" auto-complete="false" placeholder="密码"></el-input></el-form-item><el-form-item prop="code" align="left" style="margin-top: 20px"><el-input v-model="loginForm.code" style="width: 170px" placeholder="验证码，点击图片刷新"></el-input><el-tag class="login-tag-code" @click="getCode">{{ viewCode }}</el-tag></el-form-item><div class="checked-item"><el-checkbox v-model="checked">记住密码</el-checkbox></div><el-form-item style="width: 100%" class="btn-item"><el-button style="width: 100%" @click.native.prevent="loginSubmit" :loading="loading">登录</el-button></el-form-item>// js
// ---------分割线data () {return {viewCode: '',loginForm: {account: '',password: '',src: '',code: ''},fieldRules: {account: [{ required: true, message: '请输入账号', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]},checked: false,// 加载中的标志loading: false}},// ------ 分割线methods: {loginSubmit () {if (!this.loginForm.account || !this.loginForm.password) {this.$message.error('账号或密码不能为空！')return}if (!this.loginForm.code || this.loginForm.code !== this.viewCode) {this.$message.error('验证码不正确！')return}this.loading = truelet userInfo = {account: this.loginForm.account,password: this.loginForm.password}//登陆接口this.$api.login.login(userInfo).then((res) => {if (this.checked) {let rememberInfo = JSON.stringify({ ...userInfo })localStorage.setItem('rememberInfo', rememberInfo) // 记住密码时 保存login} else {localStorage.removeItem('rememberInfo')}this.$router.push('/') // 登录成功，跳转到主页 this.loading = false}).catch((err) => {this.$message({ message: err.message, type: 'error' })})},//获取验证码getCode () {this.viewCode = ''let codeString = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'let codeArray = codeString.split('')let num = codeArray.lengthlet newCodeArray = []for (let i = 0; i < 5; i++) {let index = Math.floor(Math.random() * num)newCodeArray.push(codeArray[index])}this.viewCode = newCodeArray.join('')},},mounted () {this.getCode()if (localStorage.getItem('rememberInfo')) {// 有上次登录信息 显示上次登录let rememberData = JSON.parse(localStorage.getItem('rememberInfo'))const { account, password } = rememberDatathis.loginForm.account = accountthis.loginForm.password = password}}

样式代码省略。。。