JavaWeb小工程实战演练（一）

   好久都没写过博客了，本来想着一边学习，一边把学习过程中的问题记录下来写成博客呢，
应该是没时间吧。。为自己懒辩护一下 ԅ(¯﹃¯ԅ) ，刚好暑假来临了，通过写这一篇博客，顺便总结一下这个学年的一些收获。

大一下半学期我主要干了两件事，其一是编写了一个聊天室的GUI小程序，其二呢就是写了这个JavaWeb小项目，应该是在开学的三四周开始接触的JavaWeb，所以到现在也只是简单地实现一些功能，等我把JavaWeb学完了，在做一个像样的项目，不废话了，先介绍一下这个小项目的具体信息吧。

目的： 编写一个具有增删改查的用户管理系统
用到的工具：IDEA、Navicat、MySQL、Tomcat、Chrome、JDK1.8等。
使用的技术：Servlet、JDBC、Druid连接池、HTML+CSS+JS、BootStrap、JSP等。
设计模式：MVC

网站架构

数据库表



POJO

User类

package cn.hehewocao.POJO;

import java.util.Date;

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String sex;
    private String birthday;
    private String phone;
    private String email;
    private String address;
    private String occupation;
    private String describes;

    public User() {
    }

    public User(Integer id, String username, String password, String nickname, String sex, String birthday, String phone, String email, String address, String occupation, String describes) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.nickname = nickname;
        this.sex = sex;
        this.birthday = birthday;
        this.phone = phone;
        this.email = email;
        this.address = address;
        this.occupation = occupation;
        this.describes = describes;
    }

    public User(int id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public User(String username, String password, String phone, String email) {
        this.username = username;
        this.password = password;
        this.phone = phone;
        this.email = email;
    }

    public Integer getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getOccupation() {
        return occupation;
    }

    public void setOccupation(String occupation) {
        this.occupation = occupation;
    }

    public String getDescribes() {
        return describes;
    }

    public void setDescribes(String describe) {
        this.describes = describe;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", nickname='" + nickname + '\'' +
                ", sex='" + sex + '\'' +
                ", birthday='" + birthday + '\'' +
                ", phone='" + phone + '\'' +
                ", email='" + email + '\'' +
                ", address='" + address + '\'' +
                ", occupation='" + occupation + '\'' +
                ", describes='" + describes + '\'' +
                '}';
    }
}

Admin类

package cn.hehewocao.POJO;

public class Admin {
    private String id;
    private String administrator;
    private String password;

    public Admin() {
    }

    public Admin(String id, String administrator, String password) {
        this.id = id;
        this.administrator = administrator;
        this.password = password;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getAdministrators() {
        return administrator;
    }

    public void setAdministrators(String administrator) {
        this.administrator = administrator;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "Admin{" +
                "id='" + id + '\'' +
                ", administrator='" + administrator + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

设计模式

借用一下黑马的MVC图，有了设计模式，项目可以这样创建：

项目目录：

功能和数据库设计都有了，那先从最简单的用户注册功能写起吧 (^._.^)ﾉ

**

用户信息注册功能

**
1. 网页设计：

我个人其实不太会做一些界面好看的网站因此为了方便和美观，我在模板之家下了一些网站模板，直接改别人的模板。
这里分下一波模板下载地址：http://www.cssmoban.com/	（模板之家---都是免费的ԅ(¯﹃¯ԅ)哈哈）

感觉这个模板还可以，那我们就直接拿来修改即可

稍作修改：将网页加入工作空间，直接放到web目录下，根据数据库字段设计表单

2. 后台代码设计

为了防止恶意注册，所以多加了一个验证码功能，因此我们这里需要两个servlet去完成注册这样的功能。

获取验证码：CheckCodeServlet

package cn.hehewocao.Servlet;

import cn.hehewocao.utils.CaptchaUtil;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.awt.image.RenderedImage;
import java.io.IOException;

@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        CaptchaUtil cpu = CaptchaUtil.Instance(); //调用验证码生成的工具类
        BufferedImage image = cpu.getImage();
        String checkcode = cpu.getString();
        ImageIO.write((RenderedImage) image, "jpg", resp.getOutputStream());//通过response的输出流
        HttpSession session = req.getSession();
        session.removeAttribute("checkcode");
        session.setAttribute("checkcode", checkcode);//设置session属性将验证码字符串形式存入session中
    }
}

用到的 CaptchaUtil 工具类----->验证码生成工具

package cn.hehewocao.utils;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Random;
/**
 * 验证码生成工具
 * @author HXL
 *
 */
public class CaptchaUtil {
    private BufferedImage image;// 图像
    private String str;// 验证码
    private static char code[] = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".toCharArray();
    public static final String SESSION_CODE_NAME="code";

    private CaptchaUtil() {
        init();// 初始化属性
    }

    /*
     * 取得RandomNumUtil实例
     */
    public static CaptchaUtil Instance() {
        return new CaptchaUtil();
    }

    /*
     * 取得验证码图片
     */
    public BufferedImage getImage() {
        return this.image;
    }

    /*
     * 取得图片的验证码
     */
    public String getString() {
        return this.str;
    }

    private void init() {
        // 在内存中创建图象
        int width = 80, height = 25;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // 获取图形上下文
        Graphics g = image.getGraphics();
        // 生成随机类
        Random random = new Random();
        // 设定背景色
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);
        // 设定字体
        g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
        // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
        g.setColor(getRandColor(160, 200));
        for (int i = 0; i < 155; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.drawLine(x, y, x + xl, y + yl);
        }
        // 取随机产生的认证码(4位数字)
        String sRand = "";
        for (int i = 0; i < 4; i++) {
            String rand = String.valueOf(code[random.nextInt(code.length)]);
            sRand += rand;
            // 将认证码显示到图象中
            g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
            // 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
            g.drawString(rand, 13 * i + 6, 16);
        }
        // 赋值验证码
        this.str = sRand;

        // 图象生效
        g.dispose();
        // ByteArrayInputStream input = null;
        // ByteArrayOutputStream output = new ByteArrayOutputStream();
        // try {
        // ImageOutputStream imageOut = ImageIO.createImageOutputStream(output);
        // ImageIO.write(image, "JPEG", imageOut);
        // imageOut.close();
        // input = new ByteArrayInputStream(output.toByteArray());
        // } catch (Exception e) {
        // System.out.println("验证码图片产生出现错误：" + e.toString());
        // }
        // this.image = input
        this.image = image;/* 赋值图像 */
    }

    /*
     * 给定范围获得随机颜色
     */
    private Color getRandColor(int fc, int bc) {
        Random random = new Random();
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }
}

注册用户：RegisterServlet

package cn.hehewocao.Servlet;

import cn.hehewocao.POJO.User;
import cn.hehewocao.Service.UserService;
import cn.hehewocao.Service.UserServiceImp;
import cn.hehewocao.utils.OverwritePopulate;
import org.apache.commons.beanutils.BeanUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");
        HttpSession session = req.getSession();
        String checkcode = req.getParameter("checkcode");
        System.out.println(checkcode + ":" + (String) session.getAttribute("checkcode"));
        String username = req.getParameter("username");//封装User对象 本来想用BeanUtils类来分装的，但好像因为有个日期类型的数据，导致一直报		错。。没办法只能自己动手封装了。。。
        String password = req.getParameter("password");
        String nickname = req.getParameter("nickname");
        String sex = req.getParameter("sex");
        String birthday = req.getParameter("birthday");
        String phone = req.getParameter("phone");
        String email = req.getParameter("email");
        String address = req.getParameter("address");
        String occupation = req.getParameter("occupation");
        String describe = req.getParameter("describe");
        if ("".equals(username)) {
            username = null;
        }
        if ("".equals(password)) {
            password = null;
        }
        if ("".equals(nickname)) {
            nickname = null;
        }
        if ("".equals(sex)) {
            sex = null;
        }
        if ("".equals(birthday)) {
            birthday = null;
        }
        if ("".equals(phone)) {
            phone = null;
        }
        if ("".equals(email)) {
            email = null;
        }
        if ("".equals(address)) {
            address = null;
        }
        if ("".equals(occupation)) {
            occupation = null;
        }
        if ("".equals(describe)) {
            describe = null;
        }
        User user = new User(0, username, password, nickname, sex, birthday, phone, email, address, occupation, describe);
        Map<String, String[]> parameterMap = req.getParameterMap();
        System.out.println(user);
        if (checkcode==null || !checkcode.equalsIgnoreCase((String) session.getAttribute("checkcode") )) {//验证码输入有误，将错误信息存入request，转发到register.jsp
            session.removeAttribute("checkcode");//删除验证码，每个验证码只允许使用一次
            req.setAttribute("register_msg", "验证码输入有误！");
            req.setAttribute("register_submit", user);  // 将user也存入request，为了方便回显数据
            req.getRequestDispatcher("/register.jsp").forward(req, resp);
            return;
        } else {
            UserService us = new UserServiceImp();
            us.addUser(user);
            session.removeAttribute("checkcode");
            req.setAttribute("success_msg","恭喜您，账号注册成功，立即登录吧！");
            req.getRequestDispatcher("/login.jsp").forward(req, resp);//转发到登录界面
        }
    }
}

UserServiceImpl类

package cn.hehewocao.Service;

import cn.hehewocao.Dao.UserDaoImp;
import cn.hehewocao.POJO.PageBean;
import cn.hehewocao.POJO.User;
import cn.hehewocao.Dao.UserDao;
import java.util.List;
import java.util.Map;

public class UserServiceImp implements UserService {
    @Override
    public void addUser(User user) { //实现UserService接口中的addUser方法
        UserDao ud = new UserDaoImp();//调用UserDaoImpl中的方法
        ud.addUser(user);
    }

UserDaoImp类

package cn.hehewocao.Dao;
import cn.hehewocao.JDBC.DBCPUtils;
import cn.hehewocao.POJO.User;
import cn.hehewocao.utils.JDBCUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.sql.SQLException;
import java.time.temporal.Temporal;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class UserDaoImp implements UserDao 
    @Override
    public void addUser(User user) {

        String sql = "insert into user  values ( null, ? , ? , ? , ? , ? , ? , ? , ? , ? , ?)";
        JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDateSource()); 
        jdbcTemplate.update(sql, user.getUsername(), user.getPassword(), user.getNickname(), user.getSex(), user.getBirthday(),
                user.getPhone(), user.getEmail(), user.getAddress(), user.getOccupation(), user.getDescribes());

    }

用到的JDBCUtils类

package cn.hehewocao.JDBC;

import org.apache.commons.dbcp.BasicDataSource;
import java.io.InputStream;
import java.util.Properties;

public class DBCPUtils {

    private static BasicDataSource bds = new BasicDataSource();

    static{
        try {
            Properties properties = new Properties();
            InputStream is = DBCPUtils.class.getClassLoader().getResourceAsStream("JDBCconfig.properties");
            properties.load(is);//加载配置文件
            bds.setDriverClassName(properties.getProperty("driver"));
            bds.setUrl(properties.getProperty("url"));
            bds.setUsername(properties.getProperty("username"));
            bds.setPassword(properties.getProperty("password"));
            bds.setInitialSize(10);
            bds.setMaxActive(8);
            bds.setMaxIdle(2);
            bds.setMinIdle(1);

        }catch (Exception e){
            e.printStackTrace();
        }

    }
    public static BasicDataSource getDateSource(){
        return bds;
    }
}

3. JSP页面设计
jsp页面中获取request中保存的数据，主要完成回显的功能。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册我们的网站</title>

    <!-- CSS -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]-->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <!--[endif]-->

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">


    <style>

        body {

            background-image: url("assets/img/backgrounds/2.jpg");
        }

    </style>


</head>

<body>

<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3>注册我们的网站</h3>
                            <p>输入您的用户名、密码和邮箱：</p>
                        </div>
                        <div class="form-top-right">
                            <i class="fa fa-lock"></i>
                        </div>
                    </div>
                    <div class="form-bottom">
                        <form role="form" action="${pageContext.request.contextPath}/registerServlet" method="post"
                              class="login-form">

                            <div class="form-group">
                                <label class="sr-only">Username</label>
                                <input type="text" name="username" placeholder="用户名(必填)..." value="${register_submit.username}"
                                       class="form-username form-control" id="username">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Password</label>
                                <input type="password" name="password" placeholder="密码(必填)..."
                                       class="form-password form-control" id="password">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Repassword</label>
                                <input type="password" name="repassword" placeholder="再次输入密码(必填)..."
                                       class="form-password form-control" id="repassword">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Email</label>
                                <input type="text" name="email" placeholder="邮箱(必填)..." value="${register_submit.email}"
                                       class="form-username form-control" id="email">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">手机号</label>
                                <input type="text" name="phone" placeholder="手机号(必填)..." value="${register_submit.phone}"
                                       class="form-username form-control" id="phone">
                            </div>


                            <div class="form-group">
                                <label class="sr-only">昵称</label>
                                <input type="text" name="nickname" placeholder="昵称..." value="${register_submit.nickname}"
                                       id="nickname" style="height: 50px;width: 100%">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">性别</label>
                                <select class="form-control" name="sex" id="sex" value="${register_submit.sex}"
                                        style="height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                    <option <c:if test="${register_submit.sex == '男'}">selected</c:if>>男</option>
                                    <option <c:if test="${register_submit.sex == '女'}">selected</c:if>>女</option>
                                </select>
                            </div>

                            <div class="form-group"
                                 style="width: 40%;float: left;height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                <p style="font-size: medium;font-weight: normal;margin-top: 8px;margin-left: 20px;">
                                    生日...</p>
                            </div>
                            <div style="width: 50%;height:50px;float: left;margin-left: 5%">
                                <input type="date" name="birthday" id="birthday" value="${register_submit.birthday}"
                                       style="border: solid #d5d5d5;height: 50px;background-color: #FFFAFA;text-align: center">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">所在省份</label>
                                <select class="form-control" name="address" id="address"
                                        style="height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                    <option <c:if test="${register_submit.address == '北京'}">selected</c:if>>北京</option>
                                    <option <c:if test="${register_submit.address == '天津'}">selected</c:if>>天津</option>
                                    <option <c:if test="${register_submit.address == '河北'}">selected</c:if>>河北</option>
                                    <option <c:if test="${register_submit.address == '山西'}">selected</c:if>>山西</option>
                                    <option <c:if test="${register_submit.address == '内蒙古'}">selected</c:if>>内蒙古</option>
                                    <option <c:if test="${register_submit.address == '辽宁'}">selected</c:if>>辽宁</option>
                                    <option <c:if test="${register_submit.address == '吉林'}">selected</c:if>>吉林</option>
                                    <option <c:if test="${register_submit.address == '黑龙江'}">selected</c:if>>黑龙江</option>
                                    <option <c:if test="${register_submit.address == '上海'}">selected</c:if>>上海</option>
                                    <option <c:if test="${register_submit.address == '江苏'}">selected</c:if>>江苏</option>
                                    <option <c:if test="${register_submit.address == '浙江'}">selected</c:if>>浙江</option>
                                    <option <c:if test="${register_submit.address == '安徽'}">selected</c:if>>安徽</option>
                                    <option <c:if test="${register_submit.address == '福建'}">selected</c:if>>福建</option>
                                    <option <c:if test="${register_submit.address == '江西'}">selected</c:if>>江西</option>
                                    <option <c:if test="${register_submit.address == '山东'}">selected</c:if>>山东</option>
                                    <option <c:if test="${register_submit.address == '河南'}">selected</c:if>>河南</option>
                                    <option <c:if test="${register_submit.address == '湖北'}">selected</c:if>>湖北</option>
                                    <option <c:if test="${register_submit.address == '湖南'}">selected</c:if>>湖南</option>
                                    <option <c:if test="${register_submit.address == '广东'}">selected</c:if>>广东</option>
                                    <option <c:if test="${register_submit.address == '广西'}">selected</c:if>>广西</option>
                                    <option <c:if test="${register_submit.address == '海南'}">selected</c:if>>海南</option>
                                    <option <c:if test="${register_submit.address == '重庆'}">selected</c:if>>重庆</option>
                                    <option <c:if test="${register_submit.address == '四川'}">selected</c:if>>四川</option>
                                    <option <c:if test="${register_submit.address == '贵州'}">selected</c:if>>贵州</option>
                                    <option <c:if test="${register_submit.address == '云南'}">selected</c:if>>云南</option>
                                    <option <c:if test="${register_submit.address == '西藏'}">selected</c:if>>西藏</option>
                                    <option <c:if test="${register_submit.address == '陕西'}">selected</c:if>>陕西</option>
                                    <option <c:if test="${register_submit.address == '甘肃'}">selected</c:if>>甘肃</option>
                                    <option <c:if test="${register_submit.address == '青海'}">selected</c:if>>青海</option>
                                    <option <c:if test="${register_submit.address == '宁夏'}">selected</c:if>>宁夏</option>
                                    <option <c:if test="${register_submit.address == '新疆'}">selected</c:if>>新疆</option>
                                    <option <c:if test="${register_submit.address == '港澳台'}">selected</c:if>>港澳台</option>

                                </select>
                            </div>

                            <div class="form-group">
                                <label class="sr-only">职业</label>
                                <input type="text" name="occupation" placeholder="职业..." value="${register_submit.occupation}"
                                       style="height: 50px;width: 100%" id="occupation">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">个人说明</label>
                                <textarea style="width: 100%" name="describe" placeholder="个人说明..." rows="3"
                                          id="describes"><%--<c:if test="${not empty register_submit.describes}">${register_submit.describes}</c:if>--%>
                                </textarea>
                            </div>


                            <div class="form-group" style="width: 60%;float: left">
                                <label class="sr-only">验证码</label>
                                <input type="text" name="checkcode" placeholder="验证码(必填)..."
                                       class="form-username form-control" id="checkcode">
                            </div>

                            <div style="width: 30%;height:50px;float: left;border: solid #d5d5d5;margin-left: 5%">
                                <img src="${pageContext.request.contextPath}/checkCodeServlet" id="checkImage"
                                     style="width: 100%;height: 100%" onclick="changeCheckImage()">
                            </div>

                            <button type="submit" class="btn" id="btn">注册</button>

                        </form>

                    </div>
                </div>
            </div>
            <div class="row">
                <p style="color: red">${pageContext.request.getAttribute("register_msg")}</p><br>
                <p><a href="login.jsp" style="color: white">前往登录</a></p>
            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 social-login">
                    <h3>...or login with:</h3>
                    <div class="social-login-buttons">
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-facebook"></i> Facebook
                        </a>
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-twitter"></i> Twitter
                        </a>
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-google-plus"></i> Google Plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <p>Create By BOOM : 2495399053@qq.com</p>
</div>

<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>


<script>

    function checkUsernaem(username) {
        var flag = true;
        if (username.length == 0) {
            alert("用户名不能为空！");
            flag = false;
            return flag;
        }
        var regexp = /^[a-zA-Z]{6,20}/;
        if (!regexp.test(username)) {
            alert("非法的用户名！用户名必须是以字母开头，只含字母的6-20位字母组合！");
            flag = false
        }
        return flag;
    }

    function checkPassword(password, repassword) {
        var flag = true;

        if (!(password.length >= 6 && password.length <= 20) || password.length == 0) {
            alert("密码必须是6-20位的字符！");
            flag = false;
            return flag;
        }
        if (password == username) {
            alert("密码不能和账号一样！");
            flag = false;
            return flag;
        }

        if (password != repassword) {
            alert("两次输入的密码不一致！");
            flag = false;
            return flag;
        }

        return flag;
    }

    function checkEmail(email) {
        var flag = true;
        if (email.indexOf("@") == -1 || email.length == 0) {
            alert("非法的邮箱地址！");
            flag = false;
        }
        return flag;
    }

    function checkPhone(phone) {
        var flag = true;
        var phoneNumReg = /^1[3456789]\d{9}$/;
        if (!phoneNumReg.test(phone) || phone.length == 0) {
            alert("请输入正确的手机号！");
            flag = false;
        }
        return flag;
    }

    function checkCode(checkcode) {
        var flag = true;
        if (checkcode.length == 0) {
            alert("验证码不能为空！");
            flag = false;
        }
        return flag;
    }


    function check() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var repassword = document.getElementById("repassword").value;
        var email = document.getElementById("email").value;
        var phone = document.getElementById("phone").value;
        var checkcode = document.getElementById("checkcode").value;
        if (checkUsernaem(username) && checkPassword(password, repassword) && checkEmail(email) && checkPhone(phone) && checkCode(checkcode)) {
            return true;
        } else {
            return false;
        }
    }

    var submit = document.getElementById("btn").onclick = function (ev) {
        return check();
    }

    //鼠标点击切换验证码
    function changeCheckImage() {
        var checkImage = document.getElementById("checkImage");
        var date = new Date();
        var time = date.getTime();
        checkImage.setAttribute("src", "${pageContext.request.contextPath}/checkCodeServlet?" + time);//添加时间戳，防止浏览器缓存图片
    }

    document.getElementById("describes").value = "${register_submit.describes}";

</script>


</body>

</html>

Jar包

好了，到此就完成了注册用户的功能。
源码在我的GitHub上：git@github.com:hehewocao00544/JavaEE.git
或者CSDN下载：https://download.csdn.net/download/qq_42080839/11368626