基于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.