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

CSS imitiert Fernbedienungstasten

Hinweis: Diese Demo wurde in der Miniprogrammumge...

MySql legt die angegebenen Benutzerdatenbankansichtsabfrageberechtigungen fest

1. Neuen Benutzer anlegen: 1. Führen Sie eine SQL...

JavaScript imitiert den Jingdong-Karusselleffekt

In diesem Artikel wird der spezifische Code für J...

Navicat-Verbindung MySQL Fehlerbeschreibungsanalyse

Inhaltsverzeichnis Umfeld Version der virtuellen ...

Docker+Selenium-Methode zur Realisierung automatischer Gesundheitsberichte

In diesem Artikel wird das Gesundheitsmeldesystem...

Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs

Inhaltsverzeichnis 1. innodb_buffer_pool_size 2. ...

So beheben Sie den abnormalen Start von mysql5.7.21

Ein Kollege meldete, dass eine MySQL-Instanz aufg...

So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop

Inhaltsverzeichnis Vorwort 1. Technisches Prinzip...