Vue + Spring Boot realisiert die Bestätigungscodefunktion

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:
  • Vue-Komponentenentwicklung LeanCloud mit grafischer Verifizierungscode-SMS-Versandfunktion

<<:  So ändern Sie das MySQL-Datenbankdateiverzeichnis in Ubuntu

>>:  Der beste Weg, freigegebene Verzeichnisse beim Start von Ubuntu 16.04 unter Virtualbox automatisch zu mounten

Artikel empfehlen

So fügen Sie der Seite über Element UI eine Seitennavigationsleiste hinzu

brauchen Fügen Sie eine Paging-Leiste hinzu, die ...

CSS realisiert die Realisierung der Hintergrundbild-Bildschirmanpassung

Beim Erstellen einer Homepage, beispielsweise ein...

Verwendung und Beispiele für Linux-Befehle zur Echotextverarbeitung

Die Beschreibung von echo im Linux-Hilfedokument ...

So ändern Sie den MySQL-Zeichensatz

1. Überprüfen Sie den Zeichensatz von MySQL Varia...