前后端分離的終端自適應(yīng)動態(tài)表單設(shè)計①

喻瑩瑩, 李 新, 陳遠平

1(中國科學(xué)院 計算機網(wǎng)絡(luò)信息中心,北京 100190)

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

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

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

針對以上問題,本文提出了一種基于前后端分離的多終端自適應(yīng)動態(tài)表單設(shè)計,該設(shè)計旨在提高Web表單開發(fā)的效率,實現(xiàn)前后端開發(fā)的異步進行和及時交互,利用現(xiàn)有的前端組件技術(shù)實現(xiàn)表單結(jié)構(gòu)設(shè)計的模塊化,滿足不同終端用戶對表單的個性化定制.

1 前后端分離模式

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

相比于傳統(tǒng)的MVC模式,MVVM模式實現(xiàn)了對數(shù)據(jù)的雙向綁定,View的變化會自動更新到ViewModel,而ViewModel的變化也會自動同步到View上顯示,這種自動同步是因為ViewModel中的屬性實現(xiàn)了Observer,當(dāng)屬性值變更時候就能觸發(fā)對應(yīng)的操作[2].MVVM模式的架構(gòu)圖如圖1所示.

圖1 MVVM架構(gòu)

通過前后端統(tǒng)一的API接口,后端程序能夠為前端程序(包括PC端程序和移動端應(yīng)用程序)提供業(yè)務(wù)數(shù)據(jù)和服務(wù)的支撐,不再關(guān)注業(yè)務(wù)具體的展現(xiàn)邏輯. 而前端的Vue負(fù)責(zé)組織數(shù)據(jù)并展示,處理用戶的請求、實現(xiàn)路由跳轉(zhuǎn)頁面等工作. 這種交互模型結(jié)構(gòu)清晰,關(guān)注點分離,很好的實現(xiàn)了前后端的解耦合.

隨著對“前后端分離”概念的深入理解以及相關(guān)開發(fā)技術(shù)的日趨成熟,這種基于前后端分離的終端自適應(yīng)動態(tài)表單設(shè)計將克服傳統(tǒng)表單的種種弊端,為使用者提供更加便捷靈活的跨平臺表單服務(wù).

2 動態(tài)表單設(shè)計

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

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

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

通過前期對動態(tài)表單已有技術(shù)的調(diào)研,針對以上問題,本文提出了一種新的解決方案,使用前端MVVM框架進行視圖的創(chuàng)建和路由控制,后端只需要處理相關(guān)業(yè)務(wù)和數(shù)據(jù).

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

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

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

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

2.1 整體架構(gòu)設(shè)計

動態(tài)表單設(shè)計流程如圖2所示.

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

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

圖2 動態(tài)表單設(shè)計流程圖

下面就從動態(tài)表單的前端設(shè)計,后端設(shè)計以及相關(guān)的數(shù)據(jù)接口3個方面進行闡述.

2.2 前端設(shè)計

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

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

圖3 動態(tài)表單功能結(jié)構(gòu)圖

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

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

最終設(shè)計出來的動態(tài)表單界面如圖4所示. 界面的左側(cè)顯示了動態(tài)表單支持的所有標(biāo)簽組件,右側(cè)是組件屬性的編輯區(qū)域,中間則是設(shè)計好的表單的預(yù)覽區(qū)域. 這三個區(qū)域全部由Vue組件設(shè)計完成,用戶只需要根據(jù)自己的需求在右邊編輯區(qū)域?qū)Ρ韱螌傩约皟?nèi)容進行設(shè)置,即可在預(yù)覽區(qū)域看到實時的表單界面效果.

圖4 動態(tài)表單界面

2.3 后端設(shè)計

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

圖5 前后端技術(shù)架構(gòu)圖

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

考慮到與組件相關(guān)的數(shù)據(jù)格式多變,類型不統(tǒng)一,因此對后端數(shù)據(jù)庫的選擇也是需要考慮的因素.

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

例如我們創(chuàng)建1個單行文本的組件,在右側(cè)設(shè)置組件的屬性字段,如果要添加1個字段為defContent表示文本默認(rèn)內(nèi)容,代碼如下：

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

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

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

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

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

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

3 終端自適應(yīng)

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

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

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

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

如果是在移動端,則將布局轉(zhuǎn)換為垂直的結(jié)構(gòu),代碼如下：

圖6展現(xiàn)了動態(tài)表單從瀏覽器窗口到移動設(shè)備窗口的布局轉(zhuǎn)換.

結(jié)合HTML5+CSS3 Web表單交互設(shè)計框架和模式,適用性強、界面友好、可維護性高,是終端自適應(yīng)動態(tài)表單設(shè)計的關(guān)鍵部分.

圖6 多終端表單布局圖

4 結(jié)語與展望

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

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

1 伍杰華. 基于CSS3的HTML5網(wǎng)頁表單研究與定制. 計算機與信息技術(shù),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表單快速開發(fā)平臺. 計算機應(yīng)用研究,2004,21(8)：191-194.

4 吳昶成,談華宇,邱小平. 科研管理系統(tǒng)中動態(tài)表單技術(shù)的應(yīng)用與實現(xiàn). 現(xiàn)代計算機,2015,(7)：78-80.

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

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

7 呂林. 基于MongoDB的應(yīng)用平臺的研究與實現(xiàn)[碩士學(xué)位論文]. 北京：北京郵電大學(xué),2015.

8 梁仲智. 基于HTML5的跨終端Web生成系統(tǒng)的設(shè)計與實現(xiàn)[碩士學(xué)位論文].廣州：中山大學(xué),2013.

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