تشارك هذه المقالة رمزًا محددًا لـ SPRINGMVC DOWER CODECTION DOWEST DISPLICE DISPLICAL للرجوع إليه. المحتوى المحدد كما يلي
دعونا نلقي نظرة على العروض أولاً:
الأفكار:
بادئ ذي بدء ، فإن رمز التحقق هو صورة ، صورة مكونة من الحروف والأرقام والأنماط العشوائية ، وما إلى ذلك ، لذلك لا يتم إصلاح هذه الصورة بالتأكيد ، يجب أن يتم إنشاؤها بشكل عشوائي بواسطة الواجهة الخلفية. تستخدم الواجهة الأمامية SRC IG للوصول بشكل مستمر إلى طريقة التصنيع هذه.
الخطوة 1: كتابة الصفحة الأمامية
يستخدم تسجيل الدخول طريقة AJAX ، لذلك يتم استخدامه لاستدعاء حدث النقر. يتم وضع صورة رمز التحقق في علامة A لتسهيل النقر وتغيير رمز التحقق. يتم عرض الصورة باستخدام سمة SRC لـ IMG. لأنه يستخدم springMVC ، يتم استدعاء طريقة الخلفية لاستخدام الإجراء.
<Porm> <div id = "login_tip"> تسجيل الدخول المسؤول </div> <div> <input type = "text" id = "user_code" name = "user_code" placeholder = "الرجاء إدخال حساب type = "text" id = "ferificationCode" name = "VerificationCode" placeholder = "الرجاء إدخال رمز التحقق"> <a href = "javaScript: void (0) ؛" rel = "nofollow خارجي" onClick = "VerificationCode ()"> <img id = "randcodeimage" src = "ferificationCode/ender.action"/> </a> </viv> <div style = "float: left ؛ ID = "Verification_Code"> <b> </b> </viv> </mapp>
الخطوة 2: اكتب رمز JS
نظرًا لأن تسجيل الدخول يستخدم AJXA ، فإن تسجيل الدخول الخلفي سيتحقق من بعض البيانات ، وإذا كان غير صحيح ، فسيقوم بإرجاع البيانات إلى صفحة تسجيل الدخول. هنا نوضح لماذا يجب إضافة رقم عشوائي بعد استدعاء الطريقة لإنشاء رمز التحقق. يمكن كتابة الرقم العشوائي هنا واسم المعلمة لهذا الرقم العشوائي حسب الرغبة ، ولا تقوم الواجهة الخلفية بأي عملية. هذه طريقة لمنع المستعرض من التخزين المؤقت عند الاتصال بنفس الطريقة ، ولن يتم تحديث الخطأ في النقر على إدخال الصورة أو رمز التحقق تلقائيًا وسيتم تغيير الصورة.
<script type = "text/javaScript"> login () {// هذا هو إرسال $ .ajax ({type: 'post' ، url: 'uase/query.action' ، // data: $ ('#logInInpotform'). Serialize () ، data: {'user_code': $ ( : $ ("#user_account"). val () ، 'VerificationCode': $ ( window.location.href = 'uase/action' ؛ "VerificationCode/ender.Action؟ uuuy ="+rad) ؛ } / ***تحديث رمز التحقق* / وظيفة التحقق () {var rad = math.floor (Math.Random ()*Math.Pow (10 ، 8)) ؛ // uuuy هو اسم معلمة عشوائي ، والذي لن تتم معالجته بواسطة الواجهة الخلفية. الغرض منه هو تجنب المستعرض قراءة الرابط المخزن مؤقتًا $ ("#randcodeimage"). attr ("src" ، "التحقق/إنشاء. } </script>الخطوة 3: اكتب فئة التحكم في وحدة التحكم في الخلفية
الطريقة الرئيسية هي VerificationCode ، والتي تستخدم بعض طرق إنتاج الأرقام العشوائية وبعض الفئات الإضافية. يمكنك استخدامها جميعا. لأنني استخدمت رموز التحقق التي يمكن أن تغير النوع ، استخدمت فئة الأدوات العامة التي كتبها بنفسي.
requestmapping ("/ferificationCode") فئة perificationcodecontroller العامة يمتد httpservlet {private static final long serialversionuid = 1L ؛ / *** الاسم المستخدم هنا لتخزين الجلسة*/ private Static Final String session_key_of_rand_code = "randcode" ؛ // todo لتوحيد الثابت/ ** * */ العدد النهائي الثابت الخاص = 200 ؛ / ** * حدد حجم الرسم (العرض) */ عرض INT الثابت الخاص = 105 ؛ / ** * حدد حجم الرسم (الارتفاع) */ الطول الأساسي الثابتة الثابتة = 35 ؛ / ***طول خط التداخل = 1.414*linewidth*/ private static final int linewidth = 1 ؛ requestmapping (value = "/endernate" ، method = {requestMethod.post ، requestMethod.get}) public void void code (httpservletrequest request ، httpservletponse response) يلقي servleTexception ، ioException {// تعيين الصفحة على الاستجابة الخشبية (pragma ") ؛ استجابة. استجابة. // response.setContentType ("Image/PNG") ؛ // قم بإنشاء صورة في صورة BufferEdImage النهائية = جديد bufferedImage (العرض ، الارتفاع ، bufferedImage.type_int_rgb) ؛ // احصل على سياق الرسومات النهائي Graphics2d Graphics = (Graphics2d) Image.getGraphics () ؛ // قم بتعيين Graphics.setColor Color Color (color.white) ؛ // --- 1.color.white هو رسومات بيضاء. // املأ حيود // اضبط لون الحدود // graphics.setColor (getRandColor (100 ، 200)) ؛ // --- 2. هذا هو ضبط اللون بنوع رقمي. يشير وضع اللون إلى استخدام ثلاثة ألوان أساسية: الأحمر والأخضر والأزرق. يتم الحصول على الألوان الأخرى من خلال ضبط الألوان الثلاثة. قيم هذه الألوان الأساسية الثلاثة هي 0 ~ 255 Graphics.DrawRect (0 ، 0 ، العرض - 1 ، الارتفاع - 1) ؛ عشوائي نهائي = جديد عشوائي () ؛ // يقوم بشكل عشوائي بإنشاء خطوط التداخل ، مما يجعل رمز المصادقة في الصورة ليس من السهل اكتشافها بواسطة برامج أخرى لـ (int i = 0 ؛ i <count ؛ i ++) {graphics.setColor (getRandColor (150 ، 200)) ؛ // --- 3. Final int x = random.nextint (العرض - خط linewidth - 1) + 1 ؛ // تأكد من رسمها داخل الحدود النهائية int y = random.nextint (الارتفاع - خط الخط - 1) + 1 ؛ النهائي int xl = random.nextint (linewidth) ؛ النهائي int yl = random.nextint (linewidth) ؛ graphics.drawline (x ، y ، x + xl ، y + yl) ؛ } // خذ رمز المصادقة الذي تم إنشاؤه عشوائيًا (رقم 4 أرقام) السلسلة النهائية ResultCode = ErctRactRandCode () ؛ لـ (int i = 0 ؛ i <resultcode.length () ؛ i ++) {// عرض رمز المصادقة في الصورة ، ولون وظيفة المكالمة هو نفسه. ربما لأن البذرة قريبة جدًا ، لذلك يمكنك فقط إنشاء // graphics.setColor (لون جديد (20 + عشوائي. nextint (130) ، 20 + عشوائي /. // set font color Graphics.setColor (color.black) ؛ // set 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 ("الإخراج المباشر:"+resultcode) ؛ // حفظ رمز المصادقة في request.getSession (). // الصورة تستحق الرسومات. dispose () ؛ // إخراج الصورة إلى page imageio.write (صورة ، "jpeg" ، reponse.getOutputStream ()) ؛ } / *** regurn code random* / private string erctractrandCode () {Final String RandCodeType = ResourceUtil.getRandCodeType () ؛ int randcodelength = integer.parseint (ResourceUtil.getRandCodelength ()) ؛ if (randcodeType == null) {randcodeimageenum.number_char.generatestest (randCodelength) ؛ } آخر {switch (randcodeType.charat (0)) {case '1': return randcodeimageenum.number_char.generatester (randcodelength) ؛ الحالة "2": randcodeimageenum.lower_char.generatestest (RandCodeLength) ؛ Case '3': return randcodeimageenum.upper_char.generatester (randcodelength) ؛ Case '4': return randcodeimageenum.letter_char.generatestest (RandCodelength) ؛ الحالة '5': randcodeimageenum.all_char.generatestest (randcodelength) ؛ الحالة '5': randcodeimageenum.all_char.generatestest (randcodelength) ؛ الافتراضي: إرجاع randcodeimageenum.number_char.generatestest (RandCodeLength) ؛ }}}} /*** الوصف: قم بإنشاء ألوان مختلفة وفقًا للرقم المحدد* param هذا لتعيين اللون بنوع رقمي. يشير وضع اللون إلى استخدام ثلاثة ألوان أساسية: الأحمر والأخضر والأزرق. قيم هذه الألوان الأساسية الثلاثة هي 0 ~ 255 من خلال ضبط الألوان الثلاثة. قيم هذه الألوان الأساسية الثلاثة هي 0 ~ 255. * param هذا هو ضبط اللون بنوع رقمي. يشير وضع اللون إلى استخدام ثلاثة ألوان أساسية: الأحمر والأخضر والأزرق. يتم الحصول على قيم هذه الألوان الأساسية الثلاثة عن طريق ضبط الألوان الثلاثة هي 0 ~ 255. * regurn الوصف: Return Color*/ Private Color GetRandColor (int fc ، int bc) {// الحصول على النطاق المعطى للألوان العشوائية النهائية عشوائية عشوائية = جديدة عشوائية () ؛ if (fc> 255) {fc = 255 ؛ } if (bc> 255) {bc = 255 ؛ } Final int r = fc + random.nextint (bc - fc) ؛ int g = fc + random.nextint (bc - fc) ؛ Final int b = fc + random.nextint (bc - fc) ؛ إرجاع اللون الجديد (R ، G ، B) ؛ } / *** رمز التحقق من الفئة المساعدة* / ENUM RANDCODEIMAGEENUM { / *** سلسلة مختلطة* / all_char ("0123456789ABCDEFGHIJKMNPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ") // ! /*** upper_char ("abcdefghijklmnopqrstuvwxyz") ؛ / *** سلسلة ليتم إنشاؤها*/ سلسلة خاصة charstr ؛ / ** * param charstr */ private RandCodeImageEnum (Final String charstr) {this.charststr = charstr ؛ } / *** الإنتاج رمز التحقق العشوائي** param codeLength* طول رمز التحقق* @REGRINT CODE* / public string generatestr (Final int codeLength) {Final StringBuffer SB = New StringBuffer () ؛ عشوائي نهائي = جديد عشوائي () ؛ السلسلة النهائية sourcestr = getCharstr () ؛ لـ (int i = 0 ؛ i <codeLength ؛ i ++) {sb.append (soursester.charat (random.nextint (sutersester.length ())))) ؛ } return sb.toString () ؛ } / ** * regurn the {link #charstr} * / public string getCharstr () {return charstr ؛ }}}الخطوة 4: اكتب فئات الأدوات المشتركة
/*** فئة أداة المعلمة المشروع**/فئة عامة ResourceUtil {private static final ResourceBundle Bundle = java.util.resourceBundle.getBundle ("SysConfig") ؛ / *** احصل على طول الرمز العشوائي** regurn طول الكود العشوائي*/ السلسلة الثابتة العامة getRandCodelength () {return bundle.getString ("RandCodelength") ؛ } / *** احصل على نوع الكود العشوائي** regurn نوع الكود العشوائي* / السلسلة الثابتة العامة getRandCodeType () {return bundle.getString ("RandCodeType") ؛ }}الخطوة 5: config.properties
RandCodeLength = 4RandCodeType = 5
الخطوة 6: هنا انتهيت ، يمكنك تجربة التأثير