基于Javaweb的网上购物商城系统源码,用jsp+servlet+jQuery
一、背景与问题
在Web开发领域，JSP+Servlet+jQuery的组合曾是主流方案之一。这种技术栈在2010年前后广泛应用于中型Web项目，其核心优势在于：
- 分层清晰：严格遵循MVC架构模式
- 控制精细：完全掌控前后端交互细节
- 可维护性：通过Servlet处理业务逻辑，JSP处理展示
但随着现代Web开发的演进，这种方案也面临挑战：
- 前端开发逐渐分离，jQuery的DOM操作不再适合复杂交互
- Servlet的生命周期管理复杂度较高
- 无法直接使用现代前端框架（如Vue/React）
尽管如此，在某些特定场景下，这种技术栈仍具有独特价值：
- 需要完全控制前后端交互的遗留系统维护
- 对性能有极致要求的场景
- 需要深度定制的业务逻辑处理
二、基本原理
1. 技术栈架构
架构图系统分为三个核心部分：
- 前端层：使用JSP和jQuery构建动态网页
- 中间层：Servlet处理业务逻辑和数据处理
- 数据层：通过JDBC连接数据库
2. 工作流程
- 用户在浏览器输入URL，请求被Tomcat服务器接收
- Servlet根据请求路径执行相应逻辑（如获取商品列表）
- Servlet将处理结果返回给JSP页面
- JSP页面通过jQuery进行DOM操作，实现动态效果
- 用户交互事件通过jQuery触发AJAX请求
3. 关键技术点
- Servlet的生命周期管理：初始化、处理请求、销毁
- JSP的EL表达式：${}语法访问Servlet传来的数据
- jQuery的AJAX请求：实现无刷新页面交互
三、环境准备
1. 开发环境
- JDK 1.8+
- Tomcat 9.x
- MySQL 8.x
- IDE：IntelliJ IDEA / Eclipse
2. 项目结构
ShoppingSystem/
├── src/
│ ├── dao/
│ │ └── ProductDAO.java
│ ├── service/
│ │ └── ProductService.java
│ └── servlet/
│ ├── LoginServlet.java
│ └── ProductServlet.java
├── web/
│ ├── css/
│ ├── js/
│ ├── images/
│ ├── index.jsp
│ └── product.jsp
├── db/
│ └── create.sql
└── pom.xml3. 依赖配置
<!-- pom.xml -->
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.23</version>
</dependency>
</dependencies>四、核心实现
1. 数据库设计
-- create.sql
CREATE DATABASE shopping_system;
USE shopping_system;
CREATE TABLE products (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
price DECIMAL(10,2) NOT NULL,
stock INT NOT NULL,
description TEXT
);
CREATE TABLE users (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(100) NOT NULL,
email VARCHAR(100)
);2. 商品展示Servlet
// ProductServlet.java
@WebServlet("/products")
public class ProductServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 1. 数据库查询
ProductService service = new ProductService();
List<Product> products = service.getAllProducts();
// 2. 数据传递给JSP
request.setAttribute("products", products);
request.getRequestDispatcher("/product.jsp").forward(request, response);
}
}3. 前端页面交互
<!-- product.jsp -->
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>商品列表</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>商品列表</h1>
<ul id="productList">
<!-- 动态内容将插入此处 -->
</ul>
<script>
$(document).ready(function() {
// 1. 使用AJAX获取数据
$.ajax({
url: '${pageContext.request.contextPath}/products',
type: 'GET',
success: function(data) {
// 2. 处理返回的JSON数据
let products = JSON.parse(data);
let html = '';
// 3. 动态生成列表项
for (let product of products) {
html += `
<li>
<strong>${product.name}</strong>
<p>价格: ¥${product.price}</p>
<button onclick="addToCart(${product.id})">加入购物车</button>
</li>
`;
}
$('#productList').html(html);
}
});
});
// 4. 购物车添加逻辑
function addToCart(productId) {
$.post({
url: '${pageContext.request.contextPath}/cart',
data: { productId: productId },
success: function(res) {
alert('已加入购物车');
}
});
}
</script>
</body>
</html>五、完整案例
1. 系统流程图
用户浏览器
↓
[GET] /products
↓
ProductServlet
↓
MySQL数据库
↓
返回商品数据
↓
JSP页面
↓
渲染HTML页面
↓
用户交互（AJAX）
↓
Servlet处理
↓
更新购物车状态2. 关键代码演示
登录Servlet实现
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
// 1. 验证用户名密码
UserService service = new UserService();
User user = service.login(username, password);
if (user != null) {
// 2. 登录成功
HttpSession session = request.getSession();
session.setAttribute("user", user);
response.sendRedirect("index.jsp");
} else {
// 3. 登录失败
response.sendRedirect("login.jsp?error=1");
}
}
}用户登录界面
<!-- login.jsp -->
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>用户登录</title>
</head>
<body>
<h2>用户登录</h2>
<%
String error = request.getParameter("error");
if (error != null) {
%>
<p style="color:red">用户名或密码错误</p>
<%
}
%>
<form action="login" method="post">
用户名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>六、源码解析
1. Servlet的生命周期
Servlet在Tomcat中经历三个阶段：
- 初始化：
init()方法执行，获取ServletConfig - 处理请求：
service()方法根据请求类型调用doGet()或doPost() - 销毁：
destroy()方法执行，释放资源
public class ProductServlet extends HttpServlet {
private ProductDAO productDAO;
@Override
public void init() throws ServletException {
productDAO = new ProductDAO();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 业务逻辑
}
@Override
public void destroy() {
productDAO.close();
}
}2. JSP的运行机制
JSP在第一次访问时会被编译成Servlet类，后续访问直接执行编译后的代码。关键特性包括：
- EL表达式：
${}语法访问数据 - JSTL标签库：用于循环、条件判断等
- JSP指令：
<%@ page %>定义页面属性
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>3. jQuery的AJAX调用
$.ajax({
url: '/products',
type: 'GET',
dataType: 'json', // 指定返回类型
success: function(data) {
// 处理数据
},
error: function(xhr, status, error) {
console.error('请求失败:', error);
}
});七、进阶使用
1. 异步更新购物车状态
// 购物车状态更新
function updateCart() {
$.get('/cart', function(data) {
$('#cartCount').text(data.count);
});
}2. 前端验证优化
function validateForm() {
let username = $('#username').val();
let password = $('#password').val();
if (!username || !password) {
alert('请输入用户名和密码');
return false;
}
return true;
}3. 跨域请求处理
// 配置过滤器处理跨域
public class CORSFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) response;
httpResponse.setHeader("Access-Control-Allow-Origin", "*");
httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST");
httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type");
chain.doFilter(request, response);
}
}八、性能与工程实践
1. 性能优化策略
| 优化策略 | 描述 | 实现方式 |
|---|---|---|
| 数据库连接池 | 避免频繁创建连接 | 使用HikariCP |
| 缓存常用数据 | 减少数据库访问 | 使用Redis缓存商品列表 |
| 合并AJAX请求 | 减少网络请求次数 | 使用debounce技术 |
| 压缩静态资源 | 减少传输体积 | 使用Gzip压缩 |
2. 安全风险分析
常见漏洞：
- SQL注入：使用PreparedStatement
- XSS攻击：对用户输入进行过滤
- CSRF攻击：使用token机制
- 会话固定：定期更新session ID
// 防止SQL注入示例
String sql = "SELECT * FROM users WHERE username = ? AND password = ?";
PreparedStatement stmt = connection.prepareStatement(sql);
stmt.setString(1, username);
stmt.setString(2, password);3. 异常处理机制
try {
// 业务逻辑
} catch (SQLException e) {
// 记录日志
logger.error("数据库操作失败", e);
// 返回错误页面
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
}九、常见问题与踩坑
1. 常见错误示例
错误代码：
// 错误：未使用预编译语句
String sql = "SELECT * FROM users WHERE username = '" + username + "'";错误原因： SQL注入漏洞
改进方案：
String sql = "SELECT * FROM users WHERE username = ?";
PreparedStatement stmt = connection.prepareStatement(sql);
stmt.setString(1, username);2. 常见问题分析
| 问题 | 解决方案 |
|---|---|
| 页面无法加载 | 检查Tomcat日志，确认Servlet映射正确 |
| AJAX请求失败 | 检查CORS配置，确认请求头正确 |
| 数据显示异常 | 检查数据类型转换，确保JSON格式正确 |
| 会话丢失 | 配置session超时时间，使用remember me机制 |
3. 性能瓶颈分析
| 瓶颈类型 | 优化建议 |
|---|---|
| 数据库查询 | 增加索引，优化SQL语句 |
| 前端渲染 | 使用虚拟滚动，减少DOM操作 |
| 网络传输 | 压缩数据，使用CDN |
| 服务器响应 | 使用连接池，增加服务器实例 |
十、最佳实践
1. 代码组织规范
- 分层架构：Controller/Service/DAO分层
- 命名规范：Servlet以
Servlet结尾，DAO以DAO结尾 - 异常处理：统一异常处理机制
- 日志记录：使用SLF4J记录关键操作
2. 安全实践建议
- 密码存储：使用BCrypt加密
- 输入过滤：使用OWASP的ESAPI库
- 会话管理：设置session过期时间
- 安全头设置：配置Content-Security-Policy
3. 开发规范建议
- 单元测试：使用JUnit编写测试用例
- 版本控制：使用Git进行代码管理
- 代码审查：实施代码审查流程
- 文档规范：编写API文档和架构说明
十一、总结
基于JSP+Servlet+jQuery的网上购物商城系统，虽然在现代开发中不再是主流选择，但在特定场景下仍具有独特价值。这种技术栈的优势在于：
- 完全掌控前后端交互细节
- 适合需要深度定制的业务场景
- 可以实现非常精细的性能优化
但同时也存在明显局限：
- 开发效率较低
- 难以实现复杂前端交互
- 需要处理大量手动工作
在实际项目中，建议根据以下情况选择技术方案：
推荐使用场景：
- 需要完全控制前后端交互的遗留系统维护
- 对性能有极致要求的场景
- 需要深度定制的业务逻辑处理
不推荐使用场景：
- 需要快速开发的项目
- 需要现代前端框架的项目
- 需要复杂交互的Web应用
对于现代Web开发，建议采用Spring Boot+Thymeleaf+Vue的组合，既保持良好的可维护性，又能利用现代前端框架的优势。但理解传统技术栈的原理，对于深入理解Web开发本质仍具有重要意义。