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 = true

　　let 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.length

　　let 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 } = rememberData

　　this.loginForm.account = account

　　this.loginForm.password = password

　　}

　　}