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

  • 投稿柏舟
  • 更新时间2018-01-26
  • 阅读量940次
  • 评分4
  • 97
  • 0
  摘要:近年来伴随着“互联网+”的爆发,移动手机客户端的普及,电子商务目前在全国各地的发展取得了较好的成绩。但各大电商销售产品的产品同质化严重,而具有高校特色的电子商务发展较缓,传统的开源电子商务系统一般基于windows平台,不能适应IOS及Android平台,鉴于此,开发一套具有高校特色、跨平台的电子商务系统具有非常重要的现实意义,最终实现数字化校园,因此,建立校园电子商务平台是时代发展的趋势。
 
  关键词:HTML5;跨平台;校园电子商务
 
  中图分类号:TP319文献标识码:A文章编号:1672-4437(2017)04-0051-05
 
  1现有电子商务平台及开发工具介绍
 
  1.1现有电子商务平台优缺点分析
 
  校园电子商务与一般电子商务不同,主要表现在客户群体、网络环境、服务内容、物流配送、网上支付、身份认证等方面。目前一些高校建立了电子商务网站,一般使用Ecshop、shopEX、Hishop等免费开源的系统。免费开源的程序一般系统功能相对薄弱,系统各方面的压力承受能力不足,系统出了问题只能等待解决,受制于系统开发人员。另外因二次开发文档不完善,不能满足日益增多的智能设备进行跨平台浏览,还存在系统更新维护跟不上等问题。商业版的收费动辄上万,对于没有成熟商业模式的高校校园电子商务一般很少去投入。以上这些因素导致国内高校校内电子商务发展进展较缓。
 
  1.2开发工具介绍
 
  1.2.1HTML5简介
 
  HTML是HyperTextMarkupLanguage(即超文本标记语言)的缩写,是构成网页基本结构的文本及各类标签的组合。H5则是下一代HTML标准,它集HTML、CSS和JavaScript等在内的一套Web开发技术的组合。HTML5相比上一版本它带来了一些新的特性,如音频视频播放、动画Canvas、地理信息、硬件加速、WEBSOCKET、本地离线应用程序(即使在Internet连接中断之后)、本地存储、语义化标记等新功能。它的使用可以更好地提高可用性,改进用户友好的界面体验。标签的使用有助于开发人员定义重要的内容,还可以给网站带来更多的多媒体元素(视频和音频)。SEO更友好,并大量应用于移动端应用程序和游戏。
 
  1.2.2混合开发简介
 
  随着智能手机的普及,用户对于App的需求更加多样化,从看新闻、视频到购物、缴费都通过App实现。目前App有两种方式,一种是原生应用(NativeApp),具有体验好、开发成本高、维护更新复杂、不能跨平台等特点;另一种是混合应用(HybridApp),具有体验一般、开发成本低、维护更新方便、能跨平台等特点。随着H5的发布,它具有跨平台、易开发、可搜索、无须下载升级等优点,提高了可用性,并且改进了用户体验,使得基于H5开发的混合模式应用已经可以媲美原生的效果,末来H5将成为移动互联网领域的主宰者。移动端的大量需求使得H5生态发展更加迅猛,很多即时通信和信息传播都是H5承载的,只是以App的外壳呈现而已,典型的例子有淘宝、微信、Facebook等。
 
  1.2.3WeX5开发工具简介
 
  WeX5是一款免费开源的快速H5App开发工具,前端具有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模式,即经过实名认证的教师和学生都可以在平台上开店进行交易。
 
  校园电子商务平台的功能主要分为前台模块和后台模块,前台模块功能主要为用户提供友好的UI界面,为用户带来更好的操作体验,包含产品展示与促销、新闻公告、产品查找、用户注册、登陆、购物车、会员中心等。后台模块功能主要为产品管理、支付接口管理、会员信息管理、新闻公告等。对于在校园电子商务平台上申请店铺的师生,还提供店铺管理功能、订单管理、支付管理、发货管理等功能。另外系统还预留在线交流、课表查询、校内报修、问题反馈等功能,方便师生和学校各部门之间地信息传递。经过前期的调研和对系统的对比分析,得出校园网电子商务平台的整体系统框架图,系统分前台用户功能和后台管理功能,前台用户功能如图1所示,后台管理功能如图2所示。
 
  2.2校园电子商务平台前端页面设计
 
  校园电子商务平台参照淘宝商城和京东商城前台进行UI设计。页面描述由HTML,CSS和JS三部分构成;页面结构分为上下格局,布局使用panel组件,其中上面部分为内容区域,底部为导航栏。上面部分采取上中下布局方式,顶部使用contents多内容面板实现页面切换,页面使用直接绘制和通过windowContainer嵌入的方式实现。底部导航使用首页、分类、校园发现、购物车、个人中心五个button组成,并且在css文件中定义底部导航条的背景颜色、被选中时的字体颜色、文字及图标大小等。
 
  2.2.1平台首页设计
 
  首页是打开网站的第一个页面,也是整个网站内容的缩影与索引,首页留给用户的第一印象非常关键,直接决定了用户是继续浏览还是直接关闭。因此,合理设计首页色彩、图片、栏目、导航等版块尤为重要。目前各类网站根据分类的不同,逐渐形成各自的特色与设计风格。电子商务平台的首页一般特色比较鲜明,首页用于显示最新图片海报信息及促销信息,需要推广的页面也都集中在首页。想要吸引客户的购买欲,就一定要在首页设计上下功夫,这个就是“门面”效应。跨平台电子商务平台因为显示尺寸限制,首页一般采取上中下方式布局,顶部用于动态切换最新图片促销产品信息,中间部分为二级门户分类图标,以2行、5列的形式展现,单击其中的图标可以打开相应的二级门户页面。二级门户图标下方使用广告栏,由“限时抢购”“发现好货”“每日新品”形成广告栏。目前电商首页中,广告栏使用较多,广告栏使用Bootstrap的row组件来实现。广告栏下方使用双列列表形式用于展示商品信息,如价格、折扣等信息。
 
  2.2.2其他页面设计
 
  其他页面主要指分类、校园发现、购物车、个人中心、后台管理等模块。分类模块使用无限级商品分类(CategoryModule)模块,自动从数据库中读取后台添加的商品分类进行分级显示。购物车模块利用页面的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是AndroidPacKage的缩写,即Android安装包。iOS系统的安装包后缀名是IPA,IPA是iPhoneApplication缩写,即Apple程序应用文件。校园电子商务平台采取文件部署在服务端的模式,将系统服务器端程序、数据库部署在服务器上,并进行相关的配置,即可完成服务器端的部署。并发布本地App,方便智能终端跨平台使用。
 
  3.3校园电子商务平台测试
 
  在服务器端部署完成后,就可以对系统进行测试,测试采取三种方式进行,分别是浏览器方式、Android系统平台和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.