内容简介:为了让用户体验更好,页面前端往往是通过ajax来进行数据处理;由于浏览器的设计原因每个域名下的连接有限,这样导致了同时进行ajax数据请求效率无法得到有效地提升,为了提高效率和传统HTTP协议上的限制,因此websocket的应运而生。由于websocket是后期提供的升级协议,所以现有很多WEB服务逻辑无法同时兼容两种协议处理;导致了页面前端就无法更有效地利用websocket优势,更多的是在这两者间做一种选择。为了更好地利用websocket的优势和传统性兼容,FastHttpApi实现无缝兼容Aja
为了让用户体验更好,页面前端往往是通过ajax来进行数据处理;由于浏览器的设计原因每个域名下的连接有限,这样导致了同时进行ajax数据请求效率无法得到有效地提升,为了提高效率和传统HTTP协议上的限制,因此websocket的应运而生。由于websocket是后期提供的升级协议,所以现有很多WEB服务逻辑无法同时兼容两种协议处理;导致了页面前端就无法更有效地利用websocket优势,更多的是在这两者间做一种选择。
FastHttpApi
为了更好地利用websocket的优势和传统性兼容,FastHttpApi实现无缝兼容Ajax和Websocket数据请求,开发者只需要写一分服务端代码!更重要的是FastHttpApi可以让开发者完全不用写Javascript调用的API脚本!在新版本的FastHttpApi中实现了一个自定义工具,只要设置好这个自定义 工具 开发者在VS编写逻辑控制器的情况下就自动生成对应调用的API脚本文件。 插件安装说明
脚本调用机制
当编写完成逻辑控制器后,就可以把对应的脚本引用到网页上(生成脚本还支持 await
调用),直接调用相关方法即可。
var result = await $ListEmployees(); var empsBlock = new Vue({ el: '#lstbody', data: result });
组件脚本默认是隐藏了调用方式,使用者并不用去关心其中细节(具本可以看FastHttpApi代码了解);当组件探测到有可用的websocket连接的时候就会自动使用websocket进行数据请求,这样对于有多个数据块同时加载的时候比传统的ajax有着更高效的通讯优势。如果websocket不可用或还没初始化完成时,那组件就会自动使用传统的ajax模式进行处理。
示例实现
为了更好地体现FastHttpApi在这方面的功能,以下针对Northwind的订单业务进行一个分页查询。
控制器代码
/// <summary> /// 订单查询 /// </summary> /// <param name="employeeid">雇员ID</param> /// <param name="customerid">客户ID</param> /// <param name="index">分页索引</param> /// <returns>{Index:0,Pages:0,Items:[order],Count:0}</returns> public object ListOrders(int employeeid, string customerid, int index, IHttpContext context) { Func<Order, bool> exp = o => (employeeid == 0 || o.EmployeeID == employeeid) && (string.IsNullOrEmpty(customerid) || o.CustomerID == customerid); int count = mOrders.Count(exp); int size = 20; int pages = count / size; if (count % size > 0) pages++; var items = mOrders.Where(exp).Skip(index * size).Take(size); return new { Index = index, Pages = pages, Items = items, Count = count }; }
以上是针对一个订单分析查询的逻辑方法,在编写完成逻辑控制器后在相应代码文件属性->自定义工具输入'JASPI'即可生成对应的javascript脚本:
var $ListOrders$url='/listorders'; ///<summary> /// 订单查询 /// </summary> /// <param name="employeeid">雇员ID</param> /// <param name="customerid">客户ID</param> /// <param name="index">分页索引</param> /// <returns>{Index:0,Pages:0,Items:[order],Count:0}</returns> function $ListOrders(employeeid,customerid,index,useHttp) { return api($ListOrders$url,{employeeid:employeeid,customerid:customerid,index:index},useHttp).sync(); } function $ListOrders$async(employeeid,customerid,index,useHttp) { return api($ListOrders$url,{employeeid:employeeid,customerid:customerid,index:index},useHttp); }
以上代码都是插件自动生成,如果控制器方法有注释同样也会生成到JS中,开发完全只需要把脚本文件引用到页面即可。插件针对控制生成了两个方法,一个同步一个异步;同步方法是支持await调用,异步方法则在调用过程中指定 Callback
函数;其中 useHttp
参数是强行指定使用ajax请求。
页面集成
FastHttpApi是不支持服务端视图引擎,所以只能使用前端框架来整合页面,在这里选择了VueJS(这个框架的确不错,功能丰富入门简单即看即用)。在VueJS的支撑下页面代码就变得比较简单
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Employee:</label> <select id="lstEmployees" style="margin:5px;"> <option value=""></option> <option v-for="item in Data" v-bind:value="item.ID">{{item.Name}}</option> </select> </div> <div class="form-group"> <label for="exampleInputEmail2">Customer:</label> <select id="lstCustomers" style="margin:5px;"> <option value=""></option> <option v-for="item in Data" v-bind:value="item.ID">{{item.Name}}</option> </select> </div> <br /> <button type="button" onclick="searchOrder(0)" class="btn btn-default">Search</button> </form> <table class="table"> <thead> <tr> <th>#</th> <th>OrderID</th> <th>ShipName</th> <th>ShipAddress</th> <th>City</th> <th>OrderDate</th> </tr> </thead> <tbody id="lstbody"> <tr v-for="item in Data.Items"> <td></td> <td>{{item.OrderID}}</td> <td>{{item.ShipName}}</td> <td>{{item.ShipAddress}}</td> <td>{{item.City}}</td> <td>{{item.OrderDate}}</td> </tr> </tbody> </table> <nav aria-label="Page navigation"> <ul id="pagination" class="pagination"> </ul> </nav>
页面功能整合了雇佣员、客户两个下选择条件,订单信息显示和分页。接下来整全的javascrip脚就更简单了:
var app6; $(document).ready(function () { app6 = new Vue({ el: '#lstbody', data: { Data: [] } }); init(); }); async function init() { var result = await $GetEmployeesName(); var app4 = new Vue({ el: '#lstEmployees', data: result }); result = await $GetCustomersName(); var app5 = new Vue({ el: '#lstCustomers', data: result }); searchOrder(0); } async function searchOrder(index) { var result = await $ListOrders($('#lstEmployees').val(), $('#lstCustomers').val(), index); app6.Data = result.Data; pagination(index, result.Data.Pages); }
实际处理效果
这个页面一开始就分别加载3项数据,如果按传统的ajax加载来看一般都串行加载,后前等前才完成后才能请求加载。当在FastHttpApi的支撑下结果又怎样呢,我们看一下整个页面的加载情况:
从图上我们可以看到,由于websocket没有初始化完成,所以获取雇员的数据是直接ajax了,后面的客户和默认订单查询走了websocket通讯。如果页面有大量数据块整合的情况,那使用FastHttpApi会有很大的加载效率优势。
了解更多FastHttpApi
项目地址: https://github.com/IKende/FastHttpApi
完全基于FastHttpApi实现的官方网站: http://www.ikende.com
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Android 视频无缝切换2.0
- 漂亮~pandas可以无缝衔接Bokeh
- H5移动端获奖无缝滚动动画实现
- 进阶运维:SSH无缝切换远程加密
- 支持企业无缝上云,CynosDB应“云”而生
- 基于Linux的LVM无缝磁盘水平扩容
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Software Design 中文版 01
[日] 技术评论社 / 人民邮电出版社 / 2014-3 / 39.00
《Software Design》是日本主流的计算机技术读物,旨在帮助程序员更实时、深入地了解前沿技术,扩大视野,提升技能。内容涵盖多平台软件开发技巧、云技术应用、大数据分析、网络通信技术、深度互联时代下的移动开发、虚拟化、人工智能等最前沿实践性讲解。以人脑思维模式,激发计算机操控的无限可能;以软件开发技巧,挖掘系统与硬件的最大价值。 《Software Design 中文版 01》的主题为......一起来看看 《Software Design 中文版 01》 这本书的介绍吧!