0
点赞
收藏
分享

微信扫一扫

基于MongoDB开发的物流系统（简易版）

RJ_Hwang 2022-01-30 阅读 18
mongodb数据库database

 

 

 

 

 

application.yml

spring:
  data:
    mongodb:
      uri: mongodb://localhost/project1

 Order

@Data
@AllArgsConstructor
@NoArgsConstructor
/**
 * 订单
 */
public class Order implements Serializable {

    private String id;  //订单编号
    private String status;  //订单状态
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date orderTime; //下单时间

    private String shipper; //发货人
    private String shipperAddress;  //发货人地址
    private String shipperPhone;    //发货人电话
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date shipperTime;     //发货时间

    private String receiver;    //收货人
    private String receiverAddress;  //收货人地址
    private String receiverPhone;   //收货人电话
    private List<Logistics> logistics;  //物流信息的集合


}

Logistics

@Data
@AllArgsConstructor
@NoArgsConstructor
/**
 * 物流
 */
public class Logistics implements Serializable {
    private String orderId; //订单编号
    private String operation;   //操作名称
    private String operator;    //操作员
    private String phone;   //操作员电话
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date operationTime; //操作时间
    private String address; //操作地址
    private String details; //详细信息
}

OrderService

@Service
public class OrderService {
    @Resource
    private MongoTemplate mongoTemplate;

    /**
     * 添加订单至MongoDB
     * @param order
     */
    public void addOrder(Order order) {
        //订单编号根据雪花算法生成
        order.setId(IdUtil.getSnowflake(1, 1).nextIdStr());
        //设置订单状态
        order.setStatus("已下单");
        //设置下单时间
        order.setOrderTime(new Date());
        //设置发货时间
        order.setShipperTime(new Date());
        //添加订单至MongoDB
        mongoTemplate.insert(order, "order");
    }

    /**
     * 更新订单信息
     * 追加物流信息
     * @param logistics
     */
    public void updateOrderAndLogistics(Logistics logistics) {
        //获取操作名称
        String status = logistics.getOperation();
        //设置操作时间
        logistics.setOperationTime(new Date());
        //初始化Query对象,根据订单编号查询
        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,"order");
    }

    /**
     * 根据订单编号来查询
     * @param id
     * @return
     */
    public Order selectOrderById(String id) {
        //初始化Query对象,根据订单编号来查询
        Query query = new Query(Criteria.where("_id").is(id));
        return mongoTemplate.findOne(query,Order.class,"order");
    }

    /**
     * 查询所有订单
     * @return
     */
    public Map<String, Object> selectOrderList() {
        List<Order> list = mongoTemplate.findAll(Order.class,"order");
        Map<String, Object> result = new HashMap<>();
        if (list == null || list.isEmpty()) {
            result.put("code", "400");
            result.put("message","没有相关订单");
        } else{
            result.put("code", "0");
            result.put("count",list.size());
            result.put("data",list);
        }
        return result;
    }

    /**
     * 删除
     * @param id
     * @return
     */
    public boolean deleteOrderById(String id) {
        Query query = new Query(Criteria.where("_id").is(id));
        DeleteResult result = mongoTemplate.remove(query,Order.class,"order");
        return result.getDeletedCount() >0 ? true : false;
    }


}

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/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="https://lib.baomitu.com/layui/2.6.8/css/layui.min.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">物流订单系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </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="order-manage.html" target="container">订单管理</a></dd>
                        <dd><a href="add-order.html" target="container">订单添加</a></dd>
                        <dd><a href="add-logistics.html" target="container">物流添加</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe src="add-order.html" name="container" width="100%" height="100%"></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>
<script src="https://lib.baomitu.com/layui/2.6.8/layui.min.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
</script>
</body>
</html>

add-order.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/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="https://lib.baomitu.com/layui/2.6.8/css/layui.min.css">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>订单添加</legend>
</fieldset>
<!--面板-->
<div class="layui-card">
    <div class="layui-card-header"></div>
    <div class="layui-card-body">
            <!--    表单-->
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">发货人</label>
                    <div class="layui-input-block">
                        <input type="text" name="shipper" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发货人电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="shipperPhone" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发货人地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="shipperAddress" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收货人</label>
                    <div class="layui-input-block">
                        <input type="text" name="receiver" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收货人电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="receiverPhone" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收货人地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="receiverAddress" class="layui-input">
                    </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>
</div>

<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
<script src="https://lib.baomitu.com/layui/2.6.8/layui.min.js"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url:"/order/add",
                type:"POST",
                data:data.field,
                dataType:"JSON",
                success:function (result) {
                    layer.msg(result);
                }

            })
            return false;
        });
    });
</script>
</body>
</html>

add-logistics.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/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="https://lib.baomitu.com/layui/2.6.8/css/layui.min.css">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>物流添加</legend>
</fieldset>
<!--面板-->
<div class="layui-card">
    <div class="layui-card-header"></div>
    <div class="layui-card-body">
        <!--    表单-->
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="orderId" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">操作名称</label>
                <div class="layui-input-block">
                    <select name="operation">
                        <option value="">请选择</option>
                        <option value="已取件">已取件</option>
                        <option value="正在揽收">正在揽收</option>
                        <option value="运送中">运送中</option>
                        <option value="派送中">派送中</option>
                        <option value="已签收">已签收</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">操作员</label>
                <div class="layui-input-block">
                    <input type="text" name="operator" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">操作员电话</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">操作地址</label>
                <div class="layui-input-block">
                    <input type="text" name="address" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细信息</label>
                <div class="layui-input-block">
                    <input type="text" name="details" class="layui-input">
                </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>
</div>

<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
<script src="https://lib.baomitu.com/layui/2.6.8/layui.min.js"></script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url:"/order/update",
                type:"POST",
                data:data.field,
                dataType:"JSON",
                success:function (result) {
                    layer.msg(result);
                }

            })
            return false;
        });
    });
</script>
</body>
</html>

order-manager.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/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="https://lib.baomitu.com/layui/2.6.8/css/layui.min.css">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>订单管理</legend>
</fieldset>
<!--面板-->
<div class="layui-card">
    <div class="layui-card-header"></div>
    <div class="layui-card-body">
        <label class="layui-form-label">订单编号</label>
        <div class="layui-input-inline">
            <input type="text" id="orderId" class="layui-input">
        </div>
        <button onclick="search();" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe615;</i></button>
    </div>
</div>

<div style="padding: 20px;margin-bottom: 100px;">
<!--    面板-->
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">订单信息</div>
            <div class="layui-card-body" id="order"></div>
        </div>
    </div>
<!-- 面板-->
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">物流信息</div>
            <div class="layui-card-body">
<!--                时间线-->
                <ul class="layui-timeline" id="logistics">

                    <!--        <li class="layui-timeline-item">-->
                    <!--            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
                    <!--            <div class="layui-timeline-content layui-text">-->
                    <!--                <div class="layui-timeline-title">过去</div>-->
                    <!--            </div>-->
                    <!--        </li>-->
                </ul>
            </div>
        </div>
    </div>

    <div class="layui0col-md12">
        <!--面板-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">订单列表</div>
                <div class="layui-card-body">
                    <!--            数据表格-->
                    <table id="orderList" lay-filter="orderTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<!--头工具栏事件-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    </div>
</script>

<!--行工具事件-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
<script src="https://lib.baomitu.com/layui/2.6.4/layui.min.js"></script>
<script>
    //搜索
    function search() {
        //订单编号
        var orderId = $("#orderId").val();
        $.ajax({
            url:"/order/" + orderId,
            type:"GET",
            dataType:"JSON",
            //拼接处理返回结果
            success:function (order) {
                console.log(order);
                if (order == null || order == undefined || order == "") {
                    layer.msg("订单不存在");
                    return;
                }
                //处理订单信息
                $("#order").append("订单编号:" + orderId + "(" + order["status"] + ") <hr/>")
                    .append("发货人:" + order["shipper"] + "<br/>")
                    .append("发货人地址:" + order["shipperAddress"] + "<br/>")
                    .append("发货人电话:" + order["shipperPhone"] + "<br/>")
                    .append("下单时间:" + order["orderTime"] + "<br/>")
                    .append("发货时间:" + order["shipper"] + "<br/>")
                    .append("发货人:" + order["shipperTime"] + "<hr/>")
                    .append("收货人:" + order["receiver"] + "<br/>")
                    .append("发货时间:" + order["receiverAddress"] + "<br/>")
                    .append("发货时间:" + order["receiverPhone"] + "<br/>");
                //获取物流信息
                let logistics = order['logistics'];
                //倒序循环
                for (var i = logistics.length - 1; i >= 0; i--) {
                    //处理物流信息
                    $("#logistics").append('<li class="layui-timeline-item">' +
                    '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>' +
                    '<div class="layui-timeline-content layui-text">' +
                    '<h3 class="layui-timeline-title">' +
                    '（' + logistics[i].operation + '）' +
                    logistics[i].operationTime + '</h3>' +
                    '<p>' + logistics[i].details + '</p>' +
                    '<p>操作员:'+ logistics[i].operator + '&nbsp;' +
                    '操作员电话:' + logistics[i].phone + '&nbsp;' +
                    '操作地址:' + logistics[i].address + '</p></div></li>');

                }
            }
        });
    }

    //数据表格
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#orderList',
            url: '/order/list', //数据接口
            page: true, //开启分页
            toolbar: '#toolbarDemo',
            cols: [[ //表头
                {field: 'id', title: '订单编号', sort: true, fixed: 'left'},
                {field: 'status', title: '订单状态'},
                {field: 'orderTime', title: '下单时间', sort: true},
                {field: 'shipper', title: '发货人'},
                {field: 'shipperAddress', title: '发货地址'},
                {field: 'shipperPhone', title: '发货人电话'},
                {field: 'receiver', title: '收货人', edit:'text'},
                {field: 'receiverAddress', title: '收货地址'},
                {field: 'receiverPhone', title: '收货人电话'},
                {fixed:'right',title: '操作',toolbar:'#barDemo'}  //编辑/删除
            ]]
        });

        //工具条事件
        table.on('tool(orderTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令

                    $.ajax({
                        url:"/order/delete",
                        type:"POST",
                        data:{"id":data.id},
                        dataType:"JSON",
                        success:function (result) {
                            layer.msg(result);
                        }

                    })
                    return false;
                });

            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

    });

</script>
</body>
</html>
举报

相关推荐

简易版ATM系统--java

javaintellij-idea

基于SSM框架的简易版营业厅宽带系统

数据功能模块简易版营业厅宽带系统计算机毕业设计计算机毕设Java后端开发

学生管理系统【Java简易版】

javaintellij-idea后端windows数据虚拟化云计算

学生管理系统（ArrayList简易版）

java开发语言后端arraylist

简易版扫雷

c语言算法c++

简易版ToDoList

vue.jsjavascript前端

图书管理系统(简易版）

intellij ideajava动态规划排序算法

学生管理系统python简易版

python开发语言

基于SpringBoot实现简易版登录功能

环境搭建开发技巧大后端

01迷宫简易版

c++
0 条评论