【Side Project】 (老板)订单清单-与资料库交换资料

上一篇中，我们已经处理完前端每份餐点、每张订单的状态都处理完了。
顺带一提，如果要在使用返回按键时保留原本餐点的状态时，
我们可以在undo_order()中增加以下两行程序码:

cb_id = `cb_${head.uid}_${item.uid}`
$(`#${cb_id}`).prop('checked', item.itemDone)

这篇开始我们会将前端的清单资料，
与後台资料库中的资料做交换。
这边会分成几个部份去处理:

将资料传到後台
取得後台新的资料
更新渲染画面
交换资料的时机

资料交换

打开 Proprietor.cshtml
ajax建立与後台的连线

function Exchange(is_init) {
        //第一次进网页则删除原本的localStorage
        if (is_init) {
            localStorage.removeItem('done_data')
            localStorage.removeItem('undo_data')
            
        }

        var done_data = localStorage.getItem('done_data') === null ? [] : JSON.parse(localStorage.getItem("done_data"))
        var undo_data = localStorage.getItem("undo_data") === null ? [] : JSON.parse(localStorage.getItem("undo_data"))
        var data = undo_data
        done_data.forEach((item) => {
            data[data.length] = item
        })
        var data_string = JSON.stringify(data)
        
        $.ajax({
        url: "@Url.Action("ExchangeData")",
            type: "post",
            data: {
                "data": data_string
            },
            dataType: "json",
            success: function (new_data) {
                var done_data = localStorage.getItem('done_data') === null ? [] : JSON.parse(localStorage.getItem("done_data"))
                var undo_data = localStorage.getItem("undo_data") === null ? [] : JSON.parse(localStorage.getItem("undo_data"))
                
                new_data.forEach((item) => {
                    
                    if (item.head.orderDone) {
                        done_order(item.head, item.bodys)
                        done_data[done_data.length] = item
                    }
                    else {
                        undo_order(item.head, item.bodys)
                        undo_data[undo_data.length] = item
                    }
                })
                localStorage.setItem("undo_data", JSON.stringify(undo_data))
                localStorage.setItem("done_data", JSON.stringify(done_data))

        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("status: " + xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {}

        })
    }

设定触发时机

<script>
    //初始化
    Exchange(true)
    // 固定时间交换资料
    setInterval(Exchange, 10000,false);
</script>

打开HomeController.cs 新增 ExchangeData()

[HttpPost]
        public IActionResult ExchangeData(string data)
        {
            Console.WriteLine("data:" + data);
            
            var proprietor = ProprietorModel.proprietor;
            //更新资料
            bool successful = proprietor.UpdateOrder(_config, data);
            //取得今天的订单清单
            var orders = proprietor.SelectOrder(_config);
            //比对出新的资料
            var new_orders = proprietor.DataCompare(orders, data);
            //自动转成json格式
            return Json(new_orders);
        }

打开 ProprietorModel.cs
新增 UpdateOrder()

public bool UpdateOrder(IConfiguration config,string orders_string)
        {
            var successful = false;
            var orders = JsonConvert.DeserializeObject<List<Order>>(orders_string);
            //连线设定
            SqlSugarClient db = new SqlSugarClient(new ConnectionConfig()
            {
                //连线字串
                ConnectionString = config.GetValue<string>("WebmenuConnectionString"),
                DbType = DbType.SqlServer,//连线类型
                IsAutoCloseConnection = true //自动关闭连线
            });


            try
            {

                //当执行时，触发事件
                db.Aop.OnLogExecuting = (sql, pars) =>
                {
                    Console.WriteLine(sql);//查看SQL语法
                };
                //begin tran
                db.BeginTran();
                //取得菜单表头，并排序(正序)
                foreach(var order in orders)
                {
                    //更新表头中的订单状态
                    var result_h = db.Updateable(order.head).UpdateColumns(head => new { head.OrderDone }).ExecuteCommand();
                    //更新表身中的餐点状态
                    var result_b = db.Updateable(order.bodys).UpdateColumns(body => new { body.ItemDone }).ExecuteCommand();
                }
                db.CommitTran();
                successful = true;
            }
            catch
            {
                successful = false;
                db.RollbackTran();//rollback
                throw;
            }
            return successful;
        }

新增SelectOrder()

public List<Order> SelectOrder(IConfiguration config)
        {
            var order_list = new List<Order>();
            //连线设定
            SqlSugarClient db = new SqlSugarClient(new ConnectionConfig()
            {
                //连线字串
                ConnectionString = config.GetValue<string>("WebmenuConnectionString"),
                DbType = DbType.SqlServer,//连线类型
                IsAutoCloseConnection = true //自动关闭连线
            });


            try
            {

                //当执行时，触发事件
                db.Aop.OnLogExecuting = (sql, pars) =>
                {
                    Console.WriteLine(sql);//查看SQL语法
                };
                //begin tran
                db.BeginTran();
                //取得菜单表头，并排序(正序)
                var list_h = db.Queryable<Menulisth>().Where(head => head.Createtime >= DateTime.Today).OrderBy(head => head.Createtime, OrderByType.Asc).ToList();
                var list_b = db.Queryable<Menulistb, Menulisth>((body, head) => new JoinQueryInfos(JoinType.Left, head.Uid == body.H_uid))
                    .Where((body, head) => head.Createtime >= DateTime.Today)
                    .OrderBy((body, head) => head.Createtime, OrderByType.Asc)
                    .Select<Menulistb>().ToList();
                //将表头加入到表身资料写入
                foreach (var head in list_h)
                {
                    head.Formnum = head.Formnum.Replace(" ", "").Trim();
                    var order = new Order();
                    //加入表头
                    order.head = head;
                    //加入表身
                    foreach (var body in list_b)
                    {
                        if (body.H_uid == head.Uid)
                        {
                            body.Item = body.Item.Replace(" ", "").Trim();
                            order.bodys.Add(body);
                        }
                    }
                    order_list.Add(order);

                }

                db.CommitTran();
            }
            catch
            {
                db.RollbackTran();//rollback
                throw;
            }
            return order_list;
        }

新增 DataCompare()

public List<Order> DataCompare(List<Order> db_orders, string data)
        {
            var client_orders = JsonConvert.DeserializeObject<List<Order>>(data);
            var order_Enumable = from db in db_orders
                        where !(from client in client_orders
                                select client.head.Uid)
                                .Contains(db.head.Uid)
                        select db;
            var orders = order_Enumable.ToList();
            return orders;
        }

这样就完成了。来看一下完整的Proprietor.cshtml 中script语法

9. 成果