前后端分離的終端自適應動態表單設計①

喻瑩瑩, 李 新, 陳遠平

1(中國科學院 計算機網絡信息中心,北京 100190)

2(中國科學院大學 計算機與控制學院,北京 100049)

Web表單作為網站和用戶直接交互的平臺,擔負著大量的用戶和網頁后臺數據的更新交互,在系統開發中顯得尤為重要[1]. 傳統Web表單主要采用前端開發人員編寫好靜態表單頁面,后端人員根據html文件實現View層,前端開發也依賴于后端的完整開發以便獲取數據庫中的固定格式的數據字段,這種前后端不分離的開發模式只能滿足特定場景下的需求,操作不靈活、定制困難、功能簡單,一旦需求發生改變,前后端需要重新對接和開發,降低了代碼的復用性,這就大大延長了系統的開發周期,也不利于人員對系統的維護.

同時,由于移動互聯網的飛速發展和瀏覽器功能的日益完善,基于瀏覽器和服務器的B/S架構更加受到開發者的歡迎,很多移動互連設備正在涌現,Web訪問可能會從PC終端以及移動終端發起,但由于移動設備和PC在屏幕大小、分辨率、輸入方式、啟動加載、設備操作方式等方面的差異,在對Web表單進行設計時候必須要考慮如何兼容不同終端的問題,對不同終端的交互設計和交互方式進行統一,實現響應式的Web表單設計,給用戶提供適合不同終端的產品一致性體驗.

針對以上問題,本文提出了一種基于前后端分離的多終端自適應動態表單設計,該設計旨在提高Web表單開發的效率,實現前后端開發的異步進行和及時交互,利用現有的前端組件技術實現表單結構設計的模塊化,滿足不同終端用戶對表單的個性化定制.

1 前后端分離模式

現有的Web開發模式大致分為3種：(1) 后端主導的MVC框架. 如Struts、Spring MVC等. 這種模式做一些同步展現的業務效率很高,但是遇到同步異步結合的頁面與后端開發溝通起來就會比較繁瑣,并且前端重度綁定后端環境,環境成為影響前端開發效率的重要因素; (2) Ajax帶來的SPA,即單頁面應用. 使得用戶能夠在頁面不跳轉的情況下實現與后臺的實時交互,頁面局部刷新,在這種模式下前后端的分工非常清晰,但是前端開發需要大量的JS代碼的組織和View層的綁定,并且對Ajax接口的約定要求更加嚴格,這就制約了開發效率的提高; (3) 前端采用MVVM模式結合后端采用Spring MVC進行開發. 前端負責View和Controller層,后端負責Model層,處理業務和數據等. 為了降低前端開發的復雜度,本文采用第三種開發模式 .

相比于傳統的MVC模式,MVVM模式實現了對數據的雙向綁定,View的變化會自動更新到ViewModel,而ViewModel的變化也會自動同步到View上顯示,這種自動同步是因為ViewModel中的屬性實現了Observer,當屬性值變更時候就能觸發對應的操作[2].MVVM模式的架構圖如圖1所示.

圖1 MVVM架構

通過前后端統一的API接口,后端程序能夠為前端程序(包括PC端程序和移動端應用程序)提供業務數據和服務的支撐,不再關注業務具體的展現邏輯. 而前端的Vue負責組織數據并展示,處理用戶的請求、實現路由跳轉頁面等工作. 這種交互模型結構清晰,關注點分離,很好的實現了前后端的解耦合.

隨著對“前后端分離”概念的深入理解以及相關開發技術的日趨成熟,這種基于前后端分離的終端自適應動態表單設計將克服傳統表單的種種弊端,為使用者提供更加便捷靈活的跨平臺表單服務.

2 動態表單設計

表單應用領域如此廣泛和多樣化,為滿足不同行業和使用者的需求,動態表單應運而生,例如文獻[3]中提出的可視化Web表單編輯器,文獻[4]中提出的三層架構設計模式,現在當下對動態表單的設計大多采用MVC模式,前端使用JavaScript庫 (如 JQuery)和Bootstrap相結合,利用特定格式的文件(即模板)傳給后臺,后臺使用表單引擎解析前端傳過來的文件,然后解析并生成各種配置文件,表單視圖jsp文件,并部署到服務器的web應用目錄中. 但是這樣的設計存在兩方面問題：

(1) JQuery是一個用來開發Web界面的前端庫,直接操作dom元素,較繁瑣. 并且,JQuery有豐富的插件庫,許多功能都是通過開發者自己編寫插件來實現的,但是JQuery并不能向后兼容,這就限制了插件的使用和功能的拓展,后期維護起來較麻煩.

(2) 前后端不完全分離,前端的路由跳轉需要后端控制,服務端需要對Web端進行處理,返回完整的HTML,增加了服務端的復雜度,而Web端需要加載完整的HTML,一定程度上影響了網頁的性能,并且在多終端應用中非常的不友好.

通過前期對動態表單已有技術的調研,針對以上問題,本文提出了一種新的解決方案,使用前端MVVM框架進行視圖的創建和路由控制,后端只需要處理相關業務和數據.

動態表單的設計涉及到前端頁面的布局以及后端數據的處理. 目前符合MVVM的前端框架有很多,其中AngularJS、ReactJS和Vue.js是使用較為普遍的.但是AngularJS過于龐大和全面,而且涉及到了臟檢查,不容易維護和優化; 而ReactJS要求開發者借助JSX在JavaScript中創建DOM,并且不能使用模板;Vue.js相比于前兩者有較為突出的優勢,它采用響應式編程,并實現了組件化和模塊化,極大地方便了開發調試和維護工作.

Vue.js從簡單內建到它的設計,對DOM API許多困難的部分進行了封裝,從而直接操作DOM元素對象,去除繁瑣的DOM操作,只需要關注數據的源頭,而不用擔心DOM元素變化之后的綁定變化,這也是數據驅動的好處之一,但是有利于后期的維護; 同時VueJS官方提供了遷移工具實現Vue1.0向2.0遷移,從而實現了兼容; 另外,Vue.js是基于組件的開發,降低了各個模塊的耦合,提高了復用性. 相比于JQuery等js庫,Vue更加適合樣式多變的動態表單開發.

同時,Vue可以輕松的構建起一個無需服務端渲染就可以展示的網站,不用給后端提供模板,同時提供前端路由功能vue-router,后臺不需要再控制路由的跳轉,將前端業務和后端業務分離. 大多數后臺應用我們都可以做成SPA應用(單頁應用),而單頁應用最主要的特點就是局部刷新,這通過前端控制路由調用AJAX,后臺提供接口便可以實現,在后端沒還沒有提供接口時,前端可以將數據固定或者調用本地的json文件即可,這樣的方式用戶體驗更加友好,網頁加載更加快速,開發和維護成本也降低了不少,效率明顯提升.

通過以上比較,本文選擇了Vue.js作為前端開發工具. 后端使用Spring MVC框架進行開發,Spring MVC是Spring的一個用于構建Web應用的全功能MVC模塊,全注解的方式相比于Struts更加簡單易用,既能保證系統的安全性、可移植性、可靠性,又能減輕系統維護人員日后的工作量,增強系統的復用性和生命力[5].

2.1 整體架構設計

動態表單設計流程如圖2所示.

首先連接數據庫表,根據用戶選擇的標簽組件提取對應的信息,顯示當前表單標簽樣式,接著對表單布局進行設置,如果不設置,則為默認布局; 如果設置,則顯示可供選擇的幾種表單標簽樣式,包括文本框、下拉菜單框、多選框、圖片、音頻視頻等. 然后對表單各項進行編輯,并能夠預覽顯示表單最終樣式,如果用戶滿足,則可確認為最終表單布局. 最后保存提交有關的表單信息,則系統自動把信息保存到數據庫表里面.

為了避免繁瑣的環境配置工作,在這里使用Vue官方出品的腳手架Vue-cli自動構建一個項目,一鍵部署開發環境,根據package.json配置文件從Github上下載開發環境的依賴包列表和相關的配置文件,即可進入到單文件組件的開發模式,同時Webpack前端模塊打包工具使用Loader加載器將項目分解成各個獨立的模塊進行加載,還提供了合并壓縮文件和加密程序的功能[6].

圖2 動態表單設計流程圖

下面就從動態表單的前端設計,后端設計以及相關的數據接口3個方面進行闡述.

2.2 前端設計

動態表單由多個子項構成,每個子項代表實現不同功能的模塊. 表單主要功能是提供項目組件供用戶選擇,并允許用戶對項目組件的各個屬性進行編輯,生成個性化的表單界面,界面要求美觀,簡潔,易于理解.

動態表單中每個子項都可以抽象為一個活動組件,每個活動組件都對應3個模式組件：標簽組件、預覽組件、編輯組件,這3個模式組件展現具體的內容,而具體的樣式和交互由活動html5頁面根據視覺和交互設計來具體展現. 動態表單功能結構如圖3所示. 其中,通過拖動標簽組件來創建對應類型的組件,預覽組件用來展現當前組件各項的內容,編輯組件用來編輯當前選中的組件的各項內容. 點擊組件標簽,覽組件和編輯組件; 點擊這個預覽組件,組件編輯區域會顯示對應的編輯組件; 在編輯組件的文本域中可將活動需要的組件拖入預覽區域后,會生成對應的預以對組件各數據項進行編輯,編輯完成后,根據Vue的數據綁定,文本域的數據變化就會反應到預覽組件的DOM上,從而更新視圖,顯示組件當前的最新內容. 同時ES6提供的for … of語句也極大地方便了對數組的操作,并且避免了DOM操作,對應用性能的優化有好處,同時使用Vuex對狀態進行集中式管理,便于對狀態的跟蹤維護.

圖3 動態表單功能結構圖

由于每個表單控件都可能在不同的場景多次使用,為了提高提高復用性,本文采用組件化的方式,將每個表單項單獨寫在一個通用的Vue組件中,使用vuex臨時存儲用戶輸入的數據,然后根據type用v-if來渲染對應的表單. 其中對組件的使用代碼如下：

formData中存儲了表單中組件的信息,包括組件type屬性以及相應的value值,通過v-model實現View層和Model層數據的雙向綁定,當點擊submit按鈕時,我們便可以取到用戶的輸入值,經過相應的處理后存入后臺數據庫中.

最終設計出來的動態表單界面如圖4所示. 界面的左側顯示了動態表單支持的所有標簽組件,右側是組件屬性的編輯區域,中間則是設計好的表單的預覽區域. 這三個區域全部由Vue組件設計完成,用戶只需要根據自己的需求在右邊編輯區域對表單屬性及內容進行設置,即可在預覽區域看到實時的表單界面效果.

圖4 動態表單界面

2.3 后端設計

后端的實現采用基于Spring MVC的REST架構,客戶端只需要發送AJAX請求,然后服務器端接受該請求并返回JSON數據給客戶端,然后在客戶端進行界面渲染. 后端需要做的工作只有訪問數據庫并給前端提供相應的數據接口即可. 前后端后端交互的架構圖如圖5所示.

圖5 前后端技術架構圖

REST架構下需要重點解決對象序列化的問題,服務端將http請求中的JSON格式參數轉換為普通的Java對象(POJO),同時服務端向瀏覽器返回結果信息時也需要將普通的Java對象(POJO)轉換為JSON字符串才能返回到瀏覽器中進行渲染. 在具體的實現上Spring MVC框架已經為我們提供了這類序列化的特性,只需要在Controller的方法參數中使用@RequestBody注釋定義需要反序列化的參數即可,若要對Controller方法的返回值進行序列化,則需要在該返回值上使用@ResponseBody注釋來定義,然后修改Spring配置文件,使用Jackson來提供JSON的序列化操作.

考慮到與組件相關的數據格式多變,類型不統一,因此對后端數據庫的選擇也是需要考慮的因素.

作為即時通信的動態表單,其通信的數據主體是消息,而消息數據一般是文本、圖片、音頻、視頻等,數據量大且格式多變,數據庫需要滿足高并發讀寫、高擴展性和高可用性,同時還要注意海量數據的高效率存儲和訪問,傳統的關系型數據庫的ACID(原子性、一致性、隔離性、持久性)四大特性在這里就滿足不了對復雜數據項的查詢以及存取. 而NoSQL數據庫有專門的針對應用程序設計的數據模型,例如MongoDB的文檔是類似JSON的BSON格式數據,可以支持非常復雜的數據結構類型,并且它還支持模式自由,使開發者不需要事先定義好數據的結構,可以根據需要隨時添加字段,同時數據庫中也可以存儲不同結構的文件[7].

例如我們創建1個單行文本的組件,在右側設置組件的屬性字段,如果要添加1個字段為defContent表示文本默認內容,代碼如下：

則前端頁面用ajax請求后臺的方法傳的data數據就可以按照如下方式處理：

即可將JSON字符串傳給后端.

由于MongoDB中是以BSON數據格式進行存儲的,所以首先要將JSON字符串轉換成DBObject或者Document對象,然后再對MongoDB數據庫進行更新,這里我們以后者為例進行說明,關鍵代碼如下：

同時,從數據庫中取出的數據也需要轉換為JSON格式才能夠被前端解析器解析并渲染瀏覽器界面,代碼如下：

前端就可以接收到一個包含JSON對象的數組.

綜合以上分析,選擇MongoDB數據庫來存儲組件的數據項字段,同時使用JSON數據接口進行前后端通信,從而完成前后端數據的交互.

3 終端自適應

移動互聯網風靡全球的時代,表單的設計不僅需要在PC端有完善的功能,在移動設備上也要有良好的適應性. 由于移動操作系統的多樣性,在屏幕尺寸、分辨率等方面和PC端也不盡相同,同樣的內容,要在大小迥異的屏幕上都呈現出滿意的效果,并不是一件容易的事情. 很多網站的解決方案是為不同的設備提供不同的網頁,于是便出現了同一個系統有PC版本、mobile版本、iPhone/iPad版本,這樣做固然保證了效果,但是工作量大,同時要維護好幾個版本,而且如果一個網站有多個入口,會大大增加架構設計的復雜度.針對以上問題,本文結合HTML5和CSS3新技術,提出了 “一次設計,普遍適用”的設計方案,讓網頁自動適應不同大小的屏幕,根據屏幕寬度自動調整布局.

響應式網頁設計的實現主要通過以下2個方面進行實現：(1) 使用流式柵格布局; (2) 使用彈性盒子布局模型[8]. Bootstrap提供了一套響應式、移動設備優先的流式柵格布局,隨著屏幕或者視口尺寸的增加,系統會自動分為最多為12列,該布局僅僅定義容器的大小,通過一系列的行與列的組合創建頁面布局,再調整內外邊距,最后結合媒體查詢,就制作出了強大的響應式網絡系統. 彈性盒子布局在原有的DIV+CSS布局的基礎上摒棄了像素單位,通過相對單位進行布局,如使用百分比和em,彈性盒子由彈性容器和彈性子元素組成,彈性盒子可以在頁面結構不變的情況下進行顯示順序的調整,以適應多終端的需要[9]. 在傳統的布局方式中,block布局是把塊在垂直方向從上到下依次排列的,而inline布局則是在水平方向來排列,彈性盒子布局沒有這樣內在的方向限制,可以由開發人員自由操作 .

以上兩種方式都能實現多終端自適應表單的設計,但是流式柵格布局需要設計者在設計之前就要對表單各功能模塊之間的排列和布局有詳細的規劃,一旦按照規劃制作完成,就不易進行修改了,對于表單布局的設計有一定的限制. 而彈性盒子模型的布局模式更加自由,不受柵格布局固定模式的限制,提高了動態表單的交互性. 所以本文選擇彈性盒子模型來對表單布局進行設計.

由于瀏覽器窗口和移動設備窗口的分辨率不同,必須要為智能手機窗口的布局進行優化. 不僅表格的大小要縮減,其呈現的順序也要進行相應的改變. 根據表單的各個模塊的功能,本文采用了彈性盒子布局中的Holy Grail Layout(圣杯布局). 該布局從上到下分為三個主要的部分,頭部(header)、軀干(body)、尾部(footer). 其中軀干部分有分為水平的三個部分,依次為左側欄、主欄和右側欄分別對應動態表單的組件標簽選項、表單預覽區域、表單屬性設置選項,主欄部分是自適應的寬度,左側欄和右側欄寬度是固定的. 如果是移動端的小屏幕,則軀干的三欄就會自動的垂直疊加. 相關代碼如下：

如果是在移動端,則將布局轉換為垂直的結構,代碼如下：

圖6展現了動態表單從瀏覽器窗口到移動設備窗口的布局轉換.

結合HTML5+CSS3 Web表單交互設計框架和模式,適用性強、界面友好、可維護性高,是終端自適應動態表單設計的關鍵部分.

圖6 多終端表單布局圖

4 結語與展望

本文從實際需求出發,設計并初步實現了一種基于前后端分離的動態表單生成系統,表單根據數據庫的字段動態生成,解決了由于業務變化需要對表單字段進行修改的問題,并且針對跨平臺多終端的問題提出了自適應的技術解決方案,嘗試通過引入當下流行的前端框架和技術手段來適應目前多終端的應用格局.

但是由于前端組件庫發展還沒有很成熟,動態表單的設計并沒有很完善,同時兩種終端自適應的方案對瀏覽器的兼容性和開發者的技術水平都有比較高的要求,因此對于動態表單的設計在以后的工作中還需要不斷的改進和完善.

1 伍杰華. 基于CSS3的HTML5網頁表單研究與定制. 計算機與信息技術,2011,(12)：53-55.

2 易劍波. 基于MVVM模式的WEB前端框架的研究. 信息與 電 腦,2016,(19)：76-77,84. [doi：10.3969/j.issn.1003-9767.2016.19.041]

3 周暉,尹建偉,陳剛,等. 基于Struts框架的Web表單快速開發平臺. 計算機應用研究,2004,21(8)：191-194.

4 吳昶成,談華宇,邱小平. 科研管理系統中動態表單技術的應用與實現. 現代計算機,2015,(7)：78-80.

5 洪英漢,劉竹松,龍桂和. 基于SSH框架的動態表單設計與實現. 現代計算機,2009,(9)：186-188.

6 麥冬,陳濤,梁宗灣. 輕量級響應式框架Vue.js應用分析. 信息與電腦,2017,(7)：58-59.

7 呂林. 基于MongoDB的應用平臺的研究與實現[碩士學位論文]. 北京：北京郵電大學,2015.

8 梁仲智. 基于HTML5的跨終端Web生成系統的設計與實現[碩士學位論文].廣州：中山大學,2013.

9 謝冠懷. 辨析響應式網頁的浮動布局和伸縮盒子布局. 現代計算機,2014,(15)：42-46,50.