夏艷秋，袁汝華

(河海大學(xué)商學(xué)院，江蘇 南京 211100)

0 引言

隨著企業(yè)WAP在全球掀起的移動互聯(lián)網(wǎng)浪潮方興未艾之時，另一場移動互聯(lián)網(wǎng)的革命之火已挑起了更大的關(guān)注度。這場“革命”是以智能手機中的APP應(yīng)用為代表，相較于WAP站點的不溫不火，手機APP擁有十分強勁的發(fā)展勢頭［1］。

Native App系統(tǒng)是用Android開發(fā)完成的，雖然近兩年發(fā)展較快，但是相關(guān)技術(shù)不夠成熟，對開發(fā)人員的技術(shù)水平要求很高。如58同城與京東的應(yīng)用屬于Native APP，他們的開發(fā)時間長、人員需求量大、成本高，這些對于很多中小型公司而言望而卻步。Web系統(tǒng)開發(fā)經(jīng)歷了由最初的JSP+Servlet［2］到時下流行的 SSH 框架［3］(Struts+Spring+Hibernate，其中也包含S1SH到S2SH)的過程，但是S2SH架構(gòu)需要過多的系統(tǒng)配置，冗余代碼多。

針對2個系統(tǒng)開發(fā)過程中經(jīng)常遇到開發(fā)人員稀缺、成本太高、進度太慢、門檻障礙太多、平臺適配難、開發(fā)周期長等困難。本文提出一種新的開發(fā)模式——JFinal框架和HTML5:HTML5技術(shù)支持跨平臺以及多標簽的特性，只需將HTML5制作成模板，就可以形成類似 Native APP效果;JFinal框架是對S2SH做了再次封裝，將其中需要用到的模塊提取出來，擯棄了很多冗余模塊，配置簡潔明了，可以做到數(shù)據(jù)庫的即改即用，從而大大地縮短了開發(fā)周期，降低了對技術(shù)人員的技能要求。因此，所有的應(yīng)用在線開發(fā)，無需搭建環(huán)境，人人都能在短時間內(nèi)輕松“開發(fā)”出個性化的手機應(yīng)用。

1 相關(guān)技術(shù)

1.1 HTML5

HTML是構(gòu)成網(wǎng)頁文檔的主要語言，它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁的本質(zhì)就是HTML，通過結(jié)合一些Web技術(shù)，可以創(chuàng)造出功能強大的網(wǎng)頁［4］。HTML5作為下一代的 HTML，在原HTML基礎(chǔ)上不僅強化了Web網(wǎng)頁的表現(xiàn)性能，還追加了本地數(shù)據(jù)庫等Web應(yīng)用的功能，如語義化的標簽、音頻和視頻的直接支持、矢量繪圖、支持網(wǎng)頁內(nèi)容編輯、Web Socket、地理定位、多線程處理以及離線存儲等［5］。HTML5提供了這些新的元素和屬性，有利于搜索引擎的索引整理，同時更好地幫助小屏幕裝置和視障人士使用。手機應(yīng)用前臺展示采用HTML5，解決了手機Web頁面生硬問題，增強了用戶的體驗性。

1.2 JFinal框架

JFinal框架的架構(gòu)由空間架構(gòu)和邏輯架構(gòu)組成?？臻g架構(gòu)采用的是微內(nèi)核全方位擴展架構(gòu)，它由Handler、Interceptor、Controller、Render、Plugin 五大部分組成。每個部分都是基于接口實現(xiàn)的，支持完整的自定義，擴展性強，使用靈活，彼此獨立同時又互相協(xié)助，使得手機應(yīng)用制作平臺的管理系統(tǒng)能分模塊開發(fā)，加快了研發(fā)的進度。邏輯架構(gòu)采用的是一個經(jīng)典的MVC模式演化，其中包括 HttpServletRequest、HttpServletResponse(即客戶端請求與響應(yīng))、所有請求的攔截器、請求處理器(即對所有請求的公共處理)、動作處理器(它是一個AOP+Command模式變種，由ActionInvocation進行調(diào)度，先執(zhí)行攔截器，最后執(zhí)行具體方法)［6］邏輯架構(gòu)使得管理系統(tǒng)層次分明，這樣開發(fā)人員能在系統(tǒng)出錯時很快查出錯誤原因。

JFinal框架是功能十分全面的Web+ORM開發(fā)框架，它遵循 COC原則和 Restful規(guī)范，零配置，無XML，采用ActiveRecord實現(xiàn)數(shù)據(jù)庫操作支持，只需修改一個配置類就可以完成修改數(shù)據(jù)庫的操作，提高了系統(tǒng)的開發(fā)效率［7］。

手機應(yīng)用開發(fā)平臺是一個新穎的開發(fā)平臺，由于技術(shù)人員的能力和時間有限，所以一個開發(fā)周期短、配置簡化以及可以快速調(diào)試的輕量級框架是首要選擇。基于JFinal框架的開發(fā)具有上述的零配置、路由模式、快速調(diào)試、輕量級代碼、開發(fā)迅速、代碼量少、學(xué)習(xí)簡單、功能強大、易擴展等特點，因此筆者采用JFinal框架進行研究。

2 基于HTML5的JFinal框架

HTML5技術(shù)可以進行跨平臺的使用，能夠彌補JFinal框架在頁面顯示以及音頻支持方面的不足。同時JFinal框架所采用的MVC架構(gòu)［8］，其設(shè)計精巧、零配置以及易擴展等特性，符合HTML5跨平臺的設(shè)計思想。圖1是基于HTML5的JFinal的框架結(jié)構(gòu)圖，手機端和表現(xiàn)層分別為手機應(yīng)用和管理后臺提供展示，攔截層過濾請求，處理層處理請求，控制層進行業(yè)務(wù)處理，模型層負責(zé)完成數(shù)據(jù)的存儲。

圖1 基于HTML5的JFinal的框架結(jié)構(gòu)圖

2.1 HTML5 手機端

手機端作為整個架構(gòu)的最外層，也是用戶最為關(guān)注的。手機應(yīng)用主要采用HTML5展示，在PC上開發(fā)完成即可移植到手機上使用?？梢愿鶕?jù)不同屏幕的寬度，自動調(diào)整布局，避免了針對不同屏幕要重新開發(fā)的問題。同時HTML5引入了一些全新的表單輸入對象，包括日期、URL、Email地址，而其它的對象增加了對非拉丁字符的支持。除此之外，HTML5還引入了微數(shù)據(jù)，使語義Web的處理更為簡單［9］?？偟膩碚f，這些與結(jié)構(gòu)有關(guān)的改進可以使系統(tǒng)開發(fā)人員創(chuàng)建更干凈、更易管理的網(wǎng)頁。

2.2 JFinal表現(xiàn)層

JFinal表現(xiàn)層是將手機開發(fā)的請求發(fā)送給攔截層過濾，同時將攔截層返回的數(shù)據(jù)組包并展示。該層負責(zé)將服務(wù)端的數(shù)據(jù)組裝成客戶端需要的數(shù)據(jù)格式，然后response到客戶端。支持多種視圖的渲染:FreeMark、Jsp、VELOCITY以及自定義。JS控件庫可以采用jQuery-eazyUI與dwz中的一個，模板則使用freeMark或者JSP。

2.3 JFinal攔截層

JFinal攔截器是所有請求的攔截器，相當于是一個閘口。表現(xiàn)層中的所有請求和反饋都需要經(jīng)過攔截層。與此同時，它也是一個Http的過濾器。在服務(wù)器啟動時執(zhí)行一次，完成初始化框架的全局配置;在服務(wù)器停止時運行一次，完成銷毀框架的全局配置并攔截所有的客戶端請求。

2.4 JFinal處理層

JFinal處理層是對攔截層過濾后的請求進行邏輯處理，即將過濾后的請求按類型區(qū)分編排后發(fā)送到控制層上。它是一個責(zé)任鏈模式變種，由初始配置的Handler以及框架默認的ActionHandler構(gòu)成。JFinal處理層包含用戶權(quán)限的控制和信息的安全驗證，主要負責(zé)通過分析ActionInvocation調(diào)度后的請求，找到并執(zhí)行對應(yīng)的Action。

2.5 JFinal控制層

JFinal控制層是對經(jīng)過處理層的請求進行業(yè)務(wù)處理，并將處理完的請求下發(fā)到模型層，同時將模型層返回的數(shù)據(jù)發(fā)送給處理層。這些操作主要是通過對Struts2的再次封裝來實現(xiàn)的。所有的控制類Action都是繼承自Controller。頁面請求需要先執(zhí)行攔截器(Interceptor)，然后對其進行過濾，再由ActionInvocation進行調(diào)度。

2.6 JFinal模型層

JFinal模型層是將控制層處理完的數(shù)據(jù)進行數(shù)據(jù)庫的存儲操作，并將所需要的數(shù)據(jù)反饋給控制層。它是對數(shù)據(jù)庫所對應(yīng)的表結(jié)構(gòu)進行實例化，包括實體模型的定義、DB+ActiveRecord模式數(shù)據(jù)庫操作的支持、從請求中解析出對應(yīng)參數(shù)構(gòu)造的Model實例。Model的基類封裝了通用的數(shù)據(jù)庫操作的方法，實體類通過繼承Model就可以進行數(shù)據(jù)庫的操作。DB+ActiveRecord模式實質(zhì)上是一個數(shù)據(jù)庫操作工具類。其中ActiveRecord是指在model中加入了數(shù)據(jù)庫操作的功能，如add、remove、update等通用的處理統(tǒng)一交由最上層的基類Model進行。所以基于ActiveRecord的Model無需定義屬性，無需定義 getter、setter方法，無需XML配置，無需Annotation配置，從而極大降低了代碼量。

3 手機應(yīng)用開發(fā)平臺設(shè)計

3.1 手機應(yīng)用開發(fā)平臺業(yè)務(wù)流程

手機應(yīng)用開發(fā)平臺主要是通過從后臺管理系統(tǒng)進行手機應(yīng)用內(nèi)容的添加，然后打包生成手機安裝軟件。該系統(tǒng)不僅支持在線智能手機應(yīng)用開發(fā)的可視化，而且可以快速生成手機應(yīng)用(即從手機頁面編輯到應(yīng)用的流程設(shè)計，無需編碼，所見即所得，不用學(xué)習(xí)SDK，不用掌握Eclipse，不用搭建環(huán)境，就能制作出一個APP)。手機應(yīng)用端采用Web展示，修復(fù)程序漏洞以及新增功能均不需要升級軟件，從而提高用戶體驗效果。圖2詳細介紹了手機應(yīng)用開發(fā)票平臺的業(yè)務(wù)流程，包括手機應(yīng)用平臺的后臺管理系統(tǒng)以及手機端應(yīng)用。

圖2 手機應(yīng)用開發(fā)平臺業(yè)務(wù)流程

3.2 平臺功能設(shè)計

手機應(yīng)用開發(fā)平臺主要分為2個部分，分別是用于快速開發(fā)手機應(yīng)用的后臺管理系統(tǒng)和安裝在手機端的應(yīng)用。后臺管理系統(tǒng)包括風(fēng)格管理、內(nèi)容管理、導(dǎo)航管理、用戶管理、訂單管理、意見反饋管理、客戶端管理。手機端應(yīng)用僅負責(zé)展示后臺添加的內(nèi)容信息。圖3介紹了手機應(yīng)用開發(fā)平臺的功能結(jié)構(gòu)以及各個功能模塊之間的關(guān)系。

圖3 手機應(yīng)用開發(fā)平臺功能結(jié)構(gòu)圖

(1)風(fēng)格管理。

風(fēng)格管理主要是用于設(shè)計手機端應(yīng)用的頁面展示風(fēng)格，主要包含導(dǎo)航圖片顯示設(shè)置、logo圖片設(shè)置、切換樣式設(shè)置、主題設(shè)置等。其中導(dǎo)航圖片顯示設(shè)置是設(shè)置手機應(yīng)用是否有上下導(dǎo)航以及是否顯示上下導(dǎo)航的圖片。logo圖片設(shè)置是設(shè)置手機應(yīng)用左上角的logo圖片。主題設(shè)置最為重要，用戶可以通過它來改變整個App的主題色彩。

(2)內(nèi)容管理。

內(nèi)容管理是對App所展示的全部內(nèi)容的管理。內(nèi)容管理包括綜合頁管理、欄目管理、模型管理等3個部分。模型管理是靜態(tài)頁面管理，通過該功能可以添加企業(yè)信息(如“關(guān)于我們”、“電子名片”)等靜態(tài)頁面內(nèi)容。App展示的動態(tài)內(nèi)容(如“新聞資訊”、“圖片集合”、“企業(yè)產(chǎn)品展”等)是通過欄目管理來添加的，同時還包括購物車和支付模塊。綜合頁管理即首頁管理，通過該功能可以將滾動圖片、欄目管理中所添加的信息以及廣告鏈接到首頁等。

(3)導(dǎo)航管理。

導(dǎo)航管理是管理App的上下導(dǎo)航信息。通過導(dǎo)航管理可以將內(nèi)容管理中添加的信息放置在導(dǎo)航中。如內(nèi)容管理中的行業(yè)資訊欄目信息，可以通過導(dǎo)航管理模塊添加到導(dǎo)航中，并將導(dǎo)航名稱命名為行業(yè)資訊，這樣行業(yè)資訊可以直觀地展示出來。

(4)用戶管理。

用戶是App的使用者，通過注冊或登錄方式可以查看購物車、個人中心等信息。用戶管理是對App上注冊的用戶進行管理。通過該功能可以增加、修改、刪除、查詢用戶。

(5)訂單管理。

訂單管理是針對有商品支付功能的App所產(chǎn)生的訂單進行管理。用戶通過App將需要購買的商品加入購物車，再將加入到購物車中的商品生成訂單并支付，這時通過訂單管理可以查看用戶在App上購買商品的訂單信息。

(6)意見反饋管理。

意見反饋主要功能是在App里提供一個接入口讓用戶來填寫所要反饋的信息，要求:①易查找;②易操作，用戶通過簡單的打開、輸入并提交即可完成;③界面友好，即人性化的操作可以增強用戶體驗性。通過該功能可以直觀地查看用戶對App的看法和意見，有助于App開發(fā)者更好地完善其產(chǎn)品。

(7)客戶端管理。

客戶端管理是為開發(fā)者提供App設(shè)置和程序打包功能。通過App設(shè)置可以填寫App的名稱、配置圖標以及加載圖片。程序打包負責(zé)將前面所添加的內(nèi)容打包成App程序，記錄App打包的次數(shù)以及最近一次的打包時間，方便了解程序打包的最新情況。打包成功后會自動生成二維碼圖片以及下載鏈接提供給不同的用戶(手機用戶或電腦用戶)。

3.3 平臺數(shù)據(jù)庫設(shè)計

設(shè)計手機應(yīng)用開發(fā)平臺中，由于業(yè)務(wù)功能比較復(fù)雜，所以數(shù)據(jù)庫的設(shè)計一定要清晰明了、層次分明。這對于系統(tǒng)安全、數(shù)據(jù)訪問效率、占用空間具有重要意義。如果設(shè)計中存在不合理或者數(shù)據(jù)冗余的情況，對于系統(tǒng)的整體運營是一個很大的隱患。手機應(yīng)用開發(fā)平臺使用MySQL數(shù)據(jù)庫［10］。為了便于分層，針對各個管理功能，拆分出了不同的表結(jié)構(gòu)。數(shù)據(jù)庫表主要包含App表、App欄目表、App商品表、App用戶表等25張表。這里對主要的幾個數(shù)據(jù)庫表進行描述:(1)App表包括ID、代理商ID、商務(wù)人員聯(lián)系電話、商務(wù)人員姓名、Android是否打包、iOS是否打包、授權(quán)開始時間、授權(quán)終止時間、注冊時間、應(yīng)用路徑、英文關(guān)鍵詞、中文關(guān)鍵詞、聯(lián)系人姓名、狀態(tài)、創(chuàng)建日期等;(2)App欄目表包括ID、欄目ID、應(yīng)用ID、欄目名稱、欄目顯示名稱、欄目類型、模板、圖標、模塊類型信息、狀態(tài)等;(3)App商品表包括:ID、應(yīng)用ID、應(yīng)用用戶ID、標題、子標題、價格、內(nèi)容、發(fā)布時間、圖片1地址、圖片2地址、排序、熱點、是否置頂、是否推薦、是否首頁推廣、狀態(tài)等;(4)App用戶表包括:ID、應(yīng)用ID、用戶名、密碼、真實姓名、公司名稱、聯(lián)系人電話、狀態(tài)、用戶種類等。

4 手機應(yīng)用開發(fā)平臺實現(xiàn)

4.1 JFinal框架搭建

手機應(yīng)用開發(fā)平臺采用JFinal框架。使用JFinal框架無需配置，只要在使用時初始化JFinal即可。在開發(fā)過程中充分運用JFinal所具有的功能，如表單數(shù)據(jù)自動綁定、DB+ActiveRecord、事務(wù)提交、攔截器、緩存處理、延遲加載等，真正體現(xiàn)了JFinal快速開發(fā)的設(shè)計。JFinal的配置在web.xml中體現(xiàn)如下:

如上代碼中過濾器配置類似Struts2，頁面所有請求需要通過JFinalFilter過濾方能進入控制器的調(diào)度?？刂破鞯暮诵呐渲檬峭ㄟ^如上代碼實現(xiàn)的。JFinal的路由配置、常量配置、插件配置均是在CommonConfig中完成的。代碼如下:

4.2 HTML5 展示搭建

HTML5能夠很好地進行跨平臺的使用，可以自動識別屏幕寬度，并做出相應(yīng)調(diào)整，同時可以很好地替代Flash和Silverlight，并被大量應(yīng)用于移動應(yīng)用程序上。使用HTML5只需要添加相應(yīng)功能的標簽即可，無需任何配置。手機應(yīng)用中圖片的拖放功能，使用如下代碼即可:

通過JFinal框架的后臺管理系統(tǒng)，將用戶設(shè)置的內(nèi)容轉(zhuǎn)換為HTML5頁面代碼。當App打開時，手機端接收的是轉(zhuǎn)換后的頁面代碼塊，代碼塊組合成一個展示頁面，所有的相關(guān)設(shè)置均是在后臺完成。如制作App時，選擇主題樣式，后臺將所選擇的主題樣式的頁面代碼存入數(shù)據(jù)庫中，上述代碼就是制作App時選擇圖片拖放效果時所生成的代碼。

5 結(jié)束語

基于JFinal框架和HTML5技術(shù)的手機應(yīng)用開發(fā)平臺設(shè)計，主要是通過JFinal的架構(gòu)體系對開發(fā)平臺的管理系統(tǒng)進行設(shè)計，利用HTML5在手機端的展示優(yōu)勢來完成平臺實現(xiàn)。JFinal框架很好地解決了Struts2+Spring+Hibernate帶來的弊端，如對技術(shù)研發(fā)人員經(jīng)驗要求高、編程環(huán)境配置較多等，提高了后臺管理系統(tǒng)搭建的效率。HTML5優(yōu)化了Web APP的展示效果。這樣的設(shè)計在很大程度上解決了開發(fā)人員稀缺、開發(fā)進程慢、門檻障礙等問題。由于HTML5所構(gòu)建的網(wǎng)頁和其他語言編寫的網(wǎng)頁一樣容易泄露一些敏感數(shù)據(jù)，所以在HTML5安全方面還需要有后續(xù)的研究。

［1］龍娛平.APP取代企業(yè)Web網(wǎng)站成為手機主流移動應(yīng)用［DB/OL］.http://www.techweb.com.cn/news/2012-01-05/1138573.shtml，2012-01-05.

［2］王淑蓉，趙晉松，范惠敏，等.JSP技術(shù)在Web應(yīng)用中的研究［J］.西北電力技術(shù)，2003，31(3):48-50.

［3］張麗君，齊建卓，吳宏波.基于MVC模式的Struts框架在Web系統(tǒng)開發(fā)中的應(yīng)用［J］.內(nèi)蒙古大學(xué)學(xué)報:自然科學(xué)版，2005，36(1):89-93.

［4］劉宇，閔棟.HTML5在移動互聯(lián)網(wǎng)中的機遇與挑戰(zhàn)［J］.電信網(wǎng)技術(shù)，2013(5):20.

［5］劉華星，楊庚.HTML5-下一代Web開發(fā)標準研究［J］.計算機技術(shù)與發(fā)展，2011，21(8):54-58，62.

［6］OPENKK.Java極速 Web框架 JFinal1.0.7正式發(fā)布［EB/OL］. http://www.open-open.com/news/view/13a6403，2012-06-08.

［7］詹波.Java極速 Web+ORM 框架 JFinal［DB/OL］.http://www.oschina.net/p/jfinal，2013-03-18.

［8］劉方君.基于MVC三層架構(gòu)模式的研究與應(yīng)用［D］.廣東:廣東工業(yè)大學(xué)，2011.

［9］儲節(jié)旺，黃潔欽.HTML5與移動信息服務(wù)［J］.情報理論與實踐，2013，36(7):24-25.

［10］趙喆，卞藝杰，李亞冰，等.基于S2SH和SOA科技查新管理平臺的設(shè)計［J］.武漢理工大學(xué)學(xué)報:信息與管理工程版，2013，35(1):56-60.