订单系统 python 订单系统界面

转载

mob64ca1409d8ea 2023-12-19 21:40:34

文章标签 订单系统 python web app List java spring 文章分类 Python 后端开发

两张订单表：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_order where oid = #{oid,jdbcType=BIGINT} </select>
orderItem <select id="selectProductByOid" resultMap="BaseResultMap"> SELECT * FROM t_order_item WHERE 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 { @Autowired private OrderDAO orderDAO; @Autowired private OrderItemDAO orderItemDAD; @Autowired @Override public 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; } @Override public 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{ @Autowired private 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); } }

三、前端代码

主要代码 <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>
全部代码 <!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: meizz var 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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。