案例：列表的增删改查

# 130.案例：列表的增删改查

用我们之前学过的技术，我们来做一个综合的案例。本项目所有资料可以在 Gitee (opens new window) 和 GitHub (opens new window) 项目上找到。

‍ ‍

# 需求

我们直接演示下我们要做什么。我们有如下页面（已压缩为一个文件“页面.zip”）

add.html
index.html
list.html
login.html
update.html

‍

首先是登录页面

‍

登录后跳转到 index.html，有个超链接

‍

点击查询所有用户信息后，会跳转到 list.html，可以看到所有用户

‍

可以对某个数据进行修改：update.html

‍

或者添加某个联系人：add.html

‍

# 需求分析

搞清需求：简单来说，就是用户管理，增删改查。

需求设计：

技术选型：Servlet + JSP + MySQL + JDBCTempleat + Duird + BeanUtilS + Tomcat。目前我们会的就这么多，后续实际开发中还是得看情况，例如哪个更好，团队里大部分人会什么

数据库设计

use learnjdbc; 	      -- 使用数据库
create table users(   -- 创建表
	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)
);

1
2
3
4
5
6
7
8
9
10

开发阶段：
1. 环境搭建（一般是架构师负责）：创建数据库环境，创建项目，导入需要的 jar 包等
2. 进入编码开发阶段
测试
部署运维

‍

# 数据库准备

我们执行以下 SQL：

‍

use learnjdbc; 	      -- 使用数据库
create table users(   -- 创建表
	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)
);


insert  into `users`(`id`,`name`,`gender`,`age`,`address`,`qq`,`email`) values (1,'张三','男',13,'陕西','12345','peterjxl@qq.com');
insert  into `users`(`id`,`name`,`gender`,`age`,`address`,`qq`,`email`) values (2,'李四','女',15,'北京','88888','peterjxl@peterjxl.com');

1
2
3
4
5
6
7
8
9
10
11
12
13
14

‍

# 新建项目

为了和之前的项目区分，这里新建一个项目 LearnJavaWebUserManage。

‍

然后在项目右键--添加框架支持，选择添加 Web 应用程序

‍

然后添加服务器配置，并设置应用程序上下文为 /UserManage。

启动，然后访问 http://localhost: 8080/UserManage/index.jsp，测试项目启动没什么问题；

‍

# 导入依赖

在 web 目录下新建 WEB-INF 目录，然后在下面新建 lib 目录，导入如下依赖：

c3p0-0.9.1.2.jar
commons-beanutils-1.8.3.jar
commons-logging-1.1.1.jar
druid-1.0.9.jar
javax.servlet.jsp.jstl.jar
jstl-impl.jar
mysql-connector-java-8.0.27.jar
spring-beans-4.2.4.RELEASE.jar
spring-core-4.2.4.RELEASE.jar
spring-jdbc-4.2.4.RELEASE.jar
spring-tx-4.2.4.RELEASE.jar
servlet-api.jar

‍

# 页面准备

我们将页面.zip 解压到 web 目录下，后续我们会改造为 JSP。然后我们重启 Tomcat，尝试能否正常访问这些页面，然后我们就可以删除之前的 index.jsp 文件了

‍

接下来，我们就完成列表查询的功能，其他功能是作业，自行完成

‍

# 列表查询

我们以三层架构来讲解如何完成。

首先，用户点击 “查询所有用户信息”的按钮，应该是跳转到一个 Servlet（因为要从数据库查数据），我们假设为 UserListServlet
UserListServlet 调用 service 层的 findAll 方法，返回 List 集合， List
将 List 集合存入 request 域中
转发到 list.jsp 页面展示
service 层，我们一般会写接口和实现类，例如本例中是 UserService 接口和 UserServiceImpl 类。在 UserListServlet 中声明的变量是 UserService 接口类型。这样方便以后替换实现类，面向接口编程
DAO 层同理，UserDao 接口，UserDaoImpl 实现类
UserService 接口定义了 findAll 方法，UserService 实现类实现了这个方法；
UserDao 同理，定义了 findAll 方法，实现类实现了这个方法；

‍

示意图：

‍

# 前端 index.jsp

我们修改 index.html 文件为 index.jsp，并添加 JSP 的声明，修改超链接的地址：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<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">
  	<a
	  href="${pageContext.request.contextPath}/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
	</a>
  </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

‍

# 包准备

我们新建如下的包：

domain：存放实体类
web：存放界面层代码
service：存放业务层代码
dao：存放数据层代码
util：存放工具类

‍

# 创建实体类 User

public class User {

    private int id;
    private String name;
    private String gender;
    private int age;
    private String address;
    private String qq;
    private String email;
}

1
2
3
4
5
6
7
8
9
10

然后自行生成 getter 和 setter，toString 方法，这里就不演示了

‍

# 创建 `UserService` 接口

package com.peterjxl.service;


import com.peterjxl.domain.User;

import java.util.List;

/**
 * 用户管理的业务接口
 */
public interface UserService {

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

‍

# 创建 `UserService` 实现类

‍

package com.peterjxl.service.impl;

import com.peterjxl.domain.User;
import com.peterjxl.service.UserService;

import java.util.List;

public class UserServiceImpl implements UserService {

    @Override
    public List<User> findAll() {
        return null;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里应该调用 DAO 完成查询，因此我们写一个 DAO 接口

‍

# dao 接口

‍

package com.peterjxl.dao;

import com.peterjxl.domain.User;
import java.util.List;

public interface UserDao {


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

‍

# dao 实现类

‍

package com.peterjxl.dao.impl;

import com.peterjxl.dao.UserDao;
import com.peterjxl.domain.User;

import java.util.List;

public class UserDaoImpl implements UserDao {
    @Override
    public List<User> findAll() {
        return null;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

这里我们先不写业务代码

‍

# 完善 `UserService` 实现类

有了 DAO，我们就可以完善业务层的代码了

package com.peterjxl.service.impl;

import com.peterjxl.dao.UserDao;
import com.peterjxl.dao.impl.UserDaoImpl;
import com.peterjxl.domain.User;
import com.peterjxl.service.UserService;

import java.util.List;

public class UserServiceImpl implements UserService {
    private UserDao dao = new UserDaoImpl();
    @Override
    public List<User> findAll() {
        return dao.findAll();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

‍

# 创建 UserListServlet

有了业务层，我们就可以完成界面层的代码了，我们新建一个 Servlet

package com.peterjxl.web.servlet;

import com.peterjxl.domain.User;
import com.peterjxl.service.UserService;
import com.peterjxl.service.impl.UserServiceImpl;

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

@WebServlet("/userListServlet")
public class UserListServlet 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 {
        UserService service = new UserServiceImpl();
        List<User> users = service.findAll();
        req.setAttribute("users", users);
        req.getRequestDispatcher("/list.jsp").forward(req, resp);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

‍

# 完善 dao 实现类

我们先准备 Druid 配置文件，在 src 下新建 druid.properties

driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql:///learnjdbc
username=learn
password=learnpassword
initialSize=5
maxActive=10
maxWait=3000

1
2
3
4
5
6
7

‍

JDBCUtils.java，还有我们之前写过的工具类

package com.peterjxl.util;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

/**
 * JDBC工具类 使用Durid连接池
 */
public class JDBCUtils {

    private static DataSource ds ;

    static {

        try {
            //1.加载配置文件
            Properties pro = new Properties();
            //使用ClassLoader加载配置文件，获取字节输入流
            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            pro.load(is);

            //2.初始化连接池对象
            ds = DruidDataSourceFactory.createDataSource(pro);

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

    /**
     * 获取连接池对象
     */
    public static DataSource getDataSource(){
        return ds;
    }


    /**
     * 获取连接Connection对象
     */
    public static Connection getConnection() throws SQLException {
        return  ds.getConnection();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

‍

完善实现类

package com.peterjxl.dao.impl;

import com.peterjxl.dao.UserDao;
import com.peterjxl.domain.User;
import com.peterjxl.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

import java.util.List;

public class UserDaoImpl implements UserDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    @Override
    public List<User> findAll() {
        String sql = "select * from users";
        List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));
        return users;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

‍

# 修改 list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!-- 网页使用的语言 -->
<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="${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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

‍

注：uri=http://java.sun.com/jstl/core 的时候，笔者遇到了报错

据标记文件中的 TLD 或 attribute 指令, attribute [items] 不接受任何表达式

According to TLD or attribute directive in tag file, attribute items does not accept any expressions

根据上网搜索得知，可能是版本号的问题，因此改成了 http://java.sun.com/jstl/core_rt

‍

# 测试

重启 Tomcat，访问 http://localhost: 8080/UserManage/index.jsp，点击查询：

‍

# 总结

本次案例是一个综合性的练习，本文所有代码已提交到 Gitee (opens new window) 和 GitHub (opens new window) 上，并创建了分支 Version1.0 作为本文的分支代码，然后读者完成了其他功能并提交到了 master 分支上，有需要的同学可以自行获取。

‍

上次更新: 2024/10/1 21:14:36

← JSTL 标签库 Filter 学习→