java springmvc實現(xiàn)驗證碼功能
更新時間：2017年11月23日 14:52:50 作者：qq_35572020
這篇文章主要為大家詳細(xì)介紹了java springmvc實現(xiàn)驗證碼功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了springmvc實現(xiàn)驗證碼功能展示的具體代碼，供大家參考，具體內(nèi)容如下
先看效果圖：
思路：
首先驗證碼是一張圖片，是一張有著隨機字母、數(shù)字、圖案等組成的圖片，所以這圖片肯定不是固定不變的，肯定是由后端隨機制造出來的，前端用img的src去不斷訪問這個制造的方法。
第一步：前端頁面編寫
登錄使用的是ajax方法，所以使用的是調(diào)用點擊事件進(jìn)行，驗證碼的圖片放在a標(biāo)簽中是為了方便點擊變換驗證碼。顯示圖片用的是img的src屬性，因為使用的是spingmvc所以調(diào)用后臺方法使用action的方式。
<form>
<div id="login_tip">
管理員登錄
</div>
<div><input type="text" id="user_code" name="user_code" class="username" placeholder="請輸入賬號"></div>
<div><input type="password" id="user_account" name="user_account" class="pwd" placeholder="請輸入密碼"></div>
<div id="btn_area">
<input type="text" id="VerificationCode" name="VerificationCode" placeholder="請輸入驗證碼" class="verify">
<a href="javascript:void(0);" rel="external nofollow" onclick="VerificationCode()">
<img id="randCodeImage" alt="驗證碼" src="VerificationCode/generate.action" width="100" height="40"/>
</a>
</div>
<div style="float:left;">
<input type="button" name="button" id="sub_btn" onclick="login()" value="登錄"/>
</div>
<div id="verification_Code"><b></b></div>
</form>
第二步：編寫JS代碼
因為登錄采用的是ajxa,所以后臺登錄會驗證一些數(shù)據(jù)，不正確的會返回數(shù)據(jù)到登錄頁面。這里說明一下，在調(diào)用生成驗證碼的方法后面為什么要加一個隨機數(shù)，這里的隨機數(shù)以及這個隨機數(shù)的參數(shù)名稱可以隨意寫，后端不做任何操作的，這里是防止瀏覽器對一個相同方法進(jìn)行調(diào)用時取緩存的方法，而點擊圖片或驗證碼輸入錯誤不會自動刷新而改變圖片的問題做處理。
<script type="text/javascript">
function login(){
//這是使用ajax的方式提交
$.ajax({
type:'post',
url:'Uase/query.action',
//data:$('#loginInputForm').serialize(),
data:{
'user_code' : $("#user_code").val(),
'user_account' :$("#user_account").val(),
'VerificationCode':$("#VerificationCode").val(),
},
dataType:'json',
success:function(obj){
var rad = Math.floor(Math.random() * Math.pow(10, 8));
if(obj && obj.success=='true'){
window.location.href='Uase/login.action';
}else{
document.getElementById("verification_Code"). innerHTML =obj.msg;
//uuuy是隨便寫的一個參數(shù)名稱，后端不會做處理，作用是避免瀏覽器讀取緩存的鏈接
$("#randCodeImage").attr("src", "VerificationCode/generate.action?uuuy="+rad);
$("#VerificationCode").val("").focus(); // 清空并獲得焦點
}
}
});
}
/**
*驗證碼刷新
*/
function VerificationCode(){
var rad = Math.floor(Math.random() * Math.pow(10, 8));
//uuuy是隨便寫的一個參數(shù)名稱，后端不會做處理，作用是避免瀏覽器讀取緩存的鏈接
$("#randCodeImage").attr("src", "VerificationCode/generate.action?uuuy="+rad);
}
</script>
第三步：編寫后臺Controller控制類
主方法為VerificationCode，里面會用到一些隨機數(shù)生產(chǎn)的方法以及一些輔助類，全用用上就可以了，因為我這里用到了可以更改類型的驗證碼，所以用到了一個自己編寫的公共的工具類。
@RequestMapping("/VerificationCode")
public class VerificationCodeController extends HttpServlet{
private static final long serialVersionUID = 1L;
/**
* 這里用作存入session的名稱
*/
private static final String SESSION_KEY_OF_RAND_CODE = "randCode"; // todo 要統(tǒng)一常量
/**
*
*/
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 VerificationCode( HttpServletRequest request,
HttpServletResponse response) throws ServletException,
IOException {
// 設(shè)置頁面不緩存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
// response.setContentType("image/png");
// 在內(nèi)存中創(chuàng)建圖象
final BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 獲取圖形上下文
final Graphics2D graphics = (Graphics2D) image.getGraphics();
// 設(shè)定背景顏色
graphics.setColor(Color.WHITE); // ---1.Color.WHITE為白色
graphics.fillRect(0, 0, width, height);//填充衍射
// 設(shè)定邊框顏色
//graphics.setColor(getRandColor(100, 200)); // ---2.這是以數(shù)字型來設(shè)置顏色，顏色模式是指使用三種基色：紅、綠、藍(lán)，通過三種顏色的調(diào)整得出其它各種顏色，這三種基色的值范圍為0～255
graphics.drawRect(0, 0, width - 1, height - 1);
final Random random = new Random();
// 隨機產(chǎn)生干擾線，使圖象中的認(rèn)證碼不易被其它程序探測到
for (int i = 0; i < count; i++) {
graphics.setColor(getRandColor(150, 200)); // ---3.
final int x = random.nextInt(width - lineWidth - 1) + 1; // 保證畫在邊框之內(nèi)
final 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);
}
// 取隨機產(chǎn)生的認(rèn)證碼(4位數(shù)字)
final String resultCode = exctractRandCode();
for (int i = 0; i < resultCode.length(); i++) {
// 將認(rèn)證碼顯示到圖象中,調(diào)用函數(shù)出來的顏色相同，可能是因為種子太接近，所以只能直接生成
// graphics.setColor(new Color(20 + random.nextInt(130), 20 + random
// .nextInt(130), 20 + random.nextInt(130)));
// 設(shè)置字體顏色
graphics.setColor(Color.BLACK);
// 設(shè)置字體樣式
//graphics.setFont(new Font("Arial Black", Font.ITALIC, 18));
graphics.setFont(new Font("Times New Roman", Font.BOLD, 24));
// 設(shè)置字符，字符間距，上邊距
System.out.print(resultCode.charAt(i));
graphics.drawString(String.valueOf(resultCode.charAt(i)), (23 * i) + 8, 26);
}
System.out.println("直接輸出："+resultCode);
// 將認(rèn)證碼存入SESSION
request.getSession().setAttribute(SESSION_KEY_OF_RAND_CODE, resultCode);
// 圖象生效
graphics.dispose();
// 輸出圖象到頁面
ImageIO.write(image, "JPEG", response.getOutputStream());
}
/**
* @return 隨機碼
*/
private String exctractRandCode() {
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);
case '2':
return RandCodeImageEnum.LOWER_CHAR.generateStr(randCodeLength);
case '3':
return RandCodeImageEnum.UPPER_CHAR.generateStr(randCodeLength);
case '4':
return RandCodeImageEnum.LETTER_CHAR.generateStr(randCodeLength);
case '5':
return RandCodeImageEnum.ALL_CHAR.generateStr(randCodeLength);
default:
return RandCodeImageEnum.NUMBER_CHAR.generateStr(randCodeLength);
}
}
}
/**
* 描述：根據(jù)給定的數(shù)字生成不同的顏色
* @param 這是以數(shù)字型來設(shè)置顏色，顏色模式是指使用三種基色：紅、綠、藍(lán)，通過三種顏色的調(diào)整得出其它各種顏色，這三種基色的值范圍為0～255
* @param 這是以數(shù)字型來設(shè)置顏色，顏色模式是指使用三種基色：紅、綠、藍(lán)，通過三種顏色的調(diào)整得出其它各種顏色，這三種基色的值范圍為0～255
* @return 描述：返回顏色
*/
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);
return new Color(r, g, b);
}
/**
* 驗證碼輔助類
*/
enum RandCodeImageEnum {
/**
* 混合字符串
*/
ALL_CHAR("0123456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), // 去除小寫的l和o這個兩個不容易區(qū)分的字符；
/**
* 字符
*/
LETTER_CHAR("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"),
/**
* 小寫字母
*/
LOWER_CHAR("abcdefghijklmnopqrstuvwxyz"),
/**
* 數(shù)字
*/
NUMBER_CHAR("0123456789"),
/**
* 大寫字符
*/
UPPER_CHAR("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
/**
* 待生成的字符串
*/
private String charStr;
/**
* @param charStr
*/
private RandCodeImageEnum(final String charStr) {
this.charStr = charStr;
}
/**
* 生產(chǎn)隨機驗證碼
*
* @param codeLength
* 驗證碼的長度
* @return 驗證碼
*/
public String generateStr(final int codeLength) {
final StringBuffer sb = new StringBuffer();
final Random random = new Random();
final String sourseStr = getCharStr();
for (int i = 0; i < codeLength; i++) {
sb.append(sourseStr.charAt(random.nextInt(sourseStr.length())));
}
return sb.toString();
}
/**
* @return the {@link #charStr}
*/
public String getCharStr() {
return charStr;
}
}
}
第四步：編寫公用的工具類
/**
* 項目參數(shù)工具類
*
*/
public class 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");
}
}
第五步：配置sysConfig.properties
randCodeLength=4 randCodeType=5
第六步：到這里就大功告成了，可以試試效果了
相關(guān)文章
Spring?Boot實現(xiàn)文件上傳的兩種方式總結(jié)
應(yīng)用開發(fā)過程中,文件上傳是一個基礎(chǔ)的擴(kuò)展功能,它的目的就是讓大家共享我們上傳的文件資源,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Spring?Boot實現(xiàn)文件上傳的兩種方式,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Java基于連接數(shù)據(jù)庫及顯示數(shù)據(jù)操作,結(jié)合實例形式分析了Java使用jdbc進(jìn)行mysql數(shù)據(jù)庫連接與數(shù)據(jù)讀取、顯示等相關(guān)操作技巧,需要的朋友可以參考下2021-08-08
在 Spring 框架中,Bean 的創(chuàng)建和管理是容器的核心功能之一,了提高性能,Spring 采用了多級緩存機制來減少不必要的對象創(chuàng)建和配置,本文將詳細(xì)介紹 Spring 中 Bean 三級緩存的實現(xiàn)原理,并通過代碼示例幫助你理解這個機制的工作方式,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了Java Optional實踐(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
詳解Java8?CompletableFuture的并行處理用法
Java8中有一個工具非常有用，那就是CompletableFuture，本章主要講解CompletableFuture的并行處理用法，感興趣的小伙伴可以了解一下2022-04-04
SpringBoot如何實現(xiàn)Tomcat自動配置
這篇文章主要介紹了SpringBoot如何實現(xiàn)Tomcat自動配置，幫助大家更好的理解和學(xué)習(xí)使用SpringBoot框架，感興趣的朋友可以了解下2021-03-03
如何使用Idea搭建全注解式開發(fā)的SpringMVC項目
這篇文章主要介紹了如何使用Idea搭建全注解式開發(fā)的SpringMVC項目,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
文章主要介紹了Java中跳出多重循環(huán)的三種方式：使用`break`配合標(biāo)簽、在布爾表達(dá)式中添加判斷變量、以及使用`try-catch`制造異常,每種方式都有具體的代碼示例,并輸出了相應(yīng)的執(zhí)行結(jié)果2025-01-01
這篇文章主要介紹了Java多線程中synchronized的工作原理,本期講解 synchronized 工作的原理以及常見的鎖優(yōu)化機制，相信大家在看完這篇博文后對 synchronized 工作流程有一定的理解,需要的朋友可以參考下2023-07-07
Java開發(fā)環(huán)境配置JDK超詳細(xì)整理(適合新手入門)
這篇文章主要給大家介紹了關(guān)于Java開發(fā)環(huán)境配置JDK超詳細(xì)整理的相關(guān)資料,非常適合新手入門,JDK是Java語言的軟件開發(fā)工具包,主要用于移動設(shè)備、嵌入式設(shè)備上的java應(yīng)用程序,需要的朋友可以參考下2023-11-11