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 グリッドレイアウトで列にアイテムを埋め込む方法

推薦する

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...

CSS の位​​置属性 (absolute|relative|static|fixed) の概要と応用

まず、CSS3 Api の position 属性の定義を見てみましょう。 static: 特別な配...

7つの基本的なXHTMLコーディングルールの概要

1. すべてのタグには対応する終了タグが必要です以前の HTML では、<p> や &l...

MySQL の遅いクエリを見つける方法

序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...

W3C標準に準拠したHTML標準で注意すべき点を詳細に解説

XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE html PUB...

geoip を使用して nginx で地域を制限する方法

このブログは仕事のメモです環境: nginx バージョン: nginx/1.14.0 Centos ...

Node.js はクライアントリクエストデータ内の中国語文字化けの問題を解決します

Node.js はクライアントリクエストデータ内の中国語文字化けの問題を解決しますコード例: var...

MySQL マスタースレーブレプリケーションと読み取り書き込み分離の詳細な説明

目次序文1. 概要2. 読み取りと書き込みの分離3. MySQL マスタースレーブレプリケーションの...

HTML に基づいてページを更新せずにフォーム送信を実装する

ページを更新せずにフォーム送信を実装するために Ajax を使用することは、プロジェクトでよく使用さ...

IE5.0以降のHTCコンポーネントの定義の概要

Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...

LinuxシステムにDockerをインストールするプロセス

このブログでは、Docker をインストールするプロセスを簡単な手順で説明します。Docker のイ...

CSS3で実装された炎のアニメーション

成果を達成する実装コードhtml <div class="コンテナ">...

HTMLノードの追加と削除の簡単な例

<br />HTMLノードの追加と削除の簡単な例<input type="...

jsを使用して写真をアップロードする機能を実現する

フロントエンドで画像をアップロードする原理は、入力 type="file" タグ...

優れた Web UI ライブラリ/フレームワーク 10 選

1. ITミルツールキットIT Mill Toolkit は、リッチ Web アプリケーション用のウ...