SpringBoot+MongoDB助力物流訂單系統

原創作者公衆号：

bigsai

,回複bigsai領取5G的PDF學習資源！共同進步。更多精彩期待與您分享！

項目收錄在

github 的 MongoDB案例中 ，文章收錄在 回車課堂 中

課程導學

我們都知道MongoDB是一款非常出色的非關系型文檔資料庫，你肯定會想問MongoDB這麼強，我們該怎麼用或者有啥運用場景呢？

MongoDB的應用場景非常多，無論是資料存儲還是日志存儲越來越多的公司在使用MongoDB，而我們今天也在SpringBoot基礎上使用MongoDB實作一個簡易版本的物流訂單管理系統。

在使用前，你自己的電腦上要有IDEA編譯器來建立項目，還要擁有MongoDB資料庫和Studio 3T(MongoDB可視化資料庫管理工具，下載下傳位址

https://studio3t.com/

)。

案例分析

1.1 案例分析

我想，大部分人都應該有着購物的經曆，當商品下單時就會出現一個物流單号，接下來幾天内的物流資訊會根據這個單号更新。

然後接下來的幾天可能會到達不同地點，進行更新，你可能會好奇這樣一個功能是如何實作，本案例就通過SpringBoot+MongoDB實作一個簡易版本的物流訂單系統。當然具體實作商用肯定要考慮很多細節也很複雜，本案例更側重于功能實作和MongoDB使用。

1.2 核心思路拆解

一個訂單資料是如何産生和更新的呢？首先一個訂單資料由下單時産生，然後該訂單經曆各個物流點更新物流資訊和訂單狀态，最後在使用者取件之後訂單狀态更新後資料基本就不再更新了。

下單子產品：我想大部分人看過寄快遞下單流程或者自己下過單，核心就是一個表單頁面填寫寄件人姓名、位址、手機等資訊和收件人姓名、位址、手機等資訊。是以在這裡具體實作也是填寫寄件人和收件人資訊儲存。

物流子產品 ：一個訂單下單後可能經曆若幹物流地點，最終才能到達目的地被簽收。而就各個物流點來看，各個物流點的管理人員對該物流訂單添加一些物流資訊，例如到達位址、訂單目前狀态、聯系方式等等。而本案例在添加物流資訊的實作上也通過一個表單添加該訂單的物流資訊，通過物流訂單的id進行聯立。

實作這種資料應該如何存儲？如果使用關系型資料庫，就單訂單物流資訊存儲可能至少需要使用兩張表來實作，一張訂單(order)資訊表存儲訂單一些固定欄位資訊，一張物流(Logistics)資訊表儲存動态的物流變化，通過訂單id實作兩張表的關聯。

按照E-R圖設計資料庫，按照我們簡潔的設計方式，其資料其中一部分的資料是這樣的：

物流表中的order_id外鍵引用order表中的id字段進行關聯。在查詢訂單資料的時候需要關聯查詢。物流訂單系統确實可以使用關系資料庫去實作，但是資料量過大可能會有性能瓶頸需要優化，如果采用MongoDB不僅可以提高效率，還可以使得流程變得更加簡單。

訂單的特點是随着遞送過程，訂單資料需要随時更新路徑。資料結構上需要可以靈活應對，這點非常符合MongoDB的document文檔模型，并且MongoDB支援GIS功能，非常适用于MongoDB來支撐物流業務(這裡簡易版本就不使用該功能了)。而物流行業裡訂單比較獨立，跨訂單的操作很少，建立、更新(追加)的操作會較多，物流業務模型上與MongoDB非常的比對。本課程就是使用MongoDB實作一個物流訂單系統的小例子。

1.3 案例涉及知識點

SpringBoot

相信你對SpringBoot很熟悉，由于Spring的發展、微服務的發展使得SpringBoot越來越流行，已經成為JavaWeb開發的主流架構。

SpringBoot是由Pivotal團隊提供的全新架構，其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。該架構使用了特定的方式來進行配置，進而使開發人員不再需要定義樣闆化的配置。通過這種方式，SpringBoot在蓬勃發展的快速應用開發領域(rapid application development)成為上司者。

簡而言之，SpringBoot是目前web開發主流，其簡化了Spring的配置讓開發者能夠更容易上手Web項目的開發。且MongdoDB能夠快速與SpringBoot整合，在項目中能夠快速便捷操作MongoDB；

MongoDB

MongoDB是一個基于分布式檔案存儲的資料庫。由C++語言編寫。旨在為web應用提供可擴充的高性能資料存儲解決方案。MongoDB是一個介于關系型資料庫和非關系型資料庫之間的産品，是非關系型資料庫當中功能最豐富，最像關系型資料庫的。它支援的資料結構非常松散，是類似JSON的BSON格式，是以可以存儲比較複雜的資料類型。MongoDB最大的特點是它支援的查詢語言非常強大，其文法有點類似于面向對象的查詢語言，幾乎可以實作類似關系資料庫單表查詢的絕大部分功能，而且還支援對資料建立索引。

本案例就是基于SpringBoot和MongoDB實作一個物流訂單系統的小案例，實際的物流場景需要考慮的問題肯定很多也比較複雜，這是實作一個簡易版本的物流訂單系統主要為了MongoDB的使用和學習。

1.4案例實作步驟

分析完案例以及了解案例設計的知識點後，就可以一步一步開始動手實作本案例，本案例要實作的就是訂單建立、訂單資訊更新、查詢、删除的一個小型完整的物流訂單管理系統。而在具體實作上按照以下步驟：

1. 預備工作:建立資料庫和項目
2. 訂單添加
3. 訂單更新
4. 訂單查詢
5. 訂單删除

整個案例實作火熱運作的環境如下：

• 作業系統：Windows10
• JDK版本：JDK8
• 編譯器：IDEA
• MongoDB版本：4.4.0
• MongoDB可視化管理工具：Studio 3T

實作步驟

第一步 預備工作

1.1 建立MongoDB資料庫

打開Studio 3T資料庫管理工具，連接配接本地MongoDB資料庫之後，建立名為test的資料庫，在test資料庫中建立名為order的集合：

1.2 建立SpringBoot項目

首先，打開IDEA建立項目，選擇建立SpringBoot項目：

然後在選擇Gruop和Aritifact的時候分别填寫com和mongodemo，Java Version選擇8版本。

在勾選子產品時候，這裡勾選Spring web、MongoDB依賴子產品，選擇合适位置建立項目，項目就可以成功建立：

建立項目之後，需要做一些前置工作預備。

1.3 建立Java相關檔案

建立完項目，我們需要做一些預備工作用來完成緩存。我們首先要在項目中的application.properties中添加配置連接配接到資料庫，配置規則為：

spring.data.mongodb.uri=mongodb://位址:端口/資料庫名

，本案例使用本地的MongoDB資料庫，預設端口為27017，而使用的MongoDB具體資料庫名稱為test，那麼就可以按照以下進行配置：

spring.data.mongodb.uri=mongodb://localhost:27017/test           

這樣在項目中就可以連接配接到本地的MongoDB的test資料庫并通路。

其次在項目中com.mongodb目錄下分别建立controller，service，pojo檔案夾，在controller檔案夾下建立

orderController

類，為負責url和邏輯的控制器：

package com.mongodemo.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class orderController {
    private static Logger logger= LoggerFactory.getLogger(orderController.class);

}
           

其中：

• @RestController就聲明該類為一個控制器，并且每個接口傳回一個JSON字元串給前端。
• Logger對象用于列印日志。在web項目中我們更傾向于使用log列印日志而不在控制台直接輸出。

orderController建立完畢後，在service 檔案夾下建立

orderService.java

類，裡面先編寫以下内容：

package com.mongodemo.service;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.MongoTemplate;
import org.springframework.stereotype.Service;

@Service
public class orderService {
    private static Logger logger= LoggerFactory.getLogger(orderService.class);
    @Autowired
    MongoTemplate mongoTemplate;
}           

• @Service 表示該類為一個service(事務處理)，可以被注入到其他對象中(Spring幫你管理)。
• @Autowired表示要注入對象的意思，下面緊接着被注入的對象。而MongoTemplate 就是已經封裝好一個對象，一個在Spring中操作MongoDB的對象。

service建立完成，我們需要在pojo中建立logistics類和order類，分别表示具體物流資訊和訂單資訊。其中logistics類如下，各個字段的含義請看注釋：

package com.mongodemo.pojo;

import java.util.Date;

public class logistics {
    private int orderId;//訂單id
    private String operation;//操作
    private String operator;//操作員
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezone = "GMT+8")
    private Date operationTime;//操作時間
    private String address;//位址
    private String details;//備注細節

    public  logistics(){}
    public logistics(int orderId,String operation, String operator, Date operationTime, String address, String details) {
        this.orderId = orderId;
        this.operation=operation;
        this.operator = operator;
        this.operationTime = operationTime;
        this.address = address;
        this.details = details;
    }
    public int getOrderId() {
        return orderId;
    }
    public void setOrderId(int orderId) {
        this.orderId = orderId;
    }
    public String getOperator() {
        return operator;
    }
    public void setOperator(String operator) {
        this.operator = operator;
    }
    public Date getOperationTime() {
        return operationTime;
    }
    public void setOperationTime(Date operationTime) {
        this.operationTime = operationTime;
    }
    public String getAdress() {
        return address;
    }
    public void setAdress(String address) {
        this.address = address;
    }
    public String getDetails() {
        return details;
    }
    public void setDetails(String details) {
        this.details = details;
    }
    public String getOperation() {
        return operation;
    }
    public void setOperation(String operation) {
        this.operation = operation;
    }
}
           

order類的内容如下：

package com.mongodemo.pojo;

import java.util.Date;
import java.util.List;

public class order {
    private int id;//訂單id
    private String status;//狀态
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezone = "GMT+8")
    private Date orderTime;//下單時間
    private String shipper;//發貨人
    private String shippingAdress;//發貨位址
    private long shipperPhone;//發貨人手機
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezone = "GMT+8")
    private Date shipTime;//發貨時間
    private String recevier;//接收人
    private String recevierAddress;//接收位址
    private long receviePhone;//接收人号碼
    private List<logistics>logistics;//物流資訊

    public order(int id, String status, Date orderTime, String shipper, String shippingAdress, long shipperPhone, Date shipTime, String recevier, String recevierAddress, long receviePhone, List<com.mongodemo.pojo.logistics> logistics) {
        this.id = id;
        this.status = status;
        this.orderTime = orderTime;
        this.shipper = shipper;
        this.shippingAdress = shippingAdress;
        this.shipperPhone = shipperPhone;
        this.shipTime = shipTime;
        this.recevier = recevier;
        this.recevierAddress = recevierAddress;
        this.receviePhone = receviePhone;
        this.logistics = logistics;
    }
    //省略get set方法，自己補全
}
           

其中 @JsonFormat(pattern = "yyyy-MM-dd HH:mm",timezone = "GMT+8")為時間類的json輸出格式，供前端使用。

1.4 建立html相關檔案

在static檔案夾下建立

index.html

,

addlogistics.html

addorder.html

.

ordermanage.html

進入

layui官網

下載下傳layui的js和css檔案。解壓後核心檔案放到static下。到

JQuery官網下載下傳

jquery-3.5.1.min.js檔案，在static下建立js檔案夾并把JQuery的js檔案放進去，最終前端的頁面會是這樣的：

其中index.html檔案為背景管理的主要ui頁面，每個小功能的頁面隻需要編寫對應頁面即可。在index.html中編寫以下内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>訂單管理系統</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">ordermanage</div>
        <!-- 頭部區域（可配合layui已有的水準導航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                   bigsai
                </a>
            </li>

        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左側導航區域（可配合layui已有的垂直導航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">訂單管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="ordermanage.html" target="container">訂單管理</a></dd>
                        <dd><a href="addorder.html" target="container">訂單添加</a></dd>
                        <dd><a href="addlogistics.html" target="container">物流添加</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主體區域 -->
        frameLabelStart--frameLabelEnd 
    </div>


    <div class="layui-footer">
        <!-- 底部固定區域 -->
        bigsai帶你學
    </div>
</div>
<script src="layui/layui.js"></script>
<script src="layui/modules/jquery.js"></script>
<!--<script src="layui/main.js"></script>-->
<script>
   // JavaScript代碼區域
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切換功能，切換事件監聽等，需要依賴element子產品
        //觸發事件
        var active = {
            tabAdd: function(){
                //新增一個Tab項
                element.tabAdd('demo', {
                    title: '新選項'+ (Math.random()*1000|0) //用于示範
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //實際使用一般是規定好的id，這裡以時間戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab項
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切換到指定Tab項
                element.tabChange('demo', '22'); //切換到：使用者管理
            }
        };
    });
</script>
</body>
</html>           

打開頁面後可以看到背景管理的初步頁面：

左側三個菜單分别對應建立的ordermanage.html，addorder.html，addlogistics.html三個頁面。至此預備工作已經完成了，下面隻需要完成具體的操作。本課程會着重講解後端和MongoDB的部分，前端知識會簡單介紹，需要深入了解還要自己多多研究。

第二步 訂單添加

下單我想誰都會，每次等待物流資訊的時候是不是有一種滿滿的期待和喜悅感呢！

咱們今天帶你動手體驗這份小喜悅，完成案例後想下多少單下多少單。

2.1 後端部分

首先，在orderService編寫addorder函數，用來向MongoDB中添加訂單。具體代碼如下：

//建立訂單，傳來order對象
 public  void addorder(order order)
 {
     mongoTemplate.insert(order,"order");
 }           

上面的代碼中：

• 插入的語句為

  mongoTemplate.insert(order,"order")

  ，第一個參數為插入的文檔記錄，第二個參數

  "order"

  為連接配接的MongoDB對應資料庫下的集合(Collections)。

在orderController中編寫addorder()接口，用來處理前端的請求添加訂單。具體代碼為：

@Autowired
 orderService orderService;
 @PostMapping("addorder")
 public String addorder(order order)
 {
     order.setStatus("發貨中");
     order.setOrderTime(new Date());
     order.setShipTime(new Date());
     orderService.addorder(order);
     return "添加成功";
 }           

上面代碼中：

• @Autowired注解用來注入對象，下面的 orderService orderService就是被注入的對象，注入之後不需要手動建立對象可以直接使用(Spring幫你管理)
• @PostMapping("addorder") 意為聲明一個post請求方式的接口，接口位址為addorder。
• public String addorder(order order)函數名随意，函數的參數可以是對應成表單的各個字段然後建立一個order對象，但這裡直接建立一個order對象而前端表單傳遞對應名稱值将直接指派(省的再次指派)。
• 這裡為了簡單實作，下單日期和發貨日期都為系統目前時間，且訂單狀态初始預設為發貨中。

2.2 前端部分

有了後端部分的支援，前端我們在addorder.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="addorder" method="post">

            <div class="layui-form-item">
                <label class="layui-form-label">訂單id</label>
                <div class="layui-input-block">
                    <input type="text" name="id" 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="shipper"  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="shippingAdress"  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="shipperPhone"  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="recevier"  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="recevierAddress"  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="receviePhone"  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

點選訂單添加，然後在表單中填寫對應内容

當然為了測試你可以再寫一單，添加之後你會發現MongoDB中成功添加了訂單資料，這樣下單這一步就大功告成啦！

第三步 訂單更新(追加訂單)

建立完訂單之後，無數配送公司和人員便開始配送物流，而我們在查詢的時候，物流狀态資訊也能夠時不時的重新整理，具體物流資訊也能得到追加。

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']+'&nbsp;發件人手機：'+order['shipperPhone']+'&nbsp;發件人位址：'+order['shippingAdress']+'&nbsp;下單時間：'+order['shipTime']);
                $("#orderbody").append('<br>收件人：'+order['recevier']+'&nbsp;收獲人手機：'+order['receviePhone']+'&nbsp;收獲人位址：'+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+'&nbsp;'+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類型的資料格式，這是因為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

擷取超大G的pdf學習資源，共同進步！