この記事では、検証コード機能を実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: UbuntuでMySQLデータベースファイルディレクトリを変更する方法
>>: Virtualbox で Ubuntu 16.04 の起動時に共有ディレクトリを自動的にマウントする最良の方法
目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...
MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...
導入現在、k8s は非常に人気があり、それについて学ぶために本を購入しました。しかし、k8s では数...
1. MySQLデータベースをダウンロードするには、公式Webサイトにアクセスしてください:http...
目次序文1. Nginxのインストール1. Nginxをダウンロードする2. 依存関係をインストール...
序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...
TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...
1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...
HTML に触れる初心者は、いくつかの HTML タグを学びます。関連記事:初心者が学ぶ HTML...
目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...
目次1. 直接譲渡2. 浅いコピー3. ディープコピー1. JSONオブジェクトメソッド2. 再帰コ...
1. HTMLの概要1.HTML: ハイパーテキスト マークアップ言語。これはプログラミング言語では...
この記事では、WeChatアプレットのスクロールビューの左右連動を実現するための具体的なコードを参考...
序文元のプロジェクトは、パブリックネットワークgitlabに配置されていました。セキュリティ上の理由...
目次1. アプレットのプロジェクト ディレクトリを開き、ファイルの場所を開きます。 2. プロジェク...