틈새 없 는 호 환 ajax / websocket 웹 페이지 응용 및 서비스 구현
FastHttpApi
웹 소켓 의 장점 과 전통 적 인 호환성 을 잘 이용 하기 위해 FastHttpApi 는 이음매 없 는 Ajax 와 Websocket 데이터 요청 을 실현 합 니 다. 개발 자 는 서버 코드 만 작성 해 야 합 니 다!더 중요 한 것 은 FastHttpApi 가 개발 자 들 이 자바 script 에서 호출 된 API 스 크 립 트 를 전혀 쓰 지 않 아 도 된다 는 것 입 니 다!새 버 전의 FastHttpApi 에서 사용자 정의 도구 가 구현 되 었 습 니 다. 이 사용자 정의 도구 개발 자가 VS 논리 컨트롤 러 를 작성 할 때 호출 된 API 스 크 립 트 파일 을 자동 으로 생 성 합 니 다.플러그 인 설치 설명
스 크 립 트 호출 메커니즘
논리 컨트롤 러 를 작성 하면 해당 스 크 립 트 를 웹 페이지 에 참조 할 수 있 습 니 다 (스 크 립 트 생 성 지원
await. 관련 방법 을 직접 호출 하면 됩 니 다. var result = await $ListEmployees();
var empsBlock = new Vue({
el: '#lstbody',
data: result
});구성 요소 스 크 립 트 는 기본적으로 호출 방식 을 숨 겼 습 니 다. 사용 자 는 세부 사항 에 관심 을 가지 지 않 아 도 됩 니 다. (구 본 은 FastHttpApi 코드 를 볼 수 있 습 니 다)구성 요소 가 사용 가능 한 웹 소켓 연결 을 감지 할 때 자동 으로 웹 소켓 을 사용 하여 데이터 요청 을 합 니 다. 이렇게 하면 여러 개의 데이터 블록 을 동시에 불 러 올 때 전통 적 인 ajax 보다 더욱 효율 적 인 통신 장점 을 가지 고 있 습 니 다.웹 소켓 이 사용 되 지 않 거나 초기 화 되 지 않 았 을 때 구성 요 소 는 자동 으로 전통 적 인 ajax 모드 로 처 리 됩 니 다.
예 를 들 어 실현 하 다.
FastHttpApi 의 이러한 기능 을 잘 나타 내기 위해 다음은 Northwind 의 주문 업무 에 대해 페이지 별로 조회 합 니 다.
컨트롤 러 코드
////// /// /// ID /// ID /// ///{Index:0,Pages:0,Items:[order],Count:0} public object ListOrders(int employeeid, string customerid, int index, IHttpContext context) { Func 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'; ////// /// /// ID /// ID /// ///{Index:0,Pages:0,Items:[order],Count:0} 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">Searchbutton>
form>
<table class="table">
<thead>
<tr>
<th>#th>
<th>OrderIDth>
<th>ShipNameth>
<th>ShipAddressth>
<th>Cityth>
<th>OrderDateth>
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>페이지 기능 은 고용 원, 고객 두 가지 선택 조건, 주문 정보 표시 와 페이지 를 통합 시 켰 다.다음은 자바 scrip 발 을 다 듬 는 것 이 더 간단 합 니 다.
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 의 지지 아래 결 과 는 어 떻 습 니까? 전체 페이지 의 로드 상황 을 살 펴 보 겠 습 니 다.
그림 에서 볼 수 있 듯 이 웹 소켓 이 초기 화 되 지 않 았 기 때문에 직원 의 데 이 터 를 얻 는 것 은 직접 ajax 입 니 다. 뒤의 고객 과 기본 주문 조회 가 웹 소켓 통신 을 떠 났 습 니 다.페이지 에 대량의 데이터 블록 이 통합 되 어 있 으 면 FastHttpApi 를 사용 하면 로 딩 효율 이 매우 높 습 니 다.
FastHttpApi 에 대해 더 알 아 보기
항목 주소:https://github.com/IKende/FastHttpApi
FastHttpApi 를 기반 으로 한 공식 사이트:http://www.ikende.com
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
