Vue シンプル登録ページ + 確認コード送信機能の実装例

1. エフェクト表示

ここに画像の説明を挿入

2. 検証コードとメールプッシュ管理の強化（後述のブログを参照）

ここに画像の説明を挿入

3. 一般的な考え方

ユーザーの視点から登録手順を分析します。

メールアドレスを入力してください
「認証コードを送信」ボタンをクリックします
メールで確認コードを受け取る
残りの登録情報を入力し、確認コードを入力してください
登録が完了しました！

システム設計者の視点から手順を分析します。

システムはランダムに6桁の数字を生成する
ユーザーが指定したメールアドレスに確認コードを送信します
ユーザーが提供した情報に基づいて認証コードを検証する
認証が成功するとデータが入力され、ユーザー登録が成功します！

4. 事前準備

QQメールボックスでPOP3/SMTPサービスを有効にする

ここで参照できます

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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません: