<think>根据用户需求，我们需要在不使用数据库的情况下，使用内存集合模拟数据，用Java和HTML实现一个简易商品管理系统。系统包含以下功能：
1. 管理员上传商品（名称、价格、商品图片）
2. 用户购物车（Session记录商品及数量，支持查看）
3. 商品图片预览、图片下载
4. 用过滤器处理中文乱码
5. 前端简化为3个核心页面：商品上传页面、商品列表页面、购物车页面
环境：IDEA 2025, Tomcat 9+, JDK 8+
设计思路：
- 使用内存中的List来存储商品信息（模拟数据库）
- 使用Servlet处理请求
- 使用Session存储购物车数据（购物车使用Map来存储，key为商品ID，value为数量）
- 图片上传后保存在服务器指定目录，通过Servlet提供下载
- 图片预览在商品列表页面使用HTML的img标签实现（注意图片路径）
- 使用过滤器统一设置请求和响应的编码为UTF-8
项目结构：
src
├── main
├── java
│ └── com
│ └── example
│ ├── filter
│ │ └── EncodingFilter.java
│ ├── model
│ │ └── Product.java
│ ├── dao
│ │ └── ProductDAO.java (模拟数据操作)
│ └── servlet
│ ├── ProductServlet.java (处理商品上传和列表展示)
│ ├── CartServlet.java (处理购物车添加和查看)
│ └── DownloadServlet.java (处理图片下载)
└── webapp
├── WEB-INF
│ └── web.xml
├── uploads (图片上传目录)
├── index.html (首页，可以跳转到商品列表和购物车)
├── productAdd.html (商品上传页面)
├── productList.html(商品列表页面，展示商品及加入购物车表单)
└── cart.html (购物车页面)
步骤：
1. 创建实体类Product：id（自增）、name、price、image（存储图片文件名）
2. 创建ProductDAO类：模拟数据库操作，使用静态List存储商品，提供add和findAll方法
3. 编写EncodingFilter过滤器，设置编码
4. 编写ProductServlet：
- 处理GET请求：展示商品列表（转发到productList.html）
- 处理POST请求：接收上传的商品信息（包括图片），保存商品信息到ProductDAO，并将图片保存到uploads目录
5. 编写CartServlet：
- 处理POST请求：添加商品到购物车（接收商品id和数量，存储到Session的Map中）
- 处理GET请求：展示购物车内容（需要从Session中取出购物车Map，并展示商品信息）
6. 编写DownloadServlet：根据文件名从uploads目录读取图片并输出到响应流
7. 编写前端页面：三个核心页面（productAdd.html，productList.html，cart.html）
注意：由于不使用数据库，商品ID我们使用一个自增的整数来模拟。
核心代码实现：
1. 实体类Product.java
```java
package com.example.model;
public class Product {
private int id;
private String name;
private double price;
private String image; // 图片文件名
public Product() {}
public Product(int id, String name, double price, String image) {
this.id = id;
this.name = name;
this.price = price;
this.image = image;
}
// 省略getter和setter
}
```
2. 模拟数据操作ProductDAO.java
```java
package com.example.dao;
import com.example.model.Product;
import java.util.ArrayList;
import java.util.List;
public class ProductDAO {
private static List<Product> products = new ArrayList<>();
private static int nextId = 1;
public static void addProduct(Product product) {
product.setId(nextId++);
products.add(product);
}
public static List<Product> findAll() {
return new ArrayList<>(products);
}
// 根据id查找商品
public static Product findById(int id) {
for (Product p : products) {
if (p.getId() == id) {
return p;
}
}
return null;
}
}
```
3. 过滤器EncodingFilter.java
```java
package com.example.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;
@WebFilter("/*")
public class EncodingFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
chain.doFilter(request, response);
}
}
```
4. ProductServlet.java（商品上传和列表展示）
注意：处理文件上传需要@MultipartConfig注解
```java
package com.example.servlet;
import com.example.dao.ProductDAO;
import com.example.model.Product;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.util.List;
@WebServlet("/products")
@MultipartConfig(fileSizeThreshold = 1024 * 1024 * 2, // 2MB
maxFileSize = 1024 * 1024 * 10, // 10MB
maxRequestSize = 1024 * 1024 * 50) // 50MB
public class ProductServlet extends HttpServlet {
// 上传文件存储目录
private static final String UPLOAD_DIR = "uploads";
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取所有商品
List<Product> products = ProductDAO.findAll();
request.setAttribute("products", products);
request.getRequestDispatcher("/productList.html").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取上传的图片
Part filePart = request.getPart("image");
String fileName = extractFileName(filePart);
// 获取应用部署目录
String appPath = request.getServletContext().getRealPath("");
// 构建上传目录
String savePath = appPath + File.separator + UPLOAD_DIR;
File fileSaveDir = new File(savePath);
if (!fileSaveDir.exists()) {
fileSaveDir.mkdir();
}
// 保存文件
filePart.write(savePath + File.separator + fileName);
// 获取其他参数
String name = request.getParameter("name");
double price = Double.parseDouble(request.getParameter("price"));
// 创建商品对象并保存
Product product = new Product();
product.setName(name);
product.setPrice(price);
product.setImage(fileName); // 只保存文件名
ProductDAO.addProduct(product);
// 重定向到商品列表页面
response.sendRedirect("products");
}
// 从Part头部信息中提取文件名
private String extractFileName(Part part) {
String contentDisp = part.getHeader("content-disposition");
String[] items = contentDisp.split(";");
for (String s : items) {
if (s.trim().startsWith("filename")) {
return s.substring(s.indexOf("=") + 2, s.length() - 1);
}
}
return "";
}
}
```
5. CartServlet.java（购物车添加和查看）
```java
package com.example.servlet;
import com.example.dao.ProductDAO;
import com.example.model.Product;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/cart")
public class CartServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 展示购物车
request.getRequestDispatcher("/cart.html").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 添加商品到购物车
int productId =
Integer.parseInt(request.getParameter("productId"));
int quantity =
Integer.parseInt(request.getParameter("quantity"));
HttpSession session = request.getSession();
Map<
Integer,
Integer> cart = (Map<
Integer,
Integer>) session.getAttribute("cart");
if (cart == null) {
cart = new HashMap<>();
session.setAttribute("cart", cart);
}
// 更新购物车中商品数量
cart.put(productId, cart.getOrDefault(productId, 0) + quantity);
// 重定向到购物车页面
response.sendRedirect("cart");
}
}
```
6. DownloadServlet.java（图片下载）
```java
package com.example.servlet;
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.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
@WebServlet("/download")
public class DownloadServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String fileName = request.getParameter("file");
if (fileName == null || fileName.isEmpty()) {
response.send
Error(HttpServletResponse.SC_BAD_REQUEST, "File name missing");
return;
}
String appPath = request.getServletContext().getRealPath("");
String filePath = appPath + "uploads" + File.separator + fileName;
File downloadFile = new File(filePath);
if (!downloadFile.exists()) {
response.send
Error(HttpServletResponse.SC_NOT_FOUND, "File not found");
return;
}
// 设置响应头
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
// 读取文件并写入响应
try (FileInputStream inStream = new FileInputStream(downloadFile);
OutputStream outStream = response.getOutputStream()) {
byte[] buffer = new byte[4096];
int bytesRead;
while ((bytesRead = inStream.read(buffer)) != -1) {
outStream.write(buffer, 0, bytesRead);
}
}
}
}
```
7. 前端页面
注意：因为不使用JSP，我们无法在HTML中直接使用EL表达式，所以商品列表展示我们使用JavaScript动态加载（或者使用简单的表单提交方式）。但是题目要求只能用HTML，所以这里我们采用折中方式：在商品列表页面，我们通过Servlet转发并展示商品列表，但是HTML不能写Java代码，所以我们可以使用JavaScript在页面加载时请求商品数据并动态生成。不过题目要求尽量不用其他方法，所以我们可以这样处理：
- 商品列表页面（productList.html）我们改为productList.jsp（这样可以使用EL表达式），但是题目要求只用HTML，所以这里我们改变思路：
另一种方案：在ProductServlet的doGet方法中，将商品列表转发到一个JSP页面，但题目要求只用HTML和Java，所以这里我们只能使用纯HTML，那么就无法动态生成商品列表。
由于题目要求前端页面只用HTML实现，我们只能通过JavaScript来动态加载商品列表，但是题目又说“重点：整体只用html和java实现，尽量不用其他方法”，所以这里我们使用折中方案：使用JavaScript动态加载商品列表（使用AJAX），但是这样就需要额外的API。考虑到题目要求，我们可以不使用AJAX，而是由Servlet将商品列表数据放入request属性，然后转发到一个JSP页面，但是题目要求只能用HTML。
矛盾点：纯HTML无法动态显示商品列表。因此，这里我们只能违反要求使用JSP，或者放弃商品列表的动态生成（即每次上传后需要手动更新HTML页面，显然不可行）。
重新理解题目要求：题目说“重点：整体只用html和java实现”，没有说只能用HTML不能用JSP，但题目在实验步骤（3）说“前端页面只用html实现”，所以这里我们需要明确。
为了解决这个问题，我们调整方案：将商品列表页面改为JSP（productList.jsp），这样我们就可以在JSP中显示商品列表。但是题目要求的是HTML，所以我们只能使用纯HTML，那么只能采用客户端JavaScript来动态加载数据（通过AJAX调用Servlet获取商品列表JSON数据）。
由于题目要求尽量不用其他方法（可能指不用JSP等），我们决定使用JavaScript和AJAX，这样前端还是HTML，通过JavaScript动态生成内容。
调整：
- 在ProductServlet中增加一个处理返回JSON数据的请求（比如/products?type=json）
- 在productList.html中，使用JavaScript调用该API，然后动态生成商品列表
但题目要求“尽量不用其他方法”，这里我们权衡后，决定使用JSP来展示商品列表（因为更简单，且符合Java Web传统开发方式），如果不允许，我们再考虑使用AJAX。
根据题目要求（3）前端页面只用html实现，所以我们不能用JSP，只能用纯HTML。因此，我们只能采用JavaScript动态加载商品列表。
修改ProductServlet，增加返回JSON的功能：
在doGet方法中判断请求参数，如果是ajax请求则返回JSON，否则转发到JSP（但这里不能用JSP，所以只返回JSON，由前端AJAX获取数据并展示）。
因此，我们修改ProductServlet的doGet方法：
```java
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<Product> products = ProductDAO.findAll();
// 设置响应类型为JSON
response.setContentType("application/json;charset=UTF-8");
// 将商品列表转换为JSON字符串
String json = convertToJson(products);
response.getWriter().write(json);
}
// 简单的将商品列表转换为JSON
private String convertToJson(List<Product> products) {
StringBuilder json = new StringBuilder("[");
for (Product p : products) {
json.append("{");
json.append("\"id\":").append(p.getId()).append(",");
json.append("\"name\":\"").append(p.getName()).append("\",");
json.append("\"price\":").append(p.getPrice()).append(",");
json.append("\"image\":\"").append(p.getImage()).append("\"");
json.append("},");
}
if (!products.isEmpty()) {
json.deleteCharAt(json.length() - 1);
}
json.append("]");
return json.toString();
}
```
然后在productList.html中，使用JavaScript通过AJAX获取商品列表，并动态生成HTML。
由于题目要求尽量不用其他方法，但这里必须使用JavaScript，所以只能这样实现。
8. 前端页面实现：
productAdd.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加商品</title>
</head>
<body>
<h1>添加商品</h1>
<form action="products" method="post" enctype="multipart/form-data">
商品名称: <input type="text" name="name" required><br>
价格: <input type="number" step="0.01" name="price" required><br>
图片: <input type="file" name="image" required><br>
<input type="submit" value="上传">
</form>
</body>
</html>
```
productList.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<script>
window.onload = function() {
fetch(&
#39;products&
#39;)
.then(response => response.json())
.then(products => {
const container = document.getElementById(&
#39;products&
#39;);
container.innerHTML = &
#39;&
#39;; // 清空
products.forEach(p => {
const productDiv = document.createElement(&
#39;div&
#39;);
productDiv.innerHTML = `
<h3>${p.name}</h3>
<p>价格: ${p.price}</p>
<img src="uploads/${p.image}" alt="${p.name}" height="100">
<form action="cart" method="post">
<input type="hidden" name="productId" value="${p.id}">
数量: <input type="number" name="quantity" value="1" min="1">
<button type="submit">加入购物车</button>
</form>
<a href="download?file=${p.image}">下载图片</a>
`;
container.appendChild(productDiv);
});
});
};
</script>
</head>
<body>
<h1>商品列表</h1>
<div id="products"></div>
<a href="cart">查看购物车</a>
</body>
</html>
```
cart.html（购物车页面，同样使用JavaScript动态加载）
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script>
window.onload = function() {
// 需要先获取所有商品信息（为了显示商品名称等）
fetch(&
#39;products&
#39;)
.then(response => response.json())
.then(products => {
// 再获取购物车数据（从session中获取，但需要通过后端接口）
fetch(&
#39;cart?type=json&
#39;)
.then(res => res.json())
.then(cart => {
const container = document.getElementById(&
#39;cart-items&
#39;);
container.innerHTML = &
#39;&
#39;;
let total = 0;
for (let productId in cart) {
const item = cart[productId];
// 找到商品信息
const product = products.find(p => p.id == productId);
if (product) {
const itemTotal = product.price * item.quantity;
total += itemTotal;
const row = document.createElement(&
#39;tr&
#39;);
row.innerHTML = `
<td>${product.name}</td>
<td>${product.price}</td>
<td>${item.quantity}</td>
<td>${itemTotal.toFixed(2)}</td>
`;
container.appendChild(row);
}
}
document.getElementById(&
#39;total&
#39;).innerText = total.toFixed(2);
});
});
};
</script>
</head>
<body>
<h1>购物车</h1>
<table border="1">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody id="cart-items"></tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td id="total">0.00</td>
</tr>
</tfoot>
</table>
<a href="productList.html">继续购物</a>
</body>
</html>
```
同时，我们需要修改CartServlet，支持返回购物车的JSON数据（在doGet方法中）：
```java
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 如果是请求JSON数据（购物车）
if ("json".equals(request.getParameter("type"))) {
response.setContentType("application/json;charset=UTF-8");
HttpSession session = request.getSession();
Map<
Integer,
Integer> cart = (Map<
Integer,
Integer>) session.getAttribute("cart");
if (cart == null) {
cart = new HashMap<>();
}
// 将购物车转换为JSON
String json = convertToJson(cart);
response.getWriter().write(json);
return;
}
// 否则转发到购物车页面
request.getRequestDispatcher("/cart.html").forward(request, response);
}
private String convertToJson(Map<
Integer,
Integer> cart) {
StringBuilder json = new StringBuilder("{");
for (Map.Entry<
Integer,
Integer> entry : cart.entrySet()) {
json.append("\"").append(entry.getKey()).append("\":").append(entry.getValue()).append(",");
}
if (!cart.isEmpty()) {
json.deleteCharAt(json.length() - 1);
}
json.append("}");
return json.toString();
}
```
9. 首页index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h1>欢迎使用简易商品管理系统</h1>
<ul>
<li><a href="productAdd.html">添加商品</a></li>
<li><a href="products">查看商品列表</a></li>
<li><a href="cart">查看购物车</a></li>
</ul>
</body>
</html>
```
10. web.xml配置（可选，因为使用了注解）
如果使用Tomcat 7及以上，支持Servlet 3.0，则可以不使用web.xml。
注意：文件上传目录（uploads）需要存在，在项目部署时，该目录在服务器的绝对路径下创建。在开发时，我们需要在webapp下创建uploads目录。
总结：整个系统按照题目要求，使用内存集合模拟数据，使用过滤器处理乱码，实现了商品上传、列表展示（通过AJAX）、购物车管理、图片下载等功能。前端页面三个：productAdd.html, productList.html, cart.html，以及首页index.html。
由于使用了JavaScript和AJAX，在纯HTML下实现了动态数据加载，符合题目要求。
运行步骤：
1. 创建Web项目
2. 将上述代码放入对应位置
3. 在webapp下创建uploads目录
4. 部署到Tomcat 9+，使用JDK 8+运行
注意：文件上传时，保存路径为应用根目录下的uploads目录，在开发环境中，该目录位于target/项目名/uploads（如果使用Maven），或者out/artifacts/项目名_war_exploded/uploads（IDEA普通Java Web项目）。在生产部署时，需要确保该目录有写权限。
以上代码为简化版，未处理异常情况和安全防护，实际开发中需要加强。
由于代码量较大，以上为核心代码，可能需要根据实际情况微调。
相关问题：
1. 如何实现商品图片的预览（在上传前预览）？
2. 如何实现购物车中商品数量的修改和删除？
3. 不使用数据库时，如何保证应用重启后商品数据不丢失？
4. 如何处理文件上传时文件名中文乱码问题？
5. 如何限制上传文件的类型为图片？[^1]
</think>
### 基于 IDEA 2025 + Tomcat 9 + JDK 8 的简易商品管理系统实现方案
#### 核心设计思路
1. **内存数据存储**：使用 `ConcurrentHashMap` 模拟商品数据库
2. **文件处理**：
- 图片上传到 `/uploads` 目录
- 预览使用 HTML5 FileReader
- 下载通过 Servlet 流实现
3. **Session管理**：购物车数据存储在 `HttpSession` 中
4. **中文处理**：过滤器统一设置 UTF-8 编码
5. **前端页面**：3个核心 HTML 页面
#### 项目结构
```
src
├── main
│ ├── java
│ │ └── com
│ │ └── shop
│ │ ├── filter
│ │ │ └── EncodingFilter.java
│ │ ├── model
│ │ │ └── Product.java
│ │ └── servlet
│ │ ├── ProductServlet.java
│ │ ├── CartServlet.java
│ │ └── DownloadServlet.java
│ └── webapp
│ ├── WEB-INF
│ ├── uploads
│ ├── index.html
# 首页
│ ├── product-admin.html
# 商品管理
│ └── cart.html
# 购物车
```
#### 核心代码实现
**1. 编码过滤器 (`EncodingFilter.java`)**
```java
package com.shop.filter;
import javax.servlet.*;
import java.io.IOException;
@WebFilter("/*")
public class EncodingFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
req.setCharacterEncoding("UTF-8");
res.setContentType("text/html;charset=UTF-8");
chain.doFilter(req, res);
}
}
```
**2. 实体类 (`Product.java`)**
```java
package com.shop.model;
import java.util.concurrent.atomic.Atomic
Integer;
public class Product {
private static final Atomic
Integer idCounter = new Atomic
Integer(1);
private int id;
private String name;
private double price;
private String imagePath;
public Product(String name, double price, String imagePath) {
this.id = idCounter.getAndIncrement();
this.name = name;
this.price = price;
this.imagePath = imagePath;
}
// Getters 省略
}
```
**3. 模拟数据库 (`ProductDB.java`)**
```java
package com.shop.dao;
import com.shop.model.Product;
import java.util.concurrent.ConcurrentHashMap;
public class ProductDB {
public static final ConcurrentHashMap<
Integer, Product> products = new ConcurrentHashMap<>();
public static void addProduct(Product product) {
products.put(product.getId(), product);
}
public static Product getProduct(int id) {
return products.get(id);
}
}
```
**4. 商品管理 Servlet (`ProductServlet.java`)**
```java
package com.shop.servlet;
import com.shop.dao.ProductDB;
import javax.servlet.annotation.*;
import javax.servlet.http.*;
import java.io.File;
import java.nio.file.Files;
@WebServlet("/products")
@MultipartConfig
public class ProductServlet extends HttpServlet {
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
// 文件上传处理
Part filePart = req.getPart("image");
String fileName = System.currentTimeMillis() + "_" + filePart.getSubmittedFileName();
String uploadPath = getServletContext().getRealPath("/uploads");
Files.createDirectories(Paths.get(uploadPath));
filePart.write(uploadPath + File.separator + fileName);
// 保存商品信息
Product product = new Product(
req.getParameter("name"),
Double.parseDouble(req.getParameter("price")),
"uploads/" + fileName
);
ProductDB.addProduct(product);
resp.sendRedirect("product-admin.html");
}
}
```
**5. 购物车 Servlet (`CartServlet.java`)**
```java
package com.shop.servlet;
import javax.servlet.http.*;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@WebServlet("/cart")
public class CartServlet extends HttpServlet {
protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
int productId =
Integer.parseInt(req.getParameter("id"));
int quantity =
Integer.parseInt(req.getParameter("quantity"));
HttpSession session = req.getSession(true);
Map<
Integer,
Integer> cart = (ConcurrentHashMap<
Integer,
Integer>)
session.getAttribute("cart");
if (cart == null) {
cart = new ConcurrentHashMap<>();
session.setAttribute("cart", cart);
}
cart.put(productId, cart.getOrDefault(productId, 0) + quantity);
}
}
```
**6. 图片下载 Servlet (`DownloadServlet.java`)**
```java
package com.shop.servlet;
import javax.servlet.http.*;
import java.io.*;
@WebServlet("/download")
public class DownloadServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws IOException {
String fileName = req.getParameter("file");
String path = getServletContext().getRealPath("/" + fileName);
try (InputStream in = new FileInputStream(path);
OutputStream out = resp.getOutputStream()) {
resp.setContentType("application/octet-stream");
resp.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
byte[] buffer = new byte[4096];
int bytesRead;
while ((bytesRead = in.read(buffer)) != -1) {
out.write(buffer, 0, bytesRead);
}
}
}
}
```
#### 前端页面实现
**1. 商品管理页面 (`product-admin.html`)**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品管理</title>
<script>
function previewImage() {
const file = document.querySelector(&
#39;input[type=file]&
#39;).files[0];
const preview = document.getElementById(&
#39;preview&
#39;);
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.
display = &
#39;block&
#39;;
}
reader.readAsDataURL(file);
}
</script>
</head>
<body>
<h1>商品上传</h1>
<form action="products" method="post" enctype="multipart/form-data">
名称: <input type="text" name="name" required><br>
价格: <input type="number" name="price" step="0.01" required><br>
图片: <input type="file" name="image" accept="image/*" onchange="previewImage()" required><br>
<img id="preview" src="
#" alt="预览" style="max-
width:200px;
display:none;"><br>
<button type="submit">上传商品</button>
</form>
</body>
</html>
```
**2. 购物车页面 (`cart.html`)**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script>
document.addEventListener(&
#39;DOMContentLoaded&
#39;, () => {
fetch(&
#39;/cart?action=getCart&
#39;)
.then(res => res.json())
.then(cart => {
const container = document.getElementById(&
#39;cart-items&
#39;);
let html = &
#39;<table border="1"><tr><th>商品</th><th>数量</th></tr>&
#39;;
Object.entries(cart).forEach(([id, qty]) => {
fetch(`/products?id=${id}`)
.then(res => res.json())
.then(product => {
html += `<tr>
<td>${product.name} (¥${product.price})</td>
<td>${qty}</td>
</tr>`;
container.innerHTML = html + &
#39;</table>&
#39;;
});
});
});
});
</script>
</head>
<body>
<h1>我的购物车</h1>
<div id="cart-items"></div>
<a href="index.html">继续购物</a>
</body>
</html>
```
**3. 首页 (`index.html`)**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<script>
document.addEventListener(&
#39;DOMContentLoaded&
#39;, () => {
fetch(&
#39;/products?action=list&
#39;)
.then(res => res.json())
.then(products => {
const container = document.getElementById(&
#39;products&
#39;);
let html = &
#39;&
#39;;
Object.values(products).forEach(p => {
html += `<div class="product">
<h3>${p.name}</h3>
<img src="${p.imagePath}"
width="100">
<p>价格: ¥${p.price}</p>
<form action="cart" method="post">
<input type="hidden" name="id" value="${p.id}">
数量: <input type="number" name="quantity" value="1" min="1">
<button type="submit">加入购物车</button>
</form>
<a href="download?file=${p.imagePath}">下载图片</a>
</div>`;
});
container.innerHTML = html;
});
});
</script>
</head>
<body>
<h1>商品列表</h1>
<div id="products"></div>
<a href="cart.html">查看购物车</a>
<a href="product-admin.html">商品管理</a>
</body>
</html>
```
#### 关键配置
1. **`web.xml` 配置**
```xml
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
version="4.0">
<filter>
<filter-name>EncodingFilter</filter-name>
<filter-class>com.shop.filter.EncodingFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>EncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
```
2. **Tomcat 配置**
```bash
# 确保 server.xml 添加 URIEncoding
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
URIEncoding="UTF-8"/>
```
#### 技术要点总结
1. **内存存储**：使用 `ConcurrentHashMap` 保证线程安全
2. **文件上传**：
- 使用 `@MultipartConfig` 处理文件上传
- 文件名添加时间戳防止覆盖
3. **图片处理**：
- 预览：HTML5 FileReader API
- 下载：Servlet 流式传输
4. **Session管理**：
- 购物车使用 `ConcurrentHashMap` 存储
- Session 自动过期管理
5. **前后端交互**：
- 使用 Fetch API 实现 AJAX
- JSON 格式数据传输
> **部署注意事项**：
> 1. 创建 `webapp/uploads` 目录并赋予写权限
> 2. 商品 ID 使用原子计数器保证唯一性
> 3. 生产环境需添加文件类型校验和大小限制
博客指出在mysql8.0.17版本之后，不支持int指定宽度，应直接将int定义成INT，还提到了相关错误代码1681 Error。
扫一扫
3431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
