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

样式代码省略。。。