从 01 开始 从 01 开始
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机相关技巧
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • 最全面的 RSS 教程
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金
  • 职场规划
  • 关于离职
  • 杂谈
  • 自媒体
  • 📖 读书

    • 读书工具
    • 走进科学
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
    • 读书笔记
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档

晓林

程序猿,自由职业者,博主,英语爱好者,健身达人
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机相关技巧
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • 最全面的 RSS 教程
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金
  • 职场规划
  • 关于离职
  • 杂谈
  • 自媒体
  • 📖 读书

    • 读书工具
    • 走进科学
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
    • 读书笔记
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档
  • JavaSE

  • JavaSenior

  • JavaEE

  • JavaWeb

    • 服务器软件

    • 环境管理和配置管理-科普篇
    • Servlet 入门

      • 什么是 Servlet
      • Servlet 入门案例
      • Servlet 生命周期
      • Servlet 中的注解
      • Tomcat 集成 IDEA
      • Servlet 体系结构
      • HTTP 协议基础
      • 深入 request 和 response 对象
      • request 对象基本使用
      • request 其他功能
      • Servlet 实现登录功能
      • HTTP 协议基础-响应
      • Response 对象基本使用
      • response 对象之重定向
      • response 输出字符到浏览器
      • response 输出字节数据
      • 验证码案例
      • ServletContext
      • 文件下载案例
      • Cookie 笔记
      • Cookie 的更多细节
      • Cookie 实践:记住上次访问时间
      • JSP 入门
      • JSP 的内置对象和案例
      • IDEA 与 JavaWeb 的小技巧
      • Session 笔记
      • 验证码案例
      • JSP 深入学习
      • MVC 开发模式
      • EL 表达式和 JSTL 标签
      • JSTL 标签库
      • 案例:列表的增删改查
        • 需求
        • 需求分析
        • 数据库准备
        • 新建项目
        • 导入依赖
        • 页面准备
        • 列表查询
        • 创建 UserService 接口
        • 创建 UserService 实现类
        • dao 接口
        • dao 实现类
        • 完善 UserService 实现类
        • 创建 UserListServlet
        • 完善 dao 实现类
        • 修改 list.jsp
        • 测试
        • 总结
      • Filter 学习
      • Filter 案例
      • Listener 学习
      • Java 中的 Ajax
      • Java 中的 JSON
  • Spring

  • 主流框架

  • SpringMVC

  • SpringBoot

  • Java
  • JavaWeb
  • Servlet 入门
2023-04-17
目录

案例:列表的增删改查

# 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

# 需求分析

  1. 搞清需求:简单来说,就是用户管理,增删改查。

  2. 需求设计:

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

    2. 数据库设计

      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
  3. 开发阶段:

    1. 环境搭建(一般是架构师负责):创建数据库环境,创建项目,导入需要的 jar 包等
    2. 进入编码开发阶段
  4. 测试

  5. 部署运维 ‍

# 数据库准备

我们执行以下 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 文件了

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

# 列表查询

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

  1. 首先,用户点击 “查询所有用户信息”的按钮,应该是跳转到一个 Servlet(因为要从数据库查数据),我们假设为 UserListServlet
  2. UserListServlet 调用 service 层的 findAll 方法,返回 List 集合, List
  3. 将 List 集合存入 request 域中
  4. 转发到 list.jsp 页面展示
  5. service 层,我们一般会写接口和实现类,例如本例中是 UserService 接口和 UserServiceImpl 类。在 UserListServlet 中声明的变量是 UserService 接口类型。这样方便以后替换实现类,面向接口编程
  6. DAO 层同理,UserDao 接口,UserDaoImpl 实现类
  7. UserService 接口定义了 findAll 方法,UserService 实现类实现了这个方法;
  8. 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 分支上,有需要的同学可以自行获取。 ‍

上次更新: 2025/6/3 09:31:54
JSTL 标签库
Filter 学习

← JSTL 标签库 Filter 学习→

最近更新
01
学点统计学:轻松识破一本正经的胡说八道
06-05
02
2025 年 5 月记
05-31
03
《贫穷的本质》很棒,但可能不适合你
05-27
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式