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
    }
  }

样式代码省略。。。