基于HTML5的跨平臺校園電子商務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

韋建國，葛曉濱

1 現(xiàn)有電子商務(wù)平臺及開發(fā)工具介紹

1.1 現(xiàn)有電子商務(wù)平臺優(yōu)缺點(diǎn)分析

校園電子商務(wù)與一般電子商務(wù)不同，主要表現(xiàn)在客戶群體、網(wǎng)絡(luò)環(huán)境、服務(wù)內(nèi)容、物流配送、網(wǎng)上支付、身份認(rèn)證等方面。目前一些高校建立了電子商務(wù)網(wǎng)站，一般使用 Ecshop、shopEX、Hishop等免費(fèi)開源的系統(tǒng)。免費(fèi)開源的程序一般系統(tǒng)功能相對薄弱，系統(tǒng)各方面的壓力承受能力不足，系統(tǒng)出了問題只能等待解決，受制于系統(tǒng)開發(fā)人員。另外因二次開發(fā)文檔不完善，不能滿足日益增多的智能設(shè)備進(jìn)行跨平臺瀏覽，還存在系統(tǒng)更新維護(hù)跟不上等問題。商業(yè)版的收費(fèi)動輒上萬，對于沒有成熟商業(yè)模式的高校校園電子商務(wù)一般很少去投入。以上這些因素導(dǎo)致國內(nèi)高校校內(nèi)電子商務(wù)發(fā)展進(jìn)展較緩。

1.2 開發(fā)工具介紹

1.2.1 HTML5簡介

HTML是 Hyper Text Markup Language（即超文本標(biāo)記語言）的縮寫，是構(gòu)成網(wǎng)頁基本結(jié)構(gòu)的文本及各類標(biāo)簽的組合。H5則是下一代HTML標(biāo)準(zhǔn)，它集HTML、CSS和Java Script等在內(nèi)的一套Web開發(fā)技術(shù)的組合。HTML5相比上一版本它帶來了一些新的特性，如音頻視頻播放、動畫 Canvas、地理信息、硬件加速、WEB SOCKET、本地離線應(yīng)用程序(即使在Internet連接中斷之后)、本地存儲、語義化標(biāo)記等新功能。它的使用可以更好地提高可用性，改進(jìn)用戶友好的界面體驗(yàn)。標(biāo)簽的使用有助于開發(fā)人員定義重要的內(nèi)容，還可以給網(wǎng)站帶來更多的多媒體元素(視頻和音頻)。SEO更友好，并大量應(yīng)用于移動端應(yīng)用程序和游戲。

1.2.2 混合開發(fā)簡介

隨著智能手機(jī)的普及，用戶對于App的需求更加多樣化，從看新聞、視頻到購物、繳費(fèi)都通過App實(shí)現(xiàn)。目前App有兩種方式，一種是原生應(yīng)用（Native App)，具有體驗(yàn)好、開發(fā)成本高、維護(hù)更新復(fù)雜、不能跨平臺等特點(diǎn)；另一種是混合應(yīng)用（Hybrid App)，具有體驗(yàn)一般、開發(fā)成本低、維護(hù)更新方便、能跨平臺等特點(diǎn)。隨著H5的發(fā)布，它具有跨平臺、易開發(fā)、可搜索、無須下載升級等優(yōu)點(diǎn)，提高了可用性，并且改進(jìn)了用戶體驗(yàn)，使得基于H5開發(fā)的混合模式應(yīng)用已經(jīng)可以媲美原生的效果，末來H5將成為移動互聯(lián)網(wǎng)領(lǐng)域的主宰者。移動端的大量需求使得H5生態(tài)發(fā)展更加迅猛，很多即時通信和信息傳播都是H5承載的，只是以App的外殼呈現(xiàn)而已，典型的例子有淘寶、微信、Facebook等。

1.2.3 WeX5開發(fā)工具簡介

WeX5是一款免費(fèi)開源的快速H5 App開發(fā)工具，前端具有 H5+CSS3+JS標(biāo)準(zhǔn)，使用 AMD規(guī)范的RequireJS、Bootstrap、jQuery等技術(shù)；基于PhoneGap(Cordove)采用混合應(yīng)用開發(fā)模式，可以輕松調(diào)用手機(jī)硬件，如相機(jī)、地圖、指南針、通訊錄、文件等，支持多種類型的后端，包括 Java、PHP和.NET等。WeX5提供完全可視化、組件化、拖拽式開發(fā)環(huán)境，完全所見即所得；向?qū)Щ湍０寤裙ぞ撸煽焖偕沙Ｒ姷膽?yīng)用場景界面；代碼提示、真機(jī)調(diào)試功能，支持云API，一鍵可將開發(fā)的App部署到云服務(wù)器上，為開發(fā)者提供了便利。

1.2.4 跨平臺開發(fā)框架原理

移動Web跨平臺開發(fā)框架，主要依賴移動中間件減少移動Web對終端系統(tǒng)硬件的要求，一般將系統(tǒng)分為三層，即前端UI頁面層、中間件層和后端服務(wù)層。WeX5采用PhoneGap（Cordove）架構(gòu)來實(shí)現(xiàn)跨平臺客戶端訪問，主要模型資源有UI2、Native和Baas三個目錄，其中，UI2是前端頁面模型，Native是本地 App，Baas是后端服務(wù)模型。根據(jù)這一架構(gòu)，對目前主流移動智能平臺客戶端應(yīng)用程序進(jìn)行開發(fā)，可以實(shí)現(xiàn)開發(fā)周期短、效率高、個性化定制復(fù)雜度簡單、維護(hù)成本低的目的，令整個移動客戶端應(yīng)用程序的開發(fā)進(jìn)程與維護(hù)都能獲得很好的優(yōu)化。

2 校園電子商務(wù)平臺的設(shè)計(jì)與實(shí)現(xiàn)

2.1 系統(tǒng)功能需求分析

為了方便校內(nèi)師生員工對校園電子商務(wù)的支持并激發(fā)他們的熱情，系統(tǒng)采用C2C模式，即經(jīng)過實(shí)名認(rèn)證的教師和學(xué)生都可以在平臺上開店進(jìn)行交易。

圖1 校園電子商務(wù)平臺系統(tǒng)功能

圖2 校園電子商務(wù)平臺后臺管理功能模塊

校園電子商務(wù)平臺的功能主要分為前臺模塊和后臺模塊，前臺模塊功能主要為用戶提供友好的UI界面，為用戶帶來更好的操作體驗(yàn)，包含產(chǎn)品展示與促銷、新聞公告、產(chǎn)品查找、用戶注冊、登陸、購物車、會員中心等。后臺模塊功能主要為產(chǎn)品管理、支付接口管理、會員信息管理、新聞公告等。對于在校園電子商務(wù)平臺上申請店鋪的師生，還提供店鋪管理功能、訂單管理、支付管理、發(fā)貨管理等功能。另外系統(tǒng)還預(yù)留在線交流、課表查詢、校內(nèi)報修、問題反饋等功能，方便師生和學(xué)校各部門之間地信息傳遞。經(jīng)過前期的調(diào)研和對系統(tǒng)的對比分析，得出校園網(wǎng)電子商務(wù)平臺的整體系統(tǒng)框架圖，系統(tǒng)分前臺用戶功能和后臺管理功能，前臺用戶功能如圖1所示，后臺管理功能如圖2所示。

2.2 校園電子商務(wù)平臺前端頁面設(shè)計(jì)

校園電子商務(wù)平臺參照淘寶商城和京東商城前臺進(jìn)行UI設(shè)計(jì)。頁面描述由HTML，CSS和JS三部分構(gòu)成；頁面結(jié)構(gòu)分為上下格局，布局使用panel組件，其中上面部分為內(nèi)容區(qū)域，底部為導(dǎo)航欄。上面部分采取上中下布局方式，頂部使用contents多內(nèi)容面板實(shí)現(xiàn)頁面切換，頁面使用直接繪制和通過windowContainer嵌入的方式實(shí)現(xiàn)。底部導(dǎo)航使用首頁、分類、校園發(fā)現(xiàn)、購物車、個人中心五個button組成，并且在css文件中定義底部導(dǎo)航條的背景顏色、被選中時的字體顏色、文字及圖標(biāo)大小等。

2.2.1 平臺首頁設(shè)計(jì)

首頁是打開網(wǎng)站的第一個頁面，也是整個網(wǎng)站內(nèi)容的縮影與索引，首頁留給用戶的第一印象非常關(guān)鍵，直接決定了用戶是繼續(xù)瀏覽還是直接關(guān)閉。因此，合理設(shè)計(jì)首頁色彩、圖片、欄目、導(dǎo)航等版塊尤為重要。目前各類網(wǎng)站根據(jù)分類的不同，逐漸形成各自的特色與設(shè)計(jì)風(fēng)格。電子商務(wù)平臺的首頁一般特色比較鮮明，首頁用于顯示最新圖片海報信息及促銷信息，需要推廣的頁面也都集中在首頁。想要吸引客戶的購買欲，就一定要在首頁設(shè)計(jì)上下功夫，這個就是“門面”效應(yīng)?？缙脚_電子商務(wù)平臺因?yàn)轱@示尺寸限制，首頁一般采取上中下方式布局，頂部用于動態(tài)切換最新圖片促銷產(chǎn)品信息，中間部分為二級門戶分類圖標(biāo)，以2行、5列的形式展現(xiàn)，單擊其中的圖標(biāo)可以打開相應(yīng)的二級門戶頁面。二級門戶圖標(biāo)下方使用廣告欄，由“限時搶購”“發(fā)現(xiàn)好貨”“每日新品”形成廣告欄。目前電商首頁中，廣告欄使用較多，廣告欄使用Bootstrap的row組件來實(shí)現(xiàn)。廣告欄下方使用雙列列表形式用于展示商品信息，如價格、折扣等信息。

2.2.2 其他頁面設(shè)計(jì)

其他頁面主要指分類、校園發(fā)現(xiàn)、購物車、個人中心、后臺管理等模塊。分類模塊使用無限級商品分類(Category Module)模塊，自動從數(shù)據(jù)庫中讀取后臺添加的商品分類進(jìn)行分級顯示。購物車模塊利用頁面的model組件，通過onLoad事件進(jìn)入JS代碼視圖，通過JS代碼實(shí)現(xiàn)加入購物車的功能。個人中心模塊分用戶注冊和用戶登錄兩個入口。注冊功能僅限于一般用戶的注冊，其他用戶則由系統(tǒng)管理員進(jìn)行設(shè)置并管理；在登錄過程中，對用戶的角色根據(jù)分配的權(quán)限自動進(jìn)行判斷并跳轉(zhuǎn)到不同的頁面。后臺管理模塊包括系統(tǒng)管理員、用戶管理員、用戶等子模塊，各子模塊的實(shí)現(xiàn)技術(shù)基本相同，利用現(xiàn)有開源軟件進(jìn)行代碼移植，減少開發(fā)時間。

2.3 校園電子商務(wù)平臺后端設(shè)計(jì)

2.3.1 數(shù)據(jù)庫設(shè)計(jì)

數(shù)據(jù)庫是校園電子商務(wù)平臺的核心部分。數(shù)據(jù)庫設(shè)計(jì)是否合理對整個平臺的運(yùn)行有著重要的影響，良好的數(shù)據(jù)庫設(shè)計(jì)不僅可以有效降低數(shù)據(jù)冗余，還能提高數(shù)據(jù)檢索速度。并發(fā)連接對校園電子商務(wù)平臺影響也很大，如果并發(fā)連接數(shù)少，則會出現(xiàn)頁面打不開、打開得慢等問題?？紤]到校園電子商務(wù)平臺的功能、跨平臺、商品所要求存儲信息量大、安全性和保密性要求高等需求，系統(tǒng)使用MySQL作為后臺存儲數(shù)據(jù)庫。

2.3.2 通過Baas服務(wù)訪問數(shù)據(jù)庫

Baas服務(wù)訪問數(shù)據(jù)庫包括兩個部分，分服務(wù)端和客戶端。服務(wù)端包含一個 servlet（com.justep.baas.test.DemoServlet），用于為客戶端提供數(shù)據(jù)查詢和數(shù)據(jù)保存的Web服務(wù)；客戶端包含一個.w頁面（/UI2/demo/baas/simpleData/index.w），頁面上的數(shù)據(jù)集通過ajax請求訪問服務(wù)端提供的Web服務(wù)，實(shí)現(xiàn)對數(shù)據(jù)的增刪改查等功能?？蛻舳送ㄟ^ data組件的自定義刷新（onCustomRefresh）和自定義保存（onCustomSave）事件，實(shí)現(xiàn)頁面數(shù)據(jù)與后臺servlet服務(wù)的交互。頁面上包含一個數(shù)據(jù)組件，它的列設(shè)置與數(shù)據(jù)庫表的列結(jié)構(gòu)相匹配。頁面核心代碼如下：

發(fā)送請求：

Baas.sendRequest({

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

“action” : “saveOrder”, // action

“params” : params, // action對應(yīng)的參數(shù)

“success” : success // 請求成功后的回調(diào)方法

});

加載返回數(shù)據(jù)到data：

data.loadData(resultData, append);

data.toJson(true) // 將數(shù)據(jù)集中已變更數(shù)據(jù)導(dǎo)出為JSON數(shù)據(jù)

// 保存成功后，必須調(diào)用data.applyUpdates()，用于數(shù)據(jù)集確認(rèn)數(shù)據(jù)已更新

data.applyUpdates();

3 校園電子商務(wù)平臺的部署與測試

3.1 校園電子商務(wù)平臺部署

通過WeX5開發(fā)的應(yīng)用，在開發(fā)過程中，可以生成調(diào)試包，將調(diào)試包安裝在設(shè)備上，通過設(shè)備進(jìn)行開發(fā)調(diào)試，開發(fā)完成后，可以生成發(fā)布包部署在服務(wù)器上用于多平臺跨端訪問，可以使用瀏覽器訪問本地App訪問方式。瀏覽器訪問方式為：http://部署路徑/x5/UI2/shop/index.w，在電腦瀏覽器或者手機(jī)瀏覽器都可以訪問。其中x5是UIServer的名字，在tomcat的server.xml中定義，當(dāng)請求到UIServer后，由UIServer做編譯，生成html和js供前端使用。本地App訪問方式，首先要生成App，要對App默認(rèn)的參數(shù)進(jìn)行定義，在 “編輯本地 App”，向?qū)е杏腥齻€重要的參數(shù)，分別是服務(wù)地址、首頁、需要打包的資源。服務(wù)地址指 baas在服務(wù)器上的部署路徑；首頁就是默認(rèn)打開的頁面；需要打包的資源指App運(yùn)行時用到的資源會被打包到App里面，當(dāng)tomat中沒有UISever服務(wù)運(yùn)行時也能正常使用。

3.2 校園電子商務(wù)平臺發(fā)布

WeX5開發(fā)的系統(tǒng)，可以運(yùn)行在瀏覽器、微信訂閱號或者服務(wù)號上，也可以生成安裝包運(yùn)行在安卓設(shè)備或者蘋果設(shè)備上。安卓系統(tǒng)的安裝包后綴名是APK，APK是Android PacKage的縮寫，即Android安裝包。iOS系統(tǒng)的安裝包后綴名是 IPA，IPA是iPhone Application縮寫，即Apple程序應(yīng)用文件。校園電子商務(wù)平臺采取文件部署在服務(wù)端的模式，將系統(tǒng)服務(wù)器端程序、數(shù)據(jù)庫部署在服務(wù)器上，并進(jìn)行相關(guān)的配置，即可完成服務(wù)器端的部署。并發(fā)布本地App，方便智能終端跨平臺使用。

3.3 校園電子商務(wù)平臺測試

在服務(wù)器端部署完成后，就可以對系統(tǒng)進(jìn)行測試，測試采取三種方式進(jìn)行，分別是瀏覽器方式、Android系統(tǒng)平臺和 iOS系統(tǒng)平臺測試。

圖3 瀏覽器訪問顯示結(jié)果

圖4 安卓App顯示結(jié)果

圖5 iOS系統(tǒng)平臺顯示結(jié)果

瀏覽器方式可以直接訪問服務(wù)器部署地址進(jìn)行瀏覽，Android平臺和iOS平臺測試可以使用在智能終端上安裝 App應(yīng)用程序的方式進(jìn)行，通過App應(yīng)用程序訪問校園電子商務(wù)系統(tǒng)的各項(xiàng)功能。App端是用戶使用校園電子商務(wù)平臺的入口，因此，對 App應(yīng)用程序的測試是對平臺進(jìn)行測試的重點(diǎn)內(nèi)容。經(jīng)過測試，各平臺下App應(yīng)用程序各項(xiàng)功能滿足需求分析階段的要求，機(jī)器觸摸操作正常、頁面布局正常顯示，程序整體運(yùn)行流暢，未出現(xiàn)明顯的漏洞，用戶體驗(yàn)較好。測試結(jié)果如下，瀏覽器打開方式如圖3所示，Android系統(tǒng)平臺下安裝APP顯示如圖4所示，iOS系統(tǒng)平臺因牽涉到證書問題，只在瀏覽器下進(jìn)行測試，測試結(jié)果如圖5所示。

4 結(jié)語

本研究對基于 HTML5的跨平臺校園電子商務(wù)系統(tǒng)進(jìn)行了詳細(xì)地設(shè)計(jì)與實(shí)現(xiàn)，并在不同平臺進(jìn)行了測試，測試結(jié)果符合預(yù)期要求。隨著電子商務(wù)在國內(nèi)的迅速發(fā)展，校園電子商務(wù)平臺對數(shù)字化校園建設(shè)將起到巨大的推動作用，為高校計(jì)算機(jī)應(yīng)用、電子商務(wù)、物流管理等專業(yè)學(xué)生提供真實(shí)的實(shí)訓(xùn)平臺，將學(xué)習(xí)的理論知識應(yīng)用到實(shí)踐中，提高了學(xué)生的動手操作能力，從而提高就業(yè)競爭力，也為高校師生的學(xué)習(xí)和生活提供便利。

[1]孫豐壘,李響.新手學(xué) HTML5移動開發(fā)--面向 IOS和Android平臺[M]. 北京:清華大學(xué)出版社,2012.

[2]尹亞光. 面向西部地區(qū)的網(wǎng)絡(luò)視音頻傳播技術(shù)研究與設(shè)計(jì)[J].廣播與電視技術(shù),2014(02).

[3]麥志堅(jiān).校園電子商務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].企業(yè)科技與發(fā)展,2016(08).

[4]王瑜.某高校校園電子商務(wù)平臺的設(shè)計(jì)與實(shí)現(xiàn)[D].重慶:電子科技大學(xué),2015.

[5]殷杰.基于HTML5的跨平臺移動家教信息服務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].廣州:華南理工大學(xué)大學(xué),2015.

[6]馬科.HTML5 App商業(yè)開發(fā)實(shí)戰(zhàn)教程——基于WeX5可視化開發(fā)平臺[M].北京:高等教育出版社,2016.