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
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

样式代码省略。。。