บทความนี้แชร์รหัสเฉพาะสำหรับ SpringMVC การใช้งานรหัสการตรวจสอบการแสดงผลสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
มาดูการเรนเดอร์ก่อน:
แนวคิด:
ก่อนอื่นรหัสการตรวจสอบคือรูปภาพรูปภาพที่ประกอบด้วยตัวอักษรสุ่มตัวเลขรูปแบบ ฯลฯ ดังนั้นภาพนี้ไม่ได้รับการแก้ไขแน่นอนมันจะต้องถูกสร้างขึ้นแบบสุ่มโดยแบ็กเอนด์ ส่วนหน้าใช้ SRC ของ IG ในการเข้าถึงวิธีการผลิตนี้อย่างต่อเนื่อง
ขั้นตอนที่ 1: การเขียนหน้าส่วนหน้า
เข้าสู่ระบบใช้วิธี AJAX ดังนั้นจึงใช้เรียกเหตุการณ์คลิก ภาพของรหัสการตรวจสอบถูกวางไว้ในแท็ก A เพื่ออำนวยความสะดวกในการคลิกและเปลี่ยนรหัสการตรวจสอบ ภาพจะแสดงโดยใช้แอตทริบิวต์ SRC ของ IMG เนื่องจากใช้ SpringMVC วิธีการพื้นหลังจึงถูกเรียกให้ใช้การกระทำ
<form> <div id = "login_tip"> ผู้ดูแลระบบเข้าสู่ระบบ </div> <div> <อินพุตประเภท = "ข้อความ" id = "user_code" name = "user_code" placeholder = "โปรดป้อนบัญชี"> </div> <div> type = "text" id = "VerificationCode" name = "VerificationCode" placeHolder = "โปรดป้อนรหัสการยืนยัน"> <a href = "JavaScript: void (0);" rel = "ภายนอก nofollow" onclick = "verificationCode ()"> <img id = "randCodeImage" src = "VerificationCode/generate.action"/> </a> </div> <div style = "float: left;"> <input type = "ปุ่ม" id = "verification_code"> <b> </b> </div> </form>
ขั้นตอนที่ 2: เขียนรหัส JS
เนื่องจากการเข้าสู่ระบบใช้ AJXA การเข้าสู่ระบบแบ็กเอนด์จะตรวจสอบข้อมูลบางอย่างและหากไม่ถูกต้องมันจะส่งคืนข้อมูลไปยังหน้าเข้าสู่ระบบ ที่นี่เราอธิบายว่าทำไมต้องเพิ่มหมายเลขสุ่มหลังจากเรียกใช้วิธีการเพื่อสร้างรหัสการตรวจสอบ หมายเลขสุ่มที่นี่และชื่อพารามิเตอร์ของหมายเลขสุ่มนี้สามารถเขียนได้ตามต้องการและแบ็กเอนด์จะไม่ดำเนินการใด ๆ นี่เป็นวิธีการป้องกันไม่ให้เบราว์เซอร์ได้รับแคชเมื่อเรียกใช้วิธีเดียวกันและข้อผิดพลาดในการคลิกที่ภาพหรือการป้อนข้อมูลรหัสการตรวจสอบจะไม่ได้รับการรีเฟรชโดยอัตโนมัติและภาพจะเปลี่ยนไป
<script type = "text/javascript"> function login () {// นี่คือการส่ง $ .ajax ({type: 'post', url: 'uase/query.action', // data: $ ('#loginInputform). serialize (), ข้อมูล: {' user_code ' : $ ("#user_account"). val (), 'VerificationCode': $ ("#VerificationCode"). val (),}, ข้อมูล: 'JSON', ความสำเร็จ: ฟังก์ชั่น (obj) {var rad = math.floor (math.random () * math.pow (10, 8) window.location.href = 'uase/login.action'; "VerificationCode/generate.action? uuuy ="+rad); } / ***การตรวจสอบรหัสการรีเฟรช* / ฟังก์ชัน VerificationCode () {var rad = math.floor (math.random ()*math.pow (10, 8)); // UUUY เป็นชื่อพารามิเตอร์แบบสุ่มซึ่งจะไม่ถูกประมวลผลโดยแบ็กเอนด์ วัตถุประสงค์คือเพื่อหลีกเลี่ยงเบราว์เซอร์ที่อ่านลิงค์แคช $ ("#randcodeimage") attr ("src", "VerificationCode/generate.action? uuuy ="+rad); } </script>ขั้นตอนที่ 3: เขียนคลาสควบคุมพื้นหลังคอนโทรลเลอร์
วิธีหลักคือ VerificationCode ซึ่งใช้วิธีการผลิตจำนวนสุ่มและคลาสเสริมบางคลาส คุณสามารถใช้มันทั้งหมด เนื่องจากฉันใช้รหัสการตรวจสอบที่สามารถเปลี่ยนประเภทได้ฉันจึงใช้คลาสเครื่องมือสาธารณะที่เขียนด้วยตัวเอง
@RequestMapping ("/VerificationCode") การตรวจสอบระดับสาธารณะ / *** ชื่อที่ใช้ที่นี่เพื่อจัดเก็บเซสชัน*/ สตริงสุดท้ายคงที่เซสชั่น _KEY_OF_RAND_CODE = "RANDCODE"; // todo เพื่อรวมค่าคงที่/ ** * */ ส่วนตัวคงที่จำนวน int int = 200; / ** * กำหนดขนาดกราฟิก (ความกว้าง) */ ความกว้าง int สุดท้ายคงที่ส่วนตัว = 105; / ** * กำหนดขนาดกราฟิก (ความสูง) */ ส่วนตัวคงที่ความสูง int สุดท้าย = 35; / ***ความยาวของเส้นรบกวน = 1.414*lineWidth*/ ส่วนตัวคงที่ int linewidth = 1; @RequestMapping (value = "/generate", method = {requestMethod.post, requestMethod.get}) Void VerificationCode (httpservletrequest Request, httpservletResponse การตอบสนอง) Response.Setheader ("แคชควบคุม", "ไม่มีแคช"); Response.setDateHeader ("หมดอายุ", 0); // response.setContentType ("image/png"); // สร้างภาพในหน่วยความจำสุดท้าย bufferedImage image = new bufferedImage (ความกว้าง, ความสูง, bufferedImage.type_int_rgb); // รับบริบทกราฟิกกราฟิกขั้นสุดท้ายกราฟิก = (กราฟิก 2D) image.getGraphics (); // ตั้งค่ากราฟิกสีพื้นหลัง SetColor (color.white); // --- 1.Color.white เป็นกราฟิกสีขาว fillrect (0, 0, ความกว้าง, ความสูง); // เติมการเลี้ยวเบน // ตั้งค่าสีชายแดน // graphics.setColor (getRandColor (100, 200)); // --- 2. นี่คือการตั้งค่าสีด้วยประเภทตัวเลข โหมดสีหมายถึงการใช้สามสีหลัก: สีแดงสีเขียวและสีน้ำเงิน สีอื่น ๆ ได้มาจากการปรับของสามสี ค่าของสีหลักทั้งสามนี้คือ 0 ~ 255 กราฟิก DRAWRECT (0, 0, ความกว้าง - 1, ความสูง - 1); สุ่มครั้งสุดท้ายสุ่ม = ใหม่สุ่ม (); // แบบสุ่มสร้างบรรทัดสัญญาณรบกวนทำให้รหัสการตรวจสอบสิทธิ์ในภาพไม่ง่ายที่จะตรวจพบโดยโปรแกรมอื่น ๆ สำหรับ (int i = 0; i <count; i ++) {graphics.setColor (getRandColor (150, 200)); // --- 3. int สุดท้าย x = random.nextint (ความกว้าง - linewidth - 1) + 1; // ตรวจสอบให้แน่ใจว่ามันถูกวาดภายในเส้นขอบสุดท้าย int y = random.nextint (ความสูง - linewidth - 1) + 1; int สุดท้าย xl = random.nextint (linewidth); int สุดท้าย yl = random.nextint (linewidth); graphics.drawline (x, y, x + xl, y + yl); } // ใช้รหัสการตรวจสอบความถูกต้องที่สร้างขึ้นแบบสุ่ม (หมายเลข 4 หลัก) สตริงสุดท้าย ResultCode = ExcTractrandCode (); สำหรับ (int i = 0; i <resultcode.length (); i ++) {// แสดงรหัสการรับรองความถูกต้องในภาพและสีของฟังก์ชั่นการโทรเหมือนกัน อาจเป็นเพราะเมล็ดอยู่ใกล้เกินไปดังนั้นคุณสามารถสร้าง // graphics.setColor โดยตรงได้โดยตรง (สีใหม่ (20 + Random.nextint (130), 20 + สุ่ม // .NexTint (130), 20 + สุ่ม NEXTINT (130))); // ตั้งค่ากราฟิกสีแบบอักษร SetColor (color.black); // ตั้งค่าแบบอักษรสไตล์ //graphics.setfont( ใหม่ Font ("Arial Black", Font.italic, 18)); graphics.setFont (ตัวอักษรใหม่ ("Times New Roman", Font.bold, 24)); // ตั้งค่าอักขระ, ระยะห่างของอักขระ, margin system.out.print (resultcode.charat (i)); graphics.drawstring (string.valueof (resultcode.charat (i)), (23 * i) + 8, 26); } system.out.println ("เอาต์พุตโดยตรง:"+resultcode); // บันทึกรหัสการรับรองความถูกต้องลงใน request.getSession (). setAttribute (session_key_of_rand_code, resultcode); // ภาพใช้กราฟิกเอฟเฟกต์ Dispose (); // เอาต์พุตภาพไปยังหน้า imageio.write (รูปภาพ, "jpeg", response.getOutputStream ()); } / *** @return รหัสสุ่ม* / สตริงส่วนตัว ExctractrandCode () {สตริงสุดท้าย randCodeType = ResourceUtil.getRandCodeType (); int randCodeLength = integer.parseInt (ResourceUtUtil.getRandCodeLength ()); if (randCodeType == null) {return randCodeImageEnum.number_char.generatestr (randcodelength); } else {switch (randcodeType.charat (0)) {กรณี '1': return randcodeimageenum.number_char.generatestr (randcodelength); กรณี '2': return randcodeimageenum.lower_char.generatestr (randcodelength); กรณี '3': return randcodeimageenum.upper_char.generatestr (randcodelength); กรณี '4': return randcodeimageenum.letter_char.generatestr (randcodelength); กรณี '5': return randcodeimageenum.all_char.generatestr (randcodelength); กรณี '5': return randcodeimageenum.all_char.generatestr (randcodelength); ค่าเริ่มต้น: return randcodeimageenum.number_char.generatestr (randcodelength); }}}} /*** คำอธิบาย: สร้างสีที่แตกต่างกันตามหมายเลขที่กำหนด* @param นี่คือการตั้งค่าสีด้วยประเภทตัวเลข โหมดสีหมายถึงการใช้สามสีหลัก: สีแดงสีเขียวและสีน้ำเงิน ค่าของสีหลักทั้งสามนี้คือ 0 ~ 255 ผ่านการปรับของสามสีได้รับ ค่าของสีหลักทั้งสามนี้คือ 0 ~ 255 * @param นี่คือการตั้งค่าสีด้วยประเภทตัวเลข โหมดสีหมายถึงการใช้สามสีหลัก: สีแดงสีเขียวและสีน้ำเงิน ค่าของสีหลักทั้งสามนี้ได้มาจากการปรับของสามสีคือ 0 ~ 255 * @return คำอธิบาย: คืนสี*/ สีส่วนตัว getRandColor (int fc, int bc) {// รับช่วงของสีสุ่มที่กำหนดสุ่มสุดท้ายสุ่ม = ใหม่สุ่ม (); if (fc> 255) {fc = 255; } if (bc> 255) {bc = 255; } int สุดท้าย r = fc + random.nextint (bc - fc); int สุดท้าย g = fc + random.nextint (bc - fc); int สุดท้าย b = fc + random.nextint (bc - fc); คืนสีใหม่ (R, G, B); } / *** รหัสการตรวจสอบคลาสเสริม* / enum randCodeImageEnum { / *** ผสมสตริง* / all_char ("0123456789ABCDEFGHIJKMNPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ /** * อักขระ */letter_char ("abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"),/** * ตัวอักษรตัวพิมพ์เล็ก */lower_char ( number_char ("0123456789"), /*** Upper_char ("abcdefghijklmnopqrstuvwxyz"); / *** สตริงที่จะสร้าง*/ สตริงส่วนตัว Charstr; / ** * @param charstr */ ส่วนตัว randcodeimageenum (สตริงสุดท้าย charstr) {this.charstr = charstr; } / *** รหัสการตรวจสอบแบบสุ่มการผลิต** @param codelength* ความยาวของรหัสการตรวจสอบ* @@return รหัสการตรวจสอบ* / public String generatestr (สุดท้าย int codelength) {final stringbuffer sb = new Stringbuffer (); สุ่มครั้งสุดท้ายสุ่ม = ใหม่สุ่ม (); สตริงสุดท้าย sourcestr = getCharstr (); สำหรับ (int i = 0; i <codelength; i ++) {sb.append (soursestr.charat (random.nextint (soursestr.length ()))); } return sb.toString (); } / ** * @return the {@link #charstr} * / สตริงสาธารณะ getCharStr () {return charstr; -ขั้นตอนที่ 4: เขียนคลาสเครื่องมือทั่วไป
/*** Project Parameter Tool Class**/Public Class ResourceUtil {Private Static Final ResourceBundle Bundle = java.util.resourceBundle.getBundle ("sysconfig"); / *** รับความยาวของรหัสสุ่ม** @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @return bundle.getstring ("randcodelength"); } / *** รับประเภทของรหัสสุ่ม** @return ประเภทของรหัสสุ่ม* / สตริงคงที่สาธารณะ getRandCodeType () {return bundle.getString ("randCodeType"); -ขั้นตอนที่ 5: config.properties
RandCodeLength = 4RandCodeType = 5
ขั้นตอนที่ 6: คุณทำเสร็จแล้วคุณสามารถลองใช้เอฟเฟกต์