发布时间：2026-07-21阅读(1)
上篇 SpringBoot MongoDB实现一物流订单系统(上)
本文收录在公众号：bigsai
第三步 订单更新(追加订单)创建完订单之后，无数配送公司和人员便开始配送物流，而我们在查询的时候，物流状态信息也能够时不时的刷新，具体物流信息也能得到追加。
3.1 后端部分在后端的处理上，我们先写service，再写controller，在orderService中编写addLogisticsAndUpdateStatus()函数，主要实现更新订单的状态和订单的物流情况。具体代码为：
//更新物流 public void addLogisticsAndUpdateStatus(logistics logistics) { String status=logistics.getOperation(); Query query = new Query(Criteria.where("_id").is(logistics.getOrderId())); Update update = new Update(); update.set("status", status);//更新状态 update.push("logistics",logistics); mongoTemplate.upsert(query, update, order.class); }
其中：
编写完orderService，在orderController中编写一个名为updateorder的接口，用来处理更新的请求和参数并执行更新的操作，具体代码为：
@PostMapping("updateorder")public String updateorder(logistics logistics){ logistics.setOperationTime(new Date()); orderService.addLogisticsAndUpdateStatus(logistics); return "添加成功";}
同样接口类型为post类型，接收部分参数然后将物流操作时间设置为当前时间，调用orderService的addLogisticsAndUpdateStatus()方法执行更新的操作。这样后端部分就完成了。
3.2 前端部分有了后端部分的支持，前端我们在addlogistics.html中编写以下内容，主要是一个表单向服务端发送数据和更新请求：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui/css/layui.css"></head><body><section > <div > <blockquote > <span>增加物流信息</span> </blockquote> <form action="updateorder" method="post"> <div > <label >订单id</label> <div > <input type="text" name="orderId" autocomplete="off" value="" > </div> </div> <div > <label >操作名称</label> <div > <input type="text" name="operation" autocomplete="off" value=""> </div> </div> <div > <label >操作员</label> <div > <input type="text" name="operator" autocomplete="off" value=""> </div> </div> <div > <label >操作地址</label> <div > <input type="text" name="adress" autocomplete="off" value=""> </div> </div> <div > <label >备注</label> <div > <input type="text" name="details" autocomplete="off" value=""> </div> </div> <div > <div > <button lay-submit lay-filter="formDemo">添加</button> <button type="reset" >重置</button> </div> </div> </form> </div></section></body><script type="text/Javascript" src="layui/layui.js"></script>
这样，前端部分编写完成，执行程序访问localhost:8080,点击添加物流，根据1001的订单号添加物流信息。
添加之后查看MongoDB中订单状态得到更新且物流数据得到更新(追加)：
订单的添加和修改都完成了，非常重要的查询当然不能少，不仅不能少，还要特色的展示，这里查询通过一个订单号查询对应订单的状态和物流。
4.1 后端部分首先在orderservice中编写getOrderById()函数，用来根据订单id查询该条订单记录。具体代码为：
//通过id查询物流 public order getOrderById(int id) { Query query = new Query(Criteria.where("_id").is(id)); order order=mongoTemplate.findOne(query, order.class); return order; }
其中：
写完service然后在orderController中编写getorderbyid接口用来处理用户请求和参数并调用orderService的getOrderById()方法给前端返回该order对象序列化成的json字符串。具体代码为：
@GetMapping("getorderbyid") public order getOrderById(int id) { order order=orderService.getOrderById(id); return order; }
这样，后端部分就完成，仅需要前端渲染数据即可。
4.2 前端部分：后端设计完成之后，需要前端来实现，在这里使用Ajax来实现交互，前端页面点击按钮JavaScript携带参数发送请求，后端查询MongoDB后返回结果给前端渲染， 而在渲染方面为了更像物流订单系统，我们使用layui的 时间轴组件，将各个物流订单数据直观性展示。
前端在ordermanage.html中编写以下内容：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="layui/css/layui.css"></head><body><blockquote > 订单管理</blockquote><div > <div > <label >订单号</label> <div > <input type="tel" name="orderid" id="orderid" autocomplete="off" > </div> </div> <button id="seach" onclick="search()">搜索</button><br> <div style="padding: 20px; background-color: #F2F2F2;"> <div > <div > <div > <div id="order"></div> <div id="orderbody"> </div> </div> </div> </div> </div> <ul id="timezhou"> </ul></div></body><script type="text/javascript" src="layui/layui.js"></script><script type="text/javascript" src="js/jquery-3.5.1.min..js"></script><script type="text/javascript"> function search() {//根据 var orderid = $("#orderid").val(); $("#orderbody").html(); $("#timezhou").html(); $.ajax( { url:"getorderbyid", data:{ id:orderid }, method:GET, success:function (order) { $("#order").html(订单号： orderid ( order[status] )); $("#orderbody").append(发件人： order[shipper] 发件人手机： order[shipperPhone] 发件人地址： order[shippingAdress] 下单时间： order[shipTime]); $("#orderbody").append(<br>收件人： order[recevier] 收获人手机： order[receviePhone] 收获人地址： order[recevierAddress]); var logistics=order[logistics]; console.log(logistics); for(var i=logistics.length-1;i>=0;i--) { console.log(logistics[i]); $("#timezhou").append( <li >\n <i ></i>\n <div >\n <h3 > ( logistics[i].operation ) logistics[i].operationTime </h3><p> logistics[i].operator logistics[i].details <br> logistics[i].adress); if(logistics[i].phone!=0) { $("#timezhou").append(<br> logistics[i].phone); } $("#timezhou").append( </p>\n </div>\n </li>); } }, error:function (order) { layer.msg(order) } }) }</script>
其中Ajax将返回的值通过组装渲染，将带填充数据区域先设置id属性，然后用JavaScript把数据渲染到该部分，核心的思路在 search() 函数中。
启动程序，访问localhost:8080,点击订单管理，查询订单号为1001的物流情况。
利用上述添加物流信息，多添加该订单的物流信息，模拟多一些流程。查询的结果为：
作为管理人员，可能偶尔会遇到特殊情况需要删除订单，而这种操作需求也是很有必要的，在这里实现根据id删除订单。我们在删除订单时候，一般先查询订单的一些数据和结果，然后根据查询的id删除对应的记录。
5.1 后端模块首先在orderService中编写deleteOrderById()函数，用来根据id删除,编写getAllorder()函数，用来查询所有订单。
//根据id删除记录public boolean deleteOrderById(int id){ Query query = new Query(Criteria.where("_id").is(id)); mongoTemplate.remove(query,order.class,"order"); return true;}//查询所有订单public List<order>getAllorder(){ List<order>list=mongoTemplate.findAll(order.class,"order"); return list;}
其中：
写完service，接着在orderController中编写deletebyid接口和getallorder接口，分别用来接收处理删除订单的请求和获取所有订单的请求。
@GetMapping("deletebyid") public String deleteById(int id) { orderService.deleteOrderById(id); return "成功"; } @GetMapping("getallorders") public Map<String,Object> getAllOrder() { Map<String,Object>map=new HashMap<>(); List<order> list=orderService.getAllorder(); map.put("code","0"); map.put("count",list.size()); map.put("data",list); return map; }
其中，getallorder接口返回一个Map<String,Object>类型的数据格式，这是因为layui表格需要特定的json格式所以我们将数据存到Map中返回。启动访问localhost:8080/getallorders你会看到以下格式：
我们将前端部分同样写在ordermanage.html中。在这个页面实现查询订单和管理的功能。首先在body的div中添加表格属性，用来表示一个表格：
<div > <table id="ordertable" lay-filter="ordertable"></table></div>
在body域下侧添加编辑栏的代码，是表格附属的一个编辑对象，删除的按钮就在这里。
<script type="text/html" id="toolbarDemo"> <div > <button lay-event="getCheckData">右侧进行筛选导出</button> </div></script><script type="text/html" id="barDemo"> <a lay-event="edit">编辑</a> <a lay-event="del">删除</a></script>
最后，在最底层script域添加表格渲染的代码和Ajax发送请求的代码：
layui.use(table, function(){ var table = layui.table;//高版本建议把括号去掉，有的低版本，需要加() table.render({ elem: #ordertable ,url: getallorders //数据接口 ,page: false //开启分页 ,toolbar: #toolbarDemo ,cols: [[ //表头 {field: id, title: id, sort: true, fixed: left,width:80} ,{field: orderTime, title: 下单时间,sort:true,width:80} ,{field: recevierAddress, title: 收货地址} ,{field: recevier, title: 收货人 ,edit:text} ,{field: receviePhone, title: 收货人手机 } ,{field: shippingAdress, title: 发货地址} ,{field: shipper, title: 发货人} ,{field: shipperPhone, title: 发货人手机} ,{field: status, title: 物流状态} ,{fixed: right, title:操作, toolbar: #barDemo, width:150} ]] }); //头工具栏事件 //监听单元格编辑 table.on(tool(ordertable), function(obj){ var data = obj.data; console.log(obj) if(obj.event === del){ layer.confirm(真的删除行么, function(index){ $.ajax({ url:deletebyid, data: { id:data.id, }, method:GET, traditional: true, success:function (msg) { layer.msg(msg); obj.del(); }, error:function (msg) { layer.msg(msg) } }); layer.close(index); }); } else if(obj.event === edit){ layer.msg(JSON.stringify("您可以直接单击单元格进行编辑")) } }); });
其中：
具体添加的位置为：
启动程序，访问localhost:8080，点击订单管理，看到查询的物流订单咱们删除id为1001:
再查看页面和MongoDB数据库，你会发现id为1001的记录被成功删除：
到此，MongoDB的实战小项目——一个物流订单系统就完成啦，我想优秀的你肯定已经能够使用MongoDB “操作一顿猛如虎”！
回顾本节课程，首先是从宏观介绍了MongoDB这个非关系型数据库特点以及场景，从场景中选取一个比较适合的案例作为本课程案例—实现一个物流订单系统，紧接着带你简单分析物流订单案例逻辑以及在关系数据库和MongoDB中的不同处理方式，最后创建Springboot整合MongoDB的项目实现一个简易版本的物流订单系统！
当然，本节只是带你入门MongoDB，讲了一些比较基础的内容和简单的使用，如果需要深入学习使用MongoDB，还需要多从官网文档以及其他书籍和文章更深入学习MongoDB，它是当前非常热门的一种基于文档的非关系型数据库，是一种必须掌握的技术点，望你走的更远！下课！
下课之后别忘记点个赞赞、转发、收藏支持一下！另外，更多精彩还请公众号搜索bigsai，回复bigsai获取超大学习资源，共同进步！
Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图
