この記事では、参照用のSpringMVC実装検証コード関数ディスプレイの特定のコードを共有しています。特定のコンテンツは次のとおりです
最初にレンダリングを見てみましょう：
アイデア：
まず、検証コードは、ランダムな文字、数字、パターンなどで構成される画像であるため、この写真は間違いなく修正されておらず、バックエンドでランダムに作成する必要があります。 FrontendはIGのSRCを使用して、この製造方法を継続的にアクセスします。
ステップ1：フロントエンドページの書き込み
ログインはAjaxメソッドを使用するため、Clickイベントを呼び出すために使用されます。検証コードの画像は、Aタグに配置され、検証コードのクリックと変更を容易にします。画像は、IMGのSRC属性を使用して表示されます。 SpringMVCを使用しているため、バックグラウンドメソッドはアクションを使用するために呼び出されます。
<form> <div id = "login_tip">管理者login </div> <div> <入力タイプ= "text" id "user_code" name = "user_code" placeholder = "preate clease"> </div> <div> <入力タイプ= "パスワード" id = "user_account" name = "userhold" placehold "placehold" <入力型= "text" id = "verificationCode" name = "verificationcode" placeholder = ""> <a href = "javascript：void（0）;" rel = "externation nofollow" onclick = "verificationcode（）"> <img id = "randcodeimage" src = "verificationcode/generate.action"/> </a> </div> <div style = "float：left;"> <入力タイプ= "ボタン" name = "button" id ""/> </< id = "verification_code"> <b> </b> </div> </form>
ステップ2： JSコードを書きます
ログインはAJXAを使用するため、バックエンドログインは一部のデータを検証し、間違っている場合はデータをログインページに返します。ここでは、検証コードを生成する方法を呼び出した後に乱数を追加する必要がある理由を説明します。ここの乱数とこの乱数のパラメーター名は自由に記述でき、バックエンドは操作を行いません。これは、同じメソッドを呼び出すときにブラウザがキャッシュされるのを防ぐ方法であり、画像または検証コードの入力をクリックするエラーは自動的に更新されず、画像が変更されます。
<script type = "text/javascript"> function login（）{//これは$ .ajax（{type '、url：' uase/query.action.action '、// data：$（'＃logininputform '）を送信することです。 ：$（ "＃user_account"）。val（）、 'veryificationcode'：$（ "＃verificationcode"）。val（）、datatype： 'json'、success：function（obj）{var rad = math.floor（math.random（） * math.pow（10、8））; windocation.href = 'uase/login.action} 「検証コード/generate？uuuy = "+rad）; } / ***検証コードの更新* / function veryificationcode（）{var rad = math.floor（math.random（）*math.pow（10、8））; // uuuyはランダムなパラメーター名であり、バックエンドで処理されません。その目的は、ブラウザがキャッシュリンク$（ "＃randCodeImage"）を読み取ることを避けることです。 } </script>ステップ3：バックグラウンドコントローラーコントロールクラスを書き込みます
主な方法は、いくつかの乱数生産方法といくつかの補助クラスを使用する検証コードです。それらすべてを使用できます。タイプを変更できる検証コードを使用したため、自分で書かれたパブリックツールクラスを使用しました。
@RequestMapping（ "/vidificationCode"）public class vidificationCodecontroller extends httpservlet {private static final long serialversionuid = 1l; / ***セッションを保存するためにここで使用される名前*/ private static final string session_key_of_rand_code = "randcode"; // dodo constantを統合する/ ** * */ private static final int count = 200; / ** *グラフィックサイズ（幅）を定義します */ private static final int width = 105; / ** *グラフィックサイズ（高さ）を定義します */ private static final int height = 35; / ***干渉線の長さ= 1.414*linewidth*/ private static final int linewidth = 1; @RequestMapping（value = "/generate"、method = {requestmethod.post、requestmethod.get}）public void vidificationcode（httpservletrequest request、httpservletrequest Response）servletexception、ioexception、ioexception {//ページを設定しません。 Response.setheader（ "Cache-Control"、 "no-cache"）; Response.setDateHeader（ "Expires"、0）; // Response.setContentType（ "image/png"）; //メモリで画像を作成する最終bufferedImage画像= new bufferedimage（幅、高さ、bufferedimage.type_int_rgb）; // Graphics Context final Graphics2d Graphics =（Graphics2d）image.getGraphics（）を取得します。 //背景カラーグラフィックを設定します。SetColor（color.white）; // --- 1.Color.Whiteは白いグラフィックスです。FillRect（0、0、幅、高さ）; //回折を埋める//ボーダーカラーを設定します// --- 2。これは、数値タイプで色を設定することです。カラーモードとは、赤、緑、青の3つの主要な色の使用を指します。他の色は、3色の調整によって得られます。これらの3つのプライマリカラーの値は0〜255グラフィックスです。drawrect（0、0、width -1、height -1）;最終的なランダム= new Random（）; //干渉線をランダムに生成し、画像内の認証コードを他のプログラムで（int i = 0; i <count; i ++）{graphics.setcolor（getRandColor（150、200））; // --- 3。 final int x = random.nextint（width -linewidth -1） + 1; //ボーダーの最終int y = random.nextint（height -linewidth -1） + 1; final int xl = random.nextint（linewidth）; final int yl = random.nextint（linewidth）; Graphics.drawline（x、y、x + xl、y + yl）; } //ランダムに生成された認証コード（4桁の番号）最終文字列resultCode = exctrandCode（）を取得します。 for（int i = 0; i <resultcode.length（）; i ++）{//画像に認証コードを表示すると、呼び出し関数の色は同じです。シードが近すぎるので、// graphics.setcolor（new Color（20 + random.nextint（130）、20 + random // .nextint（130）、20 + random.nextint（130）））のみを直接生成できるのかもしれません。 //フォントカラーGraphics.setColor（color.black）を設定します。 // font styleを設定//graphics.setfont(new font（ "arial black"、font.italic、18））; Graphics.setFont（new Font（ "Times New Roman"、font.bold、24））; //文字、文字間隔、上のマージンシステムを設定します。 Graphics.DrawString（String.ValueOf（resultCode.Charat（i））、（23 * i） + 8、26）; } system.out.println（ "direct output："+resultCode）; //認証コードをsession request.getSession（）。setAttribute（session_key_of_rand_code、resultCode）; //画像はgraphics.dispose（）を有効にします。 //画像をページImageio.writeに出力（画像、 "jpeg"、response.getOutputStream（））; } / *** @returnランダムコード* / private string exctrandcode（）{final string randcodetype = resourceutil.getRandCodetype（）; int randcodelength = integer.parseint（resourceutil.getRandCodelength（））; if（randcodetype == null）{return randcodeimageEnum.number_char.generatestr（randcodelength）; } else {switch（randcodeType.charat（0））{case '1'：return randcodeimageEnum.number_char.generatestr（randcodelength）;ケース '2'：RandCodeImageEnum.lower_char.generatestr（randcodelength）を返します。ケース '3'：RandCodeImageEnum.upper_char.generatestr（randcodelength）を返します。ケース '4'：RandCodeImageEnum.LETTER_CHAR.GENERATESTR（RANDCODELENGTH）を返します。ケース '5'：return randcodeimageEnum.all_char.generatestr（randcodelength）;ケース '5'：return randcodeimageEnum.all_char.generatestr（randcodelength）;デフォルト：RANDCODEIMAGEENUM.NUMBER_CHAR.GENERATESTR（RANDCODELENGTH）を返します。 }}}}} /***説明：指定された番号に従って異なる色を生成します* @paramこれは、数値タイプで色を設定することです。カラーモードとは、赤、緑、青の3つの主要な色の使用を指します。これらの3つのプライマリカラーの値は、3色の調整により0〜255です。これら3つの主要な色の値は0〜255です。 * @paramこれは、数値タイプで色を設定することです。カラーモードとは、赤、緑、青の3つの主要な色の使用を指します。これらの3つのプライマリカラーの値は、3色の調整によって取得されます。 * @return説明：return color*/ private Color getRandColor（int fc、int bc）{//ランダムな色の指定された範囲を取得しますfinal random random = new Random（）; if（fc> 255）{fc = 255; } if（bc> 255）{bc = 255; } final int r = fc + random.nextint（bc -fc）; final int g = fc + random.nextint（bc -fc）; final int b = fc + random.nextint（bc -fc）;新しい色（r、g、b）を返します。 } / ***検証コード補助クラス* / enum randcodeimageEnum { / ***混合文字列* / all_char（ "0123456789ABCDEFGHIJKMNPQRSTUVWWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ" /** *文字 */lette_char（ "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"）、/** * lower_char（ "abcdefghijklmnopqrstuvwxyz"）、/** * */ * number_char（ "0123456789"）、 /*** apper_char（ "abcdefghijklmnopqrstuvwxyz"）; / ***生成される文字列*/ private string charstr; / ** * @param charstr */ private randcodeimageEnum（final String charstr）{this.charstr = charstr; } / ***生産ランダム検証コード** @param codelength*検証コードの長さ* @return検証コード* / public string generatestr（final int codelength）{final stringbuffer sb = new StringBuffer（）;最終的なランダム= new Random（）;最終文字列sourcestr = getCharstr（）; for（int i = 0; i <codelength; i ++）{sb.append（soursestr.charat（random.nextint（soursestr.length（））））; } return sb.toString（）; } / ** * @return {@link #charstr} * / public string getCharstr（）{return charstr; }}}ステップ4：一般的なツールクラスを作成します
/***プロジェクトパラメーターツールクラス**/パブリッククラスResourceUtil {private static final resourcebundle bundle = java.util.resourcebundle.getBundle（ "sysconfig"）; / ***ランダムコードの長さを取得** @RETURNランダムコードの長さ*/ public Static String getRandCodelength（）{return bundle.getString（ "randcodelength"）; } / ***ランダムコードのタイプを取得** @@returnランダムコードのタイプ* / public static string getRandCodetype（）{return bundle.getString（ "randcodetype"）; }}ステップ5： config.properties
randCodelength = 4randCodeType = 5
ステップ6：ここで完了です、あなたは効果を試すことができます