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

Ideen und Codes zur Implementierung der Vuex-Datenpersistenz

Was ist Vuex vuex: ist ein speziell für vue.js en...

Idea konfiguriert Tomcat zum Starten eines Webprojekts - Grafik-Tutorial

Tomcat konfigurieren 1. Klicken Sie auf „Konfigur...

Erläuterung des Beispiels einer MySQL-Datenanalyse-Speicher-Engine

Inhaltsverzeichnis 1. Fälle vorstellen 2. Zeigen ...

Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4

Inhaltsverzeichnis 1. Installieren und erstellen ...

Fehlerbehebung bei der Ursache des 502 Bad Gateway-Fehlers auf dem Nginx-Server

Der Server meldet einen Fehler 502 beim Synchroni...

Detaillierte Schritte zur vollständigen Deinstallation von MySQL 5.7

Dieser Artikel fasst hauptsächlich verschiedene P...

So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

1. Rendern2. Bedienungsschritte 1. Beantragen Sie...

Grundkenntnisse in HTML: ein erstes Verständnis von Webseiten

HTML ist die Abkürzung für Hypertext Markup Langua...

So entwerfen Sie MySQL-Statistikdatentabellen

Inhaltsverzeichnis Ist eine Echtzeitaktualisierun...

Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen

Wenn wir eine Hintergrundfarbe mit Farbverlauf er...

WeChat-Applet: benutzerdefinierter TabBar-Schrittdatensatz

Inhaltsverzeichnis 1. Einleitung 2. Passen Sie de...

Wie verfolgt Vue Datenänderungen?

Inhaltsverzeichnis Hintergrund Beispiel Missverst...