基于Flex的電子商務(wù)網(wǎng)站框架設(shè)計與實現(xiàn)

摘 要：該文針對電子商務(wù)這樣典型的以數(shù)據(jù)為中心，存在大量用戶的系統(tǒng)，為了豐富用戶體驗、提高互動性，提出了基于Flex+J2EE框架下的電子商務(wù)網(wǎng)站的設(shè)計方案與實現(xiàn)方法。該方案提升了電子商務(wù)系統(tǒng)的開發(fā)與維護效率，為現(xiàn)有遺留系統(tǒng)引入RIA框架提供了可靠方案。

關(guān)鍵字：RIA Flex 電子商務(wù) 框架

中圖分類號：G71 文獻標識碼：A 文章編號：1674-098X（2012）12（c）-00-01

隨著電子商務(wù)規(guī)模的不斷擴大，電子商務(wù)網(wǎng)站建設(shè)的優(yōu)劣直接影響電子商務(wù)的效果。傳統(tǒng)的Web電子商務(wù)網(wǎng)站一般都采用頁面表現(xiàn)內(nèi)容、由服務(wù)器端傳遞數(shù)據(jù)的開發(fā)模式。其客戶端是瀏覽器，主要是靠服務(wù)器端程序來處理相關(guān)業(yè)務(wù)程序，這種模式易于管理，安全性高，而且硬件花費較少，但同時也存在著缺乏靈活性、服務(wù)器端遇到網(wǎng)絡(luò)帶寬問題、應(yīng)用程序缺乏豐富的用戶界面及高效的多媒體處理性能等缺點。因此，為了滿足用戶更高的、更全方位的使用體驗要求，就需要功能更加強大的表示層。于是，被稱為富互聯(lián)網(wǎng)應(yīng)用（簡稱RIA）的、具有豐富用戶體驗和高度互動性的網(wǎng)絡(luò)應(yīng)用模式應(yīng)運而生。

1 Flex技術(shù)簡介

Flex技術(shù)由MXML、ActionScript及Flex類庫三部分組成。MXML是用來描述Flex程序視圖部分的基于XML的標記語言，主要用來呈現(xiàn)Flex的用戶界面，也包括一些不可見元素，例如數(shù)據(jù)綁定、訪問數(shù)據(jù)源等。ActionScript是一種基于ECMAScript的面向?qū)ο缶幊陶Z言，主要負責實現(xiàn)和控制客戶端程序邏輯。Flex還提供了一個豐富的類庫，包括了各種Flex容器和控件、行為組件、數(shù)據(jù)綁定組件及其他功能組件[1]。這些組件作為輔助，來加快整個開發(fā)的進程。

2 電子商務(wù)網(wǎng)站功能設(shè)計

基于Flex技術(shù)開發(fā)的電子商務(wù)網(wǎng)站，徹底改變了以往的交互過程，讓顧客可以個性化地配置所選商品，并即時得到商品的最終效果，讓顧客的購物過程更方便更快捷，極大的改善了顧客的購物體驗。

2.1 需求分析

對于電子商務(wù)這樣的數(shù)據(jù)流量較大的數(shù)據(jù)庫管理系統(tǒng)類網(wǎng)絡(luò)管理系統(tǒng)，必須做到使用方便、操作靈活等設(shè)計要求。因此，本電子商務(wù)系統(tǒng)針對以下目標進行設(shè)計：（1）界面設(shè)計友好、美觀，采用人機對話的操作方式，對信息的查詢，可以做到方便快捷、靈活準確、數(shù)據(jù)存儲安全可靠。能夠全面展示所有商品，并能展示最新商品及特價商品。（2）可以對商品銷售情況進行排行，以方便顧客了解熱銷商品及幫助企業(yè)領(lǐng)導者做出正確的決策。（3）對用戶輸入的信息，系統(tǒng)可以進行嚴格的數(shù)據(jù)檢驗，盡量排除人為錯誤。（4）系統(tǒng)做到最大限度的易維護性和易操作性。

2.2 主要功能設(shè)計

（1）用戶注冊：用戶填寫注冊資料，進行校對后提交。將信息存入用戶信息表中。（2）個人信息維護：進入后自動顯示該用戶信息，用戶進行修改后提交。并在數(shù)據(jù)庫中對信息進行更新。（3）商品展示：商品可按不同分類進行展示。（4）購物車管理：用戶可以查看購物車，從購物車添加和移除商品。（5）結(jié)賬：用戶可通過結(jié)賬功能進行訂單管理和在線支付。

3 電子商務(wù)系統(tǒng)架構(gòu)的設(shè)計和實現(xiàn)

Flex在企業(yè)級應(yīng)用中與J2EE已經(jīng)實現(xiàn)了完美的結(jié)合，所以本系統(tǒng)采用Flex+ J2EE的系統(tǒng)架構(gòu)[2]。Flex應(yīng)用的客戶端程序作為經(jīng)過編譯的二進制字節(jié)碼文件被部署在基于J2EE的Web服務(wù)器上，當用戶瀏覽器請求這些文件時，它們被下載到用戶的客戶端，由FlashPlayer來執(zhí)行。因此，開發(fā)本系統(tǒng)需要用到的軟件及插件包括：JDK7.0、Tomcat7.0、MyEclipse9.0、FlashBuilder4.6插件、Cairngorm2.2.2、Blaze DS4.0及SQL Server 2000等。

3.1 客戶端架構(gòu)

Flex應(yīng)用程序與傳統(tǒng)的HTML應(yīng)用程序的主要區(qū)別是Flex應(yīng)用程序能夠處理最適合在客戶端運行的程序，如數(shù)據(jù)格式和字段的校驗、數(shù)據(jù)分類和過濾、視頻的合成及特效果等。Flex應(yīng)用程序能夠迅速地對用戶操作做出反應(yīng)，在不同“頁面”之間流暢的過渡，提供連續(xù)而毫無中斷的工作流。為使程序開發(fā)人員更好地開發(fā)和交付RIA應(yīng)用程序，本系統(tǒng)采用Adobe公司開發(fā)的Flex輕量級MVC框架Cairngorm，該框架的結(jié)構(gòu)清晰，并有Adobe官方的支持，所以應(yīng)用非常廣泛。

3.2 服務(wù)器端架構(gòu)

大部分Flex應(yīng)用程序都需要和服務(wù)器進行交互。本系統(tǒng)采用的是基于J2EE平臺的服務(wù)器程序架構(gòu)，Web服務(wù)器采用的Tomcat。為了能和Flex客戶端進行通信，采用的是Adobe公司開發(fā)并提供的一套中間層技術(shù)解決方案——BlazeDS[3]。BlazeDS實際上是一套Java應(yīng)用程序框架，能夠運行在服務(wù)器端，作為Flex實現(xiàn)遠程調(diào)用和實時消息通信的組件，通過AMF網(wǎng)關(guān)（ActionScript Messaging Formatter）來實現(xiàn)ActionScript語言和Java語言的數(shù)據(jù)類型的轉(zhuǎn)換。這樣前端的Flex應(yīng)用程序就可以和后臺應(yīng)用程序相連接，為前端的Flex應(yīng)用程序和后端的數(shù)據(jù)庫搭起橋梁。

3.3 客戶端和服務(wù)器端的通信

構(gòu)建用戶體驗良好的富客戶端，客戶端和服務(wù)器端就必須實現(xiàn)異步交互，這樣用戶才能免去等待服務(wù)器響應(yīng)的煩惱。Flex客戶端和服務(wù)器端的通信編程模型為異步交互提供了支持：即當用戶進行某項操作并等待服務(wù)器返回結(jié)果時，用戶還可以進行其他操作，服務(wù)器返回的結(jié)果將由后臺程序進行處理。另外，F(xiàn)lex客戶端程序的應(yīng)用又是一個整體，而不像傳統(tǒng)網(wǎng)頁由多個頁面組成，因此就沒有頁面刷新的問題。

4 結(jié)語

該文設(shè)計的基于Flex+J2EE框架的電子商務(wù)系統(tǒng)從根本上改善了用戶體驗，提高電子商務(wù)的部署效率，在電子商務(wù)應(yīng)用領(lǐng)域可以幫助企業(yè)提供多元化的重要業(yè)務(wù)效益，用Flex技術(shù)建立電子商務(wù)網(wǎng)站將對企業(yè)十分有益。

參考文獻

[1] 李慶，沈鈞.我的Flex我精通[M].北京：電子工業(yè)出版社，2009.

[2] 彭曉川.基于Flex的RIA與J2EE應(yīng)用的整合[J].應(yīng)用技術(shù)與研究，2007（2）.

[3] Barber S，Tretola R.Adobe Flex高級編程[M].北京：人民郵電出版社，2008.