Html+SpringBoot+Mysql 电商用户订单页展示

一、数据库表

1. order表

   

2. order_item表

   

​

二、SpringBoot代码

1. 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>
     

2. DAO接口

   1. 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);
        }
        

   2. 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);}
        

3. 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);}

4. 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;}
   }
   

5. 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);}}

三、前端代码

1. 主要代码

   		<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 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);}})}</script>
   

2. 全部代码

   <!DOCTYPE html>
   <html><head><meta charset="UTF-8"><!--edge浏览器H5兼容设置--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--360浏览器H5兼容设置--><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><!--	cookie使用--><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"><!--电脑商城logo--><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>&nbsp;收藏</a></li><li class="li-split">|</li><li><a href="orders.html"><span class="fa fa-file-text"></span>&nbsp;订单</a></li><li class="li-split">|</li><li><a href="cart.html"><span class="fa fa-cart-plus"></span>&nbsp;购物车</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>&nbsp;管理 <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>&nbsp;登录</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">
   <!--						<p class="panel-title">-->
   <!--							订单号：1101000001，下单时间：2018-12-1 17:50:30 ，收货人：八戒--><div id="order-info" class="panel-title">订单号：<a href="orders.html">1101000301</a>，支付金额¥<c>5298</c>，<b>TUST电脑商城</b></div>
   <!--						</p>--></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><!-- 页面底部-备案号 #footer --><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>