Vue+Spring Bootで検証コード機能を実現

Vue+Spring Bootで検証コード機能を実現

この記事では、検証コード機能を実装するためのvue+spring bootの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。

試してみるために、vue を使用して検証コードを作成しました。次のようになります。

1.imgタグ

<画像
     = "高さ:40px; 幅: 100px; カーソル: ポインター;"
     ref="画像識別コード"
     :src="選択したロゴ画像.imgUrl"
     クラス="logoImg"
 >

2.jsコード

/**
     * 認証コードを取得 */
    識別コードを取得する() {
      selft = this とします。
      //pic = this.$refs.imgIdentifyingCode とします
      自己t.loadingChack = true;
      uuid = Utils.getUuid(32, 16); とします。
      this.$store.state.uuid = uuid;
      this.$api.reader.getVerify() を実行します。
        { レスポンスタイプ: "arraybuffer", uuid: uuid },
        r => {
          selft.loadingChack = false;
          selft.selectedLogoPicture.imgUrl = "data:image/png;base64," + r;
        }
      );
    },

3.コントローラー

@RequestMapping("/getVerify")
 public void getVerify(@RequestParam String uuid、HttpServletRequest リクエスト、HttpServletResponse レスポンス) {
  response.setContentType("image/jpeg"); // 出力コンテンツが画像であることをブラウザに伝えるためにレスポンス タイプを設定します。 response.setHeader("Pragma", "No-cache"); // レスポンス ヘッダー情報を設定し、このコンテンツをキャッシュしないようにブラウザに伝えます。 response.setHeader("Cache-Control", "no-cache");
  response.setDateHeader("有効期限", 0);
  userService.getRandcodedDawTransparent(uuid, request, response); // 検証コード画像出力メソッド}

4.サービス

@オーバーライド
 パブリック void getRandcodedDawTransparent(String uuid, HttpServletRequest リクエスト, HttpServletResponse レスポンス) {
  試す {
   マップ<String, Object> map = CodeUtil.getRandcodedDawTransparent();
   //生成されたランダム文字列をセッションに保存します。log.info("==saved uuid:"+uuid);
   log.info("==保存されたコード:"+map.get("code"));
   sessionUtil.saveCode(uuid、map.get("コード"));

   レスポンスのContentTypeを"image/png"に設定します。
   出力ストリーム out = response.getOutputStream();

   out.write((byte[]) map.get("img"));
   出力をフラッシュします。
   out.close();
  } キャッチ (IOException e) {
   ログエラー(e.getMessage());
  }
 }

5.ユーティリティ

パブリック静的Map<String, Object> getRandcodedDawTransparent() はIOExceptionをスローします {
  Map<String, Object> rsMap = 新しい HashMap<>();
  // BufferedImage オブジェクトを作成します。 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  // Graphics2D を取得
  Graphics2D g2d = image.createGraphics();

  // 背景を透明にするには次のコードを追加します image = g2d.getDeviceConfiguration().createcompatibleImage(width, height, Transparency.TRANSLUCENT);
  g2d.dispose();
  g2d = image.createGraphics();

  g2d.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// フォントサイズ g2d.setColor(getRandColor(110, 133));// フォント色 // 干渉線を描画 for (int i = 0; i <= lineSize; i++) {
   drowLine(g2d, 幅, 高さ);
  }
  // ランダムな文字を描画します String randomString = "";
  (int i = 1; i <= stringNum; i++) の場合 {
   ランダム文字列 = drowString(g2d, ランダム文字列, i);
  }
  log.info(ランダム文字列);
  rsMap.put("コード", ランダム文字列);
  g2d.dispose();
  ByteArrayOutputStream baos = new ByteArrayOutputStream(); // io ストリーム ImageIO.write(image, "png", baos); // ストリームに書き込む byte[] bytes = baos.toByteArray(); // バイトに変換する bytes = Base64.encodeBase64(bytes);
  rsMap.put("img", バイト);

  rsMapを返します。
 }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • グラフィック検証コードSMS送信機能付きVueコンポーネント開発LeanCloud

<<:  UbuntuでMySQLデータベースファイルディレクトリを変更する方法

>>:  Virtualbox で Ubuntu 16.04 の起動時に共有ディレクトリを自動的にマウントする最良の方法

推薦する

Linux のソフトリンクとハードリンクの詳細な説明

目次1. ファイルとディレクトリの基本的な保存2. Inコマンドの紹介(1)lnコマンドの基本情報を...

製品を選択した後、右下隅に√記号を表示するための純粋なCSS

おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...

IE6 の select を div でカバーできないバグの解決方法

div を使用してマスクを作成したり、ポップアップ ウィンドウをシミュレートしたりします。ただし、I...

MySQL 百万レベルのデータページングクエリ最適化ソリューション

データベースからクエリする必要があるテーブルに数万件のレコードがある場合、すべての結果を一度にクエリ...

Windows サービス 2016 Datacenter\Stand\Embedded アクティベーション方法 (2021)

管理者権限でcmdを実行する slmgr /ipk CB7KF-BWN84-R7R2Y-793K2-...

Google ブラウザのラベルと入力間のスペースに関する小さな問題

最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...

有名なウェブサイトのロゴに使われている25種類のフォントのコレクション

この記事では、25 の有名な Web サイト (Google、Yahoo、Twitter、Digg ...

要素のフォーム要素の使用の概要

フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...

MySQL sql_modeクエリと設定の詳細な説明

1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...

Vue3とTypeScriptを組み合わせたプロジェクト開発の実践記録

目次概要1. コンポジションAPI 1. ref と reactive の違いは何ですか? 2. 周...

MySQL に外部キー制約を追加する具体的な方法

このチュートリアルの動作環境: Windows 7 システム、MySQL 8 バージョン、Dell ...

MySQLユーザー管理操作例の分析

この記事では、MySQL ユーザー管理操作について説明します。ご参考までに、詳細は以下の通りです。こ...

英語のシングルクォーテーション「''」を含むSQLの記述の失敗について徹底解説

問題が発生しました。情報の編集をテストする際、編集した内容に一重引用符 (') が含まれてい...

JavaScript で右クリック メニューを統合する layim のサンプル コード

目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...

Linux コマンドラインでパケットをキャプチャするために tcpdump を使用するいくつかの機能

tcpdump は、ネットワークの問題のトラブルシューティングに効果的に役立つ、柔軟で強力なパケット...