vue+spring boot 검사 코드 기능 구현

본 논문 의 사례 는 vue+spring boot 가 검사 코드 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
vue 로 검사 코드 를 써 서 놀 았 습 니 다.모양 은 다음 과 같 습 니 다.

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/png;base64," + r;
        }
      );
    },

3.controller

@RequestMapping("/getVerify")
 public void getVerify(@RequestParam String uuid, HttpServletRequest request, HttpServletResponse response) {
  response.setContentType("image/jpeg");//       ,             
  response.setHeader("Pragma", "No-cache");//        ，            
  response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Expire", 0);
  userService.getRandcodedDawTransparent(uuid, request, response);//          
 }

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/png");
   OutputStream out = response.getOutputStream();

   out.write((byte[]) map.get("img"));
   out.flush();
   out.close();
  } catch (IOException e) {
   log.error(e.getMessage());
  }
 }

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, "png", baos);//     
  byte[] bytes = baos.toByteArray();//      
  bytes = Base64.encodeBase64(bytes);
  rsMap.put("img", bytes);

  return rsMap;
 }

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.