Java 圖書銷售系統：我的訂單列表頁面 (orderList.jsp) 設計詳解

訂單列表頁是用戶查看歷史消費記錄的核心界面，本文詳細剖析 orderList.jsp 的數據模型、交互設計、分頁策略、狀態機展示與性能優化方案。

頁面功能需求

• 展示當前用戶所有訂單 (分頁)
• 訂單卡片：訂單號、下單時間、總金額、支付狀態、物流狀態、操作入口
• 篩選器：時間範圍、狀態篩選、關鍵字搜索
• 操作：查看詳情、再次購買、申請退款、確認收貨、刪除訂單(軟刪除)
• 空狀態：引導去逛逛、首頁鏈接

數據模型與查詢優化

核心實體關聯

User (1) ─────< (N) Order (1) ─────< (N) OrderBook (N) ─────> (1) Book

單次查詢需聚合：訂單基礎信息 + 每訂單商品快照 (書名、封面、單價、數量) + 狀態標籤。

高效 SQL 策略

方案一：兩次查詢 + 內存組裝 (推薦中小數據量)

-- 1. 查詢訂單主表 (分頁)
SELECT id, user_id, amount, datetime, note, status, shipping_status 
FROM t_order WHERE user_id = ? ORDER BY datetime DESC LIMIT ?, ?;

-- 2. 批量查詢訂單明細
SELECT ob.order_id, ob.book_id, ob.quantity, b.name, b.price, b.cover_url
FROM t_orderbook ob JOIN t_book b ON ob.book_id = b.id
WHERE ob.order_id IN (訂單ID列表);

Java 端用 Map<Long, List<OrderItem>> 組裝，避免 N+1 問題。

方案二：單查詢 + 結果集分組 (大數據量)

SELECT o.id, o.amount, o.datetime, o.status, o.shipping_status,
       b.id as book_id, b.name, b.price, b.cover_url, ob.quantity
FROM t_order o
JOIN t_orderbook ob ON o.id = ob.order_id
JOIN t_book b ON ob.book_id = b.id
WHERE o.user_id = ?
ORDER BY o.datetime DESC, o.id;

配合 ResultSetExtractor 或 MyBatis resultMap 的 collection 映射自動分組。

狀態機視覺化設計

前端使用 <span class="badge badge-{color}"> 語義化渲染。

分頁組件最佳實踐

<!-- JSTL 分頁標籤 -->
<c:url var="pageUrl" value="/orderList">
    <c:param name="status" value="${param.status}"/>
    <c:param name="startDate" value="${param.startDate}"/>
    <c:param name="endDate" value="${param.endDate}"/>
</c:url>

<nav aria-label="Order pagination">
  <ul class="pagination">
    <c:if test="${page.currentPage > 1}">
      <li><a href="${pageUrl}&page=${page.currentPage-1}">上一頁</a></li>
    </c:if>
    <c:forEach begin="${page.startPage}" end="${page.endPage}" var="p">
      <li class="${p == page.currentPage ? 'active' : ''}">
        <a href="${pageUrl}&page=${p}">${p}</a></li>
      </li>
    </c:forEach>
    <c:if test="${page.currentPage < page.totalPages}">
      <li><a href="${pageUrl}&page=${page.currentPage+1}">下一頁</a></li>
    </c:if>
  </ul>
</nav>

保持篩選參數在分頁鏈接中傳遞，用戶體驗無縫銜接。

前端交互增強

• AJAX 篩選：狀態/時間篩選無刷新局部更新，fetch() 返回 HTML 片段替換列表容器
• 訂單詳情彈窗：點擊「查看詳情」加載 /orderDetail?id=xxx 渲染 Modal，避免跳轉
• 物流跟蹤內嵌：整合快遞 100/Kuaidi100 API，訂單卡片直接展開物流軌跡
• 防抖搜索：訂單號/書名搜索 300ms 防抖發請求

性能優化清單

空狀態與引導設計

<c:if test="${empty orderList}">
  <div class="empty-state text-center py-5">
    <i class="icon-box-empty display-1 text-muted"></i>
    <h4 class="mt-3">暫無訂單記錄</h4>
    <p class="text-muted">去挑選幾本好書充實書架吧</p>
    <a href="${pageContext.request.contextPath}/bookList" class="btn btn-primary">
      <i class="icon-book"></i> 立即選購
    </a>
  </div>
</c:if>

權限與安全

• Servlet 過濾器驗證 session.getAttribute("user") != null
• DAO 查詢強制 WHERE user_id = ? 防止越權訪問
• 敏感操作 (退款/確認收貨) 需二次確認 + CSRF Token
• 軟刪除：UPDATE t_order SET deleted=1 WHERE id=? AND user_id=?

orderList.jsp 作為用戶核心資產頁面，兼顧信息密度、交互流暢度與系統性能，是電商系統用戶體驗的關鍵觸點之一。