苏州大型网站建设公司,搜索引擎下载入口,网站数据库连接错误,wordpress j建站目录 1. 功能展示
2. 前段代码
3. 后端代码 1. 功能展示
在登录页面添加验证码登录
1. 检测到没有输入验证码或者输入的验证码错误时,进行弹窗提示.并且刷新当前验证码图片
2. 点击验证码进行刷新 2. 前段代码
1. 添加验证码标签,在密码的下面,在login.html进行修改
主要…目录 1. 功能展示
2. 前段代码
3. 后端代码 1. 功能展示
在登录页面添加验证码登录
1. 检测到没有输入验证码或者输入的验证码错误时,进行弹窗提示.并且刷新当前验证码图片
2. 点击验证码进行刷新 2. 前段代码
1. 添加验证码标签,在密码的下面,在login.html进行修改
主要改动如下: 2. 在提交的函数中加入验证码的信息 3. 构造Ajax请求的时候,将验证码也插入到后端,并且判断后端的返回值,当code为-1的时候,表示验证码输入错误. 完整的login.html 如下所示:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title登陆页面/titlelink relstylesheet hrefcss/conmmon.csslink relstylesheet hrefcss/login.css!-- 引入jQuery --script srcjs/jquery.min.js/script
/headbody!-- 导航栏 --div classnavimg srcimg/logo2.jpg altspan classtitle我的博客系统/span!-- 用来占据中间位置 --span classspacer/spana hrefblog_list.html主页/aa hrefblog_edit.html写博客/aa hrefreg.html注册/a!-- a href#注销/a --/div!-- 版心 --div classlogin-container!-- 中间的登陆框 --div classlogin-dialogh3登nbsp;nbsp;录/h3div classrowspan用户名/spaninput typetext idusername/divdiv classrowspan密nbsp;nbsp;nbsp;nbsp;码/spaninput typepassword idpassword/divdiv classrowspan验证码/spaninput typetext idcaptcha/divdiv classrowimg idcaptchaImg src/user/captcha onclickrefresh() altCaptcha/divdiv classrowbutton idsubmit onclickmysub()提交/button/div/div/divscriptfunction mysub(){// 1. 非空校验// 页面加载时生成验证码// 点击验证码图片时刷新验证码var username jQuery(#username);var password jQuery(#password);var captcha jQuery(#captcha);if(username.val() ){alert(请输入用户名!);username.focus();return;}if(password.val() ){alert(请输入密码!);password.focus();return;}if(captcha.val() ){alert(请输入验证码!);captcha.focus();refresh();return;}// 2. 构造ajax请求jQuery.ajax({url:/user/login,type:post,data:{username:username.val(),password:password.val(),captcha:captcha.val()},success: function(result){if(result ! null result.code 200 result.data ! null){// 执行成功 location.href/myblog_list.html;}else if(result ! null result.code -1){// 验证码输入错误alert(验证码输入错误,请重新输入!);refresh();}else{alert(用户名或密码错误,请重新登录!);}}})}function refresh() {document.getElementById(captchaImg).src /user/captcha?time new Date().getTime();}/script
/body/html
3. 后端代码 我们使用hutool框架进行实现后端验证码的构造
1. 在pom.xml引入hutool的环境依赖
dependencygroupIdcn.hutool/groupIdartifactIdhutool-all/artifactIdversion5.1.0/version/dependency
2. 在Usercontroller.java 中进行添加代码
先实例化LineCaptcha对象,用来获取验证码,同时获取日志对象,在控制台打印验证码日志. 在usercontroller中添加下述代码,用来产生随机数字验证码
/*** 生成验证码* param response*/RequestMapping(/captcha)public void captcha(HttpServletResponse response) {// 随机生成 4 位验证码RandomGenerator randomGenerator new RandomGenerator(0123456789, 4);// 定义图片的显示大小lineCaptcha CaptchaUtil.createLineCaptcha(100, 30);response.setContentType(image/jpeg);response.setHeader(Pragma, No-cache);try {// 调用父类的 setGenerator() 方法设置验证码的类型lineCaptcha.setGenerator(randomGenerator);// 输出到页面lineCaptcha.write(response.getOutputStream());// 打印日志logger.info(生成的验证码:{}, lineCaptcha.getCode());// 关闭流response.getOutputStream().close();} catch (IOException e) {e.printStackTrace();}}
3. 登录中添加验证码的验证
