SpringBoot+Vueは画像検証コードの機能要件を実現します

記事の最後に個人の公開アカウントがあります:テクノロジーを愛する Xiao Zheng。主に開発知識の共有を行っておりますので、ご興味がございましたらご注目ください。なぜ共有するのでしょうか? 踏まれた穴を他の人が踏む必要はなく、一人で繰り返しプレイすることで記憶を深めることもできます。私利他、いわゆるwin-winの状況。

序文

Redis に検証コードを保存する要件開発を書きました。また、サードパーティのインターフェイスを呼び出して検証コードを携帯電話に直接送信する要件開発も書きました。今回は、より一般的な画像認証コードを取得します。ユーザーが画像をクリックして認証コードを取得すると、認証コードがページに直接表示されます。ソースコードはたくさんあるので、ここですべてを紹介するのは不便です。必要に応じて、私の公式アカウントに確認コードを入力してソースコードを取得できます。

エフェクトデモ

認証コードによるログイン

ページ効果のデモ

ここではログインページのエフェクト表示を2セット書きました。検証コードの機能はまったく同じであり、同じインターフェイスが呼び出されます。インターフェースにログインする必要がある場合は、公式アカウントにキーワード確認コードを入力して、ログインインターフェースのソースコードを取得します。

ここに画像の説明を挿入

プロジェクト構造

1.1 バックエンドプロジェクトの構造

main 機能はバックエンドによって実現され、フロントエンドは表示のみを担当します。一度完成したシステムに、少しずつ新しい機能を追加していきたいと思っています。バージョン管理が使用されるため、表示されるファイルの色は異なります。

ここに画像の説明を挿入

具体的な実装プロセス

1.1 基本的な手順

1. データベースに検証コードテーブルを追加します。
2. pom 依存関係を追加する
3. バックエンドにおける認証コード画像の生成方法
4. バックエンドでの認証コードの検証方法
5. フロントエンドディスプレイの検証コードの画像

1.2 テーブルを作成する

ここに画像の説明を挿入

1.3 POM 依存関係のインポート

これらの依存関係は画像検証コードの生成に関するものですので、具体的な使用方法についてはご自身で情報をご参照ください。

        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.github.axet</groupId>
            <artifactId>kaptcha</artifactId>
            <version>0.0.9</version>
        </dependency>

        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
            <version>2.9.9</version>
        </dependency>

        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

1.4 検証コードの生成方法

コアの検証コードの実装方法は次のとおりです

    @Override
    public BufferedImage getCaptcha(String uuid) {
    
    
        if(StringUtils.isBlank(uuid)){
    
    }
        
        //生成文字验证码
        String code = producer.createText();
        SysCaptchaEntity captchaEntity = new SysCaptchaEntity();
        captchaEntity.setUuid(uuid);
        captchaEntity.setCode(code);
        //5分钟后过期
        captchaEntity.setExpireTime(DateUtils.addDateMinutes(new Date(), 5));
        this.save(captchaEntity);

        return producer.createImage(code);
    }

1.5 入力された認証コードを確認する

コア部分は、ユーザーが入力した検証コードを検証し、入力された検証コードの有効期限が切れているかどうかを確認します。

    @Override
    public boolean validate(String uuid, String code) {
    
    
        SysCaptchaEntity captchaEntity = this.getOne(new QueryWrapper<SysCaptchaEntity>().eq("uuid", uuid));
        if(captchaEntity == null){
    
    
            return false;
        }

        if(captchaEntity.getCode().equalsIgnoreCase(code) && captchaEntity.getExpireTime().getTime() >= System.currentTimeMillis()){
    
    
            //删除验证码
            this.removeById(uuid);
            return true;
        }

        return false;
    }

1.6 フロントエンドディスプレイ

この部分を使用して <img :src="captchaPath" @click="getCaptcha()" alt="" />画像エコーを実装します。

        <el-form-item prop="captcha">
          <span slot="label">
            <span style="color: white"><strong>验证码</strong></span>
          </span>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-input
                v-model="ruleForm.captcha"
                placeholder="验证码"
              >
              </el-input>
            </el-col>
            <el-col :span="10" class="login-captcha">
              <img :src="captchaPath" @click="getCaptcha()" alt="" />
            </el-col>
          </el-row>
        </el-form-item>

あとがき

ゆっくりと新しい機能をシステムに追加し、無限に学習してください。さあ! ！！

ソースコードに含まれるすべてのファイルと SQL スクリプトファイルディレクトリは次のとおりです。

ここに画像の説明を挿入