• htm5websocket实现数据查询应用


    在之前的文章讲述了使用Websocket调用远程方式的功能,在这基础我们可以简单地使用WebSocket进行数据处理方面的应用;只需要在方法执行相关的数据库操作返回即可,结合jeasyui库所提供丰富的控件进行数据应用处理变得非常简单的事情.下面使用jeasyui和WebSocket实现一个查询Northwind数据订单的应用案例.

    首先分析一下以下一个订单查询案例所需要的逻辑功能.

    从以上的案例图中可以得到包括的功能如下:

    1)雇员查询
    2)客户查询
    3)订单分页查询
    4)订单明细查询

    C#代码

    针对以上功能可以实现简单的逻辑查询,代码如下:

    public class Handler
        {
            public IList<BLEmployee> ListEmployees()
            {
                Console.WriteLine("List Employees");
                IList<BLEmployee> items = new Expression().List<Employee, BLEmployee>();
                return items;
            }
    
            public IList<BLCustomer> ListCustomers()
            {
                Console.WriteLine("List Customers");
                IList<BLCustomer> items = new Expression().List<Customer, BLCustomer>();
                return items;
            }
    
    
            public IList<BLOrderDetail> GetOrderDetail(int orderid)
            {
                Console.WriteLine("GetOrderDetail   OrderID:{0}", orderid);
                return (Order.orderID == orderid).List<OrderDetail, BLOrderDetail>();
            }
    
            public OrderSearchResult ListOrder(OrdersSearch search)
            {
                Console.WriteLine("ListOrder Employee:{0}\t Customer:{1}", search.EmployeeID, search.CustomerID);
                OrderSearchResult result = new OrderSearchResult();
                Expression exp = new Expression();
                if (!string.IsNullOrEmpty(search.CustomerID))
                    exp &= Customer.customerID.At() == search.CustomerID;
                if (search.EmployeeID > 0)
                    exp &= Employee.employeeID.At() == search.EmployeeID;
                int count = exp.Count<Order>();
                result.Orders = exp.List<Order, BLOrder>(new Region(search.Page, search.PageSize));
                result.Count = count;
                return result;
            }
        }

    借助于开源组件Smark.Data的功能,只需要编写简单的代码就能实现相应的数据查询逻辑处理.

    JavaScript

    定义websocket连接:

    //创建连接
            function connect() {
                channel = new TcpChannel();
                channel.Connected = function (evt) {
                    $('#dlgConnect').dialog('close');
                   
                    setTimeout(listEmployee, 50);
                    setTimeout(listCustomer, 50);
                    listOrder();
                };
                channel.Disposed = function (evt) {
                    $('#dlgConnect').dialog('open');
                };
                channel.Error = function (evt) {
                    alert(evt);
                };
                channel.Connect($('#txtHost').val());
            }

    在连接创建完成事件中进行数据查询操作,由于连续进行3以上的websocket的发送操作会导致发送不成功,之于具体原因暂不清楚.所以只能通过setTimeout来控制初始化的数据查询.连接创建后就可以进行远程方法调用,进行数据查询操作具体相关代码如下:

    雇员查询远程调用方法:

    //雇员查询
            var callListEmployees = { url: 'Handler.ListEmployees', parameters: {} };
            function listEmployee() {
                channel.Send(callListEmployees, function (result) {
                    result.data.unshift({ EmployeeID: 0, FullName: 'null' });
                    $('#employees').combobox({
                        data: result.data,
                        valueField: 'EmployeeID',
                        textField: 'FullName'
                    });
                });
            }

    客户查询远程调用方法:

    //客户查询
            var callListCustomers = { url: 'Handler.ListCustomers', parameters: {} };
            function listCustomer() {
                channel.Send(callListCustomers, function (result) {
                    result.data.unshift({ CustomerID: '', CompanyName: 'null' });
                    $('#customers').combobox({
                        data: result.data,
                        valueField: 'CustomerID',
                        textField: 'CompanyName'
                    });
                });
            }

    订单查询远程调用方法:

    //订单查询
            var callListOrder = {
                url: 'Handler.ListOrder',
                parameters: { search: { EmployeeID: 0, CustomerID: null, Page: 0, PageSize: 10} }
            };
            function listOrder() {
                channel.Send(callListOrder, function (result) {
                    $('#orders').datagrid('loadData', result.data.Orders);
    
                    $('#pp').pagination('refresh', { total: result.data.Count });
                });
            }

    订单明细远程调用方法:

    //订单明细
            var callGetOrderDetail = { url: 'Handler.GetOrderDetail', parameters: {orderid:0} };
            function getOrderDetail() {
                channel.Send(callGetOrderDetail, function (result) {
                
                    $('#gdOrderDetail').datagrid('loadData', result.data);
    
                    
                });
            }

    总结

    只需要以上简单的代码就可以实现一个订单查询功能,看上去和传统的ajax应用差不多,而这里使用的服务是基于websocket而不是webserver.

    下载代码:WebSocket.Northwind.rar (1.03 mb) 

    演示地址:http://html5.ikende.com/northwind.htm

    访问Beetlex的Github
  • 相关阅读:
    项目范围管理定义范围
    项目时间管理估算活动资源
    项目时间管理排列活动顺序
    强悍!ultraEdit的文本比较
    网页刷流量软件开发中的困惑
    关于淘宝CSV格式的研究
    HTTP session登陆处理与登陆保持
    用ps将自己的图片字节数变最小
    通过TApplicationEvents响应消息
    有的女人就像易语言
  • 原文地址:https://www.cnblogs.com/smark/p/2804176.html
Copyright © 2020-2023  润新知