<think>我们之前已经设计了
一个订单表（orders）和
订单详情表（order_detail），并且给出了
一个简单的JSP
页面来显示
订单主表信息。现在用户需要创建
一个显示
订单相关信息的网页，我们可以扩展之前的示例，将
订单的详细信息（包括
订单中的商品）也展示出来。步骤：1.设计数据库表（如前所述，这里不再重复）2.
编写JSP
页面，连接数据库并查询
订单信息，同时查询每个
订单对应的商品明细。注意：为了展示
订单及其明细，我们需要进行两个查询：-先查询
订单主表（orders）获取
订单基本信息-然后根据每个
订单的order_id查询
订单明细表（order_detail）获取该
订单下的商品信息或者我们可以使用
一个关联查询（JOIN）来同时获取
订单主表和明细表的信息，但这样会导致
订单主表的信息重复（每个
订单的每一行商品都会重复
订单基本信息）。我们可以在JSP
页面中对
订单主表信息进行分组显示。这里我们采用两次查询的方式：第一次：查询所有
订单（orders）第二次：对于每个
订单，查询其
订单明细（order_detail）但是这样在循环中多次查询数据库效率较低，我们可以改为一次查询所有
订单及其明细，然后在JSP中处理分组。或者使用
一个查询，通过左连接获取所有数据，然后在JSP中按
订单分组显示。我们选择使用一次查询（使用LEFTJOIN）来获取所有数据，然后在JSP中按
订单分组。查询语句示例：```sqlSELECTo.order_id,o.order_no,o.user_id,o.total_price,o.status,o.create_time,d.detail_id,d.product_id,d.product_name,d.quantity,d.priceFROMordersoLEFTJOINorder_detaildONo.order_id=d.order_idORDERBYo.order_id,d.detail_id```在JSP中，我们将遍历结果集，每当遇到新的
订单时，就输出
一个新的
订单行，并在该
订单行下输出所有商品明细（作为子表格或嵌套行）。由于同
一个订单会有多条记录（每个商品一条记录），我们在遍历时记录当前
订单ID，如果
订单ID变化，则开始
一个新的
订单。下面是
一个示例JSP
代码：文件：orderDetails.jsp注意：由于JSP中嵌入Java
代码较多，为了清晰，我们使用JSP脚本和表达式。实际项目中建议使用JSTL和EL表达式，但这里为了简单直接使用脚本。</think>### 使用 JSP 和 MySQL 创建
订单信息展示
页面
#### 步骤 1：创建 MySQL
订单表结构
```sql
--
订单主表
CREATE TABLE orders (
order_id INT AUTO_INCREMENT PRIMARY KEY,
order_no VARCHAR(50) UNIQUE NOT NULL,
user_id INT NOT NULL,
total_price DECIMAL(10,2) DEFAULT 0.00,
status TINYINT DEFAULT 0 COMMENT '0:待支付,1:已支付,2:已发货,3:已完成',
create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
update_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
--
订单详情表
CREATE TABLE order_detail (
detail_id INT AUTO_INCREMENT PRIMARY KEY,
order_id INT NOT NULL,
product_id INT NOT NULL,
product_name VARCHAR(100) NOT NULL,
quantity INT DEFAULT 1,
price DECIMAL(10,2) NOT NULL,
FOREIGN KEY (order_id) REFERENCES orders(order_id)
);
```
#### 步骤 2：创建 JSP
订单展示
页面 (`orderList.jsp`)
```jsp
<%@ page import="java.sql.*" %>
<%@ page contentType="text/
html;charset=UTF-8" language="java" %>
<%
// 数据库配置
String url = "jdbc:mysql://localhost:3306/your_database";
String user = "your_username";
String password = "your_password";
%>
<!DOCTYPE
html>
<
html>
<head>
<title>
订单信息</title>
<style>
body { font-family: Arial, sans-serif; }
.container { width: 90%; margin: 0 auto; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #f2f2f2; }
tr:nth-child(even) { background-color: #f9f9f9; }
.order-header { background-color: #e0f7fa; font-weight: bold; }
.order-details { background-color: #fffde7; }
.status-paid { color: #4CAF50; font-weight: bold; }
.status-pending { color: #FF9800; font-weight: bold; }
</style>
</head>
<body>
<div class="container">
<h1>
订单信息列表</h1>
<%
try (Connection conn = DriverManager.getConnection(url, user, password)) {
// 查询
订单及关联的
订单详情
String sql = "SELECT o.*, d.product_name, d.quantity, d.price " +
"FROM orders o " +
"LEFT JOIN order_detail d ON o.order_id = d.order_id " +
"ORDER BY o.create_time DESC";
try (Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(sql)) {
int currentOrderId = -1;
while (rs.next()) {
int orderId = rs.getInt("order_id");
// 如果是新
订单，显示
订单头信息
if (currentOrderId != orderId) {
currentOrderId = orderId;
// 关闭前
一个订单的表格（如果不是第
一个）
if (currentOrderId != -1) {
out.println("</table>");
}
%>
<div class="order-header">
订单号: <%= rs.getString("order_no") %> |
用户ID: <%= rs.getInt("user_id") %> |
总金额: ¥<%= rs.getDouble("total_price") %> |
状态: <span class="<%= rs.getInt("status") == 1 ? "status-paid" : "status-pending" %>">
<%= rs.getInt("status") == 1 ? "已支付" : "待支付" %>
</span> |
下单时间: <%= rs.getTimestamp("create_time") %>
</div>
<table>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
<%
}
%>
<tr class="order-details">
<td><%= rs.getString("product_name") %></td>
<td>¥<%= rs.getDouble("price") %></td>
<td><%= rs.getInt("quantity") %></td>
<td>¥<%= rs.getDouble("price") * rs.getInt("quantity") %></td>
</tr>
<%
}
// 关闭最后
一个订单的表格
out.println("</table>");
}
} catch (SQLException e) {
e.printStackTrace();
out.println("<p style='color:red'>数据库错误: " + e.getMessage() + "</p>");
}
%>
</div>
</body>
</
html>
```
#### 关键说明：
1. **数据库连接配置**：
- 修改 `url` 中的数据库名
- 设置正确的 `user` 和 `password`
- 需要将 MySQL JDBC 驱动 (`mysql-connector-java-x.x.x.jar`) 放入项目的 `WEB-INF/lib` 目录
2. **
页面功能**：
- 显示
订单基本信息：
订单号、用户ID、总金额、状态、下单时间
- 嵌套显示每个
订单的商品明细
- 使用不同样式区分不同状态的
订单
- 自动计算商品小计金额
3. **状态显示优化**：
- 数字状态码转换为中文状态说明
- 不同状态使用不同颜色标识（绿色表示已支付，橙色表示待支付）
#### 部署步骤：
1. 在 MySQL 中执行建表 SQL
2. 插入测试数据：
```sql
-- 插入
订单
INSERT INTO orders (order_no, user_id, total_price, status)
VALUES ('ORD202310001', 1001, 299.00, 1);
-- 插入
订单详情
INSERT INTO order_detail (order_id, product_id, product_name, quantity, price)
VALUES
(LAST_INSERT_ID(), 101, '智能
手机', 1, 1999.00),
(LAST_INSERT_ID(), 102, '无线耳机', 2, 299.00);
```
3. 将 `orderList.jsp` 放入 Web 应用的 JSP 目录
4. 启动 Tomcat 服务器
5. 访问 `http://localhost:8080/your-
app/orderList.jsp`
#### 优化建议：
1. **添加分页功能**：
```sql
SELECT ... LIMIT 0, 10 -- 第一页显示10条
```
2. **使用连接池**：
- 替换 `DriverManager` 为 DBCP 或 HikariCP 连接池
```java
// 示例连接池配置
DataSource ds = new HikariDataSource(config);
try (Connection conn = ds.getConnection()) { ... }
```
3. **状态映射优化**：
```jsp
<%
Map<Integer, String> statusMap = new HashMap<>();
statusMap.put(0, "待支付");
statusMap.put(1, "已支付");
statusMap.put(2, "已发货");
statusMap.put(3, "已完成");
%>
<%= statusMap.get(rs.getInt("status")) %>
```
4. **添加
订单筛选功能**：
```jsp
<%
String statusFilter = request.getParameter("status");
String sql = "SELECT ...";
if (statusFilter != null && !statusFilter.isEmpty()) {
sql += " WHERE o.status = " + statusFilter;
}
%>
```
5. **使用 JSTL 优化
代码**：
```jsp
<c:forEach items="${orderList}" var="order">
<c:forEach items="${order.details}" var="detail">
...
</c:forEach>
</c:forEach>
```
本文介绍了一个简单的订单页面布局实现方案，包含头部导航、订单详情展示及底部操作按钮等元素，并通过CSS进行了样式调整。
扫一扫
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
