Java Web 案例教程-杰瑞科技汇

Java Web 案例教程：从零开始构建一个用户管理系统

本教程将带你一步步构建一个基于 Java Web 技术栈的简单用户管理系统，我们将使用经典的 Servlet + JSP + JDBC + MySQL 技术组合，并引入 Maven 进行项目管理和 MVC 设计模式来组织代码。

（图片来源网络，侵删）

最终项目功能：

用户列表展示
新增用户
编辑用户信息
删除用户

第一部分：环境准备与项目搭建

在开始编码之前,我们需要准备好开发环境。

环境要求

JDK 8 或更高版本: 下载地址
Apache Tomcat 9.x (或更高版本): Java Web 应用服务器的首选。下载地址
IDE: IntelliJ IDEA (推荐) 或 Eclipse，本教程以 IntelliJ IDEA 为例。
MySQL 8.0 或更高版本: 下载地址
Maven: IDE 已内置，或可从官网下载。

创建 Maven Web 项目

打开 IntelliJ IDEA，选择 File -> New -> Project。
在左侧菜单中选择 Maven，勾选 Create from archetype。
在 Archetype 列表中，选择 org.apache.maven.archetypes:maven-archetype-webapp。
输入 GroupId ( com.example) 和 ArtifactId ( user-management-system)，点击 Finish。

IDEA 会自动为你创建一个标准的 Maven Web 项目结构。

项目结构解析

创建完成后,你会看到类似如下的目录结构：

（图片来源网络，侵删）

user-management-system/
├── src/
│   ├── main/
│   │   ├── java/          # 存放 Java 源代码 (Servlet, DAO, Model 等)
│   │   ├── resources/     # 存放配置文件 (如 db.properties)
│   │   └── webapp/        # 存放 Web 资源
│   │       ├── WEB-INF/   # 存放安全、私有的资源
│   │       │   └── web.xml # 部署描述符 (Servlet 3.0+ 后可简化)
│   │       ├── index.jsp  # 首页
│   │       └── ...        # 其他 JSP, CSS, JS 文件
│   └── test/
│       └── java/          # 存放测试代码
└── pom.xml                # Maven 项目核心配置文件

配置 `pom.xml`

我们需要添加项目所需的依赖：Servlet API, JSP API, MySQL Connector, JSTL。

打开 pom.xml 文件，在 <dependencies> 标签内添加以下依赖：

<dependencies>
    <!-- Servlet API -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
        <scope>provided</scope>
    </dependency>
    <!-- JSP API -->
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>javax.servlet.jsp-api</artifactId>
        <version>2.3.3</version>
        <scope>provided</scope>
    </dependency>
    <!-- JSTL (JSP Standard Tag Library) -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <!-- MySQL Connector/J -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.28</version>
    </dependency>
</dependencies>

配置 Tomcat: 在 IDEA 右上角，点击 Add Configuration -> -> Tomcat Server -> Local。

选择你下载并解压的 Tomcat 目录。
在 Deployment 标签页，点击，选择 Artifact...，然后选择你的 user-management-system:war exploded。
应用并运行,如果一切正常，访问 http://localhost:8080/user-management-system/ 应该能看到 index.jsp 的内容。

第二部分：数据库设计与准备

创建数据库和表

打开 MySQL 客户端（如 Navicat, MySQL Workbench 或命令行），执行以下 SQL 语句：

（图片来源网络，侵删）

-- 创建数据库
CREATE DATABASE IF NOT EXISTS user_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-- 使用数据库
USE user_db;
-- 创建用户表
CREATE TABLE IF NOT EXISTS `t_user` (
  `id` INT PRIMARY KEY AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL UNIQUE,
  `password` VARCHAR(50) NOT NULL,
  `email` VARCHAR(100),
  `created_time` DATETIME DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 插入一些测试数据
INSERT INTO `t_user` (username, password, email) VALUES
('admin', '123456', 'admin@example.com'),
('zhangsan', 'password', 'zhangsan@example.com'),
('lisi', 'hello', 'lisi@example.com');

第三部分：实现用户列表展示功能

这是我们的第一个核心功能,也是最基础的功能。

步骤 1：创建数据模型

在 src/main/java 下创建包 com.example.model，并创建 User.java。

// src/main/java/com/example/model/User.java
package com.example.model;
import java.util.Date;
public class User {
    private int id;
    private String username;
    private String password;
    private String email;
    private Date createdTime;
    // Getters and Setters
    // (为了简洁，此处省略，实际开发中需要添加)
    public int getId() { return id; }
    public void setId(int id) { this.id = id; }
    public String getUsername() { return username; }
    public void setUsername(String username) { this.username = username; }
    public String getPassword() { return password; }
    public void setPassword(String password) { this.password = password; }
    public String getEmail() { return email; }
    public void setEmail(String email) { this.email = email; }
    public Date getCreatedTime() { return createdTime; }
    public void setCreatedTime(Date createdTime) { this.createdTime = createdTime; }
}

步骤 2：创建数据库连接工具类

在 src/main/java 下创建包 com.example.util，并创建 DBUtil.java。

// src/main/java/com/example/util/DBUtil.java
package com.example.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBUtil {
    private static final String URL = "jdbc:mysql://localhost:3306/user_db?useSSL=false&serverTimezone=UTC";
    private static final String USER = "root"; // 你的数据库用户名
    private static final String PASSWORD = "your_password"; // 你的数据库密码
    static {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(URL, USER, PASSWORD);
    }
    public static void closeConnection(Connection conn) {
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

步骤 3：创建数据访问对象

DAO 负责与数据库进行交互，在 src/main/java 下创建包 com.example.dao，并创建 UserDAO.java。

// src/main/java/com/example/dao/UserDAO.java
package com.example.dao;
import com.example.model.User;
import com.example.util.DBUtil;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class UserDAO {
    // 查询所有用户
    public List<User> getAllUsers() {
        List<User> users = new ArrayList<>();
        String sql = "SELECT * FROM t_user";
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        try {
            conn = DBUtil.getConnection();
            pstmt = conn.prepareStatement(sql);
            rs = pstmt.executeQuery();
            while (rs.next()) {
                User user = new User();
                user.setId(rs.getInt("id"));
                user.setUsername(rs.getString("username"));
                user.setPassword(rs.getString("password"));
                user.setEmail(rs.getString("email"));
                user.setCreatedTime(rs.getTimestamp("created_time"));
                users.add(user);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DBUtil.closeConnection(conn);
        }
        return users;
    }
}

步骤 4：创建 Servlet

Servlet 作为控制器，接收请求，调用 DAO，并将数据传递给 JSP 进行展示。

在 src/main/java 下创建包 com.example.servlet，并创建 UserListServlet.java。

// src/main/java/com/example/servlet/UserListServlet.java
package com.example.servlet;
import com.example.dao.UserDAO;
import com.example.model.User;
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("/user/list") // 使用注解映射 URL
public class UserListServlet extends HttpServlet {
    private UserDAO userDAO = new UserDAO();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 调用 DAO 获取用户列表
        List<User> users = userDAO.getAllUsers();
        // 2. 将用户列表存入 request 域中
        req.setAttribute("userList", users);
        // 3. 转发到 JSP 页面进行展示
        req.getRequestDispatcher("/WEB-INF/jsp/user_list.jsp").forward(req, resp);
    }
}

步骤 5：创建 JSP 视图

在 src/main/webapp/WEB-INF/ 下创建 jsp 文件夹（这是为了防止用户直接通过 URL 访问 JSP），然后在 jsp 文件夹中创建 user_list.jsp。

<%-- src/main/webapp/WEB-INF/jsp/user_list.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>用户列表</title>
    <style>
        table { border-collapse: collapse; width: 80%; }
        th, td { border: 1px solid #dddddd; text-align: left; padding: 8px; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>用户列表</h1>
    <a href="${pageContext.request.contextPath}/user/add.jsp">添加新用户</a>
    <table>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <c:forEach var="user" items="${userList}">
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.email}</td>
                <td>${user.createdTime}</td>
                <td>
                    <a href="${pageContext.request.contextPath}/user/edit?id=${user.id}">编辑</a> |
                    <a href="javascript:deleteUser(${user.id})">删除</a>
                </td>
            </tr>
        </c:forEach>
    </table>
    <script>
        function deleteUser(id) {
            if (confirm("确定要删除该用户吗？")) {
                window.location.href = "${pageContext.request.contextPath}/user/delete?id=" + id;
            }
        }
    </script>
</body>
</html>

步骤 6：测试

启动 Tomcat，在浏览器中访问 http://localhost:8080/user-management-system/user/list，你应该能看到数据库中的用户列表。

第四部分：实现新增用户功能

步骤 1：创建新增用户页面

在 src/main/webapp/WEB-INF/jsp/ 下创建 add.jsp。

<%-- src/main/webapp/WEB-INF/jsp/add.jsp --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>添加用户</title>
</head>
<body>
    <h1>添加新用户</h1>
    <form action="${pageContext.request.contextPath}/user/add" method="post">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" required></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password" required></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td><input type="email" name="email"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交">
                    <a href="${pageContext.request.contextPath}/user/list">返回列表</a>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

步骤 2：创建处理新增请求的 Servlet

在 com.example.servlet 包中创建 AddUserServlet.java。

// src/main/java/com/example/servlet/AddUserServlet.java
package com.example.servlet;
import com.example.dao.UserDAO;
import com.example.model.User;
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.sql.Timestamp;
@WebServlet("/user/add")
public class AddUserServlet extends HttpServlet {
    private UserDAO userDAO = new UserDAO();
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 获取表单数据
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String email = req.getParameter("email");
        // 2. 创建 User 对象
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        user.setEmail(email);
        // 3. 调用 DAO 进行数据库操作
        userDAO.addUser(user);
        // 4. 重定向到用户列表页面
        resp.sendRedirect(req.getContextPath() + "/user/list");
    }
}

步骤 3：在 UserDAO 中添加 `addUser` 方法

// 在 UserDAO.java 中添加
public void addUser(User user) {
    String sql = "INSERT INTO t_user (username, password, email) VALUES (?, ?, ?)";
    Connection conn = null;
    PreparedStatement pstmt = null;
    try {
        conn = DBUtil.getConnection();
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, user.getUsername());
        pstmt.setString(2, user.getPassword());
        pstmt.setString(3, user.getEmail());
        pstmt.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        DBUtil.closeConnection(conn);
    }
}

步骤 4：测试

访问 http://localhost:8080/user-management-system/user/add.jsp。
填写表单并提交。
页面会跳转到用户列表,你应该能看到新添加的用户。

第五部分：实现编辑与删除功能

这两个功能与新增功能类似,都遵循“请求 -> Servlet -> DAO -> 数据库 -> 跳转”的流程。

编辑功能

编辑页面 (edit.jsp): 类似于 add.jsp，但表单字段需要预填充现有数据，这需要一个 EditUserServlet 来根据 id 查询用户信息并转发到 edit.jsp。
处理编辑请求的 Servlet: 接收表单数据，调用 UserDAO 的 updateUser 方法更新数据库，然后重定向到列表页。

删除功能

处理删除请求的 Servlet: 我们已经在 user_list.jsp 中创建了删除链接，指向一个 DeleteUserServlet。
DeleteUserServlet: 获取 id 参数，调用 UserDAO 的 deleteUser 方法，然后重定向到列表页。

代码示例

EditUserServlet.java

@WebServlet("/user/edit")
public class EditUserServlet extends HttpServlet {
    private UserDAO userDAO = new UserDAO();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int id = Integer.parseInt(req.getParameter("id"));
        User user = userDAO.getUserById(id);
        req.setAttribute("user", user);
        req.getRequestDispatcher("/WEB-INF/jsp/edit.jsp").forward(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int id = Integer.parseInt(req.getParameter("id"));
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String email = req.getParameter("email");
        User user = new User();
        user.setId(id);
        user.setUsername(username);
        user.setPassword(password);
        user.setEmail(email);
        userDAO.updateUser(user);
        resp.sendRedirect(req.getContextPath() + "/user/list");
    }
}

DeleteUserServlet.java

@WebServlet("/user/delete")
public class DeleteUserServlet extends HttpServlet {
    private UserDAO userDAO = new UserDAO();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int id = Integer.parseInt(req.getParameter("id"));
        userDAO.deleteUser(id);
        resp.sendRedirect(req.getContextPath() + "/user/list");
    }
}

在 UserDAO.java 中添加 getUserById, updateUser, deleteUser 方法

public User getUserById(int id) { /* ... 实现 ... */ }
public void updateUser(User user) { /* ... 实现 ... */ }
public void deleteUser(int id) { /* ... 实现 ... */ }

第六部分：总结与进阶

回顾 MVC 架构

在这个案例中,我们清晰地实践了 MVC 设计模式：

Model (模型): User.java (数据对象) 和 UserDAO.java (数据访问逻辑)，它们负责处理数据和业务逻辑，与视图层完全解耦。
View (视图): *.jsp 文件，它们只负责展示数据，不包含任何业务逻辑。
Controller (控制器): *Servlet.java，它们接收用户请求，调用 Model 层处理数据，然后选择合适的 View 进行响应。

这种分层使得代码结构清晰、易于维护和扩展。

当前案例的不足与改进方向

代码重复: 每个 Servlet 都需要 try-catch-finally 处理数据库连接，代码冗余。
- 改进: 使用数据库连接池（如 HikariCP, Druid）替代 DBUtil，并可以引入 BaseDAO 来封装通用的 CRUD 操作。
硬编码: SQL 语句、数据库配置等直接写在代码中。
- 改进: 将配置信息（如数据库 URL、用户名、密码）提取到 src/main/resources/db.properties 文件中，通过 ClassLoader 读取。
安全性问题:
- SQL 注入: 虽然我们使用了 PreparedStatement，但在其他地方仍需注意。
- 密码明文存储: 生产环境中密码必须加盐哈希存储（如使用 BCrypt 算法）。
可维护性: 随着功能增多，Servlet 会越来越多。
- 改进: 引入 Spring MVC 框架，它提供了更强大的控制器映射、数据绑定、验证、AOP 等功能，是现代 Java Web 开发的标准。

进阶学习路径

完成这个案例后,你可以向以下方向深入：

框架学习:
- Spring Framework: 学习 IoC (控制反转) 和 AOP (面向切面编程)。
- Spring Boot: 基于 Spring 的快速开发框架，极大地简化了配置和部署。
- MyBatis / JPA: 优秀的持久层框架，比原生 JDBC 更强大、更易用。
前端技术:
- AJAX / Fetch API: 实现页面的异步数据交互，无需刷新整个页面即可更新数据。
- 前端框架: 学习 Vue.js 或 React，构建现代化的单页面应用。
其他技术:
- 构建工具: 深入学习 Maven 或 Gradle。
- 版本控制: 熟练使用 Git。
- 容器化: 学习 Docker，将应用打包成容器，方便部署和迁移。

这个教程为你打下了坚实的基础,从简单的 Servlet/JSP 开始，理解其工作原理，再逐步拥抱更高级的框架，是成为一名优秀 Java Web 开发者的必经之路，祝你学习愉快！

Java Web 案例教程

Java Web 案例教程：从零开始构建一个用户管理系统

第一部分：环境准备与项目搭建

环境要求

创建 Maven Web 项目

项目结构解析

配置 pom.xml

第二部分：数据库设计与准备

创建数据库和表

第三部分：实现用户列表展示功能

步骤 1：创建数据模型

步骤 2：创建数据库连接工具类

步骤 3：创建数据访问对象

步骤 4：创建 Servlet

步骤 5：创建 JSP 视图

步骤 6：测试

第四部分：实现新增用户功能

步骤 1：创建新增用户页面

步骤 2：创建处理新增请求的 Servlet

步骤 3：在 UserDAO 中添加 addUser 方法

步骤 4：测试

第五部分：实现编辑与删除功能

编辑功能

删除功能

代码示例

第六部分：总结与进阶

回顾 MVC 架构

当前案例的不足与改进方向

进阶学习路径

相关推荐

Java Socket编程实例具体怎么实现？

配置 `pom.xml`

步骤 3：在 UserDAO 中添加 `addUser` 方法