第Java實現(xiàn)圖片驗證碼功能在實現(xiàn)登錄功能時，一般為了安全都會設(shè)置驗證碼登錄，為了防止某個用戶用特定的程序暴力破解方式進(jìn)行不斷的嘗試登錄。常見驗證碼分為圖片驗證碼和短信驗證碼，還有滑動窗口模塊和選中指定物體驗證方式。下面通過Java來實現(xiàn)圖片驗證碼實例。

如上圖所示，圖片驗證碼由4個數(shù)字和一些彩色的干擾線段組成，點擊圖片可以更新驗證碼，只有輸入的驗證碼與圖片中的數(shù)字一致才能通過登錄，否則將會重新刷新驗證碼，重新輸入正確的驗證碼。

1、controller

@RestController

publicclassValidateCodeController{

@GetMapping("/getCodeImg")

publicvoidgetCodeImage(HttpServletRequestrequest,HttpServletResponseresponse,HttpSessionhttpSession)throwsIOException,InterruptedException{

BufferedImageimage=newBufferedImage(80,32,BufferedImage.TYPE_3BYTE_BGR);

//編輯圖像

//獲取繪圖對象

Graphicsg=image.getGraphics();

g.setColor(newColor(239,239,239));

g.fillRect(0,0,80,32);

//設(shè)置字體顏色

g.setColor(newColor(49,49,49));

//設(shè)置字體

g.setFont(newFont("SimSong",Font.ITALIC,20));

//繪制字符串；

Stringtext="";

for(inti=0;ii++){

text+=(int)(Math.random()*10);

}

//字符串輸出內(nèi)容，水平起始坐標(biāo)，垂直起始坐標(biāo)。

g.drawString(text,17,24);

//畫線條

for(inti=0;ii++){

g.setColor(newColor((int)(Math.random()*255),(int)(Math.random()*255),(int)(Math.random()*255)));

g.drawLine((int)(Math.random()*50),(int)(Math.random()*30),(int)(Math.random()*80),(int)(Math.random()*80));

}

//設(shè)置session

httpSession.setAttribute("code",text);

//輸出圖像

//ImageIO.write(image,"png",newFileOutputStream("C:/Users/H/Desktop/"+tet+".png"));

ImageIO.write(image,"png",response.getOutputStream());

g.dispose();

}

//獲取保存在session中的驗證碼

@GetMapping("/getCode")

publicStringgetCode(HttpSessionhttpSession){

return(String)httpSession.getAttribute("code");

}

}

2、登錄頁面

body

divid="container"

!--登錄--

divid="login"

h3登陸/h3

span{{msg}}/span

formth:action="@{/}"method="get"@submit.prevent="check()"ref="export"

div

label登錄名/label

div

inputtype="text"name="username"required

lay-verify="required"placeholder="請輸入登錄名"autocomplete="off"v-model="userName"@blur="loseFocus()"@focus="getFocus()"

/div

/div

div

label密碼/label

div

inputtype="password"required

lay-verify="required"placeholder="請輸入密碼"autocomplete="off"v-model="userPwd"name="password"@focus="getFocus()"

/div

/div

div

label驗證碼/label

div

inputtype="text"required

lay-verify="required"placeholder="請輸入驗證碼"autocomplete="off"v-model="code"name="code"@blur="validateCode()"@focus="getFocus()"

/div

imgsrc="/getCodeImg"@click="changeCode()"id="codeImg"

/div

div

div

buttontype="submit"lay-submitlay-filter="formDemo"登錄/button

buttontype="button"id="reg"注冊/button

/div

/div

/form

/div

!--

注冊--

divid="register"

h3注冊/h3

span{{msg2}}/span

formth:action="@{/login}"method="post"@submit.prevent="check()"ref="export"

div

label登錄名/label

div

inputtype="text"name="username"required

lay-verify="required"placeholder="請輸入登錄名"autocomplete="off"v-model="userName"@blur="loseFocus()"@focus="getFocus()"

/div

/div

div

label密碼/label

div

inputtype="password"required

lay-verify="required"placeholder="請輸入密碼"autocomplete="off"v-model="userPwd"name="password"@focus="getFocus()"

/div

/div

div

label確認(rèn)密碼/label

div

inputtype="password"required

lay-verify="required"placeholder="請再次輸入密碼"autocomplete="off"v-model="rePassword"

name="rePassword"@focus="getFocus()"

/div

/div

div

label郵箱/label

div

inputtype="email"required

lay-verify="required"placeholder="請輸入郵箱"autocomplete="off"v-model="userEmail"name="userEmail"@blur="validateCode()"@focus="getFocus()"

/div

/div

div

div

buttontype="button"lay-submitlay-filter="formDemo"@click="addUser()"注冊/button

buttontype="reset"lay-submitlay-filter="formDemo"重置/button

/div

/div

/form

/div

/div

/body

3、JavaScript

varvm=newVue({

el:'#container',

data:{

userName:'',

userPwd:'',

userEmail:'',

rePassword:'',

msg:'',

msg2:'',

code:'',

text:''

},

methods:{

changeCode:function(){

//如果src里的圖片鏈接不變的話，會直接用緩存的圖片，加上Math.random()是為了讓src的圖片鏈接改變重新去渲染圖片

document.getElementById("codeImg").src="/getCodeImg"+Math.random();

},

validateCode:function(){

vm.$http.get('/getCode').then((response)={

this.text=response.data

})

},

addUser:function(){

if(vm.userPwd!==vm.rePassword){

vm.msg2="確認(rèn)密碼不正確！"

}else{

vm.$http.post('/user/add/'+vm.userName+'/'+vm.userPwd+'/'+vm.userEmail).then((response)={

window.location.href='/'

})

}

},

loseFocus:function(){

vm.$http.get('/user/queryUserByName/'+vm.userName).then((response)={

if(response.data.userName!==vm.userName){

vm.msg="該用戶名不存在！"

}

})

},

getFocus:function(){

vm.msg=""

},

check:function(){

if(vm.userName===""){

vm.msg="用戶名為空！"

return

}

if(vm.userPwd===""){

vm.msg="密碼為空！"