1. 编程思路:
在登录界面中引入使用Hutool工具包生成的验证码对象图片,再将其验证码对象的文本放入session作用域中,与之后用户填写的验证码做对比
2. 书写顺序
1)丶引入依赖
<!-- 糊涂工具包 -->
<!-- https://mvnrepository.com/artifact/cn.hutool/hutool-all -->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.6.3</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
2)丶在servlet层中编写获取验证码对象的controller,将验证码图片输出到浏览器,将验证码文本放入session作用域(可复用,以后直接复制即可)
//让登录页面的验证码图片img src指向此处,用于展示验证码
//由于仅用于展示所以不用跳转,返回void即可
@RequestMapping("image")
public void image(HttpSession session, HttpServletResponse response) throws IOException
{
//创建验证码图片对象
CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(50, 30, 4, 5);
//获取验证码文本
String code = captcha.getCode();
//在控制台打印验证码方便以后自己登陆,直接复制即可。可不写
System.err.println("验证码 : " + code);
//向session中存放验证码文本内容,用于接下来和用户填写的验证码对比
session.setAttribute("imageCode", code);
//创建输出流将验证码图片输出到浏览器上
ServletOutputStream sos = response.getOutputStream();
captcha.write(sos);
}
3)丶在登录页面添加验证码一行,并将img链接指向第二步中生成的图片中(换个图片就是重新跳转到本页面,会丢失之前已经书写的账号密码)
<li>
<span >验证码:</span>
<input type="text" name="code" />
</li>
<li>
<img src="${pageContext.request.contextPath}/user/image.do" alt="无法加载">
<a href="${pageContext.request.contextPath}/user/login_form.jsp" >看不清楚?换个图片
</a>
</li>
4)丶 在登录controller中收参确认用户书写无误
@RequestMapping("selectByEmlAndPwd")
public String selectByEmlAndPwd(User user,HttpSession session,String code) {
User user1 = userService.selectByEmlAndPwd(user);
//先从session作用域中获取正确的的验证码文本
String imageCode = (String) session.getAttribute("imageCode");
//将正确的验证码与用户填写的验证码作比较,这个equals是忽略大小写的
boolean boo = imageCode.equalsIgnoreCase(code);
//如果账号密码以及书写的验证码正确再跳转到查询所有页面,否则重新跳转到登录页面
if (user1 != null&&boo) {
return "redirect:/book/selectBook.do";
} else {
return "redirect:/user/login_form.jsp";
}
}
3. 页面展示