案例：列表的增删改查

# 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分支上，有需要的同学可以自行获取。

‍

在GitHub上编辑此页

上次更新: 2023/5/6 21:54:08

← JSTL标签库 Filter学习→