Vue + Spring Boot realisiert die Bestätigungscodefunktion

In diesem Artikelbeispiel wird der spezifische Code von vue+spring boot zur Implementierung der Verifizierungscodefunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Um damit herumzuspielen, habe ich mit Vue einen Verifizierungscode geschrieben, der folgendermaßen aussieht:

1.img-Tag

<Bild
     = "Höhe: 40px; Breite: 100px; Cursor: Zeiger;"
     ref="imgIdentifyingCode"
     :src="ausgewähltesLogoBild.imgUrl"
     Klasse="logoImg"
 >

2.js-Code

/**
     * Bestätigungscode erhalten */
    getIdentifyingCode() {
      lass selft = dies;
      // lass pic = this.$refs.imgIdentifyingCode
      selft.loadingChack = true;
      : Lassen Sie uuid = Utils.getUuid(32, 16);
      dies.$store.state.uuid = uuid;
      dies.$api.reader.getVerify(
        { Antworttyp: "Arraypuffer", UUID: UUID },
        r => {
          selft.loadingChack = falsch;
          selft.selectedLogoPicture.imgUrl = "data:image/png;base64," + r;
        }
      );
    },

3.Verantwortlicher

@RequestMapping("/getVerify")
 public void getVerify(@RequestParam String uuid, HttpServletRequest-Anfrage, HttpServletResponse-Antwort) {
  response.setContentType("image/jpeg"); // Legen Sie den Antworttyp fest, um dem Browser mitzuteilen, dass der Ausgabeinhalt ein Bild ist. response.setHeader("Pragma", "No-cache"); // Legen Sie die Antwortheaderinformationen fest, um dem Browser mitzuteilen, dass dieser Inhalt nicht zwischengespeichert werden soll. response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("Läuft ab", 0);
  userService.getRandcodedDawTransparent(uuid, request, response); // Bildmethode für den Ausgabebestätigungscode}

4.Dienst

@Überschreiben
 public void getRandcodedDawTransparent(String uuid, HttpServletRequest-Anfrage, HttpServletResponse-Antwort) {
  versuchen {
   Map<String, Objekt> map = CodeUtil.getRandcodedDawTransparent();
   //Speichern Sie die generierte zufällige Zeichenfolge im Sitzungsprotokoll.info("==saved uuid:"+uuid);
   log.info("==gespeicherter Code:"+map.get("Code"));
   sessionUtil.saveCode(uuid, map.get("code"));

   Antwort.setContentType("Bild/png");
   OutputStream aus = response.getOutputStream();

   out.write((byte[]) map.get("img"));
   aus.spülen();
   aus.schließen();
  } Fang (IOException e) {
   log.error(e.getMessage());
  }
 }

5.util

öffentliche statische Map<String, Object> getRandcodedDawTransparent() löst IOException aus {
  Map<String, Objekt> rsMap = neue HashMap<>();
  //Erstellen Sie ein BufferedImage-Objekt BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  // Holen Sie sich Graphics2D
  Graphics2D g2d = Bild.Grafikerstellung();

  // Fügen Sie den folgenden Code hinzu, um das Hintergrundbild transparent zu machen = g2d.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
  g2d.entsorgen();
  g2d = image.Grafikerstellung();

  g2d.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// Schriftgröße g2d.setColor(getRandColor(110, 133));// Schriftfarbe // Interferenzlinien zeichnen for (int i = 0; i <= lineSize; i++) {
   drowLine(g2d, Breite, Höhe);
  }
  // Zufällige Zeichen zeichnen String randomString = "";
  für (int i = 1; i <= Zeichenfolge; i++) {
   zufälligerString = drowString(g2d, zufälligerString, i);
  }
  log.info(zufällige Zeichenfolge);
  rsMap.put("code", zufällige Zeichenfolge);
  g2d.entsorgen();
  ByteArrayOutputStream baos = neuer ByteArrayOutputStream(); // io-Stream ImageIO.write(image, "png", baos); // in Stream schreiben byte[] bytes = baos.toByteArray(); // in Bytes umwandeln bytes = Base64.encodeBase64(bytes);
  rsMap.put("img", Bytes);

  gibt rsMap zurück;
 }

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: