當前位置：首頁 > 运维知识 > windows >内容正文

windows

电商系统——订单页面展示

發布時間：2023/12/14 windows 28 豆豆

生活随笔收集整理的這篇文章主要介紹了电商系统——订单页面展示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

兩張訂單表：1. order ：主要存儲用戶與訂單之間的關系，2.order_item：存儲訂單與商品信息，

利用第一張表獲取該用戶所有訂單列表，然后利用第二張表獲取該訂單所有商品信息。

Html+SpringBoot+Mysql 電商用戶訂單頁展示

一、數據庫表

order表

order_item表

二、SpringBoot代碼

xml文件

order
?<select id="selectByExample" parameterType="com.cy.stores.model.OrderExample" resultMap="BaseResultMap">select<if test="distinct">distinct</if><include refid="Base_Column_List" />from t_order<if test="_parameter != null"><include refid="Example_Where_Clause" /></if><if test="orderByClause != null">order by ${orderByClause}</if></select><select id="selectByPrimaryKey" parameterType="java.lang.Long" resultMap="BaseResultMap">select <include refid="Base_Column_List" />from t_orderwhere oid = #{oid,jdbcType=BIGINT}</select>
orderItem
<select id="selectProductByOid" resultMap="BaseResultMap">SELECT *FROM t_order_itemWHERE oid=#{oid}</select>

DAO接口

OrderDAO

package com.cy.stores.dao; ? import com.cy.stores.model.Order; import com.cy.stores.model.OrderExample; import java.util.List; import org.apache.ibatis.annotations.Param; import org.springframework.stereotype.Repository; ? @Repository public interface OrderDAO {List<Order> selectByExample(OrderExample example); ?Order selectByPrimaryKey(Long oid); }

OrderItemDAO

package com.cy.stores.dao; ? import com.cy.stores.model.OrderItem; import com.cy.stores.model.OrderItemExample; import java.util.List; import org.apache.ibatis.annotations.Param; import org.springframework.stereotype.Repository; ? @Repository public interface OrderItemDAO { List<OrderItem> selectProductByOid(Long oid);}

IOrderService接口

package com.cy.stores.service; ? import com.cy.stores.model.Order; import com.cy.stores.vo.OrderItemVo; import com.cy.stores.vo.OrderVo; import java.util.List; ? public interface IOrderService { ?/*** 查詢出當前訂單的商品* @param oid* @return*/List <OrderItemVo> selectProductByOid(Long oid); ?/*** 查詢用戶訂單*/List<OrderVo> selectOrderByUid(Integer uid); ? } ?

OrderServiceImpl類

package com.cy.stores.service.impl; ? import com.cy.stores.dao.OrderDAO; import com.cy.stores.dao.OrderItemDAO; import com.cy.stores.model.*; import com.cy.stores.service.IAddressService; import com.cy.stores.service.ICartService; import com.cy.stores.service.IOrderService; import com.cy.stores.service.IProductService; import com.cy.stores.service.ex.*; import com.cy.stores.util.IdWorker; import com.cy.stores.vo.CartProductVO; import com.cy.stores.vo.OrderItemVo; import com.cy.stores.vo.OrderVo; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; ? import java.util.ArrayList; import java.util.Date; import java.util.List; ? /*** 訂單業務層實現類**/ //將當前類的對象交給Spring處理 @Service public class OrderServiceImpl implements IOrderService { ?@Autowiredprivate OrderDAO orderDAO;@Autowiredprivate OrderItemDAO orderItemDAD;@Autowired@Overridepublic List<OrderItemVo> selectProductByOid(Long oid) {//1.查詢訂單商品數據List<OrderItem> orderItems = orderItemDAD.selectProductByOid(oid);Order order = orderDAO.selectByPrimaryKey(oid);//2.封裝成前端需要訂單商品信息List<OrderItemVo> list=new ArrayList<>();for (OrderItem e:orderItems) {OrderItemVo orderItemVo = new OrderItemVo();orderItemVo.setPid(e.getPid());orderItemVo.setTitle(e.getTitle());orderItemVo.setPrice(e.getPrice());orderItemVo.setStatus(e.getStatus());orderItemVo.setItemTotalPrice(e.getPrice()*e.getNum());orderItemVo.setNum(e.getNum());orderItemVo.setImage(e.getImage());list.add(orderItemVo);}//3.返回數據return list;} ?@Overridepublic List<OrderVo> selectOrderByUid(Integer uid) {OrderExample orderExample=new OrderExample();orderExample.createCriteria().andUidEqualTo(uid);List<Order> orders = orderDAO.selectByExample(orderExample);List<OrderVo> orderVos=new ArrayList<>();for (Order o:orders){OrderVo orderVo = new OrderVo();//訂單ID、收貨人、訂單時間、總價orderVo.setOid(o.getOid().toString());orderVo.setTotalPrice(o.getTotalPrice());orderVo.setRecvName(o.getRecvName());orderVo.setOrderTime(o.getOrderTime());orderVos.add(orderVo);}return orderVos;} }

OrderCtroller類

package com.cy.stores.controller; ? import com.cy.stores.model.Order; import com.cy.stores.model.OrderItem; import com.cy.stores.service.ICartService; import com.cy.stores.service.IOrderService; import com.cy.stores.service.ex.CartException; import com.cy.stores.service.ex.InsertException; import com.cy.stores.util.JsonResult; import com.cy.stores.vo.OrderItemVo; import com.cy.stores.vo.OrderVo; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; ? import javax.servlet.http.HttpSession; import javax.smartcardio.CardException; import java.net.HttpCookie; import java.util.List; ? //@CrossOrigin解決跨域問題 @CrossOrigin @RestController @RequestMapping("orders") public class OrderController extends BaseController{ ?@Autowiredprivate IOrderService orderService; ?@RequestMapping("orderProductInfo")public JsonResult<List<OrderItemVo>> findOrderItemInfo(@RequestParam("oid") String oid){List<OrderItemVo> orderItemVos = orderService.selectProductByOid(new Long(oid));return new JsonResult<>(OK,orderItemVos);} ?@RequestMapping("order")public JsonResult<List<OrderVo>>findOrder(HttpSession session){Integer uid = getuidFromSession(session);List<OrderVo> orderVos = orderService.selectOrderByUid(uid);return new JsonResult<>(OK,orderVos);} ? } ?

三、前端代碼

主要代碼

全部代碼

<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit" /><title>電腦商城</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="../bootstrap3/js/holder.js"></script><link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css"><script src="../bootstrap3/jquery-1.9.1.min.js"></script><script src="../bootstrap3/js/bootstrap.js"></script><script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" /><link rel="stylesheet" type="text/css" href="../css/layout.css" /><link rel="stylesheet" type="text/css" href="../css/top.css" /><link rel="stylesheet" type="text/css" href="../css/footer.css" /><link rel="stylesheet" type="text/css" href="../css/order.css" /></head><body><header class="header"><div class="row"><div class="col-md-3"><a href="index.html"><img src="../images/index/stumalllogo.png" /></a></div><div class="col-md-9 top-item" style="width:100%"><ul class="list-inline pull-right"><div id="title-user" style="width:12.666667%" class="col-md-5"><small>用戶：</small><b>用戶</b></div><div style="width:8.666667%" class="col-md-5"><img id="title-img-avatar" width="40" height="40" src="../images/index/user.jpg" class="img-responsive" /></div><li><a href="favorites.html"><span class="fa fa-heart"></span> 收藏</a></li><li class="li-split">|</li><li><a href="orders.html"><span class="fa fa-file-text"></span> 訂單</a></li><li class="li-split">|</li><li><a href="cart.html"><span class="fa fa-cart-plus"></span> 購物車</a></li><li class="li-split">|</li><li><div class="btn-group"><button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown"><span id="top-dropdown-btn"><span class="fa fa-gears"></span> 管理 <span class="caret"></span></span></button><ul class="dropdown-menu top-dropdown-ul" role="menu"><li><a href="password.html">修改密碼</a></li><li><a href="userdata.html">個人資料</a></li><li><a href="upload.html">上傳頭像</a></li><li><a href="address.html">收貨管理 </a></li></ul></div></li><li class="li-split">|</li><li><a href="login.html"><span class="fa fa-user"></span> 登錄</a></li></ul></div></div></header><div class="row top-nav"><div class="col-md-6"><ul class="nav nav-pills"><li><a href="#"></a></li><li class="active"><a href="index.html"><span class="fa fa-home"></span></a></li><li><a href="#">秒殺</a></li><li><a href="#">優惠券</a></li><li><a href="#">電腦VIP</a></li><li><a href="#">外賣</a></li><li><a href="#">超市</a></li></ul></div><div class="col-md-6"><form action="search.html" class="form-inline pull-right" role="form"><div class="form-group"></div><button type="submit" style="width:120px" class="btn btn-default btn-sm"><span class="fa fa-search"></span></button></form></div></div><div class="container"><div class="col-md-2"><div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><p class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">我的訂單</a></p></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body"><div><a href="orders.html"><b>全部訂單</b></a></div><div><a href="orders.html">待付款</a></div><div><a href="orders.html">待收貨</a></div><div><a href="orders.html">待評價</a></div><div><a href="orders.html">退貨退款</a></div></div></div></div><div class="panel panel-default"><div class="panel-heading"><p class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">資料修改</a></p></div><div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body"><div><a href="password.html"><b>修改密碼</b></a></div><div><a href="userdata.html">個人資料</a></div><div><a href="upload.html">上傳頭像</a></div><div><a href="address.html">收貨管理</a></div></div></div></div></div></div><div class="col-md-10"><div id="order-list" class="panel panel-default"><div class="panel-heading">  <div id="order-info" class="panel-title">訂單號：<a href="orders.html">1101000301</a>，支付金額￥<c>5298</c>，<b>TUST電腦商城</b></div> </div><div class="panel-body"><table class="orders-table" width="100%"><thead><tr><th width="15%"></th><th width="30%">商品</th><th width="8%">單價</th><th width="8%">數量</th><th width="9%">小計</th><th width="10%">售后</th><th width="10%">狀態</th><th width="10%">操作</th></tr></thead><tbody id="order-product-list" class="orders-body"><tr><td><img src="../images/portal/12DELLXPS13-silvery/collect.png" class="img-responsive" /></td><td>聯想(Lenovo)小新Air13 Pro 13.3英寸14.8mm超輕薄筆記本電腦</td><td>￥<span>5298</span></td><td>1件</td><td>￥<span>5298</span></td><td><a href="#">申請售后</a></td><td><div>已發貨</div><div><a href="orderInfo.html">訂單詳情</a></div></td><td><a href="#" class="btn btn-default btn-xs">確認收貨</a></td></tr><tr><td><img src="../images/portal/16LenovoYOGA900green/collect.png" class="img-responsive" /></td><td>戴爾(DELL)XPS13-9360-R1609 13.3</td><td>￥<span>4696</span></td><td>2件</td><td>￥<span>9392</span></td><td><a href="#">申請售后</a></td><td><div>已發貨</div><div><a href="orderInfo.html">訂單詳情</a></div></td><td><a href="#" class="btn btn-default btn-xs">確認收貨</a></td></tr><tr><td><img src="../images/portal/13LenovoIdeaPad310_silvery/collect.png" class="img-responsive" /></td><td>戴爾(DELL)魔方15MF Pro-R2505TSS靈越</td><td>￥<span>5999</span></td><td>1件</td><td>￥<span>5999</span></td><td><a href="#">申請售后</a></td><td><div>已發貨</div><div><a href="orderInfo.html">訂單詳情</a></div></td><td><a href="#" class="btn btn-default btn-xs">確認收貨</a></td></tr></tbody></table><div><span class="pull-right">訂單總金額：￥20689</span></div></div></div>                                         </div></div><div class="clearfix"></div><footer class="footer"><div class="text-center rights container"><div class="col-md-offset-2 col-md-2"><span class="fa fa-thumbs-o-up"></span><p>品質保障</p></div><div class="col-md-2"><span class="fa fa-address-card-o"></span><p>私人訂制</p></div><div class="col-md-2"><span class="fa fa-graduation-cap"></span><p>學生特供</p></div><div class="col-md-2"><span class="fa fa-bitcoin"></span><p>專屬特權</p></div></div><div class="container beforeBottom"><div class="col-md-offset-1 col-md-3"><div><img src="../images/index/stumalllogo.png" alt="" class="footLogo" /></div><div><img src="../images/index/footerFont.png" alt="" /></div></div><div class="col-md-4 callus text-center"><div class="col-md-4"><ul><li><a href="#"><p>買家幫助</p></a></li><li><a href="#">新手指南</a></li><li><a href="#">服務保障</a></li><li><a href="#">常見問題</a></li></ul></div><div class="col-md-4"><ul><li><a href="#"><p>商家幫助</p></a></li><li><a href="#">商家入駐</a></li><li><a href="#">商家后臺</a></li></ul></div><div class="col-md-4"><ul><li><a href="#"><p>關于我們</p></a></li><li><a href="#">關于圓心</a></li><li><a href="#">聯系我們</a></li><li><span class="fa fa-wechat"></span><span class="fa fa-weibo"></span></li></ul></div></div><div class="col-md-4"><div class="col-md-5"><p>電腦商城客戶端</p><img src="../images/index/ios.png" class="lf"><img src="../images/index/android.png" alt="" class="lf" /></div><div class="col-md-6"><img src="../images/index/lzk.png" width="120" height="120"></div></div></div><div class="col-md-12 text-center bottom">Copyright ? 2022 dnsc.cn All Rights Reserved 京ICP備08963888號-45 <a target="_blank" href="https://www.tust.edu.cn//">天津科技大學</a> 版權所有</div></footer><script type="text/javascript">$(document).ready(function () {showOrder();showInfo();});//輸出訂單全部信息function showOrder() {$.ajax({url: "/orders/order",dataType: "JSON",type:"POST",success:function (json) {if (json.state==200){let list = json.data;$("#order-list").empty();for (let i=0;i<list.length;i++){let trs='<div class="panel-heading">\n' +'<p class="panel-title">\n' +'訂單號：#{oid}，下單時間：#{orderTime}，收貨人：#{recvName}\n' +'</p>\n' +'</div>\n' +'<div class="panel-body">\n' +'<table class="orders-table" width="100%">\n' +'<thead>\n' +'<tr>\n' +'<th width="15%"></th>\n' +'<th width="30%">商品</th>\n' +'<th width="8%">單價</th>\n' +'<th width="8%">數量</th>\n' +'<th width="9%">小計</th>\n' +'<th width="10%">售后</th>\n' +'<th width="10%">狀態</th>\n' +'<th width="10%">操作</th>\n' +'</tr>\n' +'</thead>\n' +'<tbody id="order-product-list-#{oid1}" class="orders-body">\n' +'</tbody>\n' +'</table>\n' +'<div>\n' +'<span class="pull-right">訂單總金額：￥#{totalPrice}</span>\n' +'</div>\n' +'</div>';trs = trs.replace(/#{totalPrice}/g, list[i].totalPrice);trs = trs.replace(/#{orderTime}/g, crtTimeFtt(list[i].orderTime));trs = trs.replace(/#{recvName}/g, list[i].recvName);trs = trs.replace(/#{oid}/g, list[i].oid);trs = trs.replace(/#{oid1}/g, list[i].oid);$("#order-list").append(trs);showOrderInfo(list[i].oid);}}},error:function (xhr) {alert("信息加載時產生錯誤！"+xhr.message);}})}// //創建時間格式化顯示function dateFtt(fmt,date){ //author: meizzvar o = {"M+" : date.getMonth()+1, //月份"d+" : date.getDate(), //日"h+" : date.getHours(), //小時"m+" : date.getMinutes(), //分"s+" : date.getSeconds(), //秒"q+" : Math.floor((date.getMonth()+3)/3), //季度"S" : date.getMilliseconds() //毫秒};if(/(y+)/.test(fmt))fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));for(var k in o)if(new RegExp("("+ k +")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));return fmt;}//創建時間格式化顯示function crtTimeFtt(value,row,index){var crtTime = new Date(value);return top.dateFtt("yyyy-MM-dd hh:mm:ss",crtTime);//直接調用公共JS里面的時間類處理的辦法}//輸出訂單商品信息function showOrderInfo(oid) {$.ajax({url: "/orders/orderProductInfo",data: {oid:oid},dataType: "JSON",type:"POST",success:function (json) {if (json.state==200){let list = json.data;for (let i=0;i<list.length;i++){let tr = '<tr>\n' +'<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +'<td>#{title}</td>\n' +'<td>￥<span>#{price}</span></td>\n' +'<td>#{num}件</td>\n' +'<td>￥<span>#{itemTotalPrice}</span></td>\n' +'<td><a href="#">申請售后</a></td>\n' +'<td>\n' +'<div>#{status}</div>\n' +'<div><a href="orderInfo.html">訂單詳情</a></div>\n' +'</td>\n' +'<td><a href="#" class="btn btn-default btn-xs">確認收貨</a></td>\n' +'</tr>';tr = tr.replace(/#{pid}/g, list[i].pid);tr = tr.replace(/#{image}/g, list[i].image);tr = tr.replace(/#{title}/g, list[i].title);tr = tr.replace(/#{price}/g, list[i].price);if (list[i].status==0){tr = tr.replace(/#{status}/g,"待付款");}if (list[i].status==1){tr = tr.replace(/#{status}/g,"待發貨");}if (list[i].status==2){tr = tr.replace(/#{status}/g,"待簽收");}if (list[i].status==3){tr = tr.replace(/#{status}/g,"確認收貨");}tr = tr.replace(/#{num}/g, list[i].num);tr = tr.replace(/#{oid}/g, list[i].oid);tr = tr.replace(/#{itemTotalPrice}/g, list[i].itemTotalPrice);//獲取動態創建的訂單商品列表$("#order-product-list-"+oid).append(tr);}}},error:function (xhr) {alert("信息加載時產生錯誤！"+xhr.message);}})}//填充用戶信息function showInfo(){// let avatar=$.cookie("avatar");$("#title-img-avatar").attr("src",$.cookie("avatar"));// let username=$.cookie("username");$("#title-user>b").text($.cookie("username"));}</script></body></html>

總結

以上是生活随笔為你收集整理的电商系统——订单页面展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： OSPF基础配置命令
下一篇： java信息管理系统总结_java实现科