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

样式代码省略。。。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-17/159783.html，文章来源：网络cs，作者：胡椒，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！