第一步:进行pom.xml的依赖配置
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
<exclusions>
<exclusion>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
</exclusion>
</exclusions>
</dependency>
第二步:首先在我们的web.xml里面进行配置依赖包
导入 KaptchaServlet 调用开源的验证码生成的API
<servlet>
<servlet-name>kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<init-param>
<!-- 验证码是否由边框 -->
<param-name>kaptcha.border</param-name>
<param-value>no</param-value>
</init-param>
<init-param>
<!-- 验证码的长度 设置wei4-->
<param-name>kaptcha.textproducer.char.length</param-name>
<param-value>4</param-value>
</init-param>
<init-param>
<!-- 验证码的生成的图片的文本字符选择库-->
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</param-value>
</init-param>
<init-param>
<!-- 红绿蓝三种颜色生成图片 代表三种颜色的数值 这里生成的位灰色的-->
<param-name>kaptcha.background.clear.to</param-name>
<param-value>211,229,237</param-value>
</init-param>
<init-param>
<!-- session.setAttribute("captcha","验证码") -->
<!-- 这一步将验证码图片里的字母存储在了session中 这样后端可以取到数据 -->
<param-name>kaptcha.session.key</param-name>
<param-value>captcha</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>kaptcha</servlet-name>
<url-pattern>/captcha</url-pattern>
</servlet-mapping>
第三步:进行我们的页面的登录验证码的设置 input表单的内容
<img id="cap" src="${pageContext.request.contextPath}/captcha" style="width:100px"onclick="refresh();" />
<script>
function refresh(){
var img=document.getElementById("cap");
img.src="${pageContext.request.contextPath}/captcha?"+new Date().getTime();
}
</script>
<div class="input">
<span>验证码<label style="color:red;">*</label></span>
<input type="text" name="captcha" placeholder="请输入验证码" required="required">
</div>
上述的src="${pageContext.request.contextPath}/captcha"是请求kaptchaServlet的验证码去
我们只需要点击图片就可以刷新验证码
<script> function refresh(){ var img=document.getElementById("cap"); img.src="${pageContext.request.contextPath}/captcha?"+new Date().getTime(); } </script>
上述刷新功能由此script实现即可。
第四步:usercontroller实现登录验证码的验证
<init-param> <!-- session.setAttribute("captcha","验证码") --> <!-- 这一步将验证码图片里的字母存储在了session中 这样后端可以取到数据 --> <param-name>kaptcha.session.key</param-name> <param-value>captcha</param-value> </init-param>
验证码的生成的图片的文本值key存储在这里面kaptcha.session.key
只需要我们在controller取出key做与用户输入的值是否相等匹配即可
@Autowired
private UserService userService;
@RequestMapping("/login")
public String login(User tempUser, HttpServletRequest request, HttpSession session)
{
//验证码的验证查看
String captchasession = (String) session.getAttribute("captcha");
String captchaform=request.getParameter("captcha");
System.out.println("captchasession-------"+captchasession+"\n");
System.out.println("captchaform----------"+captchaform+"\n");
if(!captchasession.equalsIgnoreCase(captchaform))
{
request.setAttribute("failMsg","验证码不对,请点击图片刷新重新输入");
return "user_login";
}
String path="";
User user=userService.login(tempUser.getUname());
if(user==null)
{
request.setAttribute("failMsg","用户不存在!");
return "user_login";
}
if(tempUser.getUpwd().equals(user.getUpwd()))
{
session.setAttribute("user", user);
System.out.println(user);
request.setAttribute("msg","登录成功!");
return "redirect:/index.action";
}else{
request.setAttribute("failMsg","密码错误!");
return "user_login";
}
}
结束了,感谢支持。