JSP+Servlet教学商城项目：B/S架构全流程实践

简介：本资源是一套面向计算机专业本科生与Web开发初学者的B/S架构网上商城系统完整实践材料，聚焦于从理论设计到工程落地的全流程学习。资源包含系统设计论文、开题报告、数据库SQL脚本及核心源码压缩包（EShop.zip），覆盖需求分析、模块划分、前后端实现、安全防护与性能优化等关键环节，特别适合课程设计、毕业设计参考及全栈开发入门训练。压缩包共4个文件：2份Word文档（用于撰写规范与答辩准备）、1个SQL文件（含商品、用户、订单等表结构与初始化数据）、1个ZIP源码包（含HTML/CSS/JS前端页面及Java或PHP后端逻辑），整体18.84MB，结构清晰、即解即用。已有576人学习下载，读者可直接部署运行、对照论文理解设计思路、基于SQL快速搭建本地数据库，并通过源码深入掌握购物车、订单处理、支付对接等电商核心功能的实现细节。

1. 这不是又一个“商城模板”，而是一套可跑通、可调试、可拆解的B/S架构教学级工程

打开这个EShop.zip，你拿到的不是一堆静态HTML页面，也不是只有登录页和商品列表的半成品。它是一个完整闭环：用户从浏览器输入地址 → 看到首页轮播图和分类导航 → 搜索商品 → 加入购物车 → 提交订单 → 后台管理员登录 → 审核发货 → 数据库里真实写入订单状态变更。整个链路在本地 Tomcat + MySQL 环境下能一次性跑通，且所有关键节点（如登录校验、购物车持久化、订单生成事务）都留有清晰断点位置。它面向的是两类人：一类是计算机专业正在做毕业设计的学生，需要可复现、可答辩、可讲清技术选型依据的实体项目；另一类是刚转行的开发者，想通过一个“小而全”的系统，把 HTTP 请求生命周期、前后端数据流转、MVC 分层职责、SQL 与 Java 对象映射这些抽象概念，落到具体.java文件、.jsp页面、web.xml配置和CREATE TABLE语句里。它不追求高并发或微服务架构，但每行代码都在回答一个问题：“为什么这里要用 session 而不是 cookie？”、“为什么订单表要拆出 order_item 子表？”、“为什么 login.jsp 的 form action 指向的是 Servlet 而不是直接跳转 JSP？”

2. B/S架构落地的关键决策：为什么选JSP+Servlet+MySQL而非Spring Boot？

2.1 教学场景下的技术栈合理性分析

当前主流开发普遍采用 Spring Boot 快速搭建商城，但本项目坚持使用原生 JSP + Servlet + JDBC 组合，其核心逻辑并非“过时”，而是精准匹配教学目标。Spring Boot 的自动配置会隐藏大量底层机制——比如 DispatcherServlet 如何拦截请求、ViewResolver 怎样解析 JSP 路径、DataSource 如何与 ConnectionPool 关联。而本项目中，web.xml明确声明<servlet>和<servlet-mapping>，每个业务操作对应一个独立 Servlet 类（如LoginServlet.java、AddToCartServlet.java），HTTP 请求的完整生命周期（request → servlet → service → dao → db → response）全部显式暴露。学生调试时，可以在doPost()方法第一行打上断点，单步步入UserService.login()，再步入UserDAO.findByUsername()，最终看到PreparedStatement.executeQuery()执行的 SQL 字符串。这种“透明性”是理解 B/S 架构本质的前提。若直接上 Spring Boot，学生容易陷入“注解怎么写”而非“请求怎么来、响应怎么回”的认知盲区。

2.2 数据库设计：三张核心表的范式约束与业务映射

系统数据库包含user,product,order三张主表，外加order_item关联表，严格遵循第三范式。以order表为例，其字段设计直指业务逻辑：

CREATE TABLE `order` ( `id` INT PRIMARY KEY AUTO_INCREMENT, `user_id` INT NOT NULL, `order_no` VARCHAR(32) NOT NULL UNIQUE, -- 全局唯一订单号，非自增ID `status` TINYINT DEFAULT 0, -- 0:待支付 1:已支付 2:已发货 3:已完成 `total_amount` DECIMAL(10,2) NOT NULL, `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP, `update_time` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) );

注意：order_no字段不使用数据库自增，而是由 Java 代码生成（如System.currentTimeMillis() + Random.nextInt(1000)），这是为后续对接支付接口预留扩展点——真实支付平台要求商户提供唯一订单号，而非依赖数据库 ID。status字段用TINYINT而非ENUM或字符串，既节省存储空间，又便于程序逻辑判断（if(status == 1)比if("paid".equals(status))更高效且不易拼错）。

order_item表则体现一对多关系的正确建模：

CREATE TABLE `order_item` ( `id` INT PRIMARY KEY AUTO_INCREMENT, `order_id` INT NOT NULL, `product_id` INT NOT NULL, `quantity` INT NOT NULL DEFAULT 1, `price` DECIMAL(10,2) NOT NULL, -- 下单时快照价格，避免商品调价影响历史订单 FOREIGN KEY (`order_id`) REFERENCES `order`(`id`) ON DELETE CASCADE, FOREIGN KEY (`product_id`) REFERENCES `product`(`id`) );

2.2.1 为什么 price 要冗余存储在 order_item 中？

这是电商系统的关键设计点。若订单详情只存product_id，展示时需关联查询product.price，一旦商品降价或下架，历史订单价格将错误显示。本方案在生成订单项时，将当时商品售价product.getPrice()写入order_item.price，确保价格快照的准确性。源码中对应逻辑位于OrderService.createOrder()方法内：

// OrderService.java public void createOrder(User user, List<CartItem> cartItems) { // ... 生成 order_no, 插入 order 表 for (CartItem item : cartItems) { Product product = productDAO.findById(item.getProductId()); OrderItem orderItem = new OrderItem(); orderItem.setOrderId(order.getId()); orderItem.setProductId(product.getId()); orderItem.setQuantity(item.getQuantity()); orderItem.setPrice(product.getPrice()); // 关键：取当前价格快照 orderItemDAO.insert(orderItem); } }

2.3 前后端交互协议：RESTful 风格的轻量级约定

尽管未使用现代前端框架，项目仍通过 URL 路径和 HTTP 方法体现 REST 思想。例如：

• GET /product/list→ 查询商品列表（返回 JSON）
• POST /cart/add→ 添加商品到购物车（接收 JSON 参数）
• DELETE /cart/remove?id=123→ 删除购物车某项

所有 AJAX 请求均通过fetch或XMLHttpRequest发起，后端 Servlet 统一返回标准 JSON 格式：

{ "code": 200, "message": "success", "data": { "cartCount": 5 } }

code字段用于前端统一处理状态（如401跳转登录页，500弹出错误提示），data封装业务数据。这种约定使前端无需解析 HTML 片段，可直接绑定 Vue/React 组件，也为未来升级为前后端分离架构预留接口契约。

3. 本地环境一键启动：Tomcat 部署与数据库初始化实操

3.1 环境准备清单与版本兼容性验证

本项目经测试可在以下组合稳定运行：

• JDK 8u291（必须，因 JSP 编译依赖特定 Servlet API 版本）
• Apache Tomcat 8.5.99（Tomcat 9+ 默认禁用 JSP EL 表达式，需额外配置）
• MySQL 5.7.36（MySQL 8.0+ 默认启用caching_sha2_password认证插件，与项目 JDBC 驱动不兼容）

提示：若使用 MySQL 8.0，请在创建用户时指定旧版认证方式：

CREATE USER 'eshop'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456'; GRANT ALL PRIVILEGES ON eshop_db.* TO 'eshop'@'localhost';

3.2 数据库初始化：执行 SQL 脚本的三个关键动作

解压后的database/目录下包含eshop.sql，需按顺序执行：

1. 创建数据库并设置编码

   mysql -u root -p -e "CREATE DATABASE eshop_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"

2. 导入表结构与基础数据

   mysql -u eshop -p eshop_db < database/eshop.sql

   此脚本不仅建表，还预置了测试账号（admin/123456）、分类数据（手机、电脑、配件）及 20+ 商品记录，避免启动后首页空白。

3. 验证外键约束是否生效
   执行SHOW CREATE TABLE order;，确认输出中包含CONSTRAINTfk_order_userFOREIGN KEY (user_id) REFERENCESuser(id)。若缺失，说明 SQL 文件未正确执行或 MySQL 未启用 InnoDB 引擎（SHOW ENGINES;查看）。

3.3 Tomcat 部署：war 包构建与 context-path 配置

项目根目录含build.xml（Ant 构建脚本），执行以下命令生成可部署 war 包：

# 在项目根目录执行 ant war

该命令会：

• 编译src/下所有.java文件至build/classes/
• 复制WebContent/下资源（JSP、CSS、JS、WEB-INF）至build/eshop/
• 将build/eshop/打包为eshop.war放入dist/目录

将dist/eshop.war复制到 Tomcat 的webapps/目录后，必须修改conf/server.xml，添加 Context 配置以支持中文路径和 Session 共享：

<!-- 在 <Host> 标签下添加 --> <Context path="/eshop" docBase="eshop" reloadable="true" useNaming="false"> <Parameter name="useUnicode" value="true" override="false"/> <Parameter name="characterEncoding" value="UTF-8" override="false"/> </Context>

重启 Tomcat 后，访问http://localhost:8080/eshop/即可进入首页。若出现 404，请检查webapps/eshop/WEB-INF/web.xml中<welcome-file-list>是否指向index.jsp。

4. 核心功能调试指南：从登录校验到订单生成的断点追踪

4.1 登录流程：Session 管理与权限控制的三层验证

用户登录触发LoginServlet.doPost()，其验证逻辑分三层：

1. 前端校验（login.jsp）
   使用 JavaScript 检查用户名密码非空，防止无效请求提交。

2. 服务端基础校验（LoginServlet）

   String username = request.getParameter("username"); String password = request.getParameter("password"); if (username == null || username.trim().isEmpty() || password == null || password.length() < 6) { request.setAttribute("error", "用户名或密码格式错误"); request.getRequestDispatcher("login.jsp").forward(request, response); return; }

3. 数据库凭证校验与 Session 绑定（UserService.login()）

   public User login(String username, String password) { // 1. 查询用户（注意：密码未加密存储，仅教学用途） User user = userDAO.findByUsername(username); if (user == null) return null; // 2. 明文比对（生产环境必须用 BCrypt 加密） if (!user.getPassword().equals(password)) return null; // 3. 写入 Session，设置超时时间 HttpSession session = request.getSession(true); session.setMaxInactiveInterval(30 * 60); // 30分钟无操作失效 session.setAttribute("currentUser", user); return user; }

调试技巧：在LoginServlet.doPost()第一行设断点，观察request.getParameterMap()输出；再步入UserService.login()，检查userDAO.findByUsername()返回的User对象是否包含id、username、role字段。若role为"admin"，则admin/index.jsp应显示管理菜单；若为"user"，则跳转至user/home.jsp。

4.2 购物车持久化：Cookie 与 Session 的协同策略

购物车数据采用“客户端 Cookie + 服务端 Session”双存储：

• 未登录用户：商品 ID 和数量存于 Cookie（cart_items=[{"pid":1,"qty":2},{"pid":3,"qty":1}]），每次请求携带，Servlet 解析后生成临时购物车对象。
• 已登录用户：购物车数据存于 Session，并在用户登录成功后，将 Cookie 中的临时商品合并入 Session 购物车，同时清空 Cookie。

关键代码位于CartServlet.add()：

// CartServlet.java public void add(HttpServletRequest request, HttpServletResponse response) { HttpSession session = request.getSession(); User currentUser = (User) session.getAttribute("currentUser"); String productId = request.getParameter("pid"); int quantity = Integer.parseInt(request.getParameter("qty")); if (currentUser != null) { // 已登录：操作 Session 购物车 List<CartItem> cart = (List<CartItem>) session.getAttribute("cart"); if (cart == null) { cart = new ArrayList<>(); session.setAttribute("cart", cart); } // ... 合并逻辑 } else { // 未登录：操作 Cookie String cartJson = getCartFromCookie(request); // ... 解析并写回 Cookie } }

4.2.1 如何验证 Cookie 写入是否成功？

在 Chrome 开发者工具 → Application → Cookies 中，查看http://localhost:8080/eshop域名下是否存在cart_itemsCookie。其值应为 URL 编码的 JSON 字符串，如%5B%7B%22pid%22%3A1%2C%22qty%22%3A2%7D%5D，解码后为[{"pid":1,"qty":2}]。

5. 安全加固与性能优化：从 SQL 注入防护到页面加载提速

5.1 SQL 注入防御：PreparedStatement 的强制使用规范

项目所有 DAO 层操作均使用PreparedStatement，杜绝字符串拼接 SQL。以ProductDAO.findByCategory()为例：

// ✅ 正确：参数化查询 public List<Product> findByCategory(String category) { String sql = "SELECT * FROM product WHERE category = ? AND status = 1"; PreparedStatement ps = connection.prepareStatement(sql); ps.setString(1, category); // 占位符赋值 ResultSet rs = ps.executeQuery(); // ... 结果集处理 } // ❌ 错误示例（项目中不存在，但需警惕） // String sql = "SELECT * FROM product WHERE category = '" + category + "'"; // Statement stmt = connection.createStatement(); // stmt.executeQuery(sql); // category='electronics' OR '1'='1' 将导致注入

验证方法：在商品搜索框输入' OR '1'='1，若返回全部商品，则存在注入漏洞；若返回空结果或报错，则PreparedStatement生效。本项目因统一使用占位符，该输入会被当作普通字符串查询，无风险。

5.2 页面性能优化：静态资源缓存与关键 CSS 内联

针对首屏加载速度，项目在index.jsp中实施两项优化：

1. 关键 CSS 内联
   将首页轮播图、导航栏所需的 CSS 直接写入<style>标签，避免额外 HTTP 请求阻塞渲染：

   <style> .carousel { height: 400px; } .navbar { background: #333; } </style>

2. 静态资源强缓存
   在web.xml中配置资源缓存头：

   <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.css</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.js</url-pattern> </servlet-mapping> <filter> <filter-name>CacheFilter</filter-name> <filter-class>com.eshop.filter.CacheFilter</filter-class> </filter> <filter-mapping> <filter-name>CacheFilter</filter-name> <url-pattern>*.css</url-pattern> </filter-mapping>

   CacheFilter类在doFilter()中设置响应头：

   response.setHeader("Cache-Control", "public, max-age=31536000"); // 1年 response.setDateHeader("Expires", System.currentTimeMillis() + 31536000000L);

5.3 XSS 防护：EL 表达式输出的默认转义机制

JSP 默认对${}表达式输出进行 HTML 转义，有效防御反射型 XSS。例如用户昵称含<script>alert(1)</script>，在user/profile.jsp中：

<!-- 安全：自动转义为 &lt;script&gt;alert(1)&lt;/script&gt; --> <p>昵称：<c:out value="${user.nickname}" /></p> <!-- 或等价写法 --> <p>昵称：${user.nickname}</p>

若需输出原始 HTML（如富文本编辑器内容），必须显式使用fn:escapeXml()函数：

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <div>${fn:escapeXml(user.bio)}</div>

测试方法：注册新用户，昵称填写<img src=x onerror=alert(1)>，登录后查看个人资料页。若弹窗触发，则存在 XSS；若显示为纯文本，则防护生效。

6. 毕业设计答辩高频问题应对：从架构图绘制到模块耦合度分析

6.1 架构图绘制规范：突出 B/S 分层与数据流向

答辩时需手绘或 PPT 展示三层架构图，重点标注以下要素：

答辩话术：
“本系统严格遵循 B/S 架构定义：浏览器作为唯一客户端，所有业务逻辑在服务器端执行。您可以看到，用户点击‘提交订单’按钮，浏览器发送 POST 请求到/order/create，由OrderServlet接收，它调用OrderService处理业务规则（如库存校验），再委托OrderDAO执行 SQL。整个过程无需用户安装任何软件，维护只需更新服务器端代码。”

6.2 模块耦合度分析：基于源码的依赖关系量化

使用 IntelliJ IDEA 的Analyze Dependencies功能，对src/目录生成依赖图，可得出以下结论：

• 低耦合证据：web/包（Servlet）仅依赖service/和model/，不直接引用dao/；service/依赖dao/和model/，但不依赖web/。符合依赖倒置原则。
• 可改进点：UserServlet中存在硬编码跳转路径（request.getRequestDispatcher("admin/user_list.jsp")），应改为常量或配置文件管理，降低视图层与控制器耦合。

6.2.1 如何快速定位高耦合代码？

在项目根目录执行以下命令，统计跨包调用次数：

grep -r "import com.eshop.dao" src/ | wc -l # 输出 12 → DAO 被 Service 调用 12 次 grep -r "import com.eshop.service" src/ | wc -l # 输出 8 → Service 被 Servlet 调用 8 次 grep -r "import com.eshop.web" src/ | wc -l # 输出 0 → Web 层无反向依赖，符合分层

该量化结果可直接写入答辩 PPT 的“架构质量评估”章节，比单纯说“模块划分清晰”更具说服力。

本文还有配套的精品资源，点击获取