Ionic與.NET WebApi實現(xiàn)簡單數(shù)據(jù)交互

強 琳 林世平

（1.福建工程學院軟件學院，福建福州，350003; 2.福州大學，福建福州，350108））

一、引言

（一）接口框架.NET WebApi

ASP.NET WebApi是一個基于.net編程的接口，用來操作可通過標準HTTP方法和標頭訪問的系統(tǒng)。 ASP.NET WebApi可提供各種接口供使用 HTTP協(xié)議的客戶端應用，例如瀏覽器、移動設備等，為它們提供 HTTP服務，并可以使用各種Web設施提供的基礎服務，例如緩存和并發(fā)。 ASP.NET WebApi 是一種用于在 . NET Framework 上構建的應用程序服務接口。 這里ASP.NET WebApi 連接數(shù)據(jù)庫獲取數(shù)據(jù)，并以Json字符串格式返回，方便Ionic與其進行數(shù)據(jù)交互。

（二）輕量級框架Ionic

混合模式（Hybrid）移動應用，兼具原生的移動應用（native-app）的良好用戶交互體驗的優(yōu)勢和Web的移動應用（web-app）的便于開發(fā)和跨平臺開發(fā)的優(yōu)勢，開發(fā)和使用都介于基于Web的移動應用（web-app）和原生的移動應用（native-app）這兩者之間。Ionic是一種輕量級框架，開發(fā)者可以使用已經(jīng)掌握的Web技術輔助Ionic框架輕松地開發(fā)構建混合的模式移動應用。

Ionic的采用的是MVC的開發(fā)模式，它的View視圖使用HTML5語言來表現(xiàn)，輔助框架已經(jīng)封裝好的視圖樣式，控制器C使用了AngularJS來處理數(shù)據(jù)，AngularJS和Sass一起創(chuàng)建了表現(xiàn)形式類似于手機平臺原生應用開發(fā)框架。Ionic框架是基于編譯平臺PhoneGap所編譯的，一次開發(fā)可以將已經(jīng)開發(fā)的應用編譯成多個平臺可以使用的應用程序。使用Ionic框架所開發(fā)的應用，代碼也相對于原生平臺來得容易維護，同時兼具了web跨平臺的優(yōu)點，同樣的內容就開發(fā)時間而言也會比原生系統(tǒng)大大縮短。同時框架提供了已經(jīng)設計好的可以供調用的CSS樣式，頁面開發(fā)時，可以使用許多Ionic庫提供的UI組件，使得用戶有良好的使用體驗，有需要更加接近于原生app的頁面觀感和功能，用戶使用時基本察覺不出Ionic開發(fā)的混合應用和原生應用的使用區(qū)別。Ionic用于開發(fā)客戶端可以搭配多種其他語言開發(fā)服務端，例如：C#、Java等，不會有所局限。

（三） 往返數(shù)據(jù)類型J S ON

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式,是ECMAScript的一個子集。JSon的使用習慣類似于C語言家族的習慣，例如 ,C、C++、C#、Java、JavaScript、Perl、Python等，它采用文本格式，是一種完全獨立于語言的文本格式。以上特性使JSON成為和xml一樣的理想的數(shù)據(jù)交換語言。容易且方便人閱讀和編寫，同時也易于機器解析和生成可以用于提升網(wǎng)絡傳輸速率。JSON 是純文本,具有“自我描述性”（人類可讀）,具有層級結構（值中存在值）,可通過 JavaScript 進行解析，可以很好地被ionic框架所解析。JSON 值可以是：整數(shù)、浮點數(shù)、字符串、邏輯值、數(shù)組、對象也可以為null。

二、I o n i c調用We b A p i實現(xiàn)簡單數(shù)據(jù)交互

數(shù)據(jù)的交互設計有以下幾個部分：基于Ionic框架開發(fā)的移動客戶端、基于.net技術開發(fā)的web客戶端，提供數(shù)據(jù)交互服務的asp.net WebApi和提供數(shù)據(jù)存儲服務的數(shù)據(jù)庫（例如：SQL server、MySql）。Ionic 通 過 AngularJS 提 供的一個核心服務$http，讓用戶可以通過WebApi提交和獲取數(shù)據(jù)。客戶端先調用AngularJS的可選模塊ngResource，訪問RESTFULAPI。Ionic 可以訪問提供標準的API接口的WebApi，API提供數(shù)據(jù)的交互服務，供客戶端獲取get()和提交post()數(shù)據(jù)。如圖所示：

圖1 結構示意圖

（一）構建簡單的WebApi接口和Ioinc客戶端

首先，需要編寫供Ionic客戶端調用的ASP.NET WebApi接口。1.在Visual Studio 2013中新建項目——ASP.NET MVC 4 Web 應用程序，選擇WEB API，生成MvcApplication項目文件。2.在項目中添加實體數(shù)據(jù)模型DataStuModel。3.添加一個需要的新的控制器，以一個只讀服務為例子，添加GetController繼承ApiController。4.修改WebApiConfig.cs中routeTemplate為"api/{controller}/{action}/{id}"。5.添加需要的數(shù)據(jù)處理和讀寫代碼，并且部署Api。下為部分試驗用Api代碼：

public class TestController : ApiController

{

TestEntities te = new TestEntities();

#region 獲取學生

public List getStu()

{

return te.T_Student.ToList();

}

#endregion

#region 獲取某個學生的學生信息

public T_Student getStu(int id)

{

return te.T_Student.FirstOrDefault(p =>p.S_ID == id);

}

#endregion

public T_Student getStu(int s1, string s2,string s3)

{

T_Student TS = new T_Student();

TS.S_ID = s1;

TS.S_Name = s2;

TS.S_Specialty = s3;

te.T_Student.Add(TS);

te.SaveChanges();

return te.T_Student.FirstOrDefault(p =>p.S_ID == s1);

}

}

其次，搭建Ionic開發(fā)環(huán)境。1.安裝Android的開發(fā)環(huán)境；2.接著安裝ionic開發(fā)的環(huán)境；Ionic框架的安裝命令為：npm install -g ionic；3.接著安裝Node.JS；4.創(chuàng)建項目，在項目文件目錄下運行命令ionic start TestExperiment tabs；5.進入項目文件夾運行ionic serve在一件安裝的谷歌瀏覽器中按F12進行調試；6.需要真機調試,需要連接安卓手機或者安裝安卓模擬器，安裝生成后的安裝包apk，要生成apk需要添加android平臺。添加android平臺的命令是ionic platform add android；生成androidAPK的命令是ionic build android；生成APK即可安裝到真機或者模擬器中運行，查看結果。

（二）獲取接口提供的數(shù)據(jù)，綁定到I o n i c頁面

1.接口api/Test/getStu的數(shù)據(jù)結果:

4.最后運行結果圖：

圖2 接口數(shù)據(jù)結果

圖3 Ionic頁面讀取數(shù)據(jù)

2.Ionic 控制器StudentShowInfoCtrl.js利用$http.get( )方法讀取數(shù)據(jù)：

angular.module('starter.controllers')

.controller('StudentShowInfoCtrl',function($scope,$http) {

$http.get("http://localhost:8080/api/Test/getStu")

.success(function (studata) {

對第一組、第二組患者IMT、Ds、Vs、Vd、PI以及RI,了解彩超、頸動脈血管超聲的準確度和敏感度。

$scope.items=studata;

});

})

3.Ionic頁面StudentShow.html的頁面綁定代碼：

（三）從頁面提交單個數(shù)值到接口

從頁面提交單個數(shù)值到接口，也可以使用$http.get()方法。例如,需要查詢特定的某個人，同樣調用api/Test/getStu/{id}，提交ID的值，就可以查詢綁定某條記錄。舉例：查詢id=101的學生，控制器獲取記錄代碼：

$http.get("http://localhost:8080/api/Test/getStu/101")

就可以獲取101學生的那條記錄了。

（四）從頁面提交多個數(shù)值到接口

1.向接口api/Test/insertStu提交多個數(shù)值。

2. Ionic 控制器利用$http.get()向數(shù)據(jù)庫提交多個值，也可以利用$http.post( )方法提交加密數(shù)據(jù)數(shù)據(jù)：

angular.module('starter.controllers')

.controller('StudentInsertInforCtrl',function($scope,$http,$state) {

$scope.add=function () {

$http.get("http://localhost:8080/api/Test/getStu?s1=202&s2=王五&s3=軟件工程");

$state.go("StudentShow",{})

};

})

3. 最后運行結果圖：

圖4 Ionic頁面讀取更新后的數(shù)據(jù)

四、結束語

Ionic有良好的用戶體驗，用戶在使用app的時候感受不出和原生應用的區(qū)別，而且開發(fā)相較于原生的系統(tǒng)更加的簡單，學習方便。同時用于開發(fā)客戶端可以搭配多種其他語言開發(fā)服務端，選擇較多，多數(shù)人選取的都是和Java配合，較少配合.NET WebApi開發(fā)。

在實際的使用中，以學生信息系統(tǒng)為例，學生可以在任意的地方使用手機端查看自己想要的信息，或者提交信息量較少的信息，例如：查看個人信息、修改個人資料、查看成績、查看課表等等；使用起來更靈活，查看信息的時候不用特意去電腦前面，在任何時間任何地點都可以查看到自己所要的信息。教師在信息輸入和管理學生信息時，例如，使用以下功能：導入學生信息，學生教師審核等，當手機等智能設備不方便輸入大量的數(shù)據(jù)或者執(zhí)行復雜的管理操作時，使用電腦操作更加的方便，這個時候就可以使用系統(tǒng)的后臺服務界面使用電腦進行復雜的管理操作。限于篇幅，本文只簡單介紹了如何使用.NET 實現(xiàn)基于.NET Framework 4 的 .NET WebApi與 Ionic利用$http進行簡單的數(shù)據(jù)交互，一些技術細節(jié)和功能運用仍然需要進一步完善和研究。

參考文獻：

[1] （美）Jeremy Wilken. Ionic實戰(zhàn)：基于AngularJS的移動混合應用開發(fā)[M]. 奇舞團, 譯.北京：電子工業(yè)出版社,2016.

[2] 陶國榮.AngularJS 實戰(zhàn)[M].北京：機械工業(yè)出版社, 2015.

[3] 朱凱南,李艷平,申閆春，等. 基于Ionic和Cordova的跨平臺移動APP的研究與應用[J]. 電腦知識與技術, 2016, (1):119-121

[4]（美）布洛克.ASP.NET Web API設計[M].北京：人民郵電出版社, 2015：22.