简介
在实现登录功能时，一般为了安全都会设置验证码登录，为了防止某个用户用特定的程序暴力破解方式进行不断的尝试登录。常见验证码分为图片验证码和短信验证码，还有滑动窗口模块和选中指定物体验证方式。下面通过Java来实现图片验证码实例。
效果展示
如上图所示，图片验证码由4个数字和一些彩色的干扰线段组成，点击图片可以更新验证码，只有输入的验证码与图片中的数字一致才能通过登录，否则将会重新刷新验证码，重新输入正确的验证码。
示例代码
1、controller
@RestController
public class ValidateCodeController {
@GetMapping("/getCodeImg")
public void getCodeImage(HttpServletRequest request, HttpServletResponse response, HttpSession httpSession) throws IOException, InterruptedException {
BufferedImage image=new BufferedImage(80, 32, BufferedImage.TYPE_3BYTE_BGR);
//编辑图像
//获取绘图对象
Graphics g=image.getGraphics();
g.setColor(new Color(239, 239, 239));
g.fillRect(0,0,80,32);
//设置字体颜色
g.setColor(new Color(49, 49, 49));
//设置字体
g.setFont(new Font("SimSong",Font.ITALIC,20));
//绘制字符串；
String text="";
for(int i=0;i<4;i++) {
text +=(int) (Math.random()*10);
}
//字符串输出内容，水平起始坐标，垂直起始坐标。
g.drawString(text, 17, 24);
//画线条
for (int i = 0; i < 10; i++) {
g.setColor(new Color((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));
}
//设置session
httpSession.setAttribute("code",text);
//输出图像
//ImageIO.write(image, "png", new FileOutputStream("C:/Users/H/Desktop/"+tet+".png"));
ImageIO.write(image, "png",response.getOutputStream());
g.dispose();
}
//获取保存在session中的验证码
@GetMapping("/getCode")
public String getCode(HttpSession httpSession){
return (String) httpSession.getAttribute("code");
}
}
2、登录页面
<body>
<div class="layui-container" id="container">
<!--登录-->
<div class="login" id="login">
<h3 class="header">登 陆</h3>
<span style="color: red;font-weight: 800">{{msg}}</span>
<form class="layui-form loginForm" th:action="@{/}" method="get" @submit.prevent="check()" ref="export">
<div class="layui-form-item">
<label class="layui-form-label">登录名</label>
<div class="layui-input-block" style="width: 330px">
<input type="text" name="username" required lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input" v-model="userName" @blur="loseFocus()" @focus="getFocus()">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密 码</label>
<div class="layui-input-block" style="width: 330px">
<input type="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" v-model="userPwd" name="password" @focus="getFocus()">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-block" style="width: 200px">
<input type="text" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input" v-model="code" name="code" @blur="validateCode()" @focus="getFocus()">
</div>
<img class="code" src="/getCodeImg" @click="changeCode()" id="codeImg">
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="margin: 0 auto">
<button type="submit" class="layui-btn " lay-submit lay-filter="formDemo">登录</button>
<button type="button" class="layui-btn layui-btn-normal" id="reg">注册</button>
</div>
</div>
</form>
</div>
<!-- 注册-->
<div class="register" id="register">
<h3 class="header">注 册</h3>
<span style="color: red;font-weight: 800">{{msg2}}</span>
<form class="layui-form loginForm" th:action="@{/login}" method="post" @submit.prevent="check()" ref="export">
<div class="layui-form-item">
<label class="layui-form-label">登录名</label>
<div class="layui-input-block" style="width: 330px">
<input type="text" name="username" required lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input" v-model="userName" @blur="loseFocus()" @focus="getFocus()">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密 码</label>
<div class="layui-input-block" style="width: 330px">
<input type="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" v-model="userPwd" name="password" @focus="getFocus()">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block" style="width: 330px">
<input type="password" required lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input" v-model="rePassword" name="rePassword" @focus="getFocus()">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮 箱</label>
<div class="layui-input-block" style="width: 330px">
<input type="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input" v-model="userEmail" name="userEmail" @blur="validateCode()" @focus="getFocus()">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="margin: 0 auto">
<button type="button" class="layui-btn " lay-submit lay-filter="formDemo" @click="addUser()">注册</button>
<button type="reset" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">重置</button>
</div>
</div>
</form>
</div>
</div>
</body>
3、JavaScript
var vm = new Vue({
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="确认密码不正确！"
}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="密码为空！"
return
}
if (vm.code===""){
vm.msg="验证码为空！"
return
}
vm.$http.post('/user/query/'+vm.userName+'/'+vm.userPwd).then((response)=>{
if (response.data.userName!==vm.userName){
vm.msg="密码错误！"
}else if (vm.code!=vm.text){
vm.msg="验证码错误！"
document.getElementById("codeImg").src="/getCodeImg?"+Math.random();
} else {
vm.$refs.export.submit()
}
})
}
}
})