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

实现效果

// template
用户登陆
{{ viewCode }}记住密码登录 // 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}}

样式代码省略。。。