vue之最简单最常用的图片验证码

<a-row :gutter="0">
   <a-col :span="16">
     <a-form-model-item required prop="inputCode">
       <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
         <a-icon slot="prefix" type="smile" :style="{ color: rgba(0,0,0,.25) }"/>
       </a-input>
     </a-form-model-item>
    </a-col>
   <a-col :span="8" style="text-align: right">
     <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
     <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
   </a-col>
</a-row>

解释： 前端用的ant-design 咱们自己输入验证码数据绑定是model.inputCode 图片验证码是这段代码<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/> 但是有条件判断 要判断requestCodeSuccess 是否为true 这个地方 咱们先记录下。

// 一打开登录页有存在了  所有在创建vue组件的时间就开始调用
created() {
  this.handleChangeCheckCode();
},

handleChangeCheckCode(){
  // 生成一个时间戳
  this.currdatetime = new Date().getTime();
  // 将数据绑定重置
  this.model.inputCode = 
  // 关键来了 前端发了一个请求 去服务端获取了验证码图片 看后面的代码
  getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
  if(res.success){
    // 将数据结果绑定到randCodeImage属性上
    this.randCodeImage = res.result
    this.requestCodeSuccess = true
  }else{
    this.$message.error(res.message);
    this.requestCodeSuccess = false
  }
 }).catch(()=>{
    this.requestCodeSuccess = false;
 })
},

/**
	 * 后台生成图形验证码 ：有效
	 * @param response
	 * @param key
	 */
	@ApiOperation("获取验证码")
	@GetMapping(value = "/randomImage/{key}")
	public Result<String> randomImage(HttpServletResponse response,@PathVariable String key){
		Result<String> res = new Result<String>();
		try {
			// 生成验证码
			final String BASE_CHECK_CODES = "qwertyuiplkjhgfdsazxcvbnmQWERTYUPLKJHGFDSAZXCVBNM1234567890";
			String code = RandomUtil.randomString(BASE_CHECK_CODES,4);

			// 存到redis中
			String lowerCaseCode = code.toLowerCase();
			String realKey = MD5Util.MD5Encode(lowerCaseCode + key, "utf-8");
            log.info("获取验证码，Redis checkCode = {}，key = {}", code, key);
			redisUtil.set(realKey, lowerCaseCode, 60);

			// 返回前端
			String base64 = RandImageUtil.generate(code);
			res.setSuccess(true);
			res.setResult(base64);
		} catch (Exception e) {
			res.error500("获取验证码出错"+e.getMessage());
			e.printStackTrace();
		}
		return res;
	}

解释： RandomUtil.randomString是工具类的随机数生成方法 给兄弟们个链接 自己可以去看看 服务端是生成了一个code 放在了redis里面 时间是60秒 然后返回一个图片