SpringBoot+MongoDB实现物流订单系统(下)

wptr33 2025-05-02 13:52 33 浏览

本文收录在公众号：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你会看到以下格式：

5.2 前端部分

我们将前端部分同样写在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获取超大学习资源，共同进步！

mongodb删除集合

SpringBoot+MongoDB实现物流订单系统(下)

第三步订单更新(追加订单)

3.1 后端部分

3.2 前端部分

第四步订单查询

4.1 后端部分

4.2 前端部分：

第五步订单删除

5.1 后端模块

5.2 前端部分

结语

相关推荐

C# 13 和 .NET 9 全知道 :13 使用 ASP.NET Core 构建网站 (1)

程序员的开源月刊《HelloGitHub》第 71 期

详细介绍一下Redis的Watch机制，可以利用Watch机制来做什么?

假如有100W个用户抢一张票，除了负载均衡办法，怎么支持高并发?

Java面试必考问题:什么是乐观锁与悲观锁

如何将AI助手接入微信（打开ai手机助手）

redission YYDS spring boot redission 使用

SparkSQL——DataFrame的创建与使用

一文带你了解Redis与Memcached? redis与memcached的区别

如何利用Redis进行事务处理呢? 如何利用redis进行事务处理呢英文

SpringBoot+MongoDB实现物流订单系统(下)

第三步 订单更新(追加订单)

3.1 后端部分

3.2 前端部分

第四步 订单查询

4.1 后端部分

4.2 前端部分：

第五步 订单删除

5.1 后端模块

5.2 前端部分

结语

相关推荐

C# 13 和 .NET 9 全知道 :13 使用 ASP.NET Core 构建网站 (1)

程序员的开源月刊《HelloGitHub》第 71 期

详细介绍一下Redis的Watch机制，可以利用Watch机制来做什么?

假如有100W个用户抢一张票，除了负载均衡办法，怎么支持高并发?

Java面试必考问题:什么是乐观锁与悲观锁

如何将AI助手接入微信（打开ai手机助手）

redission YYDS spring boot redission 使用

SparkSQL——DataFrame的创建与使用

一文带你了解Redis与Memcached? redis与memcached的区别

如何利用Redis进行事务处理呢? 如何利用redis进行事务处理呢英文

第三步订单更新(追加订单)

第四步订单查询

第五步订单删除