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

<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>

        <!-- 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>

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;
    }
}

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);
    }

}

    /**
     * Ü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;
    }