spring mvc番外篇(四):用spring mvc生成验证码

4.1简介

通常的登录注册系统都会要求输入验证码以区别用户行为和计算机程序行为来防止恶意注册、暴力破解密码等。

Java Web开发中通常用 Java 的 Graphics 绘制验证码图片然后用ImageIO输出为Jpg等格式的图片再通过Session来验证输入内容与验证码内容的一致性。

4.2 验证码程序的开发(以登录为例)

步骤一:在myeclipse8.6中新建web工程mvcCheckCode，拷贝如下包到lib目下：

说明：commons-logging-1.1.3.jar是日志包，在下载的struts2官方包里面可以找到。其它的包都在spring3.2.2版本官方包里面找到。

     spring-aop-3.2.2.RELEASE.jar：与Aop 编程相关的包

spring-beans-3.2.2.RELEASE.jar：提供了简捷操作bean 的接口

spring-context-3.2.2.RELEASE.jar：构建在beans 包基础上，用来处理资源文件及国际化。

spring-core-3.2.2.RELEASE.jar：spring 核心包

spring-web-3.2.2.RELEASE.jar：web 核心包，提供了web 层接口

spring-webmvc-3.2.2.RELEASE.jar：web 层的一个具体实现包，DispatcherServlet也位于此包中。

注意：以上包是springmvc开发所需要的最基本包，不能再精简。

 

步骤二:编写web.xml 配置文件，代码如下：

=================================web.xml========================

<?xml version="1.0"encoding="UTF-8"?>

<web-app version="2.5"

    xmlns="http://java.sun.com/xml/ns/javaee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

 

  <!-- 配置spring的字符集过滤 -->

  <filter>

    <filter-name>encode</filter-name>

    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

    <init-param>

      <param-name>encoding</param-name>

      <param-value>UTF-8</param-value>

    </init-param>

    <init-param>

    <param-name>forceEncoding</param-name>

    <param-value>true</param-value>

    </init-param>

  </filter>

  <filter-mapping>

    <filter-name>encode</filter-name>

    <url-pattern>/*</url-pattern>

  </filter-mapping>

 

 

  <servlet>

    <servlet-name>springmvc</servlet-name>

    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <load-on-startup>1</load-on-startup>

  </servlet>

 

  <servlet-mapping>

    <servlet-name>springmvc</servlet-name>

    <url-pattern>*.do</url-pattern>

  </servlet-mapping>

 

  <welcome-file-list>

    <welcome-file>Login.jsp</welcome-file>

  </welcome-file-list>

</web-app>

================================================================

 

步骤三: 在web-inf目录下建立springmvc-servlet.xml的配置文件,它的命名规则{servlet-name}-servlet.xml ，注意下划线处。当DispatcherServlet启动的时候，它会默认根据此规则到web-inf目录下去找这个xml配置文件。

=========================springmvc-servlet.xml==========================

<?xml version="1.0"encoding="UTF-8" ?>

<!DOCTYPE beans PUBLIC "-//SPRING//DTDBEAN//EN"

"http://www.springframework.org/dtd/spring-beans.dtd">

<beans>   

    <bean id="simpleUrlHandlerMapping" class="org.springframework

.web.servlet.handler.SimpleUrlHandlerMapping">

       <property name="mappings">

           <props>

              <prop key="/CreateCode.do">createCodeControl</prop>

           </props>

       </property>

    </bean>

   

    <bean id="jspViewResolver"  class="org.springframework

.web.servlet.view.InternalResourceViewResolver">

       <property name="prefix"value="/"></property>

       <property name="suffix"value=".jsp"></property>

    </bean>

    <bean id="createCodeControl" class="com.stu.controls.CheckCodeControl"></bean>

</beans>

==========================================================

注意：<!DOCTYPE beans PUBLIC"-//SPRING//DTD BEAN//EN"

"http://www.springframework.org/dtd/spring-beans.dtd">

这段文档类型定义是不需要我们记的，在如图所示的地方可以找到。

 

步骤四:编写控制器CheckCodeControl.java，如下所示：

============================ CheckCodeControl.java===================

package com.stu.controls;

 

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics;

import java.awt.image.BufferedImage;

import java.util.Random;

 

import javax.imageio.ImageIO;

import javax.servlet.ServletOutputStream;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

 

importorg.springframework.web.servlet.ModelAndView;

import org.springframework.web.servlet.mvc.Controller;

 

public class CheckCodeControlimplements Controller{

    private int width = 65;// 设置图片的宽度

    private int height = 25;// 设置图片的高度

 

    private char[] generateCheckCode() {

       String chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";

       char[] rands = new char[4];

       for (int i = 0; i < 4; i++) {

           int rand = (int) (Math.random() * 36);

           rands[i] = chars.charAt(rand);

       }

       return rands;

    }

    public ModelAndView handleRequest(HttpServletRequest request,

           HttpServletResponse response) throws Exception{

       HttpSession session = request.getSession();

       response.setContentType("image/jpg");

       Random random = new Random();

       //相当于画纸

       BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); 

        //得到画笔 

        Graphics g = image.getGraphics(); 

        //设置背景色 ,rgb三原色,200以上颜色较淡,适合做背景

        g.setColor(newColor(200+random.nextInt(50),

            200+random.nextInt(50),200+random.nextInt(50))); 

        //设置图像大小

        g.fillRect(0,0,width,height); 

        //设置字体  Tines Nev Roman

        g.setFont(new Font("黑体",Font.ITALIC,18)); 

        //随机产生认证码 

        char[] sRands=generateCheckCode();

        for(int i = 0; i <sRands.length; i++){ 

        //设置内容的颜色

            g.setColor(newColor(20+random.nextInt(110),

                 20+random.nextInt(110),20+random.nextInt(110))); 

            //将认证码显示到图象中

           g.drawString(sRands[i]+"",13*i+6,19);

        } 

        //收工,图像生效 

        g.dispose(); 

        //获得输出流

        ServletOutputStreamsos=response.getOutputStream();

        //输出图像到页面 

        ImageIO.write(image,"JPG",sos); 

        sos.close();

        session.setAttribute("rCode",new String(sRands));

       return null;

    }

 

}

====================================================================

知识讲解：这里的控制器并不需要返回ModelAndView对象，只需要将生成的图片以流的形式写入到ServletOutputStream对象中即可。

 

步骤五:在webroot根目录下编写Login.jsp,如下所示:

================================Login.jsp==========================

<%@ page language="java" import="java.util.*"pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%

String path = request.getContextPath();

String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>用户登录</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

<style type="text/css">

    #show{margin:auto;width:400px;}

    #showErr{color: red;}

    .code{ vertical-align: middle;}

    #imgCode{vertical-align: middle;}

</style>

<script src="DatePicker/WdatePicker.js"type="text/javascript"></script>

<script type="text/javascript">

    functionchangeCode(){

       varimgTag=document.getElementById("imgCode");

       vartimenow = new Date().getMilliseconds();

       imgTag.src="CreateCode.do?id="+timenow;  //保证每一次请求都是一个新的请求

    }

</script>

</head>

 

<body>

<div id="show">

<h2>用户登陆</h2>

<form action="Login.do"method="post">

    <c:if test="${not empty errMsg}">

    <div id="showErr"><c:out value="${errMsg}"/></div>

    </c:if>

    <table border="1px"cellpadding="0" cellspacing="0">

    <tr><td>请输入用户名:</td><td><input class="tt"type="text" name="userName"/></td></tr>

    <tr><td>请输入密码:</td><td><input class="tt"type="password" name="passWord"/></td></tr>

    <tr><td>请输入验证码:</td><td><input class="code"type="text" name="inputCode"/>&nbsp;

                      <img src="CreateCode.do" id="imgCode" onclick="changeCode();"/></td></tr>

    <tr><td>请输入出生日期:</td><td>

        <input type="text"name="myDate" onfocus="WdatePicker();"readonly="readonly" /></td></tr>

    <tr><td colspan="2" align="center"><input type="submit" value="登陆" />&nbsp;

        <input type="reset"value="重置"/></td></tr>

    </table>

</form>

</div>

</body>

</html>

==================================================================

步骤六: 启动tomcat，发布项目，在地址栏输入 http://localhost:8080/mvcCheckCode 进行测试，效果如下所示: