Implementierungsbeispiel für eine einfache Vue-Registrierungsseite + Funktion zum Senden eines Bestätigungscodes

Implementierungsbeispiel für eine einfache Vue-Registrierungsseite + Funktion zum Senden eines Bestätigungscodes

1. Effektanzeige

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

2. Verbesserter Bestätigungscode und E-Mail-Push-Management (siehe späteres Blog)

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

3. Allgemeine Idee

Analysieren Sie die Registrierungsschritte aus der Sicht des Benutzers :

  • Geben Sie Ihre E-Mail-Adresse ein
  • Klicken Sie auf die Schaltfläche „Bestätigungscode senden“
  • Bestätigungscode per E-Mail erhalten
  • Füllen Sie die restlichen Registrierungsinformationen aus und geben Sie den Bestätigungscode ein
  • Die Registrierung war erfolgreich!

Analysieren Sie die Schritte aus der Perspektive eines Systemdesigners :

  • Das System generiert nach dem Zufallsprinzip sechs Ziffern
  • Senden Sie den Bestätigungscode an die vom Benutzer angegebene E-Mail-Adresse
  • Überprüfen Sie den Bestätigungscode anhand der vom Benutzer bereitgestellten Informationen
  • Bei erfolgreicher Verifizierung werden die Daten eingetragen und die Benutzerregistrierung ist erfolgreich!

4. Vorbereitende Maßnahmen

POP3/SMTP-Dienst im QQ-Postfach aktivieren

Hier finden Sie Hinweise

https://www.jb51.net/qq/321090.html

5. Front-End-Code

<Vorlage>
  <div Klasse="rg_layout">
    <div Klasse="rg_left">
      <p>Neue Benutzerregistrierung</p>
      <p>BENUTZERREGISTRIERUNG</p>
    </div>
    <div Klasse="rg_center">
      <div Klasse="rg_form">
        <div Stil="Margin: 50px 0;"></div>
        <el-form ref="form" :model="form" :rules="Regeln" label-width="80px">
          <el-form-item label="E-Mail" prop="E-Mail">
            <el-col :span="15">
              <el-input placeholder="Bitte geben Sie Ihre E-Mail-Adresse ein" v-model="form.Email"></el-input>
            </el-col>
            <el-col :span="9">
              <el-button type="success" plain @click="sendEmail">E-Mail-Bestätigung senden</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="Benutzername">
            <el-col :span="20">
              <el-input placeholder="Bitte geben Sie Ihren Benutzernamen ein" v-model="form.username"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="Passwort">
            <el-input placeholder="Bitte geben Sie Ihr Passwort ein" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="Geschlecht">
            <el-col :span="5">
              <el-radio v-model="form.radio" label="1">Männlich</el-radio>
            </el-col>
            <el-col :span="3">
              <el-radio v-model="form.radio" label="2">Weiblich</el-radio>
            </el-col>
          </el-form-item>
          <el-form-item label="Geburtsdatum">
            <el-col :span="15">
              <el-date-picker type="date" placeholder="Datum auswählen" v-model="form.date" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="Bestätigungscode">
            <el-col :span="15">
              <el-Eingabe
                  Typ="Text"
                  Platzhalter="Der Bestätigungscode wird an Ihre E-Mail gesendet"
                  v-model="form.text"
                  oninput="Wert=Wert.replace(/\D/g,'')"
                  maximale Länge = "6"
                  Wortbegrenzung anzeigen
              >
              </el-Eingabe>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="20">
              <el-button type="primary" @click="onSubmit">Jetzt registrieren</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div Klasse="rg_right">
      <p>Sie haben bereits ein Konto?
        <el-link icon="el-icon-user-solid" type="primary" @click="login_asd">Jetzt anmelden</el-link>
      </p>
    </div>

  </div>

</Vorlage>

<Skript>
importiere Axios von „Axios“;
Standard exportieren {
  montiert() {
    this.$store.state.yesOrNo = falsch
  },
  Name: "Anmeldung",
  Daten: Funktion () {
    zurückkehren {
      bilden: {
        E-Mail: '',
        Benutzername: "",
        Passwort: "",
        Radio: '1',
        Datum: '',
        text: ''
      },
      Regeln:
        E-Mail: [{erforderlich: true, Nachricht: ‚Bitte geben Sie Ihre E-Mail ein‘, Auslöser: ‚unscharf‘}]
      },
      Nachricht: ''
    }
  },
  Methoden: {
    login_asd(){
      dies.$router.replace({Pfad: '/login'});
    },
    öffnen1() {
      diese.$nachricht({
        showClose: wahr,
        Nachricht: this.msg,
        Typ: "Warnung"
      });
    },
    öffnen2() {
      diese.$nachricht({
        showClose: wahr,
        Nachricht: this.msg,
        Typ: "Erfolg"
      });
    },
    öffnen3() {
      diese.$nachricht({
        showClose: wahr,
        Nachricht: this.msg,
        Typ: "Fehler"
      });
    },
    sendEmail() {
      dies.$refs.form.validate((gültig) => {
        if (gültig) {
          lass _dies = dies
          axios.post(this.$store.state.url+':8412/Benutzer/sendSignUpCode?email='+_this.form.Email,
              ).catch(Funktion (Fehler) {
                _this.msg = "Das E-Mail-Format ist falsch!"
                _dies.öffnen1()
          }).dann(Funktion (Antwort) {
            wenn (Antwort.Daten.Code === 200) {
              _this.msg = antwort.data.msg
              _diese.open2()
            } anders {
              _this.msg = antwort.data.msg
              _dieses.open3()
            }
          })
        }
      })
    },
    beim Absenden(){
      dies.$refs.form.validate((gültig) => {
        if (gültig) {
          lass _this = dies;
          lass tmp;
          wenn(diese.Form.Radio === "1"){
            tmp = "männlich"
          }anders{
            tmp = "weiblich"
          }
          axios.post(this.$store.state.url+':8412/Benutzer/userSignUp?code='+_this.form.text,
              {
                E-Mail: dieses.Formular.E-Mail,
                Benutzername: this.form.username,
                Passwort: this.form.password,
                Geschlecht: tmp,
                Geburtstag: this.form.date
              }
          ).catch(Funktion (Fehler) {
            _this.msg = "Es gibt ein Problem mit dem E-Mail-Format!"
            _dieses.öffnen1()
          }).dann(Funktion (Antwort) {
            wenn (Antwort.Daten.Code === 200) {
              _this.msg = antwort.data.msg
              _diese.open2()
              _this.$router.replace({Pfad: '/login'});
            } anders {
              _this.msg = antwort.data.msg
              _diese.open3()
            }
          })
        }
      })
    }
  }
}
</Skript>


<Stil>
* {
  Rand: 0px;
  Polsterung: 0px;
  Box-Größe: Rahmenbox;
}

Körper {
  Hintergrundbild: URL (https://img-blog.csdnimg.cn/76110abf7fb84ee28c50bfbfa7fa8e11.jpg);
  Hintergrundwiederholung: keine Wiederholung;
  Hintergrundgröße: 100 %;
  Hintergrundposition: 0px -50px;
}

.rg_layout {
  Breite: 900px;
  Höhe: 500px;
  Rand: 5px durchgezogen #EEEEEE;
  Hintergrundfarbe: weiß;
  Deckkraft: 0,8;
  /* Div horizontal zentrieren */
  Rand: automatisch;
  Rand oben: 100px;
}

.rg_left {
  schweben: links;
  Rand: 15px;
  Breite: 20 %;
}

.rg_left > p:erstes-Kind {
  Farbe: #FFD026;
  Schriftgröße: 20px;
}

.rg_left > p:letztes-Kind {
  Farbe: #A6A6A6;
}

.rg_center {
  /*Rand: 1px durchgehend rot;*/
  schweben: links;
  Breite: 450px;
  /*Rand: 15px;*/
}

.rg_right {
  schweben: rechts;
  Rand: 15px;
}

.rg_right > p:erstes-Kind {
  Schriftgröße: 15px;
}

.rg_right pa {
  Farbe: rosa;
}

</Stil>

6. Backend

Das verwendete Framework ist Springboot

① Hauptabhängigkeiten

        <!-- redis -->
        <Abhängigkeit>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
            <version>2.5.2</version>
        </Abhängigkeit>
        <!-- mail -->
        <Abhängigkeit>
            <groupId>javax.mail</groupId>
            <artifactId>E-Mail</artifactId>
            <version>1.4.7</version>
        </Abhängigkeit>

② Regelmäßige Mailbox-Tool-Klasse zur Überprüfung

Paket com.example.han.util;

importiere java.util.regex.Matcher;
importiere java.util.regex.Pattern;

öffentliche Klasse CheckMail {
    öffentliche statische Boolesche checkMail (String Mail) {
        Mustermuster = Muster.Kompilieren("\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*");
        //\w+@(\w+.)+[az]{2,3}
        Matcher matcher = Muster.matcher(Mail);
        gibt matcher.matches() zurück;
    }
}

③ Redis legt Werkzeugklassen fest und erhält sie

Paket com.example.han.util;

importiere org.springframework.beans.factory.annotation.Autowired;
importiere org.springframework.data.redis.core.StringRedisTemplate;
importiere org.springframework.stereotype.Component;
importiere java.util.concurrent.TimeUnit;

@Komponente
öffentliche Klasse RedisUtil {
    @Autowired
    privates StringRedisTemplate stringRedisTemplate;

    public void setRedisKey(String-Schlüssel, String-Wert, lange Zahl) {
        System.out.println("Redis-Start festlegen!");
        stringRedisTemplate.opsForValue().set(Schlüssel,Wert,Anzahl,Zeiteinheit.SEKUNDEN);
        System.out.println(stringRedisTemplate.opsForValue().get(key));
    }

    öffentliche Zeichenfolge getRedisValue(Zeichenfolgeschlüssel){
        wenn(!stringRedisTemplate.hasKey(Schlüssel)){
            gebe "Keine" zurück;
        }
        gibt Zeichenfolge zurückRedisTemplate.opsForValue().get(Schlüssel);
    }

}

④ Code der Kerndienstschicht

    /**
     * Überprüfen Sie, ob die E-Mail-Adresse wiederholt wird* @param email E-Mail-Adresse*/
    @Überschreiben
    öffentliche ResultReturn checkEmailRepeat(String email) throws MyException {
        if (!CheckMail.checkMail(E-Mail)) {
            throw new MyException(400, "E-Mail-Formatfehler");
        }
        wenn (userRepository.checkEmaillRepeated(E-Mail)) {
            gibt ResultReturnUtil.fail(USER_EMAIL_REPEATED) zurück;
        }
        gibt ResultReturnUtil.success zurück (USER_EMAIL_NOT_REPEATED, E-Mail);
    }

    /**
     * Registrierungsbestätigungscode senden* @param toEamil Empfänger-E-Mail* @return
     */
    @Überschreiben
    öffentliches ResultReturn sendSignUpCode(String toEmail) {
        //asdasd
        SimpleMailMessage simpleMailMessage = neue SimpleMailMessage();
        simpleMailMessage.setTo(toEamil);
        simpleMailMessage.setFrom(vonEmail);
        simpleMailMessage.setSubject("Ihr Registrierungsbestätigungscode ist hier");
        Zufällig r = neuer Zufällig();
        int rate = r.nextInt(899999) + 100000;
        redisUtil.setRedisKey(toEamil + "YanZheng", rate + "", 60 * 5); //Zuerst in Redis speichern, Schlüssel ist die E-Mail-Adresse String-Inhalt =
                "Hallo,\n" + "\tIhr Bestätigungscode lautet:\n" + rate;
        simpleMailMessage.setText(Inhalt);
        versuchen {
            javaMailSender.send(simpleMailMessage);
        } Fang (Ausnahme e) {
            return ResultReturnUtil.fail("Senden fehlgeschlagen!");
        }
        return ResultReturnUtil.success("Erfolgreich gesendet!", toEamil);
    }
    
    /**
     * Benutzerregistrierung* @param userSignUpVO Grundlegende Benutzerinformationen, die für die Registrierung erforderlich sind* @param code Bestätigungscode, der nach der Registrierung an die E-Mail-Adresse gesendet wird*/
    @Überschreiben
    öffentliche ResultReturn UserSignUp(UserSignUpVO userSignUpVO, int code) throws MyException {
        if (!CheckMail.checkMail(userSignUpVO.getEmail())) { //Dies passiert, wenn das E-Mail-Format falsch ist. throw new MyException(400, "E-Mail-Formatfehler");
        }
        if (userRepository.checkEmaillRepeated(userSignUpVO.getEmail())) { //Wenn die E-Mail wiederholt registriert wird, returniere ResultReturnUtil.fail(USER_EMAIL_REPEATED);
        }
        String redisCode = redisUtil.getRedisValue(userSignUpVO.getEmail() + "YanZheng"); //Code mit Redis vergleichen if (!redisCode.equals("" + code)) {
            gibt ResultReturnUtil.fail(WRONG_VERIFICATION_CODE) zurück;
        }
        UserDO-Benutzer = neuer UserDO();
        Benutzer.setEmail(userSignUpVO.getEmail());
        Benutzer.setUsername(userSignUpVO.getUsername());
        Benutzer.setPassword(userSignUpVO.getPassword());
        Benutzer.setSex(userSignUpVO.getSex());
        Benutzer.setBirthday(userSignUpVO.getBirthday());
        if (userRepository.insertUser(Benutzer)) {
            Rückgabewert: ResultReturnUtil.success(USER_SIGNUP_SUCCESS, user.getEmail());
        }
        gibt ResultReturnUtil.fail(USER_SIGNUP_FAILED) zurück;
    } 

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel der Vue-Funktion „einfache Registrierungsseite + Senden eines Bestätigungscodes“. Weitere relevante Inhalte zur Vue-Registrierungsseite zum Senden eines Bestätigungscodes finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Verwenden Sie Vue, um den Effekt der Registrierungsseite zu realisieren. Vue ermöglicht die Anmeldung per SMS-Bestätigungscode.
  • vue implementiert die Registrierungsfunktion zum Senden eines SMS-Bestätigungscodes über das Mobiltelefon
  • Beispiel für ein Vue+Element zur Implementierung der Registrierung mit einem Bestätigungscode für eine Mobiltelefonnummer

<<:  MySQL 1130-Ausnahme, Remote-Anmeldung nicht möglich – Lösung

>>:  So füllen Sie Elemente in Spalten im CSS-Rasterlayout

Artikel empfehlen

Faint: „Nutzen Sie Web 2.0, um standardkonforme Seiten zu erstellen“

Heute sprach jemand mit mir über ein Website-Entw...

So verwenden Sie html2canvas, um HTML-Code in Bilder umzuwandeln

Konvertieren Sie Code in ein Bild mit html2canvas...

Analysieren Sie die Verwendung und Prinzipien von Vues Bereitstellung und Injektion

Lassen Sie uns zunächst darüber sprechen, warum w...

Vue.js implementiert eine Timeline-Funktion

In diesem Artikel wird der spezifische Code von V...

So fahren Sie MySQL sicher herunter

Beim Herunterfahren des MySQL-Servers können, abh...

Hinweise zur Verwendung von $refs in Vue-Instanzen

Während des Entwicklungsprozesses verwenden wir h...

Was Sie über die Transaktionsisolierung von msyql wissen müssen

Was ist eine Transaktion? Eine Transaktion ist ei...

VUE führt die Implementierung der Verwendung von G2-Diagrammen ein

Inhaltsverzeichnis Über G2 Chart verwenden Vollst...

Detaillierte Erklärung zum Schreiben von MySQL ungleich null und gleich null

1. Tabellenstruktur 2. Tabellendaten 3. Das Abfra...

So stellen Sie Spring Boot mit Docker bereit

Die Entwicklung der Docker-Technologie bietet ein...

Installieren Sie JDK8 im RPM-Modus auf CentOS7

Nach der erfolgreichen Installation von CentOS 7 ...

Automatisches Laden des Kernelmodul-Overlayfs-Vorgangs beim CentOS-Start

Um Kernelmodule in CentOS automatisch zu laden, k...