Java 客户管理系统 javaweb用户管理系统

JSP案例——用户信息管理系统

1、需求

简单的用户信息管理系统

对用户信息的增删改查

效果截图（部分）

2、设计

技术选型

Servlet + jsp + Mysql + jdbctemplate + Druid + beanutils + tomccat+bootstrap

数据库设计

CREATE TABLE t_user(   -- 创建表
	id INT PRIMARY KEY AUTO_INCREMENT,
	NAME VARCHAR(20) NOT NULL,
	gender VARCHAR(5),
	age INT,
	address VARCHAR(32),
	qq	VARCHAR(20),
	email VARCHAR(50)
);

3、环境搭建

3.1、创建项目导入jar包

3.2、导入配置文件

druid.properties

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/study
username=root
password=123456
# 初始化连接对象的大小
initialSize=5
# 最大连接数
maxActive=10
# 最大等待时间
maxWait=3000

创建包结构

4、编码

功能一：用户数据的展示

1、实体类User

package com.zhou.test.domain;

/**
 * @author it春和
 * @create 2022-02-27 16:11
 */
public class User {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String address;
    private String qq;
    private String email;

    public int getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getAddress() {
        return address;
    }

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

    public String getQq() {
        return qq;
    }

    public void setQq(String qq) {
        this.qq = qq;
    }

    public String getEmail() {
        return email;
    }

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

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                ", address='" + address + '\'' +
                ", qq='" + qq + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

2、JdbcUtils

public class JdbcUtils {
    private static DataSource dataSource;

    static {
        try {
            // 加载配置文件
            Properties properties = new Properties();
            InputStream is = JdbcUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            properties.load(is);

            // 创建datasource
            dataSource = DruidDataSourceFactory.createDataSource(properties);
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static DataSource getDataSource(){
        return dataSource;
    }

    public static Connection getConnection() throws SQLException {
        return dataSource.getConnection();
    }

}

3、UserDao

// 接口
public interface UserDao {

    /**
     * 查询所有用户
     * @return list
     */
    public List<User> findAll();
}

// 接口的实现类
public class UserDaoImpl implements UserDao {
    // 声明一个jdbctemplate
    private JdbcTemplate template = new JdbcTemplate(JdbcUtils.getDataSource());


    @Override
    public List<User> findAll() {
        List<User> userList = null;
        try {
            // 定义sql
            String sql = "select * from t_user";
            // 使用jdbctemplate查询
            userList = template.query(sql, new BeanPropertyRowMapper<User>(User.class));
        } catch (DataAccessException e) {
            e.printStackTrace();
        }

        return userList;
    }
}

4、UserService

// 接口
public interface UserService {

    /**
     * 查询所有用户
     * @return
     */
    public List<User> findALl();
}

// 接口的实现类
public class UserServiceImpl implements UserService {
    private UserDao userDao = new UserDaoImpl();

    @Override
    public List<User> findALl() {

        // 调用userdao进行查询
        List<User> userList = userDao.findAll();

        return userList;
    }
}

5、FindAllServlet

@WebServlet("/findAllServlet")
public class FindAllServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1、调用service进行查询
        UserService userService = new UserServiceImpl();
        List<User> users = userService.findALl();

        // 2、将users存入request域中
        request.setAttribute("users",users);

        // 3、转发到数据展示页面
        request.getRequestDispatcher("/list.jsp").forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

6、前端页面

index.jsp

list.jsp 数据展示的页面

使用jstl循环取出数据 填入表格之中

<%--
  User: it春和
  Date: 2022/2/27 16:30
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 网页使用的语言 -->
<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>

        <c:forEach items="${requestScope.users}" var="user" varStatus="u">

            <tr>
                <td>${user.id}</td>
                <td>${user.name}</td>
                <td>${user.gender}</td>
                <td>${user.age}v</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> <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>

7、运行

功能二：添加用户

1、点击添加用户跳转到add.jdp

2、设置表单的提交路径 addUserServlet

3、获取用户参数信息

4、封装user

5、调用service层进行添加

6、service层调用dao层

userDao

/**
 * 添加用户的方法
 * @param user
 */
public void addUser(User user);

    @Override
    public void addUser(User user) {
        String sql = "insert into t_user values(null,?,?,?,?,?,?)";
        int i = template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail());
    }

userService

/**
 * 添加用户
 * @param user
 */
public void addUser(User user);


 @Override
    public void addUser(User user) {
        userDao.addUser(user);
    }

AddUserServlet

@WebServlet("/addUserServlet")
public class AddUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置request的编码 解决中文乱码问题
        request.setCharacterEncoding("utf-8");

        // 1、获取所有参数
        Map<String, String[]> parameterMap = request.getParameterMap();
        // 2、封装对象
        User user = new User();
        try {
            BeanUtils.populate(user,parameterMap);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        // 3、调用service进行添加
        UserService userService = new UserServiceImpl();
        userService.addUser(user);

        // 4、跳转到查询页面
        response.sendRedirect(request.getContextPath() + "/findAllServlet");


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

前端页面

首先list.jsp中点击超级链挑战到add.jsp

add.jsp中将表单数据提交到AddUserServlet

<%--
  User: zhouhao
  Date: 2022/2/27 22:04
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<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="sex" value="男" checked="checked"/>男
            <input type="radio" name="sex" 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="address">
                <option value="广东">广东</option>
                <option value="广西">广西</option>
                <option value="湖南">湖南</option>
                <option value="广东">湖北</option>
                <option value="广西">河南</option>
                <option value="湖南">河北</option>
                <option value="广东">四川</option>
                <option value="广西">重庆</option>
                <option value="湖南">贵州</option>
                <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" id="qq" placeholder="请输入QQ号码"/>
        </div>

        <div class="form-group">
            <label for="email">Email：</label>
            <input type="text" class="form-control" name="email" id="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>

功能三：删除用户

点击删除按钮 传递用户id

根据id进行删除

UserDao

/**
 * 根据id删除用户
 * @param id
 */
public void deleteUser(int id);

   @Override
    public void deleteUser(int id) {
        String sql = "delete from t_user where id = ?";
        template.update(sql,id);
    }

UserService

/**
 * 根据id删除用户
 * @param id
 */
public void deleteUser(int id);

 @Override
    public void deleteUser(int id) {
        userDao.deleteUser(id);
    }

DeleteUserServlet

@WebServlet("/deleteUserServlet")
public class DeleteUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取参数id
        String id = request.getParameter("id");

        // 将id转为int型
        int uid = Integer.parseInt(id);

        // 调用servlce进行删除
        UserService service = new UserServiceImpl();
        service.deleteUser(uid);

        // 重定向到数据展示页面
        response.sendRedirect(request.getContextPath()+"/findAllServlet");

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

前端页面

功能四：修改用户

点击修改挑战到修改用户信息的界面

回显用户的信息

回显信息

UserDao

/**
 * 根据id查询出一个用户的所有信息
 * @param id
 * @return
 */
public User findUserById(int id);

@Override
public User findUserById(int id) {
        User user = null;
        try {
            String sql= "select * from t_user where id = ?";
            user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), id);
        } catch (DataAccessException e) {
            e.printStackTrace();
        }

       return user;
}

UserService

/**
 * 根据id查询一个用户
 * @param id
 * @return
 */
public User findUserById(int id);

 @Override
    public User findUserById(int id) {
        // 调用userdao查询用户信息
        return userDao.findUserById(id);
    }

FindeOneUserServlet

@WebServlet("/findOneUser")
public class FindOneUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取请求参数
        String id = request.getParameter("id");
        int uid = Integer.parseInt(id);

        // 调用userservice查询
        UserService userService = new UserServiceImpl();

        User user = userService.findUserById(uid);

        // 将user存入request域中
        request.setAttribute("f_user",user);
        request.getRequestDispatcher("/update.jsp").forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

前端页面

数据的回显 在每个表单选项添加value属性

<%--
  User: it春和
  Date: 2022/2/28 11:25
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<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="" method="post">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" value="${requestScope.f_user.name}"
                   readonly="readonly" placeholder="请输入姓名"/>
        </div>

        <div class="form-group">
            <label>性别：</label>
            <c:if test="${requestScope.f_user.gender == '男' }">
                <input type="radio" name="sex" value="男" checked="checked"/>男
                <input type="radio" name="sex" value="女"/>女
            </c:if>
            <c:if test="${requestScope.f_user.gender == '女' }">
                <input type="radio" name="sex" value="男"/>男
                <input type="radio" name="sex" value="女" checked="checked"/>女
            </c:if>
        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age" value="${requestScope.f_user.age}" name="age"
                   placeholder="请输入年龄"/>
        </div>

        <div class="form-group">
            <label for="address">籍贯：</label>
            <select name="address" class="form-control" id="address">
                <c:if test="${requestScope.f_user.address == '广东'}">
                    <option value="广东" selected="selected">广东</option>
                    <option value="湖南">湖南</option>
                    <option value="湖北">湖北</option>
                    <option value="重庆">重庆</option>
                    <option value="贵州">贵州</option>
                </c:if>
                <c:if test="${requestScope.f_user.address == '湖南'}">
                    <option value="广东">广东</option>
                    <option value="湖南" selected>湖南</option>
                    <option value="湖北">湖北</option>
                    <option value="重庆">重庆</option>
                    <option value="贵州">贵州</option>
                </c:if>
                <c:if test="${requestScope.f_user.address == '湖北'}">
                    <option value="广东">广东</option>
                    <option value="湖南">湖南</option>
                    <option value="湖北" selected>湖北</option>
                    <option value="重庆">重庆</option>
                    <option value="贵州">贵州</option>
                </c:if>
                <c:if test="${requestScope.f_user.address == '重庆'}">
                    <option value="广东">广东</option>
                    <option value="湖南">湖南</option>
                    <option value="湖北">湖北</option>
                    <option value="重庆" selected="selected">重庆</option>
                    <option value="贵州">贵州</option>
                </c:if>
                <c:if test="${requestScope.f_user.address == '贵州'}">
                    <option value="广东">广东</option>
                    <option value="湖南">湖南</option>
                    <option value="湖北">湖北</option>
                    <option value="重庆">重庆</option>
                    <option value="贵州" selected="selected">贵州</option>
                </c:if>
                <option value="广东">广东</option>
                <option value="湖南">湖南</option>
                <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" value="${f_user.qq}" id="qq" placeholder="请输入QQ号码"/>
        </div>

        <div class="form-group">
            <label for="email">Email：</label>
            <input type="text" class="form-control" name="email" id="email" value="${f_user.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>

回显效果

功能五、分页查询

定义PageBean

package com.zhou.test.domain;

import java.util.List;

/**
 * @author it春和
 * @create 2022-03-03 23:38
 */
public class PageBean<T> {
    private int totalCount; // 总记录数
    private int currentPage; // 当前页码
    private int rows; // 每页显示的条数
    private int totalPage; // 总页数
    private List<T> list; // 一页显示的数据

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getRows() {
        return rows;
    }

    public void setRows(int rows) {
        this.rows = rows;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }
}

编写UserDao

/**
 * 查询总记录数
 * @return
 */
public int findTotalCount();

/**
 * 分页查询
 * @param strat 开始索引
 * @param end 一页查询多少条记录
 * @return 装在User的集合
 */
public List<User> findUserByPage(int strat,int end);

  @Override
    public int findTotalCount() {
        String sql = "select count(*) from t_user";
        Integer integer = template.queryForObject(sql, Integer.class);
        return integer;
    }

    @Override
    public List<User> findUserByPage(int strat, int end) {
        String sql = "select * from t_user limit ?,?";
        List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class), strat, end);
        return users;
    }

编写UserService

/**
 * 分页查询用户
 * @param currentPage 当前页
 * @param rows 每页显示的条数
 * @return 返回一个pagebean对象
 */
public PageBean<User> findUserByPage(int currentPage,int rows);

@Override
public PageBean<User> findUserByPage(int currentPage, int rows) {
    UserDao userDao = new UserDaoImpl();

    PageBean<User> userPageBean = new PageBean<>();
    userPageBean.setCurrentPage(currentPage);
    userPageBean.setRows(rows);

    // 查询总记录数
    int totalCount = userDao.findTotalCount();
    userPageBean.setTotalCount(totalCount);

    // 计算总页数 总页数 = totalCount % rows == 0 ? totalCount % rows : totalCount % rows + 1
    int totalPage = (totalCount % rows) == 0 ? (totalCount % rows) : (totalCount % rows + 1);
    userPageBean.setTotalPage(totalPage);

    // 查询每页显示的用户数据 开始索引为 （currentPage-1） * rows

    int start = (currentPage - 1) * rows;
    List<User> userList = userDao.findUserByPage(start, rows);
    userPageBean.setList(userList);

    return userPageBean;
}

编写Servlet

package com.zhou.test.web;
/**
 * @author it春和
 * @create 2022-03-03 23:59
 */

import com.zhou.test.domain.PageBean;
import com.zhou.test.domain.User;
import com.zhou.test.service.UserService;
import com.zhou.test.service.impl.UserServiceImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/findeUserByPageServlet")
public class FindeUserByPageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1、接收参数
        String currentPage = request.getParameter("currentPage");
        String rows = request.getParameter("rows");

        if(currentPage == null || "".equals(currentPage)){

            currentPage = "1";
        }
        if(rows == null || "".equals(rows)){
            rows = "5";
        }

        int _currentPage = Integer.parseInt(currentPage);
        int _rows = Integer.parseInt(rows);

        // 2、调用service查询
        UserService userService = new UserServiceImpl();
        PageBean<User> pb = userService.findUserByPage(_currentPage, _rows);

        System.out.println(pb);

        //3.将PageBean存入request
        request.setAttribute("pb",pb);
        //4.转发到list.jsp
        request.getRequestDispatcher("/list.jsp").forward(request,response);


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

修改index.jsp

修改list.jsp

修改总记录数总页码的显示

标签遍历 页码

上一页的禁用状态

list.jsp代码

<%--
  User: it春和
  Date: 2022/2/27 16:30
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- 网页使用的语言 -->
<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>

        <c:forEach items="${requestScope.pb.list}" var="user" varStatus="u">

            <tr>
                <td>${u.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}/findOneUser?id=${user.id}">修改</a> 
                    <a class="btn btn-default btn-sm"
                       href="${pageContext.request.contextPath}/deleteUserServlet?id=${user.id}">删除</a></td>
            </tr>
        </c:forEach>
        <tr>
            <td colspan="8" align="center"><a class="btn btn-primary" href="add.jsp">添加联系人</a></td>
        </tr>
    </table>

    <%--  分页条  --%>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <%--  上一页 --%>
            <c:if test="${requestScope.pb.currentPage == 1}">
                <li class="disabled">
            </c:if>
                <c:if test="${requestScope.pb.currentPage != 1}">
                 <li>
               </c:if>

                <a href="${pageContext.request.contextPath}/findeUserByPageServlet?currentPage=${requestScope.pb.currentPage -1}&rows=5"
                   aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <%--      有多少页就生成多少个li标签 使用到循环      --%>
            <c:forEach begin="1" end="${requestScope.pb.totalPage}" var="i">
                <%-- <li><a href="${pageContext.request.contextPath}/findeUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li> <%–当前的页码–%>--%>

                <c:if test="${pb.currentPage == i}">
                    <li class="active"><a
                            href="${pageContext.request.contextPath}/findeUserByPageServlet?currentPage=${i}&rows=5">${i}</a>
                    </li> <%--当前的页码--%>
                </c:if>
                <c:if test="${pb.currentPage != i}">
                    <li>
                        <a href="${pageContext.request.contextPath}/findeUserByPageServlet?currentPage=${i}&rows=5">${i}</a>
                    </li> <%--当前的页码--%>
                </c:if>


            </c:forEach>


            <c:if test="${requestScope.pb.currentPage >= requestScope.pb.totalPage}">
                <%--     下一页      --%>
                <li class="disabled">
                    <a href="${pageContext.request.contextPath}/findeUserByPageServlet?currentPage=${requestScope.pb.currentPage +1}&rows=5"
                       aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </c:if>
            <c:if test="${requestScope.pb.currentPage < requestScope.pb.totalPage}">
                <%--     下一页      --%>
                <li>
                    <a href="${pageContext.request.contextPath}/findeUserByPageServlet?currentPage=${requestScope.pb.currentPage +1}&rows=5"
                       aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </c:if>


            <span style="font-size: 25px;margin-left: 5px">共${requestScope.pb.totalCount}条记录，共${requestScope.pb.totalPage}页</span>
        </ul>
    </nav>
</div>
</body>
</html>

运行效果

功能六、复杂条件查询

修改页面代码

1、在FindUserByPageServlet中添加条件查询

package com.zhou.test.web;
/**
 * @author it春和
 * @create 2022-03-03 23:59
 */

import com.zhou.test.domain.PageBean;
import com.zhou.test.domain.User;
import com.zhou.test.service.UserService;
import com.zhou.test.service.impl.UserServiceImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.Map;

@WebServlet("/findeUserByPageServlet")
public class FindeUserByPageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        // 1、接收参数
        String currentPage = request.getParameter("currentPage");
        String rows = request.getParameter("rows");

        // 获取条件查询的参数
        Map<String, String[]> condition = request.getParameterMap();

        if(currentPage == null || "".equals(currentPage)){

            currentPage = "1";
        }
        if(rows == null || "".equals(rows)){
            rows = "5";
        }

        int _currentPage = Integer.parseInt(currentPage);
        int _rows = Integer.parseInt(rows);

        // 再次判断
        if(_currentPage <= 0){
            _currentPage = 1;
        }

        // 2、调用service查询
        UserService userService = new UserServiceImpl();
        PageBean<User> pb = userService.findUserByPage(_currentPage, _rows,condition);

        System.out.println(pb);

        //3.将PageBean存入request
        request.setAttribute("pb",pb);
        // 将查询条件存入request域中
        request.setAttribute("condition",condition);

        //4.转发到list.jsp
        request.getRequestDispatcher("/list.jsp").forward(request,response);


    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

2、重构UserService

/**
 * 分页查询用户
 * @param currentPage 当前页
 * @param rows 每页显示的条数
 * @param condition 条件
 * @return 返回一个pagebean对象
 */
public PageBean<User> findUserByPage(int currentPage, int rows, Map<String, String[]> condition);

@Override
public PageBean<User> findUserByPage(int currentPage, int rows, Map<String, String[]> condition) {
    UserDao userDao = new UserDaoImpl();

    PageBean<User> userPageBean = new PageBean<>();
    userPageBean.setCurrentPage(currentPage);
    userPageBean.setRows(rows);

    // 查询总记录数
    int totalCount = userDao.findTotalCount(condition);
    userPageBean.setTotalCount(totalCount);

    // 计算总页数 总页数 = totalCount % rows == 0 ? totalCount / rows : totalCount / rows + 1
    int totalPage = (totalCount % rows) == 0 ? (totalCount / rows) : (totalCount / rows + 1);
    userPageBean.setTotalPage(totalPage);

    if (currentPage >= totalPage){
        currentPage = totalPage;
    }

    // 查询每页显示的用户数据 开始索引为 （currentPage-1） * rows

    int start = (currentPage - 1) * rows;
    List<User> userList = userDao.findUserByPage(start, rows,condition);
    userPageBean.setList(userList);

    return userPageBean;
}

3、重构UserDao

/**
 * 分页查询
 * @param strat 开始索引
 * @param end 一页查询多少条记录
 * @param condition 条件
 * @return 装在User的集合
 */
public List<User> findUserByPage(int strat, int end, Map<String, String[]> condition);

@Override
public int findTotalCount(Map<String, String[]> condition) {
    // 1、定义一个模板sql
    String sql = "select count(*) from t_user where 1=1 ";
    StringBuilder sb = new StringBuilder(sql);
    // 2、遍历map
    Set<String> keySet = condition.keySet();
    // 定义参数的集合
    List<Object> params = new ArrayList<>();
    for (String key : keySet) {
        // 首先排除掉分页相关的条件
        if ("currentPage".equals(key) || "rows".equals(key)) {
            continue; // 结束本次循环 继续下一次循环
        }


        // 获取value
        String value = condition.get(key)[0];
        // 判断value是否有值
        if (value != null && !"".equals(value)) {
            // 表示value有值 那么拼接字符串
            sb.append(" and " + key + " like ? ");
            // value就是我们将要传递的参数 将value加入集合
            params.add("%" + value + "%");
        }
    }

    String new_sql = sb.toString();
    System.out.println(new_sql);
    System.out.println(params);

    Integer integer = template.queryForObject(new_sql, Integer.class,params.toArray()); // 传递参数
    return integer;
}

@Override
public List<User> findUserByPage(int strat, int end, Map<String, String[]> condition) {
    // 定义模板sql
    String sql = "select * from t_user where 1=1 ";

    StringBuilder sb = new StringBuilder(sql);
    // 2、遍历map
    Set<String> keySet = condition.keySet();
    // 定义参数的集合
    List<Object> params = new ArrayList<>();
    for (String key : keySet) {
        // 首先排除掉分页相关的条件
        if ("currentPage".equals(key) || "rows".equals(key)) {
            continue; // 结束本次循环 继续下一次循环
        }


        // 获取value
        String value = condition.get(key)[0];
        // 判断value是否有值
        if (value != null && !"".equals(value)) {
            // 表示value有值 那么拼接字符串
            sb.append(" and " + key + " like ? ");
            // value就是我们将要传递的参数 将value加入集合
            params.add("%" + value + "%");
        }
    }

    // 添加分页查询
    sb.append(" limit ?,? ");
    // 像参数集合中添加start rows
    params.add(strat);
    params.add(end);

    System.out.println(sb.toString());
    System.out.println(params);

    List<User> users = template.query(sb.toString(), new BeanPropertyRowMapper<User>(User.class), params.toArray());
    return users;
}

4、回显数据

在FindeUserByPageServlet中已经将条件的map集合存入了request域中

在list.jsp页面中将codition取出 设置input表单的value属性

5、测试

6、小细节

当我们点击第二页或者第三页的时候 发现会出现不安条件查询的结果数据

所以我们应该在页码的请求路径上加上条件condition

修改list.jsp