宋奕爽，劉紹華

（北京郵電大學(xué)電子工程學(xué)院，北京 100876）

WEB 端可視化表單生成引擎的設(shè)計(jì)與實(shí)現(xiàn)

宋奕爽，劉紹華

（北京郵電大學(xué)電子工程學(xué)院，北京 100876）

近年來(lái)，公司管理辦公系統(tǒng)的主要工作已經(jīng)從硬件設(shè)施的建設(shè)逐步轉(zhuǎn)化為系統(tǒng)軟件應(yīng)用的開(kāi)發(fā)，而表單一直是公司管理和業(yè)務(wù)獲取信息的重要途徑，為了簡(jiǎn)化工作流程和提高工作效率，可以開(kāi)發(fā)一個(gè)通用的 Web可視化表單生成引擎以靈活適用不同的表單需求。本文設(shè)計(jì)實(shí)現(xiàn)的 Web端可視化表單生成引擎，采用組件化模塊化開(kāi)發(fā)，大大提升了開(kāi)發(fā)的效率。同時(shí)在功能上實(shí)現(xiàn)了基本的拖拽表單行以及各類組件，通過(guò)選項(xiàng)設(shè)置模板設(shè)置表單列和各類組件對(duì)應(yīng)的相關(guān)屬性，以及本地儲(chǔ)存與本地預(yù)覽的功能，真正意義上實(shí)現(xiàn)了通過(guò)“可視化”操作來(lái)快速、靈活、簡(jiǎn)單的生成可在Web系統(tǒng)里通用的表單。

WEB開(kāi)發(fā)；表單生成；模塊化；拖拽生成

0 引言

近年來(lái)，公司管理辦公系統(tǒng)的主要工作已經(jīng)從硬件設(shè)施的建設(shè)逐步轉(zhuǎn)化為系統(tǒng)軟件應(yīng)用的開(kāi)發(fā)，如何通過(guò)軟件應(yīng)用為用戶提供更加方便、快捷、有效的服務(wù)是該領(lǐng)域研究的重點(diǎn)。如今公司的辦公管理系統(tǒng)大多是Web在線管理平臺(tái)，而表單一直是公司管理和業(yè)務(wù)獲取信息的重要途徑，隨著業(yè)務(wù)的不斷擴(kuò)張與深入，信息采集、分類、處理等的需求使表單制作、分發(fā)、獲取與提交方式已經(jīng)難以滿足當(dāng)前的業(yè)務(wù)需求。為了簡(jiǎn)化工作流程和提高工作效率，可以開(kāi)發(fā)一個(gè)通用的Web可視化表單生成引擎以靈活適用不同的表單需求。

本論文實(shí)現(xiàn)的Web端可視化表單生成引擎，采用組件化模塊化開(kāi)發(fā)，將表單從區(qū)塊行列開(kāi)始劃分到每個(gè)單元格的相應(yīng)組件都對(duì)應(yīng)設(shè)計(jì)實(shí)現(xiàn)了相關(guān)的Widget模塊實(shí)現(xiàn)了相關(guān)模塊組件的復(fù)用，大大提高了開(kāi)發(fā)的效率[1]。同時(shí)在功能上實(shí)現(xiàn)了基本的拖拽表單行以及各類組件，通過(guò)選項(xiàng)設(shè)置模板設(shè)置表單列和各類組件對(duì)應(yīng)的相關(guān)屬性，以及本地儲(chǔ)存與本地預(yù)覽的功能，真正意義上實(shí)現(xiàn)了通過(guò)“可視化”操作來(lái)快速、靈活、簡(jiǎn)單的生成可在Web系統(tǒng)里通用的表單。

1 表單生成引擎的需求分析

根據(jù)表單生成引擎在現(xiàn)實(shí)開(kāi)發(fā)中的使用場(chǎng)景和開(kāi)發(fā)者的實(shí)際需求入手，從業(yè)務(wù)建模、功能性需求和非功能性需求三個(gè)方面來(lái)詳細(xì)闡述可視化表單生成引擎的有關(guān)需求及業(yè)務(wù)分析。

1.1 業(yè)務(wù)建模

表單在各行各業(yè)中都有廣泛的用途，它不僅是企業(yè)管理的基本措施和途徑，而且也是企業(yè)的最為基本的業(yè)務(wù)要求。隨著互聯(lián)網(wǎng)技術(shù)和企業(yè)信息化技術(shù)的發(fā)展，越來(lái)越多的報(bào)表和表單都從傳統(tǒng)的手寫(xiě)方式轉(zhuǎn)換為基于Web的互聯(lián)網(wǎng)頁(yè)面方式呈現(xiàn)，這大大的提高了企業(yè)處理信息的效率，也使得企業(yè)管理更加高效和透明化，從而大大的提高了企業(yè)對(duì)高質(zhì)量信息的要求[2]。例如，本課題的原型北京市發(fā)改委的房地產(chǎn)大本系統(tǒng)和月報(bào)系統(tǒng)就都是基于Web端對(duì)各種表單信息進(jìn)行處理的平臺(tái)。

隨著企業(yè)信息化的發(fā)展，越來(lái)越多的表單將以網(wǎng)頁(yè)的形式呈現(xiàn)給用戶。然而，我們目前大多使用的Web信息管理平臺(tái)對(duì)于表單的基本處理方式是將具體的表單對(duì)應(yīng)一個(gè)頁(yè)面，用代碼的方式將表單用固定頁(yè)面樣式展示出來(lái)[3]。這種傳統(tǒng)的開(kāi)發(fā)方式將定制好的表單以編碼的方式固化在系統(tǒng)中，當(dāng)信息系統(tǒng)構(gòu)建完成后，系統(tǒng)的功能也就固化了，并且當(dāng)業(yè)務(wù)需求發(fā)生變更時(shí)，必須對(duì)原來(lái)的系統(tǒng)結(jié)構(gòu)及功能進(jìn)行代碼級(jí)的改動(dòng)。此外，由于先天存在的業(yè)務(wù)人員需求不確定，業(yè)務(wù)人員與開(kāi)發(fā)人員在溝通上存在問(wèn)題，以及開(kāi)發(fā)人員理解上面的偏差，修改代碼將是不可避免的。但是，頻繁的修改不僅增加軟件開(kāi)發(fā)成本，也增加了軟件項(xiàng)目管理的負(fù)擔(dān)。

這就急需一款有效的表單生成工具，來(lái)幫助編程人員更為有效的開(kāi)發(fā)出適合企業(yè)不斷變化需求的企業(yè)信息化系統(tǒng)。

1.2 功能性需求分析

通過(guò)前文的分析可以確定本生成系統(tǒng)具有以下主要的功能。

組件庫(kù)的創(chuàng)建：自定義表單中會(huì)運(yùn)用到的各個(gè)組件，包括了用于分割表單的Section區(qū)塊、表單的標(biāo)題h1（也就是對(duì)應(yīng)HTML中的＜h1＞標(biāo)簽）、表單中的行 Row（對(duì)應(yīng) HTML中 Class屬性為 row的＜div＞標(biāo)簽）等等。

創(chuàng)建模板表：這是表單自定義創(chuàng)建的預(yù)設(shè)模塊，主要目的是用戶操作之前在表單拖放區(qū)域首先給予一個(gè)預(yù)設(shè)的Section塊給用戶以友好的示意，表示在這個(gè)Section塊中開(kāi)始創(chuàng)建表單，可視化的拖放進(jìn)行表單的設(shè)計(jì)。

拖放組件：所有的組件都是可以拖放的，我們預(yù)設(shè)把所有的組件放在頁(yè)面左側(cè)的組件列表中，并且所有的組件都綁定了可拖放事件（drag&drop）同時(shí)設(shè)置拖放的目標(biāo)容器也就是放置著預(yù)設(shè) Section的區(qū)域。用戶能夠根據(jù)自己的需求將組件放置到自定的單元格中。

1.3 非功能性需求分析

可靠性：本課題設(shè)計(jì)的表單生成器不僅要能夠?qū)M件進(jìn)行拖放實(shí)現(xiàn)表單的自定義創(chuàng)建，而且還要具備一定校驗(yàn)識(shí)別能力，以充分保證軟件具有較為強(qiáng)大的健壯性[4]。同時(shí)，要做到當(dāng)用戶意外關(guān)閉瀏覽器或者誤操作的時(shí)候，系統(tǒng)具有一定的數(shù)據(jù)恢復(fù)能力（也就是本地再次加載的功能）。此外，為了保證表單的布局更為協(xié)調(diào)美觀，表單最后呈現(xiàn)出來(lái)需要帶有響應(yīng)式的樣式。

效率：在配置較低的情況下可以滿足用戶的一般性使用要求，在配置更高的情況下表單生成器的運(yùn)行配置效率應(yīng)該有相應(yīng)的提升。

性能需求：在目前主流的筆記本電腦上，整個(gè)表單預(yù)覽響應(yīng)的時(shí)間應(yīng)該在1～2秒鐘內(nèi)。

2 表單生成引擎的設(shè)計(jì)方案

Web端可視化表單生成引擎的核心是基于Dojo的表單組件的拖放及自定義創(chuàng)建，所以開(kāi)發(fā)設(shè)計(jì)過(guò)程中要注意：保證表單的可用性；以用戶為中心來(lái)設(shè)計(jì)產(chǎn)品，注重使用中的用戶體驗(yàn)；表單生成引擎使用迭代式組件化開(kāi)發(fā)，將表單的各個(gè)部分組件化、模塊化，在高效快速開(kāi)發(fā)的同事兼顧程序的健壯性和可維護(hù)性。為滿足上述需求，必須對(duì)項(xiàng)目規(guī)劃一個(gè)完整的設(shè)計(jì)方案。

2.1 系統(tǒng)整體架構(gòu)設(shè)計(jì)

本課題設(shè)計(jì)與實(shí)現(xiàn)的可視化表單生成器采用的應(yīng)用體系架構(gòu)[5]，如圖 1所示。從上到下依次分為Web瀏覽器端表單創(chuàng)建、組件屬性配置和本地服務(wù)器端處理這三個(gè)層次。

圖1 系統(tǒng)架構(gòu)設(shè)計(jì)Fig.1 Design of system architecture

2.2 拖放功能的構(gòu)思與設(shè)計(jì)

本課題將會(huì)采用 Dojo庫(kù)來(lái)實(shí)現(xiàn)關(guān)鍵的元素拖放操作[6]。拖拽作為Dojo的基礎(chǔ)功能之一，可視化地支持頁(yè)面元素或?qū)ο笤诙鄠€(gè)容器之間拖放。Dojo還可以制定規(guī)則過(guò)濾拖放對(duì)象的目標(biāo)容器，比如“桌子”應(yīng)該被放在“家具”容器內(nèi)，而不該放在“家電”容器中。Dojo的拖放功能在 dnd模塊中（也就是Dojo/dnd），使用 Dojo讓我們避免了重復(fù)造輪子，也讓開(kāi)發(fā)更加高效。如圖2展示了Dojo/dnd包中的幾個(gè)主要類之間的關(guān)系。

圖2 DOJO/dnd主要類的關(guān)系Fig.2 Relationship among class in DOJO/dnd

2.3 拖放規(guī)則的設(shè)計(jì)

前文分析得到，不同的組件應(yīng)該具有不同的拖放規(guī)則。組件的拖放規(guī)則即規(guī)定了組件能否作為容器組件以及組件作為容器的時(shí)候能夠在其中放置哪些組件兩個(gè)方面。具體的組件拖放規(guī)則如下表1所示。

表1 組件拖放規(guī)則Tab.1 Module drag & drop rule

由上表容易知道，表單組件中能夠作為組件容器的只有Section和由Row組件添加自動(dòng)生成的Col組件，Input類組件、TextArea組件、Image組件等都是單元格中最小的部分，不能作為容器在其內(nèi)部進(jìn)行添加。

3 可視化表單生成引擎的實(shí)現(xiàn)

在完成需求分析之后，本章主要在代碼層面進(jìn)行幾個(gè)核心技術(shù)要點(diǎn)的實(shí)現(xiàn)過(guò)程。其中開(kāi)發(fā)集成環(huán)境是phpstorm，PHP使用的版本是5.6.30版本。由上一節(jié)的分析首先給出系統(tǒng)整體的設(shè)計(jì)圖，如下圖3所示。

圖3 系統(tǒng)總體設(shè)計(jì)結(jié)構(gòu)圖Fig.3 Overall architecture design of system

整個(gè)Server端由PHP本地服務(wù)器模擬，瀏覽器將前端數(shù)據(jù)進(jìn)行序列化整合后，以 JSON的形式儲(chǔ)存在localstorage中，當(dāng)用戶請(qǐng)求預(yù)覽時(shí)，服務(wù)器從localstorage中取出相應(yīng)的 JSON數(shù)據(jù)[7]，并由此進(jìn)行DOM組裝最后將拼接完成的HTML內(nèi)容返回到瀏覽器中，予以渲染展示。

3.1 表單拖放功能的實(shí)現(xiàn)

拖拽作為Dojo的基礎(chǔ)功能之一，可視化地支持頁(yè)面元素或?qū)ο笤诙鄠€(gè)容器之間拖放，而整個(gè)拖放的實(shí)現(xiàn)核心就在Dojo的dojo/dnd整個(gè)包中。

要實(shí)現(xiàn)表單的拖放功能，首先要理解 dojo.dnd包中的類結(jié)構(gòu)。由上一章節(jié)分析，我們可以進(jìn)一步了解到dojo.dnd的工作流程。當(dāng)用戶在要拖動(dòng)的對(duì)象上按住鼠標(biāo)左鍵并開(kāi)始移動(dòng)時(shí)，Source 會(huì)調(diào)用Manager.startDrag 函數(shù)，標(biāo)志拖放過(guò)程的開(kāi)始。這個(gè)函數(shù)記錄當(dāng)前發(fā)起拖放的Source和拖放的結(jié)點(diǎn)，然后創(chuàng)建出 Avatar，建立起一切必要的事件關(guān)聯(lián)，并通過(guò)dojo.publish方法發(fā)布一個(gè)“開(kāi)始拖放”（ 也就是/dnd/start）的主題topic。Dojo.dnd里廣泛采用主題廣播的方式管理拖放過(guò)程，這樣頁(yè)面上所有的Source都能監(jiān)聽(tīng)這些主題并作出反應(yīng)。例如這個(gè)/dnd/start主題發(fā)布后，頁(yè)面上所有的Source（包括剛才拖出來(lái)的那個(gè)），都將通過(guò)checkAcceptance方法檢查自己是否能夠接受那些正在被拖動(dòng)的結(jié)點(diǎn)。

這里要注意到，Source有一個(gè)屬性叫 accept，這是一個(gè)字符串?dāng)?shù)組，默認(rèn)是["text"]，表示這個(gè)Source能夠接受的東西只限于包含文本的結(jié)點(diǎn)，當(dāng)然我們可以自由定義accept里的內(nèi)容。當(dāng)這些結(jié)點(diǎn)被拖到一個(gè) Source上時(shí)（也就是 onmouseover操作），將使Manager發(fā)布 /dojo/source/over 主題，更新Avatar上的圖標(biāo)，以反映是否能在這Source上進(jìn)行Drop操作。

3.2 配置屬性模板的實(shí)現(xiàn)

表單右側(cè)欄為每個(gè)組件對(duì)應(yīng)的屬性配置項(xiàng)。而對(duì)于每個(gè)組件來(lái)說(shuō)，它們的屬性大多一部分相同，剩下的部分獨(dú)立。如果我們采用一般的思路，為不同的組件綁定點(diǎn)擊事件來(lái)控制屬性 display的顯示或隱藏，那么不僅邏輯繁多，而且代碼冗余不夠優(yōu)雅。本課題在處理這個(gè)問(wèn)題上采取了Handlebars語(yǔ)義模板庫(kù)，在大大提升了開(kāi)發(fā)效率的同時(shí)讓代碼更優(yōu)雅、更具可維護(hù)性。

在JavaScript中，Handlebars是通過(guò)Handlebars.compile()的方式來(lái)進(jìn)行模板預(yù)編譯的[8]。這里先聲明了預(yù)編譯的模板template然后定義了組件的配置屬性config，后面同過(guò)if語(yǔ)句對(duì)每個(gè)組件config中包含的屬性進(jìn)行判斷，根據(jù)判斷的結(jié)果，對(duì)模板中將會(huì)出現(xiàn)的屬性進(jìn)行預(yù)設(shè)，進(jìn)而影響到HTML頁(yè)面的有關(guān)渲染呈現(xiàn)。

3.3 輸入數(shù)據(jù)監(jiān)聽(tīng)的實(shí)現(xiàn)

當(dāng)用戶在配置模板中進(jìn)行屬性修改操作時(shí)，修改文字和模塊名希望實(shí)時(shí)的反映到編輯模板中，給用戶以及時(shí)的反饋，從而提升用戶體驗(yàn)。這就要求引擎實(shí)現(xiàn)輸入數(shù)據(jù)的監(jiān)聽(tīng)，當(dāng)這些屬性值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。

由于本項(xiàng)目中配置屬性都使用到了＜inpiut＞標(biāo)簽，所以使用來(lái)自 Jquery的 on()來(lái)監(jiān)聽(tīng) input值的變化，通過(guò)對(duì)輸入框 propertychange屬性的監(jiān)聽(tīng)，可以實(shí)時(shí)的監(jiān)測(cè)到用戶鍵入的內(nèi)容。當(dāng)輸入的值發(fā)生變化，表單編輯區(qū)域會(huì)立刻產(chǎn)生響應(yīng)，更新并保存最新的修改。

此外，為了避免用戶操作的復(fù)雜，在每次用戶鍵入內(nèi)容以后都通過(guò)trigger()來(lái)觸發(fā)保存按鈕，已進(jìn)行對(duì)鍵入值的保存。

3.4 本地保存與預(yù)覽

本課題可視化表單生成工具的設(shè)計(jì)與實(shí)現(xiàn)中，服務(wù)端系統(tǒng)是基于PHP5（具體到版本為5.6.30）實(shí)現(xiàn)的本地服務(wù)器[9]，引擎在Web前端實(shí)現(xiàn)了對(duì)數(shù)據(jù)的預(yù)處理將表單編輯區(qū)拖放的組件保存為了json對(duì)象格式的數(shù)據(jù)，存在本地的localstorage中。

當(dāng)用戶在點(diǎn)擊預(yù)覽按鈕的時(shí)候，前端處理好的json數(shù)據(jù)將以POST的方式提交，并生成相應(yīng)的預(yù)覽。預(yù)覽步驟的數(shù)據(jù)處理過(guò)程具體如下：

首先聲明了一個(gè)空變量$startHtml，然后根據(jù)數(shù)據(jù)里面的widgetType屬性進(jìn)行組件的分類，不同的組件拼接不同的 HTML片段，例如“row”在這里是Class類為“form-widget-row row”的＜div＞標(biāo)簽，用于Bootstrap柵格化的布局；“col”在這里是Class類為“form-widget-col col-md-”的＜div＞標(biāo)簽，同樣用于柵格化布局，不同的是，這里的 Class會(huì)根據(jù)右側(cè)欄設(shè)置的寬度屬性變化而變化；同樣的道理，“l(fā)abel”和“textArea”也是這樣渲染出來(lái)的，只是它的相關(guān)屬性有所不同，所以轉(zhuǎn)化成的HTML片段屬性有所不同[10]。

4 性能測(cè)試與實(shí)現(xiàn)效果

在完成可視化表單生成引擎的詳細(xì)設(shè)計(jì)和具體的代碼以后，我們需要通過(guò)完善的測(cè)試來(lái)對(duì)系統(tǒng)的整體運(yùn)行狀況、各功能模塊的實(shí)現(xiàn)情況、實(shí)際使用中的用戶體驗(yàn)的方面進(jìn)行檢查，盡可能多的發(fā)現(xiàn)存在的BUG并進(jìn)行修改，保證整個(gè)表單生成器的正常上線及使用。

4.1 測(cè)試環(huán)境

從實(shí)際應(yīng)用場(chǎng)景出發(fā)，對(duì)可視化表單生成引擎進(jìn)行全方位的測(cè)試，測(cè)試環(huán)境分為硬件測(cè)試環(huán)境、軟件測(cè)試環(huán)境和網(wǎng)絡(luò)測(cè)試環(huán)境，分別如下表2、表3和表4所示。

表2 硬件測(cè)試環(huán)境Tab.2 Hardware testing environment

表3 軟件測(cè)試環(huán)境Tab.3 Software testing environment

表4 網(wǎng)絡(luò)測(cè)試環(huán)境Tab.4 Network testing environment

4.2 性能測(cè)試

啟動(dòng)PHP運(yùn)行環(huán)境，進(jìn)行項(xiàng)目的本機(jī)測(cè)試。在Safari DevTools開(kāi)發(fā)者工具可以直接通過(guò)瀏覽器的審查元素監(jiān)視網(wǎng)頁(yè)的各個(gè)性能指標(biāo)，其中網(wǎng)絡(luò)面板下面可以觀察到該網(wǎng)頁(yè)每一個(gè)被請(qǐng)求資源的狀態(tài)碼、請(qǐng)求類型、發(fā)送請(qǐng)求的對(duì)象、資源大小、加載時(shí)間等。

如圖4，可以看到在本地PHP服務(wù)端測(cè)試總的表單渲染時(shí)間是相當(dāng)可觀的，因?yàn)檎麄€(gè)頁(yè)面沒(méi)有多余的樣式，只有相應(yīng)的表單格式和布局，所以主要的耗時(shí)都在響應(yīng)階段。另外，從時(shí)間線錄制里面來(lái)看，得到的結(jié)果如圖5所示。

圖4 響應(yīng)時(shí)間Fig.4 Response time

圖5 頁(yè)面渲染時(shí)間Fig.5 Page render time

可以看到，最后的復(fù)合與布局是花費(fèi)了相當(dāng)一段時(shí)間，并且是間隔完成的，下表分別記錄了25次從頁(yè)面網(wǎng)絡(luò)請(qǐng)求開(kāi)始到布局與渲染結(jié)束的時(shí)間，其中我們關(guān)注的指標(biāo)為傳輸文件總大小、網(wǎng)絡(luò)請(qǐng)求時(shí)間、觸發(fā)DOMContentLoaded事件時(shí)間、頁(yè)面渲染完成時(shí)間。對(duì)該組數(shù)據(jù)進(jìn)行分析，系統(tǒng)的網(wǎng)絡(luò)請(qǐng)求和相關(guān)JavaScript事件的DOMContentLoaded事件都為毫秒級(jí)的時(shí)間消耗（因?yàn)檫@里DOM的操作很少），而總體的渲染時(shí)間穩(wěn)定在2秒左右，完全符合設(shè)計(jì)和使用的任務(wù)需求。具體加載時(shí)間變化如圖6所示。

從上圖我們可以看到，在瀏覽器剛開(kāi)始預(yù)覽渲染頁(yè)面的時(shí)候，頁(yè)面加載時(shí)間不穩(wěn)定，但對(duì)頁(yè)面進(jìn)行了多次請(qǐng)求之后渲染效率有所提高，由于部分GET請(qǐng)求被Service Worker緩存，網(wǎng)絡(luò)延時(shí)已經(jīng)很少幾乎可以被忽略，無(wú)論是 DomContentLoaded觸發(fā)時(shí)間、Load加載時(shí)間抑或是整體的頁(yè)面渲染時(shí)間，都進(jìn)一步減少，而總的加載時(shí)間回落到2秒左右。綜上所述，總體看來(lái)用戶體驗(yàn)是完全達(dá)到標(biāo)準(zhǔn)的。

4.3 實(shí)際效果測(cè)試

完成性能測(cè)試之后，在瀏覽器客戶端進(jìn)行實(shí)際的效果測(cè)試?？梢暬韱紊梢娴闹鹘缑嫒鐖D 7所示。

圖6 完全渲染時(shí)間走勢(shì)圖Fig.6 Tendency of overall render time

圖7 表單編輯主界面Fig.7 Main interface of form editor

在實(shí)現(xiàn)了本地保存和加載功能以后，點(diǎn)擊最右側(cè)的預(yù)覽按鈕，頁(yè)面將會(huì)跳轉(zhuǎn)至本地測(cè)試頁(yè)面preview.php進(jìn)行可視化表單最終效果的預(yù)覽呈現(xiàn)，具體效果如下圖8所示。

圖8 本地預(yù)覽頁(yè)面Fig.8 Local preview page

5 結(jié)論

本文主要敘述了Web端可視化表單生成引擎的設(shè)計(jì)與實(shí)現(xiàn)。可視化表單生成系統(tǒng)是為了解決用戶對(duì)于表單不斷變化的需求，提升開(kāi)發(fā)的效率、組件模塊的復(fù)用以及減小維護(hù)的成本的問(wèn)題而實(shí)現(xiàn)的。從根本上實(shí)現(xiàn)了在目前最為流行的企業(yè)在線管理系統(tǒng)中表單的自定義創(chuàng)建功能。雖然表單生成器已經(jīng)得到了越來(lái)越廣泛的研究，但其在內(nèi)容和設(shè)計(jì)實(shí)現(xiàn)模式上仍具有廣闊的創(chuàng)新前景。

[1] 程佳, 陳濤, 王成. 通用Web表單數(shù)據(jù)采集系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[A]. 軟件工程Software Engineering, 2016 (8): 19-8.

[2] Strme kiD, Rado evi D, Magdaleni I. Web Form Generators Design Model[C]. Ceciis, 2015.

[3] 林向, 方凱. Web表單可視化定制原理研究[A]. 浙江 寧波,2013第6期.

[4] 吳賀, 及俊川, 李新. 基于XML的動(dòng)態(tài)表單快速生成技術(shù)[J]. 計(jì)算機(jī)系統(tǒng)應(yīng)用, 2010, 19(9): 60-63.

[5] 徐群. 通用表格生成系統(tǒng)的實(shí)現(xiàn)[A]. 計(jì)算機(jī)光盤(pán)軟件與應(yīng)用, 2015 (33): 31-31.

[6] Dojo專題 [IBM developerWorks]. https://www.ibm.com/developerworks/cn/web/wa-dojotoolkit/newto.html

[7] 郭慶燕, 張敏, 楊賢棟. JQuery Ajax異步處理JSON數(shù)據(jù)實(shí)現(xiàn)氣象圖片的顯示[J].計(jì)算機(jī)應(yīng)用于軟件, 2016, 33(6):20-22; 67.

[8] Handlebars. js: Minimal Templating on Steroids. http://handlebarsjs.com/.

[9] 霍瑞. 基于PHP技術(shù)的人力資源信息管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D]. 成都: 電子科技大學(xué), 軟件工程, 2015. 6.

[10] 王野. 基于Web的柔性報(bào)表系統(tǒng)的研究與實(shí)現(xiàn)[D]. 哈爾濱工程大學(xué), 2010.

Design and Implementation of Visual Form Generator Based on Web

SONG Yi-shuang, LIU Shao-hua
(School of Electronic Engineering, Beijing University of Post and Telecommunications, Beijing 100876, China)

These years, construction of hardware facilities has translated into software system application development in management office system’s mainly work, however, forms have always been the most significant way of company management and information acquisition. In order to simplify workflow and improve work efficiency,there is an urgent requirement of the flexible visual form. The visual form generator designed in this paper adopt modularization development to improve work efficiency. Meanwhile, essential drag and drop have been realized functionally, including set form’s row or module’s attribute through optional setting panel, local storage and preview locally. This is a real sense of realizing simple, flexible and fast web using form by visual control.

WEB development; Form generator; Modularization; Drag and drop

TP311.52

A

10.3969/j.issn.1003-6970.2017.12.029

本文著錄格式：宋奕爽，劉紹華. WEB端可視化表單生成引擎的設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件，2017，38（12）：153-159