1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照)3. 一般的な考え方ユーザーの視点から登録手順を分析します。
システム設計者の視点から手順を分析します。
4. 事前準備QQメールボックスでPOP3/SMTPサービスを有効にする ここで参照できます
5. フロントエンドコード<テンプレート> <div class="rg_layout"> <div class="rg_left"> <p>新規ユーザー登録</p> <p>ユーザー登録</p> </div> <div class="rg_center"> <div class="rg_form"> <div style="margin: 50px 0;"></div> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="メール" prop="メール"> <el-col :span="15"> <el-input placeholder="メールアドレスを入力してください" v-model="form.Email"></el-input> </el-col> <el-col :span="9"> <el-button type="success" plain @click="sendEmail">メール確認を送信</el-button> </el-col> </el-form-item> <el-form-item label="ユーザー名"> <el-col :span="20"> <el-input placeholder="ユーザー名を入力してください" v-model="form.username"></el-input> </el-col> </el-form-item> <el-form-item label="パスワード"> <el-input placeholder="パスワードを入力してください" v-model="form.password"></el-input> </el-form-item> <el-form-item label="性別"> <el-col :span="5"> <el-radio v-model="form.radio" label="1">男性</el-radio> </el-col> <el-col :span="3"> <el-radio v-model="form.radio" label="2">女性</el-radio> </el-col> </el-form-item> <el-form-item label="生年月日"> <el-col :span="15"> <el-date-picker type="date" placeholder="日付を選択" v-model="form.date" style="width: 100%;"></el-date-picker> </el-col> </el-form-item> <el-form-item label="確認コード"> <el-col :span="15"> <el-入力 タイプ="テキスト" placeholder="確認コードはあなたのメールアドレスに送信されます" v-model="フォーム.テキスト" oninput="値=値.replace(/\D/g,'')" 最大長="6" 単語制限を表示 > </el-input> </el-col> </el-form-item> <el-form-item> <el-col :span="20"> <el-button type="primary" @click="onSubmit">今すぐ登録</el-button> </el-col> </el-form-item> </el-form> </div> </div> <div class="rg_right"> <p>すでにアカウントをお持ちですか? <el-link icon="el-icon-user-solid" type="primary" @click="login_asd">今すぐログイン</el-link> </p> </div> </div> </テンプレート> <スクリプト> 「axios」からaxiosをインポートします。 エクスポートデフォルト{ マウント() { this.$store.state.yesOrNo = false }, 名前: "signUp", データ: 関数 () { 戻る { 形状: { メールアドレス: '', ユーザー名: "", パスワード: "", ラジオ: '1'、 日付: ''、 文章: '' }, ルール: メールアドレス: [{required: true, message: 'メールアドレスを入力してください', trigger: 'blur'}] }, メッセージ: '' } }, メソッド: { ログイン_asd(){ this.$router.replace({path: '/login'}); }, オープン1() { this.$メッセージ({ 表示閉じる: true, メッセージ: this.msg、 タイプ: '警告' }); }, オープン2() { this.$メッセージ({ 表示閉じる: true, メッセージ: this.msg、 タイプ: '成功' }); }, オープン3() { this.$メッセージ({ 表示閉じる: true, メッセージ: this.msg、 タイプ: 'エラー' }); }, メールを送信する(){ this.$refs.form.validate((有効) => { (有効)の場合{ _this = this とします axios.post(this.$store.state.url+':8412/user/sendSignUpCode?email='+_this.form.Email, ).catch(関数 (エラー) { _this.msg = "メールの形式が正しくありません!" _this.open1() }).then(関数 (応答) { (レスポンスデータコード === 200)の場合{ _this.msg = 応答データ.msg _this.open2() } それ以外 { _this.msg = 応答データ.msg _this.open3() } }) } }) }, 送信(){ this.$refs.form.validate((有効) => { (有効)の場合{ _this = this とします。 tmp にします。 if(this.form.radio === "1"){ tmp = '男性' }それ以外{ tmp = '女性' } axios.post(this.$store.state.url+':8412/user/userSignUp?code='+_this.form.text, { メール: this.form.Email、 ユーザー名: this.form.username, パスワード: this.form.password, 性別: tmp、 誕生日: this.form.date } ).catch(関数 (エラー) { _this.msg = "メールの形式に問題があります!" _this.open1() }).then(関数 (応答) { (レスポンスデータコード === 200)の場合{ _this.msg = 応答データ.msg _this.open2() _this.$router.replace({path: '/login'}); } それ以外 { _this.msg = 応答データ.msg _this.open3() } }) } }) } } } </スクリプト> <スタイル> * { マージン: 0px; パディング: 0px; ボックスのサイズ: 境界線ボックス; } 体 { 背景画像: url(https://img-blog.csdnimg.cn/76110abf7fb84ee28c50bfbfa7fa8e11.jpg); 背景繰り返し: 繰り返しなし; 背景サイズ: 100%; 背景位置: 0px -50px; } .rg_レイアウト{ 幅: 900ピクセル; 高さ: 500px; 境界線: 5px 実線 #EEEEEE; 背景色: 白; 不透明度: 0.8; /* div を水平方向に中央揃えする */ マージン: 自動; 上マージン: 100px; } .rg_left { フロート: 左; マージン: 15px; 幅: 20%; } .rg_left > p:最初の子 { 色: #FFD026; フォントサイズ: 20px; } .rg_left > p:最後の子 { 色: #A6A6A6; } .rg_center { /*境界線: 1px 実線赤;*/ フロート: 左; 幅: 450ピクセル; /*マージン: 15px;*/ } .rg_right { フロート: 右; マージン: 15px; } .rg_right > p:最初の子 { フォントサイズ: 15px; } .rg_right pa { 色: ピンク; } </スタイル> 6. バックエンド使用されるフレームワークはspringbootです ① 主な依存関係 <!-- レディス --> <依存関係> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> <バージョン>2.5.2</バージョン> </依存関係> <!-- メール --> <依存関係> <グループID>javax.mail</グループID> <artifactId>メール</artifactId> <バージョン>1.4.7</バージョン> </依存関係> ②定期検証メールボックスツールクラス パッケージ com.example.han.util; java.util.regex.Matcher をインポートします。 java.util.regex.Pattern をインポートします。 パブリッククラス CheckMail { パブリック静的ブール値 checkMail(String mail){ パターン pattern=Pattern.compile("\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*"); //\w+@(\w+.)+[az]{2,3} マッチャー matcher = pattern.matcher(mail); matcher.matches() を返します。 } } ③ Redis の設定と取得ツールクラス パッケージ com.example.han.util; org.springframework.beans.factory.annotation.Autowired をインポートします。 org.springframework.data.redis.core.StringRedisTemplate をインポートします。 org.springframework.stereotype.Component をインポートします。 java.util.concurrent.TimeUnit をインポートします。 @成分 パブリッククラスRedisUtil { オートワイヤード プライベート StringRedisTemplate stringRedisTemplate; public void setRedisKey(文字列キー、文字列値、long num) { System.out.println("Redis の開始を設定してください!"); stringRedisTemplate.opsForValue().set(キー、値、数値、時間単位.SECONDS); System.out.println(stringRedisTemplate.opsForValue().get(key)); } パブリック文字列 getRedisValue(文字列キー){ if(!stringRedisTemplate.hasKey(キー)){ 「なし」を返します。 } stringRedisTemplate.opsForValue().get(key) を返します。 } } ④ コアサービス層コード
/**
* メールアドレスが重複していないか確認する* @param email メールアドレス*/
@オーバーライド
パブリックResultReturn checkEmailRepeat(String email) throws MyException {
if (!CheckMail.checkMail(email)) {
throw new MyException(400, "電子メール形式エラー");
}
if (userRepository.checkEmaillRepeated(email)) {
ResultReturnUtil.fail(USER_EMAIL_REPEATED) を返します。
}
ResultReturnUtil.success(USER_EMAIL_NOT_REPEATED、メール) を返します。
}
/**
* 登録確認コードを送信* @param toEamil受信者のメールアドレス* @return
*/
@オーバーライド
パブリックResultReturn sendSignUpCode(String toEmail) {
//アスダッド
SimpleMailMessage simpleMailMessage = 新しい SimpleMailMessage();
シンプルなメールメッセージ。toEamil に設定します。
シンプルなメールメッセージ。メールからの送信元を設定します。
simpleMailMessage.setSubject("登録確認コードはこちらです");
ランダム r = new Random();
整数レート = r.nextInt(899999) + 100000;
redisUtil.setRedisKey(toEamil + "YanZheng", rate + "", 60 * 5); //まずredisに保存します。キーはメールアドレスです。String content =
「こんにちは、\n」+「\tあなたの確認コードは:\n」+評価;
シンプルなメールメッセージ。テキストを設定します。
試す {
javaMailSender.send(シンプルなメールメッセージ)
} キャッチ (例外 e) {
ResultReturnUtil.fail("送信に失敗しました!") を返します。
}
ResultReturnUtil.success("送信に成功しました!", toEamil); を返します。
}
/**
* ユーザー登録* @param userSignUpVO 登録に必要な基本的なユーザー情報* @param code 登録後にメールアドレスに送信される確認コード*/
@オーバーライド
パブリックResultReturn UserSignUp(UserSignUpVO userSignUpVO, int code) throws MyException {
if (!CheckMail.checkMail(userSignUpVO.getEmail())) { //これはメールの形式が間違っている場合です。 throw new MyException(400, "メール形式エラー");
}
if (userRepository.checkEmaillRepeated(userSignUpVO.getEmail())) { //メールが繰り返し登録された場合は、ResultReturnUtil.fail(USER_EMAIL_REPEATED) を返します。
}
String redisCode = redisUtil.getRedisValue(userSignUpVO.getEmail() + "YanZheng"); // コードを redis と比較する if (!redisCode.equals("" + code)) {
ResultReturnUtil.fail(WRONG_VERIFICATION_CODE) を返します。
}
UserDO ユーザー = 新しい UserDO();
ユーザ名を@に代入します。
user.setUsername(userSignUpVO.getUsername());
パスワードを設定します。
ユーザIDとパスワードを入力します。
誕生日を設定します。
if (userRepository.insertUser(user)) {
ResultReturnUtil.success(USER_SIGNUP_SUCCESS、user.getEmail()) を返します。
}
ResultReturnUtil.fail(USER_SIGNUP_FAILED) を返します。
} Vue の簡易登録ページ + 認証コード送信機能の実装例についてはこれで終了です。Vue 登録ページ認証コード送信機能の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 1130例外、リモートログインできない解決策
>>: CSS グリッドレイアウトで列にアイテムを埋め込む方法
目次遅延読み込みCSS スタイル: HTML部分:スクリプト部分:要約する遅延読み込み名前の通り、私...
目次非同期トラバーサル非同期反復可能トラバーサル非同期反復生成非同期メソッドと非同期ジェネレーター非...
注意 ノーブレークスペース = ノーブレークスペース、 iexcl ¡ &...
初めて MySQL FUNCTION を書いたとき、エラーが何度も発生しました。 Err] 1064...
目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...
Web ページを作成する過程では、<h1>、<h2>、<h3> ...
おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...
Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...
目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...
ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...
「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...
序文Linux 上で jar パッケージを実行する方法は誰もが知っています。なぜ別々に話したいのでし...
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...