Java后端產(chǎn)生驗(yàn)證碼后臺(tái)驗(yàn)證功能的實(shí)現(xiàn)代碼
直接跳severlet在java后臺(tái)生成驗(yàn)證碼:
@RequestMapping(value="yzm.action")
public void Yzm(HttpSession session,HttpServletResponse resp){
// 驗(yàn)證碼圖片的寬度。
int width = 60;
// 驗(yàn)證碼圖片的高度。
int height = 20;
// 驗(yàn)證碼字符個(gè)數(shù)
int codeCount = 4;
int x = 0;
// 字體高度
int fontHeight;
int codeY;
char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
x = width / (codeCount + 1);
fontHeight = height - 2;
codeY = height - 4;
BufferedImage buffImg = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
// 創(chuàng)建一個(gè)隨機(jī)數(shù)生成器類
Random random = new Random();
// 將圖像填充為白色
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);
// 創(chuàng)建字體,字體的大小應(yīng)該根據(jù)圖片的高度來定。
Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);
// 設(shè)置字體。
g.setFont(font);
// 畫邊框。
// g.setColor(Color.BLACK);
// g.drawRect(0, 0, width - 1, height - 1);
// 隨機(jī)產(chǎn)生160條干擾線,使圖象中的認(rèn)證碼不易被其它程序探測(cè)到。
g.setColor(Color.BLACK);
for (int i = 0; i < 1; i++) {
int x2 = random.nextInt(width);
int y2 = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x2, y2, x + xl, y2 + yl);
}
// randomCode用于保存隨機(jī)產(chǎn)生的驗(yàn)證碼,以便用戶登錄后進(jìn)行驗(yàn)證。
StringBuffer randomCode = new StringBuffer();
int red = 0, green = 0, blue = 0;
// 隨機(jī)產(chǎn)生codeCount數(shù)字的驗(yàn)證碼。
for (int i = 0; i < codeCount; i++) {
// 得到隨機(jī)產(chǎn)生的驗(yàn)證碼數(shù)字。
String strRand = String.valueOf(codeSequence[random.nextInt(36)]);
// 產(chǎn)生隨機(jī)的顏色分量來構(gòu)造顏色值,這樣輸出的每位數(shù)字的顏色值都將不同。
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
// 用隨機(jī)產(chǎn)生的顏色將驗(yàn)證碼繪制到圖像中。
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i + 1) * x, codeY);
// 將產(chǎn)生的四個(gè)隨機(jī)數(shù)組合在一起。
randomCode.append(strRand);
}
// 將四位數(shù)字的驗(yàn)證碼保存到Session中。
session.setAttribute("validateCode", randomCode.toString());
ServletOutputStream sos;
try {
sos = resp.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
jsp顯示頁(yè)面的代碼,點(diǎn)擊圖片刷新
<td><img id="img" src="yzm.action"/>${validateCode}</td>
<td><input type="text" name="yzma"/><br/></td>
$("#img").click(function(){
$(this).attr("src","yzm.action?"+new Date().getTime());
});
將文本框中的值傳入后臺(tái),與最開始生成驗(yàn)證碼的隨機(jī)數(shù)進(jìn)行比較即可完成驗(yàn)證。

頁(yè)面上拿到的session的值老是比驗(yàn)證碼晚一步,所以采取后臺(tái)進(jìn)行驗(yàn)證。這里我也不知道什么原因,望小伙伴們告知。。。
另一種思路,后臺(tái)生成隨機(jī)數(shù),前端生成畫布,用ajax拿隨機(jī)數(shù)
//后臺(tái)只生成隨機(jī)數(shù)
@RequestMapping(value="random.action")
public void findRandom (HttpServletResponse response) throws IOException{
// 驗(yàn)證碼字符個(gè)數(shù)
int codeCount = 4;
char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
// 創(chuàng)建一個(gè)隨機(jī)數(shù)生成器類
Random random = new Random();
// randomCode用于保存隨機(jī)產(chǎn)生的驗(yàn)證碼,以便用戶登錄后進(jìn)行驗(yàn)證。
StringBuffer randomCode = new StringBuffer();
for (int i = 0; i < codeCount; i++) {
// 得到隨機(jī)產(chǎn)生的驗(yàn)證碼數(shù)字。
String strRand = String.valueOf(codeSequence[random.nextInt(36)]);
// 將產(chǎn)生的四個(gè)隨機(jī)數(shù)組合在一起。
randomCode.append(strRand);
}
PrintWriter out = response.getWriter();
out.print(randomCode);
}
jsp,jq,js代碼
<body>
<canvas id="canvas" width="70" height="34"></canvas>
<a href="javascript:;" rel="external nofollow" id="img" class="pull-right" style="line-height: 34px;text-indent: 10px;">換一張</a>
<input type="text" class="form-control" id="yzms" name="yzms" readonly = "readonly" style="display:none" >
</body>
<script type="text/javascript">
$.ajax({
url:"random.action",
success:function(k){
console.log(k)
$("#yzms").attr("value",k);
drawPic();
}
})
$("#img").on("click",function(){
var _this=$(this)
$.ajax({
url:"random.action",
success:function(k){
console.log(k)
$("#yzms").attr("value",k);
drawPic();
}
})
})
/**生成一個(gè)隨機(jī)數(shù)**/
function randomNum(min,max){
return Math.floor( Math.random()*(max-min)+min);
}
/**生成一個(gè)隨機(jī)色**/
function randomColor(min,max){
var r = randomNum(min,max);
var g = randomNum(min,max);
var b = randomNum(min,max);
return "rgb("+r+","+g+","+b+")";
}
/**繪制驗(yàn)證碼圖片**/
function drawPic(){
var canvas=document.getElementById("canvas");
var width=canvas.width;
var height=canvas.height;
var ctx = canvas.getContext('2d');
ctx.textBaseline = 'bottom';
/**繪制背景色**/
ctx.fillStyle = randomColor(180,240); //顏色若太深可能導(dǎo)致看不清
ctx.fillRect(0,0,width,height);
/**繪制文字**/
/* for(var i=0; i<4; i++){ */
var txt = $("#yzms").attr("value");
ctx.fillStyle = randomColor(50,160); //隨機(jī)生成字體顏色
ctx.font = randomNum(15,20)+'px SimHei'; //隨機(jī)生成字體大小
var x = 20;
var y = randomNum(20,30);
var deg = randomNum(-45, 45);
//修改坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
ctx.translate(x,y);
ctx.rotate(deg*Math.PI/180);
ctx.fillText(txt, 0,0);
//恢復(fù)坐標(biāo)原點(diǎn)和旋轉(zhuǎn)角度
ctx.rotate(-deg*Math.PI/180);
ctx.translate(-x,-y);
/* } */
/* /**繪制干擾線**/
for(var i=0; i<8; i++){
ctx.strokeStyle = randomColor(40,180);
ctx.beginPath();
ctx.moveTo( randomNum(0,width), randomNum(0,height) );
ctx.lineTo( randomNum(0,width), randomNum(0,height) );
ctx.stroke();
}
/**繪制干擾點(diǎn)**/
/* for(var i=0; i<100; i++){
ctx.fillStyle = randomColor(0,255);
ctx.beginPath();
ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);
ctx.fill();
} */
}
效果展示:

總結(jié)
以上所述是小編給大家介紹的Java后端產(chǎn)生驗(yàn)證碼后臺(tái)驗(yàn)證功能的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- 詳解Java后端優(yōu)雅驗(yàn)證參數(shù)合法性
- java 后端生成pdf模板合并單元格表格的案例
- Java后端面試題最新整理
- Java后端Cookie實(shí)現(xiàn)(時(shí)間戳)代碼實(shí)例
- 微信小程序獲取手機(jī)號(hào),后端JAVA解密流程代碼
- 微信小程序后端(java)開發(fā)流程的詳細(xì)步驟
- 關(guān)于java后端的詳解
- 一個(gè)Java程序猿眼中的前后端分離以及Vue.js入門(推薦)
- 詳解使用IntelliJ IDEA新建Java Web后端resfulAPI模板
- Java后端WebSocket的Tomcat實(shí)現(xiàn)
- JAVA后端應(yīng)該學(xué)什么技術(shù)
相關(guān)文章
JavaWeb項(xiàng)目中springmvc和tomcat對(duì)靜態(tài)文件的處理
這篇文章主要介紹了JavaWeb項(xiàng)目中springmvc和tomcat對(duì)靜態(tài)文件的處理 的相關(guān)資料,需要的朋友可以參考下2016-07-07
SpringBoot配置MongoDB多數(shù)據(jù)源的方法步驟
這篇文章主要介紹了SpringBoot配置MongoDB多數(shù)據(jù)源的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
SpringBoot項(xiàng)目中日志管理與調(diào)優(yōu)指南
在 Spring Boot 開發(fā)過程中,日志管理是開發(fā)者必須掌握的重要技能之一,合理的日志配置不僅能幫助開發(fā)者追蹤應(yīng)用程序的執(zhí)行流程、定位問題,還能提升應(yīng)用程序的可維護(hù)性,本文將詳細(xì)探討 Spring Boot 項(xiàng)目中日志管理的常見問題、解決方案以及最佳實(shí)踐2024-10-10
Springboot項(xiàng)目的搭建教程(分離出common父依賴)
這篇文章主要介紹了Springboot項(xiàng)目的搭建教程(分離出common父依賴),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01
Spring 整合 MyBatis的實(shí)現(xiàn)步驟
SpringMVC 本來就是 Spring 框架的一部分,這兩者無須再做整合,所以 SSM 整合的關(guān)鍵就是Spring對(duì)MyBatis的整合,三大框架整合完成后,將以 Spring 為核心,調(diào)用有關(guān)資源,高效運(yùn)作,這篇文章主要介紹了 Spring 整合 MyBatis的實(shí)現(xiàn)步驟,需要的朋友可以參考下2023-02-02
springboot添加多數(shù)據(jù)源的方法實(shí)例教程
這篇文章主要給大家介紹了關(guān)于springboot添加多數(shù)據(jù)源方法的相關(guān)資料,在實(shí)際開發(fā)中經(jīng)??赡苡龅皆谝粋€(gè)應(yīng)用中可能要訪問多個(gè)數(shù)據(jù)庫(kù)多的情況,需要的朋友可以參考下2023-09-09
Java 遍歷取出Map集合key-value數(shù)據(jù)的4種方法
這篇文章主要介紹了Java 遍歷取出Map集合key-value數(shù)據(jù)的4種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
詳解SpringBoot?Start組件開發(fā)之記錄接口日志信息
這篇文章主要為大家介紹了SpringBoot-Start組件開發(fā)之記錄接口日志信息詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04

