效果圖
有訂單時(shí)的效果圖
無訂單時(shí)的效果圖
訂單詳情頁
功能
- 生成訂單
- 訂單頁的展示
- 查看訂單詳情
正文
說明
和購物車同樣的，首先得知道我們的訂單對應(yīng)的哪個(gè)實(shí)體對象。一個(gè)用戶可能有多條訂單記錄，一個(gè)訂單里邊可以包含多個(gè)商品（也可以理解為多個(gè)購物項(xiàng)）。理清這個(gè)邏輯之后，我們就可以得到兩個(gè)實(shí)體：訂單實(shí)體類和詳細(xì)的訂單項(xiàng)
對應(yīng)到界面上就是如下圖：
order.jsp（訂單頁）
<%@ page import="com.service.OrderService" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page import="com.myUtil.ProcessUtil" %>
<%@ page import="com.entity.Order" %>
<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: huawei
Date: 2022/10/22
Time: 20:02
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>我的訂單</title>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<%--icon圖標(biāo)--%>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<!-- popper.min.js 用于彈窗、提示、下拉菜單 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
</head>
<body>
<%
OrderService orderService = new OrderService();
String userId = ProcessUtil.getUserIdBySessionId(session);
List<Order> orderList= orderService.showAllOrder(userId);
if (orderList!=null && orderList.size()!=0){
session.setAttribute("orderList",orderList);
}
%>
<nav class="navbar-expand-lg navbar navbar-dark bg-primary">
<div class="container-fluid ">
<a class="navbar-brand" href="#">我的訂單</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/MyProject/index.jsp">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<c:if test="${empty sessionScope.orderList}">
<div class="container" >
<div class="card position-relative" style="margin: 50px;height: 280px;background: #ffffff url(img/CartBackground.png) no-repeat; background-position: center left;">
<div class="position-absolute top-50 start-50 translate-middle">
<h7>
您還未購買過任何商品哦！趕緊行動吧！您可以：
</h7><br>
<a class="btn btn-primary btn-lg" href="/MyProject/index.jsp">購物</a>
</div>
</div>
</div>
</c:if>
<c:if test="${!empty sessionScope.orderList}">
<div class="container">
<div class="card">
<table class="table table-hover text-center">
<tr>
<td>訂單號</td>
<td>下單時(shí)間</td>
<td>總價(jià)</td>
<td>狀態(tài)</td>
<td>詳情</td>
</tr>
<c:forEach items="${sessionScope.orderList}" var="order">
<tr style="vertical-align: middle !important;text-align: center;">
<td>
<%--<img style="width: 100px;height: 100px" src="${or}"/>--%>
<span>${order.id}</span>
</td>
<td>
<%--分割下單時(shí)間--%>
<c:set value="${fn:split(order.create_time,'T')}" var="time"></c:set>
<c:forEach var="tm" items="${time}">
${tm}
</c:forEach>
</td>
<td>${order.price}</td>
<td>0</td>
<td><a type="submit" class="btn btn-danger" href="/MyProject/orderDetail.jsp?orderId=${order.id}">查看</a></td>
</tr>
</c:forEach>
</table>
<div class="row justify-content-between">
</div>
</div>
</div>
</c:if>
</body>
</html>
訂單的展示
這里通過在jsp頁面，調(diào)用service層的showAllOrder()來獲取所有的訂單列表。然后通過for-Each來將列表的每條信息渲染到前端頁面
訂單的查看
和前面幾節(jié)講的留言刪除、刪除購物項(xiàng)思路一樣，通過攜帶唯一標(biāo)識ID（下單時(shí)間的毫秒數(shù)）來查看對應(yīng)訂單的詳細(xì)信息。因?yàn)椴榭从唵卧斍樾枰D(zhuǎn)頁面，所有我們這里采用<a></a>標(biāo)簽來進(jìn)行跳轉(zhuǎn)。相關(guān)代碼：
<td>
<a type="submit" class="btn btn-danger" href="/MyProject/orderDetail.jsp?orderId=${order.id}">查看</a>
</td>
orderDetail.jsp（訂單詳情頁）
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.entity.OrderItem" %>
<%@ page import="com.service.OrderItemService" %>
<%@ page import="java.util.List" %>
<%@ page import="com.service.OrderService" %>
<%@ page import="com.myUtil.ProcessUtil" %><%--
Created by IntelliJ IDEA.
User: huawei
Date: 2022/10/22
Time: 22:40
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>訂單詳情頁</title>
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<%--icon圖標(biāo)--%>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<!-- popper.min.js 用于彈窗、提示、下拉菜單 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
</head>
<body>
<%
OrderItemService orderItemService = new OrderItemService();
// String orderId = (String)session.getAttribute("orderId");
// if (orderId==null){
// 當(dāng)用戶重新登錄之后/重啟服務(wù)器，seesion域中會清空orderId。所以需要
String orderId = request.getParameter("orderId");
// }
List<OrderItem> orderItems = orderItemService.showAllOrderItem(orderId);
if (orderItems !=null && orderItems.size()!=0){
session.setAttribute("orderItems",orderItems);
}
%>
<nav class="navbar-expand-lg navbar navbar-dark bg-primary">
<div class="container-fluid ">
<a class="navbar-brand" href="#">訂單詳情頁</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/MyProject/index.jsp">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<c:if test="${!empty sessionScope.orderItems}">
<div class="container">
<div class="card">
<table class="table table-hover text-center">
<tr>
<td>訂單號</td>
<td>商品名稱</td>
<td>價(jià)格</td>
<td>數(shù)量</td>
<td>總價(jià)格</td>
</tr>
<c:forEach items="${sessionScope.orderItems}" var="orderItem">
<tr style="vertical-align: middle !important;text-align: center;">
<td>${orderItem.order_id}</td>
<td>
<img style="width: 100px;height: 100px" src="${orderItem.img}"/>
<span>${orderItem.name}</span>
</td>
<td>${orderItem.price}</td>
<td>${orderItem.count}</td>
<td>${orderItem.total_price}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</c:if>
</body>
</html>
訂單詳情的展示
在上邊查看詳情頁按鈕的代碼中可以看到，跳轉(zhuǎn)的不是Controller層，而是跳轉(zhuǎn)到了orderDetail.jsp頁面。在詳情頁面，通過請求攜帶的訂單Id，來獲取數(shù)據(jù)庫的中的訂單項(xiàng)數(shù)據(jù)。
不知道大家到這里會不會很奇怪？訂單項(xiàng)是一個(gè)對象，訂單也是一個(gè)對象。我們的訂單和訂單項(xiàng)的展示，都需要從數(shù)據(jù)庫來獲取，
那么這兩個(gè)對象是什么時(shí)候存儲到數(shù)據(jù)庫中的呢？
別急。下邊就是答案：
當(dāng)我們在購物車中點(diǎn)擊結(jié)算按鈕的時(shí)候，他就會生成訂單對象以及和它對應(yīng)的訂單項(xiàng)。
我們這里解釋一下，它的前后端是如何處理的：
// 結(jié)算
$("#settlement").click(
function () {
$.post(
"/MyProject/orderProcessServlet",
{
method: ""
},
function (data) {
if ("success" == data){
alert("訂單生成成功!");
location.reload(true);
}
},
"json"
)
}
)
這段js代碼在上一章節(jié)中，因?yàn)樗鼘儆谫徫镘嚥糠帧Ｊ前l(fā)送結(jié)算請求。請求地址是/orderProcessServlet，即我們的訂單對應(yīng)的Controller層。
OrderProcessServlet（訂單處理層）
package com.controller;
import com.entity.*;
import com.google.gson.Gson;
import com.myUtil.JdbcUtil;
import com.myUtil.ProcessUtil;
import com.service.OrderService;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
public class OrderProcessServlet extends HttpServlet {
private OrderService orderService = new OrderService();
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
HttpSession session = request.getSession();
Cart cart = (Cart) session.getAttribute("cart");
String userId = ProcessUtil.getUserIdBySessionId(session);
if (cart==null || cart.getItems().size()==0){
response.sendRedirect("/MyProject/index.jsp");
return;
}
if (cart!=null){
// 對生成訂單進(jìn)行事務(wù)控制
String orderId = null;
try {
orderId = orderService.saveOrder(cart, Integer.parseInt(userId));
JdbcUtil.commit();
session.setAttribute("orderId",orderId);
response.getWriter().write(new Gson().toJson("success"));
} catch (Exception e) {
// 如果出錯(cuò)事務(wù)回滾
JdbcUtil.rollback();
e.printStackTrace();
}
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
doPost(request, response);
}
}
orederService（訂單處理的業(yè)務(wù)層）
package com.service;
import com.dao.GoodsDao;
import com.dao.OrderDao;
import com.dao.OrderItemDao;
import com.entity.*;
import java.time.LocalDateTime;
import java.util.HashMap;
import java.util.List;
public class OrderService {
private OrderDao orderDao = new OrderDao();
private OrderItemDao orderItemDao = new OrderItemDao();
private GoodsDao goodsDao = new GoodsDao();
// 生成訂單
public String saveOrder(Cart cart, Integer userId){
// 生成訂單號
String orderId = String.valueOf(System.currentTimeMillis());
// 訂單生成時(shí)間
LocalDateTime createTime = LocalDateTime.now();
Order order = new Order(orderId,createTime,cart.getTotalPrice(),0,userId);
// 保存order表到數(shù)據(jù)庫
orderDao.addOrder(order);
// 構(gòu)建orderItem，并保存到數(shù)據(jù)庫
HashMap<Integer, ShopCarItem> items = cart.getItems();
for (Integer goodId : items.keySet()) {
ShopCarItem item = items.get(goodId);
OrderItem orderItem =
new OrderItem(null, item.getImg(), item.getGoodsName(), item.getPrice(), item.getNumber(), item.getTotalPrice(), orderId);
orderItemDao.addOrderItem(orderItem);
// 得到商品信息
Goods goods = goodsDao.showDataById(String.valueOf(goodId));
// 更新庫存
goods.setInventory(goods.getInventory() - item.getNumber());
// 更新到數(shù)據(jù)庫
goodsDao.updateStock(goods);
}
// 清空購物車
cart.removeAll();
return orderId;
}
// 顯示所有訂單
public List<Order> showAllOrder(String userId){
return orderDao.showAllOrder(userId);
}
}
接著上邊的邏輯，當(dāng)生成訂單請求發(fā)過來之后，在這Controller層調(diào)用Service層的saveOrder()進(jìn)行了訂單的生成，而且在Service層我們進(jìn)行了訂單保存，訂單項(xiàng)的保存。而且我們注意到saveOrder()的參數(shù)是Cart購物車對象和用戶Id。因?yàn)橛唵魏陀唵雾?xiàng)的所有信息都是從購物車來獲取的，而且每個(gè)訂單得有對應(yīng)的用戶（我們得保證自己的訂單不能出現(xiàn)在別人的頁面上，對吧^_^）。
當(dāng)然生成訂單之后還得清空購物車。
orderItemService
package com.service;
import com.dao.OrderItemDao;
import com.entity.OrderItem;
import java.util.List;
public class OrderItemService {
private OrderItemDao orderItemDao = new OrderItemDao();
// 顯示所有訂單項(xiàng)
public List<OrderItem> showAllOrderItem(String orderId){
return orderItemDao.showAllOrderItem(orderId);
}
}
orderDao
package com.dao;
import com.entity.Order;
import java.util.List;
public class OrderDao extends BasicDao<Order> {
// 生成訂單
public Boolean addOrder(Order order){
String sql = "INSERT INTO `order` VALUES('"+order.getId()+"','"+order.getCreate_time()+"',"+order.getPrice()+","+order.getStatus()+","+order.getMember_id()+")";
return dmlData(sql);
}
// 顯示所有訂單
public List<Order> showAllOrder(String userId){
String sql = "SELECT * FROM `order` WHERE `member_id`='" + userId + "'";
List<Order> orders = queryMulti(sql, Order.class);
if (orders!=null){
return orders;
}
return null;
}
}
orderItemDao
package com.dao;
import com.entity.OrderItem;
import java.util.List;
public class OrderItemDao extends BasicDao<OrderItem>{
// 添加訂單項(xiàng)
public Boolean addOrderItem(OrderItem orderItem){
String sql = "INSERT INTO `order_item` VALUES(NULL,'"+ orderItem.getImg() +"','"+ orderItem.getName() + "',"+ orderItem.getPrice() +","+ orderItem.getCount() +","+ orderItem.getTotal_price() +",'"+ orderItem.getOrder_id() +"')";
return dmlData(sql);
}
// 顯示所有訂單項(xiàng)
public List<OrderItem> showAllOrderItem(String orderId){
String sql = "SELECT * FROM `order_item` WHERE `order_id`='"+ orderId +"'";
List<OrderItem> orderItems = queryMulti(sql, OrderItem.class);
if (orderItems != null){
return orderItems;
}
return null;
}
}
order（訂單實(shí)體類）
訂單實(shí)體類擁有屬性：
- 訂單號（訂單結(jié)算的毫秒時(shí)間）
- 訂單生成時(shí)間
- 訂單金額
- 訂單狀態(tài)（這里我們沒有太多的功能，所以默認(rèn)是0）
- 訂單所屬者（每個(gè)訂單屬于哪個(gè)用戶）
package com.entity;
import java.math.BigDecimal;
import java.time.LocalDateTime;
public class Order {
// 訂單號
private String id;
// 訂單生成時(shí)間
private LocalDateTime create_time;
// 訂單金額
private BigDecimal price;
// 訂單狀態(tài)
private Integer status;
// 該訂單對應(yīng)的用戶id
private Integer member_id;
public Order() {
}
public Order(String id, LocalDateTime create_time, BigDecimal price, Integer status, Integer member_id) {
this.id = id;
this.create_time = create_time;
this.price = price;
this.status = status;
this.member_id = member_id;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public LocalDateTime getCreate_time() {
return create_time;
}
public void setCreate_time(LocalDateTime create_time) {
this.create_time = create_time;
}
public BigDecimal getPrice() {
return price;
}
public void setPrice(BigDecimal price) {
this.price = price;
}
public Integer getStatus() {
return status;
}
public void setStatus(Integer status) {
this.status = status;
}
public Integer getMember_id() {
return member_id;
}
public void setMember_id(Integer member_id) {
this.member_id = member_id;
}
@Override
public String toString() {
return "Order{" +
"id='" + id + '\'' +
", create_time=" + create_time +
", price=" + price +
", status=" + status +
", member_id=" + member_id +
'}';
}
}
orderItem（訂單項(xiàng)實(shí)體類）
訂單項(xiàng)的實(shí)體類擁有的屬性：文章來源：http://www.zghlxwxcb.cn/news/detail-445497.html
- 訂單項(xiàng)唯一的標(biāo)識Id
- 商品圖片
- 商品的價(jià)格
- 商品數(shù)量
- 訂單項(xiàng)的總價(jià)格
- 訂單項(xiàng)的所屬的訂單（訂單項(xiàng)都是從屬于某一個(gè)訂單）
package com.entity;
import java.math.BigDecimal;
public class OrderItem {
// 訂單項(xiàng)的自增ID
private Integer id;
// 商品圖片
private String img;
// 商品名
private String name;
// 商品價(jià)格
private BigDecimal price;
// 商品數(shù)量
private Integer count;
// 訂單項(xiàng)的總價(jià)
private BigDecimal total_price;
// 對應(yīng)的訂單號
private String order_id;
public OrderItem() {
}
@Override
public String toString() {
return "OrderItem{" +
"id=" + id +
", img='" + img + '\'' +
", name='" + name + '\'' +
", price=" + price +
", count=" + count +
", total_price=" + total_price +
", order_id='" + order_id + '\'' +
'}';
}
public String getImg() {
return img;
}
public void setImg(String img) {
this.img = img;
}
public OrderItem(Integer id, String img, String name, BigDecimal price, Integer count, BigDecimal total_price, String order_id) {
this.id = id;
this.img = img;
this.name = name;
this.price = price;
this.count = count;
this.total_price = total_price;
this.order_id = order_id;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public BigDecimal getPrice() {
return price;
}
public void setPrice(BigDecimal price) {
this.price = price;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
}
public BigDecimal getTotal_price() {
return total_price;
}
public void setTotal_price(BigDecimal total_price) {
this.total_price = total_price;
}
public String getOrder_id() {
return order_id;
}
public void setOrder_id(String order_id) {
this.order_id = order_id;
}
}
order表的設(shè)計(jì)
| 列名 | 數(shù)據(jù)類型 | 長度 | 主鍵？ | 非空？ | 自增？ |
|---|---|---|---|---|---|
| id | varchar | 64 | √ | √ | |
| create_time | datetime | √ | |||
| price | decimal | 11,2 | √ | ||
| statue | tinyint | 32 | √ | ||
| member | int | √ |
orderItem表的設(shè)計(jì)
| 列名 | 數(shù)據(jù)類型 | 長度 | 主鍵？ | 非空？ | 自增？ |
|---|---|---|---|---|---|
| id | int | √ | √ | √ | |
| img | varchar | 500 | √ | ||
| name | varchar | 500 | √ | ||
| price | decimal | 11,2 | √ | ||
| count | int | √ | |||
| total_price | decimal | 11,2 | √ | ||
| order_id | varchar | 64 | √ |
這里我們得保證實(shí)體類的屬性名要和對應(yīng)表的字段名保持一致?。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-445497.html
到了這里，關(guān)于JavaWeb購物系統(tǒng)（六）購物車訂單模塊的實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
