简介
在实现登录功能时，一般为了安全都会设置验证码登录，为了防止某个用户用特定的程序暴力破解方式进行不断的尝试登录。常见验证码分为图片验证码和短信验证码，还有滑动窗口模块和选中指定物体验证方式。下面通过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()
}
})
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
做猪小侠源码的代理，提供一站式服务
如果你不懂得搭建网站或者服务器，小程序，源码之类的怎么办？ 第一通过本站学习各种互联网的技术 第二就是联系客服，我帮帮你搭建（当然要收取部分的费用） 第三成为我们的代理，我们提供整套的服务。