简单Maven的Web项目之验证码(普通篇)

一：用Maven命令创建一个Web项目

创建命令如下：

mvn archetype:generate -DgroupId=com.gao.web -DartifactId=VerifyCode -DarchetypeArtifactId=maven-archetype-webapp

• 首先配置好maven环境，之前的博客有说环境配置问题，然后在命令行运行上述命令，成功后截图如下

• 然后运行下面命令将生成的maven项目转化为elipse能识别的项目

mvn -Dwtpversion=1.0 eclipse:eclipse

二：开始编写生成验证码的代码

• 首先将项目导入elipse中
  生成验证码的Servlet代码如下：

package com.niu.gao;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**  
 * @Description: (生成验证码Servlet)     
 * @author：relieved 
 * @date：2015-7-25
 */
public class GenerateCodeServlet extends HttpServlet {
    /**
     * serialVersionUID
     */
    private static final long serialVersionUID = 1L;
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //图像数据缓冲区  构造函数 第一个参数为宽 第二个参数为高  第三个为图片类型
        BufferedImage bi = new BufferedImage(100, 25, BufferedImage.TYPE_INT_RGB);
        //绘制图片
        Graphics grap = bi.getGraphics();
        //设置字体
        Font f = new Font("宋体",Font.ITALIC ,20); 
        grap.setFont(f);
        //背景颜色
        Color color = new Color(200,160,255);
        //设置背景颜色
        grap.setColor(color);
        grap.fillRect(0, 0, 100, 25);//坐标  绘制图片宽、高

        //验证码内容
        char[] content = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
        Random ran = new Random();//根据随机数来取组合验证码内容
        int len = content.length,index;
        StringBuffer generateCode = new StringBuffer();//存储随机生成的验证码
        //生成6位的验证码
        for(int i = 0;i<6;i++){
            index = ran.nextInt(len);
            //设置验证码颜色
            grap.setColor(new Color(ran.nextInt(100), ran.nextInt(180),ran.nextInt(255)));
            //将字符画在画板上
            grap.drawString(content[index]+"", i*16+3, 19);
            generateCode.append(content[index]);
        }
        //将生成的验证码放在session中以便之后验证用到
        req.getSession().setAttribute("verifyCode", generateCode.toString());
        //将生成的验证码图片输出
        ImageIO.write(bi, "PNG", resp.getOutputStream());
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        this.doGet(req, resp);
    }

}
验证验证码的Servlet代码如下：

package com.niu.gao;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* @Description: (验证验证码Servlet)
* @author：relieved
* @date：2015-7-25
*/
public class VerifyCodeServlet extends HttpServlet {
/**
* serialVersionUID
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String codeValue = req.getParameter(“verifyCode”);
String verifyValue = req.getSession().getAttribute(“verifyCode”).toString();
resp.setCharacterEncoding(“GBK”);
resp.setContentType(“text/html”);
resp.getWriter().write(““);
if(codeValue!=null&&codeValue!=”“&&verifyValue!=null&&verifyValue!=”“&&codeValue.equalsIgnoreCase(verifyValue)){
resp.getWriter().write(“验证成功!”);
}else{
resp.getWriter().write(“验证失败!”);
}
resp.getWriter().write(“
再试一次“);
resp.getWriter().write(““);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doGet(req, resp);
}

}

web.xml文件配置如下

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <display-name>VerifyCode</display-name>
     <servlet>
        <servlet-name>verifyCode</servlet-name>
        <servlet-class>com.niu.gao.VerifyCodeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>verifyCode</servlet-name>
        <url-pattern>/verifyCode/submit.do</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>generateCode</servlet-name>
        <servlet-class>com.niu.gao.GenerateCodeServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>generateCode</servlet-name>
        <url-pattern>/generate/verifyCode.do</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

jsp页面如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>VerifyCode</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
        var path="<%=path%>";
        $( document ).ready(function() {
            $("#codeImg").on("click",function(){
                $('#codeImg').prop('src',path+'/generate/verifyCode.do?nocache='+new Date().getTime());
            });
        });
    </script>
  </head>
<body style="text-align: center;">
<h2>Hello World!</h2>
<form action="<%=path%>/verifyCode/submit.do" method="post" autocomplete="false">
    <span style="margin: 10px 0 0 10px;vertical-align: baseline;">
        请输入验证码：<input name="verifyCode" type="text" />
    </span>
    <img id="codeImg" style="vertical-align: bottom;margin: 10px 0 0 10px;cursor: pointer;"  alt="验证码" src="<%=path%>/generate/verifyCode.do">
    <input type="submit" value="验证">
</form>
</body>
</html>

效果图如下

验证验证码失败

验证验证码成功