JavaWeb学习篇8_用户登录、信息的增删改查、复杂功能小项目（Servlet、JSP、MySQL、JDBCTemplete、Durid、BeanUtils、tomcat、EL、JSTL）

先完成一个简单的查询用户信息操作
查询数据库的用户信息，使用EL、JSTL显示在JSP页面
- 环境搭建
  - 创建数据库、表
  - 搭建IDEAJavaWeb项目，设计使其满足MVC模式和三层架构,同时最好符合面向接口编程思想
    项目整体目录
  - src
    - domain
    - dao
    - service
    - utils
    - web
      - servlet
      - druid.properties
  - web
    - WEB-INF
      - lib
    - jsp文件
    - …
- 修改html为jsp
- 导入数据库连接池配置文件，获取数据库连接池对象，编写sql语句
- 获取对象集合后，转发到JSP页面，EL、JSTL遍历显示
完善管理员登录增删改查操作
复杂的功能
- 删除选中
- 分页查询
- 复杂条件查询

开始

案例整体分析

简单的查询

一、实现简单的查询用户信息操作

目前这些还是静态html数据，我们需要编写代码实现到jsp页面

1.1环境搭建

项目目录

简单的查询功能

登录及增删改查

流程

首先点击访问的是UserListServlet容器，然后我们需要：

控制层service包下的实现接口UserService的子类UserServiceImpl对象来调用findAll()方法（其实就是创建UserDaoImpl对象来调用findAll()方法）
数据操作层dao包下的实现接口UserDao 的子类UserDaoImpl对象在findAll()方法中编写sql语句，完成数据查询并封装成一个list集合返回给 UserServiceImpl对象

思路及代码

1.2修改html为jsp

index.jsp

<%--Created by IntelliJ IDEA.User: 司超龙Date: 2020/11/5Time: 8:21To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<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><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><script type="text/javascript"></script>
</head>
<body>
<div align="center"><ahref="${pageContext.request.contextPath}/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息</a>
</div>
</body>
</html>
</html>

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>用户信息管理系统</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><style type="text/css">td, th {text-align: center;}</style>
</head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><table border="1" class="table table-bordered table-hover"><tr class="success"><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><%--        EL配合JSTL遍历users对象集合--%><c:forEach items="${users}" var="user" varStatus="s"><tr><td>${s.count}</td><td>${user.name}</td><td>${user.gender}</td><td>${user.age}</td><td>${user.address}</td><td>${user.qq}</td><td>${user.email}</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="">删除</a></td></tr></c:forEach><tr><td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加联系人</a></td></tr></table>
</div>
</body>
</html>

dao、service、Servlet功能类

UserDaoImpl

package henu.soft.xiaosi.dao;import henu.soft.xiaosi.domain.User;import java.util.List;/*** 用户操作的Dao接口*/
public interface UserDao {//查询数据库中所有的user对象public List<User> findAll();
}

package henu.soft.xiaosi.dao.impl;import henu.soft.xiaosi.dao.UserDao;
import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;import java.util.List;public class UserDaoImpl implements UserDao {//定义JDBCTemplate类，传入我们的从数据库连接池中获取的连接对象private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic List<User> findAll() {//使用JDBC操作数据库//定义sqlString sql = "select * from user";List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));return users;}
}

UserServiceImpl

package henu.soft.xiaosi.service;import henu.soft.xiaosi.domain.User;import java.util.List;/*** 面向接口编程，使后续改进优化不那么复杂* 用户管理的业务接口*/
public interface UserService {//查询所有的用户信息public List<User> findAll();}

package henu.soft.xiaosi.service.impl;import henu.soft.xiaosi.dao.UserDao;
import henu.soft.xiaosi.dao.impl.UserDaoImpl;
import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.service.UserService;import java.util.List;public class UserServiceImpl implements UserService {//创建UserDao实现子类对象private UserDao dao = new UserDaoImpl();@Overridepublic List<User> findAll() {//调用使用Dao完成查询return dao.findAll();}
}

UserListServlet

package henu.soft.xiaosi.web.servlet;import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.service.UserService;
import henu.soft.xiaosi.service.impl.UserServiceImpl;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 java.io.IOException;
import java.util.List;@WebServlet("/userListServlet")
public class UserListServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 需要先创建UserService对象，然后调用findAll()返回一个users用户集UserService service  = new UserServiceImpl();List<User> users = service.findAll();//2. 将users存放到request域，然后转发到list.jsprequest.setAttribute("users",users);// 3. 转发，不要要虚拟目录request.getRequestDispatcher("/list.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

1.2实现findAll()方法

插入数据并访问

第一部分简单查询基本完成，下面开始第二部分，完善登录及增删改查功能

二、完善增删改查功能

开始先完成list.jsp页面调整，增加按钮

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>用户信息管理系统</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><style type="text/css">td, th {text-align: center;}</style>
</head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><div style="float: left;"><form class="form-inline"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="email" class="form-control" id="exampleInputEmail2"  ></div><button type="submit" class="btn btn-default">查询</button></form></div><div style="float: right;margin: 5px;"><a class="btn btn-primary" href="add.html">添加联系人</a><a class="btn btn-primary" href="add.html">删除选中</a></div><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox"></th><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><c:forEach items="${users}" var="user" varStatus="s"><tr><td><input type="checkbox"></td><td>${s.count}</td><td>${user.name}</td><td>${user.gender}</td><td>${user.age}</td><td>${user.address}</td><td>${user.qq}</td><td>${user.email}</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="">删除</a></td></tr></c:forEach></table><div><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li><span style="font-size: 25px;margin-left: 5px;">共16条记录，共4页</span></ul></nav></div></div></body>
</html>

2.1验证码图片的引入

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN"><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><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><script type="text/javascript"></script><script>function refreshCode() {var vcode = document.getElementById("vcode");vcode.src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();}</script></head><body><div class="container" style="width: 400px;"><h3 style="text-align: center;">管理员登录</h3><form action="login" method="post"><div class="form-group"><label for="user">用户名：</label><input type="text" name="user" class="form-control" id="user" placeholder="请输入用户名"/></div><div class="form-group"><label for="password">密码：</label><input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/></div><div class="form-inline"><label for="vcode">验证码：</label><input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/><a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/></a></div><hr/><div class="form-group" style="text-align: center;"><input class="btn btn btn-primary" type="submit" value="登录"></div></form><!-- 出错显示的信息框 --><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" ><span>&times;</span></button><strong>登录失败!</strong></div></div></body>
</html>

CheckCodeServlet

package henu.soft.xiaosi.web.servlet;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.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** 验证码*/
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//服务器通知浏览器不要缓存response.setHeader("pragma","no-cache");response.setHeader("cache-control","no-cache");response.setHeader("expires","0");//在内存中创建一个长80，宽30的图片，默认黑色背景//参数一：长//参数二：宽//参数三：颜色int width = 80;int height = 30;BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//获取画笔Graphics g = image.getGraphics();//设置画笔颜色为灰色g.setColor(Color.GRAY);//填充图片g.fillRect(0,0, width,height);//产生4个随机验证码，12EyString checkCode = getCheckCode();//将验证码放入HttpSession中request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);//设置画笔颜色为黄色g.setColor(Color.YELLOW);//设置字体的小大g.setFont(new Font("黑体",Font.BOLD,24));//向图片上写入验证码g.drawString(checkCode,15,25);//将内存中的图片输出到浏览器//参数一：图片对象//参数二：图片的格式，如PNG,JPG,GIF//参数三：图片输出到哪里去ImageIO.write(image,"PNG",response.getOutputStream());}/*** 产生4位随机字符串 */private String getCheckCode() {String base = "0123456789ABCDEFGabcdefg";int size = base.length();Random r = new Random();StringBuffer sb = new StringBuffer();for(int i=1;i<=4;i++){//产生0到size-1的随机值int index = r.nextInt(size);//在base字符串中获取下标为index的字符char c = base.charAt(index);//将c放入到StringBuffer中去sb.append(c);}return sb.toString();}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request,response);}
}

2.2管理员登录功能

实现思路

首页跳转到登录页面的处理

完成index.jsp点击之后跳转到login.jsp，登录才能查询修改

<%--Created by IntelliJ IDEA.User: 司超龙Date: 2020/11/5Time: 8:21To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<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><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><script type="text/javascript"></script>
</head>
<body>
<div align="center"><ahref="${pageContext.request.contextPath}/login.jsp" style="text-decoration:none;font-size:33px">查询所有用户信息</a>
</div>
</body>
</html>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN"><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><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><script type="text/javascript"></script><script>function refreshCode() {var vcode = document.getElementById("vcode");vcode.src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();}</script></head><body><div class="container" style="width: 400px;"><h3 style="text-align: center;">管理员登录</h3><form action="${pageContext.request.contextPath}/loginServlet" method="post"><div class="form-group"><label for="user">用户名：</label><input type="text" name="user" class="form-control" id="user" placeholder="请输入用户名"/></div><div class="form-group"><label for="password">密码：</label><input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/></div><div class="form-inline"><label for="vcode">验证码：</label><input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/><a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/></a></div><hr/><div class="form-group" style="text-align: center;"><input class="btn btn btn-primary" type="submit" value="登录"></div></form><!-- 出错显示的信息框 --><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" ><span>&times;</span></button><strong>登录失败!</strong></div></div></body>
</html>

数据库的处理

实际上应该在创建一个admin表，这里直接使用一个user表，在后面存储字段username、password来存储管理员的账号密码

登录验证LoginServlet的处理

验证码错误就设置错误的提示信息到域，键名为login_msg

然后重新转发到login.jsp页面

登录验证login()方法需要在UserDaoImpl中编写

根据提交的属性封装成对象向数据库中查询，查询到返回数据库的记录（是一条更全面的信息）

如果错误的验证码或者账号密码，从域中获取错误的提示信息

使用EL取出来到页面上

LoginServlet

package henu.soft.xiaosi.web.servlet;import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.service.UserService;
import henu.soft.xiaosi.service.impl.UserServiceImpl;
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("/loginServlet")
public class LoginServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");String verifycode = request.getParameter("verifycode");HttpSession session = request.getSession();//从域中获取生成的验证码String check_server = (String) session.getAttribute("CHECKCODE_SERVER");//验证码对比if(!check_server.equalsIgnoreCase(verifycode)){//存储提示信息到域，然后转发request.setAttribute("login_msg","验证码错误");request.getRequestDispatcher("/login.jsp").forward(request,response);return;}Map<String,String[]> map = request.getParameterMap();//封装输入的对象User user = new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//调用service查询UserService service = new UserServiceImpl();User loginUser = service.login(user);//判断是否密码正确,根据返回的对象登录成功if(loginUser != null){//将用户信息存储到sessionsession.setAttribute("user",loginUser);//重定向跳转页面，到index.jsp页面response.sendRedirect(request.getContextPath()+"/userListServlet");}else{//登录失败,存储提示信息到域，转发到登录页面request.setAttribute("login_msg","用户名或者密码错误！");request.getRequestDispatcher("/login.jsp").forward(request,response);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

UserDaoImpl

package henu.soft.xiaosi.dao.impl;import henu.soft.xiaosi.dao.UserDao;
import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;import java.util.List;public class UserDaoImpl implements UserDao {//定义JDBCTemplate类，传入我们的从数据库连接池中获取的连接对象private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 1. 查询所有的用户* @return*/@Overridepublic List<User> findAll() {//使用JDBC操作数据库//定义sqlString sql = "select * from user";List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));return users;}/*** 2. 判断管理员登录* @param username* @param userpassword* @return*/@Overridepublic User findUserByUsernameAndPassword(String username, String userpassword) {String sql = "select * from user where username=? and userpassword=?";try{User user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username,userpassword);return user;}catch(Exception e){e.printStackTrace();return null;}}
}

2.3添加功能

添加功能实现思路

设置add.jsp，绑定按钮标签

<%@ page contentType="text/html;charset=UTF-8" language="java" %><!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>添加用户</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><center><h3>添加联系人页面</h3></center><form action="${pageContext.request.contextPath}/addUserServlet" method="post"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"></div><div class="form-group"><label>性别：</label><input type="radio" name="gender" value="男" checked="checked"/>男<input type="radio" name="gender" value="女"/>女</div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄"></div><div class="form-group"><label for="address">籍贯：</label><select name="address" class="form-control" id="jiguan"><option value="广东">广东</option><option value="广西">广西</option><option value="湖南">湖南</option></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" class="form-control" name="email" placeholder="请输入邮箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button" value="返回" /></div></form>
</div>
</body>
</html>

package henu.soft.xiaosi.web.servlet;import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.service.UserService;
import henu.soft.xiaosi.service.impl.UserServiceImpl;
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 java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;@WebServlet("/addUserServlet")
public class AddUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");Map<String, String[]> map = request.getParameterMap();User user  = new User();try{BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}UserService service = new UserServiceImpl();service.addUser(user);response.sendRedirect(request.getContextPath()+"/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

UserDaoImpl

package henu.soft.xiaosi.dao.impl;import henu.soft.xiaosi.dao.UserDao;
import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;import java.util.List;public class UserDaoImpl implements UserDao {//定义JDBCTemplate类，传入我们的从数据库连接池中获取的连接对象private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 1. 查询所有的用户* @return*/@Overridepublic List<User> findAll() {//使用JDBC操作数据库//定义sqlString sql = "select * from user";List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));return users;}/*** 2. 判断管理员登录* @param username* @param userpassword* @return*/@Overridepublic User findUserByUsernameAndPassword(String username, String userpassword) {String sql = "select * from user where username=? and userpassword=?";try{User user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username,userpassword);return user;}catch(Exception e){e.printStackTrace();return null;}}/*** 添加用户* @param user*/@Overridepublic void add(User user) {String sql = "insert into user values(null,?,?,?,?,?,?,null,null)";template.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail());}
}

2.4删除功能

删除功能实现思路

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>用户信息管理系统</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><style type="text/css">td, th {text-align: center;}</style><script>function deleteUser(id) {if(confirm("确定删除吗")){location.href="${pageContext.request.contextPath}/deleteUserServlet?id="+id;}}</script>
</head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><div style="float: left;"><form class="form-inline"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="email" class="form-control" id="exampleInputEmail2"  ></div><button type="submit" class="btn btn-default">查询</button></form></div><div style="float: right;margin: 5px;"><a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a><a class="btn btn-primary" href="">删除选中</a></div><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox"></th><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><c:forEach items="${users}" var="user" varStatus="s"><tr><td><input type="checkbox"></td><td>${s.count}</td><td>${user.name}</td><td>${user.gender}</td><td>${user.age}</td><td>${user.address}</td><td>${user.qq}</td><td>${user.email}</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id})">删除</a></td></tr></c:forEach></table><div><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li><span style="font-size: 25px;margin-left: 5px;">共16条记录，共4页</span></ul></nav></div></div></body>
</html>

package henu.soft.xiaosi.web.servlet;import henu.soft.xiaosi.service.UserService;
import henu.soft.xiaosi.service.impl.UserServiceImpl;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 java.io.IOException;@WebServlet("/deleteUserServlet")
public class DeleteUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String id = request.getParameter("id");UserService service = new UserServiceImpl();service.deleteUser(id);System.out.println(id);response.sendRedirect(request.getContextPath() + "/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

package henu.soft.xiaosi.dao.impl;import henu.soft.xiaosi.dao.UserDao;
import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;import java.util.List;public class UserDaoImpl implements UserDao {//定义JDBCTemplate类，传入我们的从数据库连接池中获取的连接对象private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 1. 查询所有的用户* @return*/@Overridepublic List<User> findAll() {//使用JDBC操作数据库//定义sqlString sql = "select * from user";List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));return users;}/*** 2. 判断管理员登录* @param username* @param userpassword* @return*/@Overridepublic User findUserByUsernameAndPassword(String username, String userpassword) {String sql = "select * from user where username=? and userpassword=?";try{User user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username,userpassword);return user;}catch(Exception e){e.printStackTrace();return null;}}/*** 添加用户* @param user*/@Overridepublic void add(User user) {String sql = "insert into user values(null,?,?,?,?,?,?,null,null)";template.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail());}/*** 删除用户* @param id*/@Overridepublic void del(int id) {String sql = "delete from user where id=?";template.update(sql,id);}
}

小优化，js弹框提示，删除的时候提示

2.5修改功能

此功能的实现有些复杂相比前几个

点击修改按钮，不是直接修改，而是跳转到回显页面
需要隐藏输入框获取id,便于数据库更新操作

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>用户信息管理系统</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><style type="text/css">td, th {text-align: center;}</style><script>function deleteUser(id) {if(confirm("确定删除吗")){location.href="${pageContext.request.contextPath}/deleteUserServlet?id="+id;}}</script>
</head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><div style="float: left;"><form class="form-inline"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="email" class="form-control" id="exampleInputEmail2"  ></div><button type="submit" class="btn btn-default">查询</button></form></div><div style="float: right;margin: 5px;"><a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a><a class="btn btn-primary" href="">删除选中</a></div><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox"></th><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><c:forEach items="${users}" var="user" varStatus="s"><tr><td><input type="checkbox"></td><td>${s.count}</td><td>${user.name}</td><td>${user.gender}</td><td>${user.age}</td><td>${user.address}</td><td>${user.qq}</td><td>${user.email}</td><td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id})">删除</a></td></tr></c:forEach></table><div><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li><span style="font-size: 25px;margin-left: 5px;">共16条记录，共4页</span></ul></nav></div></div></body>
</html>

FindUserServlet

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>用户信息管理系统</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><style type="text/css">td, th {text-align: center;}</style><script>function deleteUser(id) {if(confirm("确定删除吗")){location.href="${pageContext.request.contextPath}/deleteUserServlet?id="+id;}}</script>
</head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><div style="float: left;"><form class="form-inline"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="email" class="form-control" id="exampleInputEmail2"  ></div><button type="submit" class="btn btn-default">查询</button></form></div><div style="float: right;margin: 5px;"><a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a><a class="btn btn-primary" href="">删除选中</a></div><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox"></th><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><c:forEach items="${users}" var="user" varStatus="s"><tr><td><input type="checkbox"></td><td>${s.count}</td><td>${user.name}</td><td>${user.gender}</td><td>${user.age}</td><td>${user.address}</td><td>${user.qq}</td><td>${user.email}</td><td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id})">删除</a></td></tr></c:forEach></table><div><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li><span style="font-size: 25px;margin-left: 5px;">共16条记录，共4页</span></ul></nav></div></div></body>
</html>

UserDaoImpl

package henu.soft.xiaosi.dao.impl;import henu.soft.xiaosi.dao.UserDao;
import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;import java.util.List;public class UserDaoImpl implements UserDao {//定义JDBCTemplate类，传入我们的从数据库连接池中获取的连接对象private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());/*** 1. 查询所有的用户* @return*/@Overridepublic List<User> findAll() {//使用JDBC操作数据库//定义sqlString sql = "select * from user";List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));return users;}/*** 2. 判断管理员登录* @param username* @param userpassword* @return*/@Overridepublic User findUserByUsernameAndPassword(String username, String userpassword) {String sql = "select * from user where username=? and userpassword=?";try{User user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),username,userpassword);return user;}catch(Exception e){e.printStackTrace();return null;}}/*** 添加用户* @param user*/@Overridepublic void add(User user) {String sql = "insert into user values(null,?,?,?,?,?,?,null,null)";template.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail());}/*** 删除用户* @param id*/@Overridepublic void del(int id) {String sql = "delete from user where id=?";template.update(sql,id);}/*** 修改信息之前回显用户信息* @param id* @return*/@Overridepublic User find(int id) {String sql = "select * from user where id=?";return template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),id);}/*** 修改用户信息* @param user*/@Overridepublic void up(User user) {String sql = "update user set name=?,gender=?,age=?,address=?,qq=?,email=? where id=?";template.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail(),user.getId());}
}

update.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN"><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><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-2.1.0.min.js"></script><script src="js/bootstrap.min.js"></script></head><body><div class="container" style="width: 400px;"><h3 style="text-align: center;">修改联系人</h3><form action="${pageContext.request.contextPath}/updateUserServlet" method="post"><input type="hidden" name="id" value="${user.id}"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" value="${user.name}" readonly="readonly" placeholder="请输入姓名" /></div><div class="form-group"><label>性别：</label><c:if test="${user.gender=='男'}"><input type="radio" name="gender" value="男" checked  />男<input type="radio" name="gender" value="女"  />女</c:if><c:if test="${user.gender=='女'}"><input type="radio" name="gender" value="男"   />男<input type="radio" name="gender" value="女" checked  />女</c:if></div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" id="age"  value="${user.age}" name="age" placeholder="请输入年龄" /></div><div class="form-group"><%--@declare id="address"--%><label for="address">籍贯：</label><select name="address" class="form-control" ><c:if test="${user.address=='广东'}"><option value="广东" selected>广东</option><option value="广西">广西</option><option value="开封">开封</option></c:if><c:if test="${user.address=='广西'}"><option value="广东" >广东</option><option value="广西" selected>广西</option><option value="开封">开封</option></c:if><c:if test="${user.address=='开封'}"><option value="广东" >广东</option><option value="广西">广西</option><option value="开封" selected>开封</option></c:if></select></div><div class="form-group"><%--@declare id="qq"--%><label for="qq">QQ：</label><input type="text" class="form-control" name="qq" value="${user.qq}" placeholder="请输入QQ号码"/></div><div class="form-group"><%--@declare id="email"--%><label for="email">Email：</label><input type="text" class="form-control" value="${user.email}" name="email" placeholder="请输入邮箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button" value="返回"/></div></form></div></body>
</html>

UpdateUserServlet

package henu.soft.xiaosi.web.servlet;import henu.soft.xiaosi.domain.User;
import henu.soft.xiaosi.service.UserService;
import henu.soft.xiaosi.service.impl.UserServiceImpl;
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 java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;@WebServlet("/updateUserServlet")
public class UpdateUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");Map<String, String[]> map = request.getParameterMap();User user = new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}UserService service = new UserServiceImpl();service.updateUser(user);response.sendRedirect(request.getContextPath()+"/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}

这个报错搞了很长时间（心态炸裂），编码换了也没用，最后换了一种SQL才解决

修改后

三、复杂功能

前面简单完成了

简单全部信息查询
简单的增删改查

下面完成一些常见的功能

最后完成的代码会放在GitHub上到时候

3.1删除选中

批量删除实现思想

删除指定记录需要用户id, 这些id就来自复选框checkbox

表单中，有多少勾选的记录，checkbox就能返回多少个对应的id

list.jsp

根据id获取删除按钮绑定事件，然后提交表单到DelSelectedServlet

删除提示优化、全选和全不选

DelSelectedServlet

UserServiceImpl

遇到的问题

3.2分页查询

分页查询稍复杂，需要jsp提供每页显示的记录数，和开始查询的索引

然后Dao需要查询总记录数、总页数、总页码、查询到的记录显示到jsp页面

BeanPage
用来封装所有需要返回显示的数据

jsp需要根据用户的选择获取当前页面currentPage和每页的记录数rows

并传入参数到 FindUserByPageServlet，查询后将获取的PageBean对象转发到list.jsp显示

FindUserByPageServlet

UserServiceImpl

UserDaoImpl

查询总的记录数

查询到的记录集合或者单个记录

list.jsp
不在是查询全部的记录，EL该遍历PageBean 的对象pb的属性记录集合list

index.jsp

最后将查询的页面从跳转到UserListServlet 改成 FindUserByPageServlet

3.3复和条件分页查询

list.jsp

FindUserByPageServlet
UserDaoImpl

与君共勉