基于HTML5的跨平台校园电子商务系统的设计与实现

韦建国，葛晓滨

1 现有电子商务平台及开发工具介绍

1.1 现有电子商务平台优缺点分析

校园电子商务与一般电子商务不同，主要表现在客户群体、网络环境、服务内容、物流配送、网上支付、身份认证等方面。目前一些高校建立了电子商务网站，一般使用 Ecshop、shopEX、Hishop等免费开源的系统。免费开源的程序一般系统功能相对薄弱，系统各方面的压力承受能力不足，系统出了问题只能等待解决，受制于系统开发人员。另外因二次开发文档不完善，不能满足日益增多的智能设备进行跨平台浏览，还存在系统更新维护跟不上等问题。商业版的收费动辄上万，对于没有成熟商业模式的高校校园电子商务一般很少去投入。以上这些因素导致国内高校校内电子商务发展进展较缓。

1.2 开发工具介绍

1.2.1 HTML5简介

HTML是 Hyper Text Markup Language（即超文本标记语言）的缩写，是构成网页基本结构的文本及各类标签的组合。H5则是下一代HTML标准，它集HTML、CSS和Java Script等在内的一套Web开发技术的组合。HTML5相比上一版本它带来了一些新的特性，如音频视频播放、动画 Canvas、地理信息、硬件加速、WEB SOCKET、本地离线应用程序(即使在Internet连接中断之后)、本地存储、语义化标记等新功能。它的使用可以更好地提高可用性，改进用户友好的界面体验。标签的使用有助于开发人员定义重要的内容，还可以给网站带来更多的多媒体元素(视频和音频)。SEO更友好，并大量应用于移动端应用程序和游戏。

1.2.2 混合开发简介

随着智能手机的普及，用户对于App的需求更加多样化，从看新闻、视频到购物、缴费都通过App实现。目前App有两种方式，一种是原生应用（Native App)，具有体验好、开发成本高、维护更新复杂、不能跨平台等特点；另一种是混合应用（Hybrid App)，具有体验一般、开发成本低、维护更新方便、能跨平台等特点。随着H5的发布，它具有跨平台、易开发、可搜索、无须下载升级等优点，提高了可用性，并且改进了用户体验，使得基于H5开发的混合模式应用已经可以媲美原生的效果，末来H5将成为移动互联网领域的主宰者。移动端的大量需求使得H5生态发展更加迅猛，很多即时通信和信息传播都是H5承载的，只是以App的外壳呈现而已，典型的例子有淘宝、微信、Facebook等。

1.2.3 WeX5开发工具简介

WeX5是一款免费开源的快速H5 App开发工具，前端具有 H5+CSS3+JS标准，使用 AMD规范的RequireJS、Bootstrap、jQuery等技术；基于PhoneGap(Cordove)采用混合应用开发模式，可以轻松调用手机硬件，如相机、地图、指南针、通讯录、文件等，支持多种类型的后端，包括 Java、PHP和.NET等。WeX5提供完全可视化、组件化、拖拽式开发环境，完全所见即所得；向导化和模板化等工具，可快速生成常见的应用场景界面；代码提示、真机调试功能，支持云API，一键可将开发的App部署到云服务器上，为开发者提供了便利。

1.2.4 跨平台开发框架原理

移动Web跨平台开发框架，主要依赖移动中间件减少移动Web对终端系统硬件的要求，一般将系统分为三层，即前端UI页面层、中间件层和后端服务层。WeX5采用PhoneGap（Cordove）架构来实现跨平台客户端访问，主要模型资源有UI2、Native和Baas三个目录，其中，UI2是前端页面模型，Native是本地 App，Baas是后端服务模型。根据这一架构，对目前主流移动智能平台客户端应用程序进行开发，可以实现开发周期短、效率高、个性化定制复杂度简单、维护成本低的目的，令整个移动客户端应用程序的开发进程与维护都能获得很好的优化。

2 校园电子商务平台的设计与实现

2.1 系统功能需求分析

为了方便校内师生员工对校园电子商务的支持并激发他们的热情，系统采用C2C模式，即经过实名认证的教师和学生都可以在平台上开店进行交易。

图1 校园电子商务平台系统功能

图2 校园电子商务平台后台管理功能模块

校园电子商务平台的功能主要分为前台模块和后台模块，前台模块功能主要为用户提供友好的UI界面，为用户带来更好的操作体验，包含产品展示与促销、新闻公告、产品查找、用户注册、登陆、购物车、会员中心等。后台模块功能主要为产品管理、支付接口管理、会员信息管理、新闻公告等。对于在校园电子商务平台上申请店铺的师生，还提供店铺管理功能、订单管理、支付管理、发货管理等功能。另外系统还预留在线交流、课表查询、校内报修、问题反馈等功能，方便师生和学校各部门之间地信息传递。经过前期的调研和对系统的对比分析，得出校园网电子商务平台的整体系统框架图，系统分前台用户功能和后台管理功能，前台用户功能如图1所示，后台管理功能如图2所示。

2.2 校园电子商务平台前端页面设计

校园电子商务平台参照淘宝商城和京东商城前台进行UI设计。页面描述由HTML，CSS和JS三部分构成；页面结构分为上下格局，布局使用panel组件，其中上面部分为内容区域，底部为导航栏。上面部分采取上中下布局方式，顶部使用contents多内容面板实现页面切换，页面使用直接绘制和通过windowContainer嵌入的方式实现。底部导航使用首页、分类、校园发现、购物车、个人中心五个button组成，并且在css文件中定义底部导航条的背景颜色、被选中时的字体颜色、文字及图标大小等。

2.2.1 平台首页设计

首页是打开网站的第一个页面，也是整个网站内容的缩影与索引，首页留给用户的第一印象非常关键，直接决定了用户是继续浏览还是直接关闭。因此，合理设计首页色彩、图片、栏目、导航等版块尤为重要。目前各类网站根据分类的不同，逐渐形成各自的特色与设计风格。电子商务平台的首页一般特色比较鲜明，首页用于显示最新图片海报信息及促销信息，需要推广的页面也都集中在首页。想要吸引客户的购买欲，就一定要在首页设计上下功夫，这个就是“门面”效应。跨平台电子商务平台因为显示尺寸限制，首页一般采取上中下方式布局，顶部用于动态切换最新图片促销产品信息，中间部分为二级门户分类图标，以2行、5列的形式展现，单击其中的图标可以打开相应的二级门户页面。二级门户图标下方使用广告栏，由“限时抢购”“发现好货”“每日新品”形成广告栏。目前电商首页中，广告栏使用较多，广告栏使用Bootstrap的row组件来实现。广告栏下方使用双列列表形式用于展示商品信息，如价格、折扣等信息。

2.2.2 其他页面设计

其他页面主要指分类、校园发现、购物车、个人中心、后台管理等模块。分类模块使用无限级商品分类(Category Module)模块，自动从数据库中读取后台添加的商品分类进行分级显示。购物车模块利用页面的model组件，通过onLoad事件进入JS代码视图，通过JS代码实现加入购物车的功能。个人中心模块分用户注册和用户登录两个入口。注册功能仅限于一般用户的注册，其他用户则由系统管理员进行设置并管理；在登录过程中，对用户的角色根据分配的权限自动进行判断并跳转到不同的页面。后台管理模块包括系统管理员、用户管理员、用户等子模块，各子模块的实现技术基本相同，利用现有开源软件进行代码移植，减少开发时间。

2.3 校园电子商务平台后端设计

2.3.1 数据库设计

数据库是校园电子商务平台的核心部分。数据库设计是否合理对整个平台的运行有着重要的影响，良好的数据库设计不仅可以有效降低数据冗余，还能提高数据检索速度。并发连接对校园电子商务平台影响也很大，如果并发连接数少，则会出现页面打不开、打开得慢等问题。考虑到校园电子商务平台的功能、跨平台、商品所要求存储信息量大、安全性和保密性要求高等需求，系统使用MySQL作为后台存储数据库。

2.3.2 通过Baas服务访问数据库

Baas服务访问数据库包括两个部分，分服务端和客户端。服务端包含一个 servlet（com.justep.baas.test.DemoServlet），用于为客户端提供数据查询和数据保存的Web服务；客户端包含一个.w页面（/UI2/demo/baas/simpleData/index.w），页面上的数据集通过ajax请求访问服务端提供的Web服务，实现对数据的增删改查等功能。客户端通过 data组件的自定义刷新（onCustomRefresh）和自定义保存（onCustomSave）事件，实现页面数据与后台servlet服务的交互。页面上包含一个数据组件，它的列设置与数据库表的列结构相匹配。页面核心代码如下：

发送请求：

Baas.sendRequest({

“url” : “/demo”, //请求地址

“action” : “saveOrder”, // action

“params” : params, // action对应的参数

“success” : success // 请求成功后的回调方法

});

加载返回数据到data：

data.loadData(resultData, append);

data.toJson(true) // 将数据集中已变更数据导出为JSON数据

// 保存成功后，必须调用data.applyUpdates()，用于数据集确认数据已更新

data.applyUpdates();

3 校园电子商务平台的部署与测试

3.1 校园电子商务平台部署

通过WeX5开发的应用，在开发过程中，可以生成调试包，将调试包安装在设备上，通过设备进行开发调试，开发完成后，可以生成发布包部署在服务器上用于多平台跨端访问，可以使用浏览器访问本地App访问方式。浏览器访问方式为：http://部署路径/x5/UI2/shop/index.w，在电脑浏览器或者手机浏览器都可以访问。其中x5是UIServer的名字，在tomcat的server.xml中定义，当请求到UIServer后，由UIServer做编译，生成html和js供前端使用。本地App访问方式，首先要生成App，要对App默认的参数进行定义，在 “编辑本地 App”，向导中有三个重要的参数，分别是服务地址、首页、需要打包的资源。服务地址指 baas在服务器上的部署路径；首页就是默认打开的页面；需要打包的资源指App运行时用到的资源会被打包到App里面，当tomat中没有UISever服务运行时也能正常使用。

3.2 校园电子商务平台发布

WeX5开发的系统，可以运行在浏览器、微信订阅号或者服务号上，也可以生成安装包运行在安卓设备或者苹果设备上。安卓系统的安装包后缀名是APK，APK是Android PacKage的缩写，即Android安装包。iOS系统的安装包后缀名是 IPA，IPA是iPhone Application缩写，即Apple程序应用文件。校园电子商务平台采取文件部署在服务端的模式，将系统服务器端程序、数据库部署在服务器上，并进行相关的配置，即可完成服务器端的部署。并发布本地App，方便智能终端跨平台使用。

3.3 校园电子商务平台测试

在服务器端部署完成后，就可以对系统进行测试，测试采取三种方式进行，分别是浏览器方式、Android系统平台和 iOS系统平台测试。

图3 浏览器访问显示结果

图4 安卓App显示结果

图5 iOS系统平台显示结果

浏览器方式可以直接访问服务器部署地址进行浏览，Android平台和iOS平台测试可以使用在智能终端上安装 App应用程序的方式进行，通过App应用程序访问校园电子商务系统的各项功能。App端是用户使用校园电子商务平台的入口，因此，对 App应用程序的测试是对平台进行测试的重点内容。经过测试，各平台下App应用程序各项功能满足需求分析阶段的要求，机器触摸操作正常、页面布局正常显示，程序整体运行流畅，未出现明显的漏洞，用户体验较好。测试结果如下，浏览器打开方式如图3所示，Android系统平台下安装APP显示如图4所示，iOS系统平台因牵涉到证书问题，只在浏览器下进行测试，测试结果如图5所示。

4 结语

本研究对基于 HTML5的跨平台校园电子商务系统进行了详细地设计与实现，并在不同平台进行了测试，测试结果符合预期要求。随着电子商务在国内的迅速发展，校园电子商务平台对数字化校园建设将起到巨大的推动作用，为高校计算机应用、电子商务、物流管理等专业学生提供真实的实训平台，将学习的理论知识应用到实践中，提高了学生的动手操作能力，从而提高就业竞争力，也为高校师生的学习和生活提供便利。

[1]孙丰垒,李响.新手学 HTML5移动开发--面向 IOS和Android平台[M]. 北京:清华大学出版社,2012.

[2]尹亚光. 面向西部地区的网络视音频传播技术研究与设计[J].广播与电视技术,2014(02).

[3]麦志坚.校园电子商务系统的设计与实现[J].企业科技与发展,2016(08).

[4]王瑜.某高校校园电子商务平台的设计与实现[D].重庆:电子科技大学,2015.

[5]殷杰.基于HTML5的跨平台移动家教信息服务系统的设计与实现[D].广州:华南理工大学大学,2015.

[6]马科.HTML5 App商业开发实战教程——基于WeX5可视化开发平台[M].北京:高等教育出版社,2016.