·28·
2018年第1期总第127期
No.1，2018General ，No.127
福 建 广 播 电 视 大 学 学 报
Journal  of  Fujian  Radio  &  TV  University
Ionic 与.NET WebApi 实现简单数据交互
摘 要：Ionic 有良好的用户体验，一般情况下用户使用时体会不出它和原生应用的区别。Ionic 用于开发客户端
可以和多种其他语言开发服务端一起搭配开发，多数人选取的都是和Java 配合，较少配合.Net WebApi 开发。现分析如何使用.NET 实现基于.NET Framework 4 的 WebApi 与 Ionic 利用$http 进行简单的数据交互。
关键词：Ionic 框架； .NET WebApi 框架；数据交互
中图分类号：TP311.52                    文献标识码：A                            文章编号：1008-7346（2018）01-0028-04
一、引言
（一）接口框架.NET WebApi
ASP.NET WebApi 是一个基于 编程的接口，用来操作可通过标准HTTP 方法和标头访问的系统。 ASP.NET WebApi 可提供各种接口供使用 HTTP 协议的客户端应用，例如浏览器、移动设备等，为它们提供 HTTP 服务，并可以使用各种Web 设施提供的基础服务，例如缓存和并发。 ASP.NET WebApi 是一种用于在 . NET Framework 上构建的应用程序服务接口。 这里ASP.NET  WebApi 连接数据库获取数据，并以Json 字符串格式返回，方便Ionic 与其进行数据交互。
（二）轻量级框架Ionic
混合模式（Hybrid）移动应用，兼具原生的移动应用（native-app）的良好用户交互体验的优势和Web 的移动应用（web-app）的便于开发和跨平台开发的优势，开发和使用都介于基于Web 的移动应用（web-app）和原生的移动应用（native-app）这两者之间。Ionic 是一种
轻量级框架，开发者可以使用已经掌握的Web 技术辅助Ionic 框架轻松地开发构建混合的模式移动应
用。
Ionic 的采用的是MVC 的开发模式，它的View 视图使用HTML5语言来表现，辅助框架已经封装好的视图样式，控制器C 使用了AngularJS 来处理数据，AngularJS 和Sass 一起创建了表现形式类似于手机平台原生应用开发框架。Ionic 框架是基于编译平台PhoneGap 所编译的，一次开发可以将已经开发的应用编译成多个平台可以使用的应用程序。使用Ionic 框架所开发的应用，代码也相对于原生平台来得容易维护，同时兼具了web 跨平台的优点，同样的内容就开发时间而言也会比原生系统大大缩短。同时框架提供了已经设计好的可以供调用的CSS 样式，页面开发时，可以使用许多Ionic 库提供的UI 组件，使得用户有良好的使用体验，有需要更加接近于原生app 的页面观感和功能，用户使用时基本察觉不出Ionic 开发的混合应用和原生应用的使用区别。Ionic 用于开发客户端可以
收稿日期：2018-01-21
作者简介：1.强琳，女，福建福州人，福建工程学院软件学院助教，福州大学数学与计算机科学学院在读硕士研究生；                  2.林世平，男，福建福州人，福州大学数学与计算机科学学院副院长，副教授。
强　琳1　林世平2
（1.福建工程学院软件学院，福建福州，350003;    2.福州大学，福建福州，350108））
搭配多种其他语言开发服务端，例如：C#、Java 等，不会有所局限。
（三） 往返数据类型Json
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，是ECMAScript的一个子集。JSon的使用习惯类似于C语言家族的习惯，例如,C、C++、C#、Java、JavaScript、Perl、Python等，它采用文本格式，是一种完全独立于语言的文本格式。以上特性使JSON成为和xml一样的理想的数据交换语言。容易且方便人阅读和编写，同时也易于机器解析和生成可以用于提升网络传输速率。JSON 是纯文本，具有“自我描述性”（人类可读），具有层级结构（值中存在值），可通过 JavaScript 进行解析，可以很好地被ionic框架所解析。JSON 值可以是：整数、浮点数、字符串、逻辑值、数组、对象也可以为null。
二、Ｉｏｎｉｃ调用ＷｅｂＡｐｉ实现简单数据交互
数据的交互设计有以下几个部分：基于Ionic框架开发的移动客户端、基于技术开发的web客户端，提供数据交互服务的asp WebApi和提供数据存储服务的数据库（例如：SQL server、MySql）。Ionic通过 AngularJS提供的一个核心服务$http，让用户可以通过WebApi 提交和获取数据。客户端先调用AngularJS的可选模块ngResource，访问RESTFULAPI。Ionic 可以访问提供标准的API接口的WebApi，API提供数据的交互服务，供客户端获取get()和提交post()数据。如图所示：
图1    结构示意图
（一）构建简单的WebApi接口和Ioinc客户端
首先，需要编写供Ionic客户端调用的ASP. NET  WebApi接口。1.在Visual Studio 2013中新建项目——ASP.NET MVC 4 Web 应用程序，选择WEB API，生成MvcApplication项目文件。
2.在项目中添加实体数据模型DataStuModel。
3.添加一个需要的新的控制器，以一个只读服务为例子，添加GetController继承ApiController。
4.修改WebApiConfig.cs中routeTemplate为"api/ {controller}/{action}/{id}"。
5.添加需要的数据处理和读写代码，并且部署Api。下为部分试验用Api代码：
public class TestController : ApiController
{
TestEntities te = new TestEntities();
#region 获取学生
public List<T_Student> 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);
2018年第1期 强　琳　林世平:Ionic与.NET WebApi实现简单数据交互
·29·
福建广播电视大学学报（总第127期） 2018年2月25日
}
}
其次，搭建Ionic开发环境。1.安装Android 的开发环境；2.接着安装ionic开发的环境；Ionic框架的安装命令为：npm install -g ionic；3.接着安装Node.JS；4.创建项目，在项目文件目录下运行命令ionic start TestExperiment tabs；5.进入项目文件夹运行ionic serve在一件安装的谷歌浏览器中按F12进行调试；6.需要真机调试，需要连接安卓手机或者安装安卓模拟器，安装生成后的安装包apk，要生成apk需要添加android 平台。添加android平台的命令是ionic platform add android；生成androidAPK的命令是ionic build android；生成APK即可安装到真机或者模拟器中运行，查看结果。
（二）获取接口提供的数据，绑定到Ionic 页面
1.接口api/Test/getStu的数据结果:
图2    接口数据结果
2.Ionic 控制器StudentShowInfoCtrl.js利用$( )方法读取数据：
.c o n t r o l l e r('S t u d e n t S h o w I n f o C t r l', function($scope,$http) {
$("localhost:8080/api/Test/ getStu")
.success(function (studata) {
$scope.items=studata;
});
})
3.Ionic页面StudentShow.html的页面绑定代码：
<ion-view view-title="学生信息">
<ion-content>
<div class="card" ng-repeat="item in items">
<div class="item item-divider"><h1>NO.{{ item.S_ID }}</h1></div>
<div class="item item-text-wrap">
<p>学生的姓名：{{ item.S_Name }}；</p>
<p>就读专业：{{item.S_Specialty}}；</p>
</div>
</div>
</ion-content>
</ion-view>
angular和angularjs4.最后运行结果图：
图3  Ionic页面读取数据
（三）从页面提交单个数值到接口
从页面提交单个数值到接口，也可以使用$()方法。例如，需要查询特定的某个人，同样调用api/Test/getStu/{id}，提交ID的值，就可以查询绑定某条记录。举例：查询id=101的学生，控制器获取记录代码：
$("localhost:8080/api/Test/ getStu/101")
就可以获取101学生的那条记录了。
（四）从页面提交多个数值到接口
1.向接口api/Test/insertStu提交多个数值。
2. Ionic 控制器利用$()向数据库提交多个值，也可以利用$http.post( )方法提交加密数据数据：
.controller('S tudent In
sertInforCtrl',
·30·
·31·
2018年第1期 强　琳　林世平:Ionic 与.NET WebApi 实现简单数据交互
function($scope,$http,$state) {
$scope.add=function () {
$("localhost:8080/api/Test/getStu?s1=202&s2=王五&s3=软件工程");
$("StudentShow",{})    };  })
3. 最后运行结果图：
图4    Ionic 页面读取更新后的数据四、结束语
Ionic 有良好的用户体验，用户在使用app 的时候感受不出和原生应用的区别，而且开发
相较于原生的系统更加的简单，学习方便。同时用于开发客户端可以搭配多种其他语言开发服务端，选择较多，多数人选取的都是和Java 配合，较少配合.NET WebApi 开发。
在实际的使用中，以学生信息系统为例，学生可以在任意的地方使用手机端查看自己想要的信息，或者提交信息量较少的信息，例如：查看个人信息、修改个人资料、查看成绩、查看课表等等；使用起来更灵活，查看信息的时候不用特意去电脑前面，在任何时间任何地点都可以查看到自己所要的信息。教师在信息输入和管理学生信息时，例如，使用以下功能：导入学生信息，学生教师审核等，当手机等智能设备不方便输入大量的数据或者执行复杂的管理操作时，使用电脑操作更加的方便，这个时候就可以使用系统的后台服务界面使用电脑进行复杂的管理操作。限于篇幅，本文只简单
介绍了如何使用.NET 实现基于.NET Framework 4 的 .NET WebApi 与 Ionic 利用$http 进行简单的数据交互，一些技术细节和功能运用仍然需要进一步完善和研究。
参考文献：
[1] （美）Jeremy Wilken. Ionic 实战：基于AngularJS 的移动混合应用开发[M]. 奇舞团, 译.北京：电子工业出版社,2016.[2] 陶国荣.AngularJS 实战[M].北京：机械工业出版社, 2015.
[3] 朱凯南，李艳平，申闫春，等. 基于Ionic 和Cordova 的跨平台移动APP 的研究与应用[J]. 电脑知识与技术, 2016, (1):      119-121
[4]（美）布洛克.ASP.NET Web API 设计[M].北京：人民邮电出版社, 2015：22.
[责任编辑：姚青
]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。