springboot使用mongodb增删改查，MongoDB实现物流订单系统
上篇 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);
}
其中：
- Query对象来辅助我们根据条件查询待更新数据，这里的意思就是查询数据的条件为：MongoDB中_id字段为具体物流对应的订单id。
- Update对象用来设置更新的字段和数据，其set()方法用来直接更新对应字段的值，而push()方法用来向对应数组中追加数值。因为订单状态需要直接更新使用set()方法，而物流信息是由多个物流数据组成，所以需要使用push()追加到记录的后面。
- mongoTemplate.upsert(query, update, order.class)用来实现更新操作的提交，如果MongoDB中不存在该数据那么就插入到MongoDB中。
编写完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 class="layui-larry-box">
<div class="larry-personal">
<blockquote class="layui-elem-quote layui-text">
<span>增加物流信息</span>
</blockquote>
<form class="layui-form col-lg-5 " action="updateorder" method="post">
<div class="layui-form-item">
<label class="layui-form-label">订单id</label>
<div class="layui-input-block">
<input type="text" name="orderId" autocomplete="off" class="layui-input" value="" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">操作名称</label>
<div class="layui-input-block">
<input type="text" name="operation" autocomplete="off" class="layui-input" value="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">操作员</label>
<div class="layui-input-block">
<input type="text" name="operator" autocomplete="off" class="layui-input" value="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">操作地址</label>
<div class="layui-input-block">
<input type="text" name="adress" autocomplete="off" class="layui-input" value="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="details" autocomplete="off" class="layui-input" value="">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</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;
}
其中：
- Query对象来辅助我们实现条件查询待更新数据，这里的意思就是查询条件同样为：MongoDB中_id字段为传进来id的该条记录。
- 查询一条记录语句为：mongoTemplate.findOne(query, order.class)，第一个参数为查询的条件，第二个参数为查询结果转成Java对象的类型，它帮你自动处理。
- 如果查询多条记录即可用findAll()方法，返回的类型为List的集合类型。
写完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 class="layui-elem-quote layui-text">
订单管理
</blockquote>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">订单号</label>
<div class="layui-input-inline">
<input type="tel" name="orderid" id="orderid" autocomplete="off" class="layui-input">
</div>
</div>
<button class="layui-btn" id="seach" onclick="search()">搜索</button><br>
<div style="padding: 20px; background-color: #F2F2F2;">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header" id="order"></div>
<div class="layui-card-body" id="orderbody">
</div>
</div>
</div>
</div>
</div>
<ul class="layui-timeline" 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 class="layui-timeline-item">\n'
' <i class="layui-icon layui-timeline-axis"></i>\n'
' <div class="layui-timeline-content layui-text">\n'
' <h3 class="layui-timeline-title">' '(' 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;
}
其中：
- 删除的语句为 mongoTemplate.remove(query,order.class,“order”);第一个参数为待删除记录的定位条件，第二个参数为待删除数据的Java类型，第三个参数为待删除数据所在集合名称。
- 查询所有记录语句为：mongoTemplate.findAll(order.class,“order”);第一个参数为查询结果转成Java对象的类型，它帮你自动处理。第二个参数为待查询的集合。
写完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 class="larry-personal-body clearfix">
<table class="layui-hide" id="ordertable" lay-filter="ordertable"></table>
</div>
在body域下侧添加编辑栏的代码，是表格附属的一个编辑对象，删除的按钮就在这里。
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">右侧进行筛选导出</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" 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("您可以直接单击单元格进行编辑"))
}
});
});
其中：
- table.render为layui语法，配置数据url和格式，对应各个字段数据名称和含义，数据即可渲染。而表格最右侧删除需要对应删除的url，点击删除后访问后端的deletebyid接口，将这一行数据的id发送到后端，后端的orderController接收到该请求会调用orderService的方法删除MongoDB中对应的数据。
具体添加的位置为：
启动程序，访问localhost:8080，点击订单管理，看到查询的物流订单咱们删除id为1001:
再查看页面和MongoDB数据库，你会发现id为1001的记录被成功删除：
到此，MongoDB的实战小项目——一个物流订单系统就完成啦，我想优秀的你肯定已经能够使用MongoDB “操作一顿猛如虎”！
回顾本节课程，首先是从宏观介绍了MongoDB这个非关系型数据库特点以及场景，从场景中选取一个比较适合的案例作为本课程案例—实现一个物流订单系统，紧接着带你简单分析物流订单案例逻辑以及在关系数据库和MongoDB中的不同处理方式，最后创建Springboot整合MongoDB的项目实现一个简易版本的物流订单系统！
当然，本节只是带你入门MongoDB，讲了一些比较基础的内容和简单的使用，如果需要深入学习使用MongoDB，还需要多从官网文档以及其他书籍和文章更深入学习MongoDB，它是当前非常热门的一种基于文档的非关系型数据库，是一种必须掌握的技术点，望你走的更远！下课！
下课之后别忘记点个赞赞、转发、收藏支持一下！另外，更多精彩还请公众号搜索bigsai，回复bigsai获取超大学习资源，共同进步！
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
