強(qiáng) 琳 林世平

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

一、引言

（一）接口框架.NET WebApi

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

（二）輕量級框架Ionic

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

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

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

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

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

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

圖1 結(jié)構(gòu)示意圖

（一）構(gòu)建簡單的WebApi接口和Ioinc客戶端

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

public class TestController : ApiController

{

TestEntities te = new TestEntities();

#region 獲取學(xué)生

public List getStu()

{

return te.T_Student.ToList();

}

#endregion

#region 獲取某個(gè)學(xué)生的學(xué)生信息

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)建項(xiàng)目，在項(xiàng)目文件目錄下運(yùn)行命令ionic start TestExperiment tabs；5.進(jìn)入項(xiàng)目文件夾運(yùn)行ionic serve在一件安裝的谷歌瀏覽器中按F12進(jìn)行調(diào)試；6.需要真機(jī)調(diào)試,需要連接安卓手機(jī)或者安裝安卓模擬器，安裝生成后的安裝包apk，要生成apk需要添加android平臺。添加android平臺的命令是ionic platform add android；生成androidAPK的命令是ionic build android；生成APK即可安裝到真機(jī)或者模擬器中運(yùn)行，查看結(jié)果。

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

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

4.最后運(yùn)行結(jié)果圖：

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

圖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,了解彩超、頸動(dòng)脈血管超聲的準(zhǔn)確度和敏感度。

$scope.items=studata;

});

})

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

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

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

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

就可以獲取101學(xué)生的那條記錄了。

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

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

2. Ionic 控制器利用$http.get()向數(shù)據(jù)庫提交多個(gè)值，也可以利用$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. 最后運(yùn)行結(jié)果圖：

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

四、結(jié)束語

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

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

參考文獻(xiàn)：

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

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

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

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