SpringMVC實現驗證碼功能
阿新 • • 發佈：2018-09-04
yui eat cat import inpu expires 否則 void pos
下面是一張項目結構圖，實現功能前需要先搭建好SpringMVC框架。
RandomValidateCode.java——是生成驗證碼的類
Constants.java——定義了一個常量，用於保存驗證碼字段
ToolController——生成驗證碼和校驗驗證碼的處理器映射器
這3個類的源碼如下（有帶註釋）：
RandomValidateCode.java
package com.zwk.common; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage;import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.springframework.stereotype.Component; import com.zwk.constant.Constants; @Component public class RandomValidateCode {/** * 生成代碼 * * @return */ public static String createValidateCode(int size) { String seed = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM"; int len = seed.length(); char[] p = new char[size]; for (int i = 0; i < size; i++) { p[i]= seed.charAt((int) Math.floor(Math.random() * len)); } return new String(p); } private final Random random = new Random(); private final String randString = "123456789ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";// 隨機產生的字符串 private final int width = 135;// 圖片寬 private final int height = 40;// 圖片高 private final int lineSize = 50;// 幹擾線數量 private final int stringNum = 4;// 隨機產生字符數量 private final int fontSize = 30;// 隨機產生字符數量 /** * 生成隨機圖片 */ public void getRandcode(HttpServletRequest request, HttpServletResponse response) { HttpSession session = request.getSession(); // BufferedImage類是具有緩沖區的Image類,Image類是用於描述圖像信息的類 BufferedImage image = new BufferedImage(this.width, this.height, BufferedImage.TYPE_INT_BGR); Graphics g = image.getGraphics();// 產生Image對象的Graphics對象,改對象可以在圖像上進行各種繪制操作 g.fillRect(0, 0, this.width, this.height); g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, this.fontSize)); g.setColor(this.getRandColor(110, 133)); // 繪制幹擾線 for (int i = 0; i <= this.lineSize; i++) { this.drawLine(g); } // 繪制隨機字符 String randomString = ""; for (int i = 1; i <= this.stringNum; i++) { randomString = this.drawString(g, randomString, i); }
// 將獲取得到的randomString存入定義在Constants類的常量，用於接下來校驗時獲取 session.removeAttribute(Constants.RANDOM_CODE_KEY); session.setAttribute(Constants.RANDOM_CODE_KEY, randomString); // System.out.println(randomString); g.dispose(); try { // 禁止圖像緩存。 response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); // 將內存中的圖片通過流動形式輸出到客戶端 ImageIO.write(image, "JPEG", response.getOutputStream()); } catch (Exception e) { e.printStackTrace(); } } /** * 獲取隨機的字符 */ public String getRandomString(int num) { return String.valueOf(this.randString.charAt(num)); } /** * 繪制幹擾線 */ private void drawLine(Graphics g) { int x = this.random.nextInt(this.width); int y = this.random.nextInt(this.height); int xl = this.random.nextInt(13); int yl = this.random.nextInt(15); g.drawLine(x, y, x + xl, y + yl); } /** * 繪制字符串 */ private String drawString(Graphics g, String randomString, int i) { g.setFont(this.getFont()); g.setColor(new Color(this.random.nextInt(155), this.random.nextInt(123), this.random.nextInt(176))); String rand = String.valueOf(this.getRandomString(this.random.nextInt(this.randString.length()))); randomString += rand; g.translate(this.random.nextInt(3), this.random.nextInt(3)); g.drawString(rand, (this.width / this.stringNum - 14) * i, this.height - 7); return randomString; } /** * 獲得字體 */ private Font getFont() { return new Font("Times New Roman", Font.CENTER_BASELINE, this.fontSize); } /** * 獲得顏色 */ private Color getRandColor(int fc, int bc) { if (fc > 255) { fc = 255; } if (bc > 255) { bc = 255; } int r = fc + this.random.nextInt(bc - fc - 16); int g = fc + this.random.nextInt(bc - fc - 14); int b = fc + this.random.nextInt(bc - fc - 18); return new Color(r, g, b); } }
Constants.java
package com.zwk.constant; public class Constants { public static final String RANDOM_CODE_KEY = "RANDOM_CODE_KEY";
}
ToolController.java
package com.zwk.controller; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import com.zwk.common.RandomValidateCode; import com.zwk.constant.Constants; @Controller public class ToolController { @Resource RandomValidateCode code; @RequestMapping("/vcode") public void vcode(HttpServletRequest request,HttpServletResponse response) { code.getRandcode(request, response); System.out.println("進入獲取隨機生成的驗證碼"); } @RequestMapping("doLogin") public String doLogin(HttpServletRequest request,HttpServletResponse response,@RequestParam String vcode) { //獲取session中的code String sessionCode=(String)request.getSession().getAttribute(Constants.RANDOM_CODE_KEY); System.out.println("隨機生成："+sessionCode); System.out.println("用戶輸入："+vcode); //將隨機生成的驗證碼和用戶輸入的驗證碼統一轉化成大寫或者小寫 vcode=vcode.toLowerCase(); sessionCode=sessionCode.toLowerCase(); if(vcode.equals(sessionCode)) { request.setAttribute("error", "驗證碼輸入正確"); return "i18n"; }else { request.setAttribute("error", "驗證碼輸入錯誤"); return "login"; } } }
以上的代碼加註釋可以讀懂。接下來就可以在我們的login頁面生成一張帶驗證碼圖片：
貼出<body></body>內的代碼如下：
<body> <script type="text/javascript"> function changecode(){ document.getElementById(‘vcode‘).src="vcode.html?c="+Math.random(); } </script> <div style="margin: 0 auto;margin-top: 100px; "> <form action="doLogin.html" method="post"> 用戶名：<input type="text" name="user"><br/> 驗證碼： <input type="text" name="vcode"> <img id="vcode" alt="換一張" src="vcode.html" onclick="changecode()"/> <input type="submit"> </form> <br/><span style="color:red">${error }</span> </div> </body>
<img id="vcode" alt="換一張" src="vcode.html" onclick="changecode()"/>
用img生成一張圖片， id定義與js中的changecode()獲取的id一致。
不要使用<input type="image" src="vcode.html" onclick="cjhangecode()"/>，否則一點擊時會刷新頁面，而不是局部刷新圖片。
在js中的方法中： document.getElementById(‘vcode‘).src="vcode.html?c="+Math.random(); 要傳遞一個變量，這樣每次請求時才會去調用刷新驗證碼。
src="vcode.html" 是因為我在使用springmvc配置時攔截的是以.html結尾的
這部分屬於springmvc的基本知識，用的時候可以直接復制源碼，少量改動即可實現。
以下是我的運行結果：
點擊圖片換一張時，只局部刷新圖片，而不會刷新整個頁面！
SpringMVC實現驗證碼功能