一、搭建vue前端登录页面
<template><div style="width: 800px; margin: 5px auto; background-color: #17ecf3"><div align="center"><h2>用户登录</h2></div><div style="width: 60%; margin: 1px auto"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="用户名称：" prop="userName"><el-input v-model="ruleForm.userName"></el-input></el-form-item><el-form-item label="密码：" prop="password"><el-input v-model="ruleForm.password" show-password></el-input></el-form-item><el-form-item label="验证码：" prop="code" align="left"><el-input v-model="ruleForm.code" style="width: 150px"></el-input><el-tag type="danger" style="font-size: 20px">{{ cCode }}</el-tag><el-link type="primary" @click="getCode">换一张</el-link></el-form-item><el-form-item><el-button type="primary" @click="userLogin('ruleForm')">登录</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div></div>
</template>
二、定义文本框输入验证码变量及生成验证码变量
data() {return {cCode: "",ruleForm: {userName: "",password: "",code: "",},};},
三、在method中写出生成验证码的方法
getCode() {this.cCode = "";let codeString ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";let codeArray = codeString.split("");let num = codeArray.length;let newCodeArray = [];for (let i = 0; i < 4; i++) {let index = Math.floor(Math.random() * num);newCodeArray.push(codeArray[index]);}this.cCode = newCodeArray.join("");},
四、钩子函数createed中执行上述方法
created() {this.getCode();},
五、更换验证码只需加入超链接控件，调用此方法即可
<el-link type="primary" @click="getCode">换一张</el-link>
