您的位置:首页 > 编程学习 > > 正文

vue和springboot实战项目(vue+spring boot实现校验码功能)

更多 时间:2022-03-29 16:40:15 类别:编程学习 浏览量:2109

vue和springboot实战项目

vue+spring boot实现校验码功能

本文实例为大家分享了vue+spring boot实现校验码功能的具体代码,供大家参考,具体内容如下

用vue写了一个校验码来玩玩,样子如下:

vue和springboot实战项目(vue+spring boot实现校验码功能)

1.img标签

  • <img
         ="height:40px; width: 100px; cursor: pointer;"
         ref="imgIdentifyingCode"
         :src="selectedLogoPicture.imgUrl"
         class="logoImg"
     >
    
  • 2.js代码

  • /**
         * 获取校验码
         */
        getIdentifyingCode() {
          let selft = this;
          //let pic = this.$refs.imgIdentifyingCode
          selft.loadingChack = true;
          let uuid = Utils.getUuid(32, 16);
          this.$store.state.uuid = uuid;
          this.$api.reader.getVerify(
            { responseType: "arraybuffer", uuid: uuid },
            r => {
              selft.loadingChack = false;
              selft.selectedLogoPicture.imgUrl = "data:image.jpg" alt="vue和springboot实战项目(vue+spring boot实现校验码功能)" border="0" />
    
  • 3.controller

  • @RequestMapping("/getVerify")
     public void getVerify(@RequestParam String uuid, HttpServletRequest request, HttpServletResponse response) {
      response.setContentType("image.jpg" alt="vue和springboot实战项目(vue+spring boot实现校验码功能)" border="0" />
    
  • 4.service

  • @Override
     public void getRandcodedDawTransparent(String uuid, HttpServletRequest request, HttpServletResponse response) {
      try {
       Map<String, Object> map = CodeUtil.getRandcodedDawTransparent();
       // 将生成的随机字符串保存到session中
       log.info("==保存的uuid:"+uuid);
       log.info("==保存的code:"+map.get("code"));
       sessionUtil.saveCode(uuid, map.get("code"));
    
       response.setContentType("image.jpg" alt="vue和springboot实战项目(vue+spring boot实现校验码功能)" border="0" />
    
  • 5.util

  • public static Map<String, Object> getRandcodedDawTransparent() throws IOException {
      Map<String, Object> rsMap = new HashMap<>();
      // 创建BufferedImage对象
      BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
      // 获取Graphics2D
      Graphics2D g2d = image.createGraphics();
    
      // 增加下面代码使得背景透明
      image = g2d.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
      g2d.dispose();
      g2d = image.createGraphics();
    
      g2d.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// 字体大小
      g2d.setColor(getRandColor(110, 133));// 字体颜色
    
      // 绘制干扰线
      for (int i = 0; i <= lineSize; i++) {
       drowLine(g2d, width, height);
      }
      // 绘制随机字符
      String randomString = "";
      for (int i = 1; i <= stringNum; i++) {
       randomString = drowString(g2d, randomString, i);
      }
      log.info(randomString);
      rsMap.put("code", randomString);
      g2d.dispose();
      ByteArrayOutputStream baos = new ByteArrayOutputStream();// io流
      ImageIO.write(image, .jpg" alt="vue和springboot实战项目(vue+spring boot实现校验码功能)" border="0" />
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣