java WEB 表单 验证码问题与解决

项目背景： springMVC +spring+mybatis ，web.xml中dispacher的映射路径/ 。

验证码文件 validatecode.jsp 主要是使用jsp完成一个验证码输出图片，jsp的本质是servlet，所以也可以使用servlet写验证码图片。

验证码文件主要做两件事，第一：形成一个随机的验证码图片流 

第二：将生成的随机验证码先存入session中一份，为用户提交的验证码作对比。

一般情况下，可以直接使用<img src="validatecode.jsp">直接引用图片流生成图片，具体如下：

全端代码：
<form method="post" action="${pageContext.request.contextPath }/user/login">

帐号：<input id="loginform:idInput" type="text" name="username" class="loginFormTdIpt" maxlength="50" />


密码：<input id="loginform:pwdInput" class="loginFormTdIpt" type="password" name="password" value="" />

验证码：<input id="loginform:codeInput" class="loginFormTdIpt" type="text" name="checkcode" title="请输入验证码" />
<img id="loginform:vCode" src="${pageContext.request.contextPath }/validatecode.jsp" onclick="javascript:document.getElementById('loginform:vCode').src='${pageContext.request.contextPath }/validatecode.jsp?'+Math.random();" />
<input type="submit" value="提交" >
</form>

img的src属性直接验证码地址，可以读取到验证码流生成图片
其中onclick时间主要是单机图片之后会重新发送一次请求生成新的验证码，参数为随机数，保证每次请求不使用缓存。

后台代码：

@RequestMapping("toLogon")
public String toLogon(String checkcode,HttpSession session){
String key = (String) session.getAttribute("key");
//比较
return "null";
}

本次我的项目情况：web.xml已经将DispatcherServlet的映射规定为 / 所有请求，所以无法直接使用src属性获取验证码图片。

<servlet>
   <servlet-name>springMVC</servlet-name>
   <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
   <init-param>
     <param-name>contextConfigLocation</param-name>
     <param-value>classpath*:config/spring-mvc.xml</param-value>
   </init-param>
   <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
   <servlet-name>springMVC</servlet-name>
   <url-pattern>/</url-pattern>
 </servlet-mapping>

测试一，使用controller跳转到验证码页面，然后返回个src，失败，访问不到图片流。

后来通过查看css等文件为什么可以直接访问，在spring-mvc.xml的文件里找到了 一个标签 <mvc:resources/>

标签作用：<!-- 配置静态资源，直接映射到对应的文件夹，不被DispatcherServlet处理，3.04新增功能，需要重新设置spring-mvc-3.0.xsd -->

使用方式：<mvc:resources location="/" mapping="/**/*.html" />

添加一个<mvc:resources>标签即可

添加：<mvc:resources location="/" mapping="/jsp/validatecode.jsp" />

此时可以直接使用img的src访问该jsp，生成验证码图片

完成。

验证码的jsp完成代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Random"%>
<%@ page import="java.io.OutputStream"%>
<%@ page import="java.awt.Color"%>
<%@ page import="java.awt.Font"%>
<%@ page import="java.awt.Graphics"%>
<%@ page import="java.awt.image.BufferedImage"%>
<%@ page import="javax.imageio.ImageIO"%>
<%
int width = 80;
int height = 32;
//create the image
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
// set the background color
g.setColor(new Color(0xDCDCDC));
g.fillRect(0, 0, width, height);
// draw the border
g.setColor(Color.black);
g.drawRect(0, 0, width - 1, height - 1);
// create a random instance to generate the codes
Random rdm = new Random();
String hash1 = Integer.toHexString(rdm.nextInt());
// make some confusion
for (int i = 0; i < 50; i++) {
int x = rdm.nextInt(width);
int y = rdm.nextInt(height);
g.drawOval(x, y, 0, 0);
}
// generate a random code
String capstr = hash1.substring(0, 4);
session.setAttribute("key", capstr);
g.setColor(new Color(0, 100, 0));
g.setFont(new Font("Candara", Font.BOLD, 24));
g.drawString(capstr, 8, 24);
g.dispose();
response.setContentType("image/jpeg");
out.clear();
out = pageContext.pushBody();
OutputStream strm = response.getOutputStream();
ImageIO.write(image, "jpeg", strm);
strm.close();
%>