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

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

以下もご興味があるかもしれません:
  • vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します
  • vueは携帯電話経由でSMS認証コードを送信する登録機能を実装します
  • 携帯電話番号認証コード登録を実装するvue+要素の例

<<:  MySQL 1130例外、リモートログインできない解決策

>>:  CSS グリッドレイアウトで列にアイテムを埋め込む方法

推薦する

JavaScript 遅延読み込みの詳細な説明

目次遅延読み込みCSS スタイル: HTML部分:スクリプト部分:要約する遅延読み込み名前の通り、私...

ES9の新機能の詳細な説明: 非同期反復

目次非同期トラバーサル非同期反復可能トラバーサル非同期反復生成非同期メソッドと非同期ジェネレーター非...

XHTML 特殊文字コレクション

注意&#160;ノーブレークスペース = ノーブレークスペース、 iexcl ¡ &...

Navicatは機能ソリューション共有を作成できません

初めて MySQL FUNCTION を書いたとき、エラーが何度も発生しました。 Err] 1064...

Clickhouse Docker クラスターの展開と構成を例を使って説明します

目次前面に書かれた環境の展開Zookeeper クラスタの展開Clickhouse クラスターの展開...

h1、h2、h3タグを適切に使用する

Web ページを作成する過程では、<h1>、<h2>、<h3> ...

ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...

W3C チュートリアル (13): W3C WSDL アクティビティ

Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...

フォーム送信の更新ページはソースコード設計にジャンプしません

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

CSS が複数のクラスに一致する方法のサンプルコード

CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...

Vue3 における ref と reactive の詳細な説明と拡張

目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...

Vue開発ウェブサイトSEO最適化方法の詳細な説明

ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...

Linux 圧縮ファイルコマンド zip の使用例

「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...

Centos7 サーバーで jar パッケージ プロジェクトを開始する最良の方法

序文Linux 上で jar パッケージを実行する方法は誰もが知っています。なぜ別々に話したいのでし...

CSS セレクターの重みの理解(個人テスト)

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...