近年来, 随着智能移动设备的迅速普及, 移动端连接Internet获得网络应用软件服务已成为一种必然. 因此, 仅有传统的Web端开发已不能满足用户和企业新增长的需求, 对手机APP的开发研究已经逐渐成为一种不可阻挡的趋势, 然手机APP 开发模式种类繁多, 选择合适的开发模式至关重要. 目前主要有以下三种模式: (1) 不同的平台需要独立开发的原生模式. (2) 主要部分使用原生技术开发, 扩展功能调用Web页面的原生+Web模式. (3) 使用Web技术开发手机APP的混合模式. 其中原生应用开发成本最高, 周期最长, 但是运行也最流畅; 原生+Web模式成本和周期低于原生应用, 但用户体验欠佳; 混合模式因使用Web技术开发移动应用, 避免了多平台开发造成的资源浪费, 成本最低, 效率最高, 用户体验仅次于原生应用. 因此, 考虑到成本与用户体验等各方面的因素, 利用混合模式开发移动APP是目前最理想的开发方式^[1].

基于混合模式, 开发手机APP的技术有很多, 其中主流的有三个, 它们别是Cordova、AppCan、Ionic. Cordova侧重于JS、HTML、CSS与原生应用的交互, 但样式粗糙, 低版Android系统中性能差; AppCanx需要将代码交给AppCan服务器, 隐私性差; Ionic利用AngularJS/UI和CSS编写原生应用和用户界面, 界面美观, 性能相对较好, 但因需要Cordova打包给移动应用, 性能上也受Cordova的一些限制. 综上所示, 这三种技术虽各有优缺点, 但显然, Ionic框架技术的性价比是最高的, 因此, 结合框架Ionic技术、AngularJS技术以及MongDB数据技术研发自适应于Web端和移动端的应用软件是目前软件开发领域的一个技术热点问题.

1 技术原理 1.1 Ionic框架技术

Ionic是一款基于HTML5混合AngularJS、Java Script构建的类似于手机原生应用APP的轻量级开发框架, 封装了Cordova/PhoneGap、AngularJS /UI和CSS框架技术等, 能够利用AngularJS /UI和CSS技术在Web端开发移动应用, 通过Cordova/PhoneGap打包封装给不同的移动应用平台, 克服了手机原生应用开发难度大、耗时长、无法跨平台等缺陷^[2]. 技术原理如图1所示.

Ionic框架主要包括底层和表现层两部分, 其中底层包括Cordova、Angular UI Router、AngularJS等. Cordova又称PhoneGap, 封装了各个平台内置浏览器webView组件, 并对其进行扩展, 使其成为具有访问本地设备API功能的强大浏览器, Ionic框架原理图中封装的 Android 的SDK及IOS的SDK即是这两个系统的软件开发工具包(强大浏览器), 这些软件开发工具包具备通过JavaScript直接访问不同平台设备本地API的能力, 从而使Cordova实现了APP跨平台访问功能; Angular UI Router用来实现前端路由, 与基于URL匹配的路由机制不同, Angular UI Router是基于状态机的导航, 状态机是由子视图集合抽象而成的, 导航的就是状态的切换, 路由导航就是切换状态, ionic.js渲染对应的子视图就是实现不同状态下的路由导航即状态切换^[3]; Ionic融合了AngularJS框架, 包含了AngularJS的特性, 提供了强大的数据视图双向绑定功能和自定义指令扩展功能, 为团队开发大型项目提供了帮助. 表现层主要包括CSS框架、命令行/CLI以及Java Script框架三个部分. 其中, CSS框架主要通过ionicons图标样式库提供原生APP质感的CSS样式模拟; 命令行/CLI主要用于构建应用, 模拟运行, 开发者能够直接通过CLI调用Cordova的跨平台创建、编译、打包等功能, 简化了移动应用的开发; JavaScript主要功能是提供适应移动端UI的 AngularJS扩展^[4].

1.2 AngularJS技术

AngularJS是为了克服HTML在构建应用上的不足而设计的一种基于JavaScript技术的以数据交互为核心的纯客户端Web框架, 旨在解决浏览器端实现动态网页问题的同时, 通过提供强大的视图数据双向绑定功能和自定义指令扩展功能, 增强HTML应用^[5]. 其工作原理主要包括Angular JS与浏览器的交互过程(图2(a))和与用户的交互过程(图2(b)).

图2(a)是AngularJS与浏览器的交互过程. 首先进行HTML加载, 然后将其解析成为DOM, 在浏览器中加载angular.js的脚本, AngularJS等待DOM Content Loaded事件的触发, AngularJS寻找ng-app指令, 配置$injector, 使用injector创建$root Scope服务和compile, 使用compile服务编译DOM并把它链接到root Scope上, ng-init指令对Scope里面的变量进行赋值, 最后对表达式进行替换^[6].

图2(b)是Angular JS与用户的交互过程. 浏览器的事件回路一直处于等待事件触发的状态, 一旦有事件(用户的交互操作、定时事件、网络事件等)触发浏览器的事件回路, 交互过程就会进入到JavaScript的context中, 然后context过程使用回调函数修改DOM模板, 当回调函数执行完成以后, 浏览器根据新的DOM模板组织渲染新的浏览器页面^[7].

1.3 MongoDB技术

MongoDB是一种分布式、跨平台、面向文档的开源非关系型数据库, 主要是以数据库、集合、文档为 存储单元,支持的数据结构非常松散, 能够从单服务器部署扩展到大型、复杂的多数据中心架构, 具有非常强的扩展性^[8].且还因封装有GridFS(图3)和Sharding(图4), 使得MongoDB具备了支持高效二进制数据文件存储的功能和根据用户数据使用量不断自动分片扩展存储系统的功能^[9].

如图3所示, MongoDB 使用 GridFS 文件系统来存储文件, GridFS的基本原理是将文件保存在两个collection集合中, 集合 File保存文件索引以及文件信息的元数据, 集合Chunk保存文件内容, 其中, 文件内容被分成大小相同的若干块, 每一块都存在一个Chunk块中, Chunk块大小通常为 256 KB, 独立存放在Chunk 集合中. 这种方法在存储文件的同时, 还能够存储与文件相关的一些附加属性(比如文件名, MD5值等). 使得MongoDB具备了存储大容量数据的条件.

当数据量大量增长的时候, 一台数据库服务器很难完成对大量数据的存储与快速读写, 这时就用到了MongoDB的Auto-Sharding即自动分片技术, 如图4所示, Auto-Sharding由shards、config servers 和 mongos三部分组成. Shards称为片, 通过运行mongod进程来存储一个集合的部分数据; config servers是配置服务器, 负责存储集群中的每个shard服务器上的块列表以及每个数据块所对应的片键取值范围; mongos是集群和客户端交互的窗口, 也是集群中各个系统的交通纽带, 主要负责各功能模块的协调调度^[10].

2 技术的组合应用

结合Ionic、MongoDB等技术设计了一款自适应Web端与移动智能终端的农产品展示和销售应用软件. 该农贸软件能够自适应于任何屏幕, 具有良好的维护性、可靠性、交互性, 并且易于用户操作, 界面风格简洁美观. 其主要功能包括消费者具有对商品进行信息查询、提交订单、模拟结算等功能, 卖家能够具有对商品信息进行增、删、改、查及处理购物车订单等功能.

2.1 设计思路

如图5所示, 该软件采用Ionic框架混合应用开发, 浏览器端以CSS/HTML、JavaScript/JSON、Angular JS为基础, 遵循视图控制模式, 通过视图控制器 “驱动”内部视图提供用户交互和UI功能, 服务器端使用Node.js管理模块, 采用B/S结构, 将Web端与移动端完美结合, 利用分布式非关系型数据库MongoDB对网站的文件数据信息进行分片存储.

对用户需求进行分析之后, 该应用软件的功能设计如图6所示, 用户首次进入网站, 网站会自动弹出提示用户注册对话框, 提醒用户注册, 用户注册并登录之后, 就可以将其心仪的商品加入购物车, 并且还可以对已经加入购物车的商品进行管理, 譬如添加、删除以及购买等, 同时还可以进行查看订单.

2.2 网站配置

Ionic开发依赖于Node.js环境, 因此在Ionic配置之前需要先配置Node.js环境. 此外, 因Ionic需要通过cordovan打包封装, 所以需要对cordovan进行下载和安装, 输入npm install -g cordovan命令对cordovan进行安装, 输入npm install-g ionic命令对Ionic进行安装.

如图7 为IONIC配置成功图, 在项目文件目录下执行命令Ionic start myionic tabs, 创建项目, 如图8所示, 其中, 项目中 plugins文件夹主要用来存放一些底层的插件, 包括 Cordova插件和开发者自己开发的插件等; scss文件夹下存放的是各个平台的图片; www文件下存放的是一些我们自己编写的Web端代码.

后台设计, 此项目采用的是分布式数据库MongoDB, 启动图如图9所示, 配置好nodejs环境之后, 用Node.js关联数据库, 在package.json中配置"mongoose", 导入mongoose模块, 然后创建数据库连接, MongoDB数据库技术以文本的形式储存数据, 以JS解释器为内部执行引擎, 将前端传来的文档数据存储成bson结构, 查询时, 转换为JS对象.

2.3 网站实现

此项目通过各个页面及页面功能实现该农贸应用软件的全部功能, 下面开始以首页和登录页面为例, 详细阐述实现过程.

如图10所示, 为该应用软件实现的首页效果图,首页对整个网站来说尤为重要, 因为各个主要的功能模块均在首页显示.

其主要代码如下所示.

angular.module('starter').controller('homeController',function($scope,$http,$ionicPopp)

　{$scope.navdata = ['生鲜蔬菜', '进口食品', '油粮副食', '休闲零食'];

　　{console.log(result)

　　$scope.listContent=result.data.listContent; }) .catch(function (err) {

　　　console.log(err) })

　　function change(b) {

var con = $('.select-con li').eq(b).text()

　sessionStorage.setItem('con', con);

　type = sessionStorage.getItem('con');

　$('.classify').text(type);

　$('.select-con').slideUp('fast');

　$scope.type = type; }

　　$('.title').click(function(){

　var type = sessionStorage.getItem('con')

　window.location.href = '#/search/' + type

})

})

以上代码主要主页的一些设置, 这部分用到了Ionic的Tab组件, 并通过Ionic的路由机制完成首页向登录页面的跳转.

如图11所示, 为该应用软件实现的登录页面效果图, 主要用于实现用户登录网站的功能.

其主要代码如下.

User.find({username},function(err,data){ if(err){

　　send(res,'fail','抱歉, 系统错误') }

else{

　　if(data.length > 0){

　　　　if(data[0].password =password)

{res.cookie('username',req.body.username) res.json({username,code:'success',message:'登录成功'})

}else{ send(res,'fail','密码输入错误')})

这部分用到了Node.js的 express模块和mongoose模块, 其功能是处理请求和保存数据, 先用mongoose模块的中package.json声明好数据格式, 根据前端传过来的用户信息, 对分布式数据库MongoDB进行增删改查.

3 结束语

本文研究分析了Ionic框架、AngularJS、MongoDB等关键技术, 根据Ionic框架技术调用系统原生接口完成应用软件研发的特性、AngularJS 技术的数据交互特性和MongoDB数据库的分片存储特性, 设计并实现了一款自适应Web端及移动智能终端的服务于农产品展示和销售的应用软件, 该软件专注于农副产品, 种类丰富, 分类明确, 为消费者和卖家提供了不受时间、地点限制的购物环境. 借助该软件, 商家能够实现商品的一站式上架与下架, 消费者可以实现一站式完成商品的浏览、购买和与商家进行沟通等. 该应用软件完成了客户到产品直接高效的商品交易.此外, 本文也有一些不足之处, 因Ionic框架技术在低版Android系统中的性能缺陷, 后期还要继续优化.