标签：uuid res hutool 验证码 --- callback new data

1.后端代码

    @ApiOperation("获取验证码")
    @GetMapping("/getImage")
    public R ImgCode(HttpServletRequest request, HttpServletResponse response) {
        // 保存验证码信息
        String uuid = IdUtil.simpleUUID();
        // 生成验证码
        LineCaptcha captcha = CaptchaUtil.createLineCaptcha(500, 200,4,100);
        captcha.setBackground(Color.BLACK);
        System.out.println("验证码为:" + captcha.getCode());
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try {
            ImageIO.write(captcha.getImage(), "jpg", os);
            os.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
//        redisTemplate.opsForValue(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
        Map<String, Object> hashMap = new HashMap<>();
        hashMap.put("uuid", uuid);
        hashMap.put("img", Base64.encode(os.toByteArray()));
        return R.data(hashMap);
    }

2.前端代码

<div class='login_box'>
      <p>欢迎登录FAST-BOOT系统！</p>
      <div class='login_form'>
        <el-form :model='ruleForm' status-icon :rules='rules' ref='loginFormRef' label-width='25%'
                 class='demo-ruleForm'>
          <el-form-item label='用户名' prop='loginName'>
            <el-input prefix-icon='iconfont icon-yonghuming' v-model='ruleForm.loginName'></el-input>
          </el-form-item>
          <el-form-item label='密码' prop='pwd'>
            <el-input prefix-icon='iconfont icon-tianchongxing-' type='password' v-model='ruleForm.pwd'
                      autocomplete='off'></el-input>
          </el-form-item>
          <el-form-item label='验证码' prop='code'>
            <el-row>
              <el-col :span="10">
                <el-input  v-model='ruleForm.loginName'></el-input>
              </el-col>
              <el-col :span="12">
                  <img :src="codeUrl" style="margin-left:10px;width:100%;height: 36px" @click="getCode" class="login-code-img"/>
              </el-col>
            </el-row>

          </el-form-item>
          <el-form-item>
            <el-button type='primary' @click="submitForm('loginFormRef')">提交</el-button>
            <el-button @click="resetForm('loginFormRef')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>


<script>
import axios from 'axios'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    return {
      codeUrl: '',
      ruleForm: {
        pwd: '',
        loginName: '',
        uuid: ''
      },
      rules: {
        loginName: [
          {validator: validateUsername, trigger: 'blur'}
        ],
        pwd: [
          {validator: validatePass, trigger: 'blur'},
          {min: 6, max: 16, message: '密码长度应在6到16个字符之间', trigger: 'blur'}
        ]

      }
    }
  },
  mounted() {
    this.getCode()
  },
  methods: {
    getCode: function () {
      axios.get('/login/getImage').then((res) => {
        console.log("res", res)
        if (res.data.success) {
          this.codeUrl = "data:image/gif;base64," + res.data.data.img;
          this.ruleForm.uuid = res.data.data.uuid;
        }
      })
    },
    submitForm: function (formName) {
      
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

最终效果：

标签：uuid,res,hutool,验证码,---,callback,new,data
来源： https://www.cnblogs.com/hujunwei/p/16557597.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。