通用Web表單數(shù)據(jù)采集系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

程佳　陳濤　王成

摘 要：面對(duì)日常工作中種類繁多的表單數(shù)據(jù)采集的需要，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)基于Web和數(shù)據(jù)庫的通用表單數(shù)據(jù)采集系統(tǒng)。本文介紹了系統(tǒng)的基本處理流程，詳細(xì)分析了基于MVC經(jīng)典模式及Struts2、Hibernate和Bootstrap作為主要框架的程序架構(gòu)設(shè)計(jì)，探討了動(dòng)態(tài)表單結(jié)構(gòu)、數(shù)據(jù)存儲(chǔ)與解析、Web數(shù)據(jù)交互、常用表單管理等關(guān)鍵技術(shù)的實(shí)現(xiàn)。所實(shí)現(xiàn)的系統(tǒng)能夠解決日常工作中表單數(shù)據(jù)采集的問題，靈活性好，同時(shí)這對(duì)Web表單自動(dòng)的生成也提供了一種較好的解決方案。

關(guān)鍵詞：表單；數(shù)據(jù)采集；Web；程序架構(gòu)

中圖分類號(hào)：TP319 文獻(xiàn)標(biāo)識(shí)碼：A

Abstract：In the face of the needs of a wide variety of form data collection in daily work，a general data collection system based on web and database is designed and implemented.This paper introduces the basic process of the system，analyzes in detail the program architecture design based on the MVC classic model and mainstream frameworks such as Hibernate，Struts2 and Bootstrap.The implementation of some key techniques are discussed，like data storage and analysis，Web data interaction and general form management the system can solve the problems of form data collection in daily work，which provides good flexibility and a suitable solution to the automatic generation of web forms.

Keywords：form；data collection；Web；program architecture

1 引言（Introduction）

在日常工作中，管理部門需要采集某些數(shù)據(jù)時(shí)，往往設(shè)計(jì)各類表單，經(jīng)過層層下發(fā)、填報(bào)、匯總，并對(duì)匯總數(shù)據(jù)的有效性和完整性進(jìn)行審核，如此繁瑣的過程費(fèi)時(shí)、費(fèi)力，比如高校統(tǒng)計(jì)教材征訂信息等等。為簡化工作流程和提高工作效率，可以開發(fā)一個(gè)通用Web表單數(shù)據(jù)采集系統(tǒng)，該系統(tǒng)能根據(jù)采集數(shù)據(jù)的需求來簡單、靈活的設(shè)計(jì)相應(yīng)表單，用戶通過Web填報(bào)數(shù)據(jù)即可。目前，關(guān)于Web表單的自動(dòng)生成方法有些少量的研究，主要是基于模板和規(guī)則的，具體利用XML或數(shù)據(jù)庫技術(shù)，相關(guān)技術(shù)在辦公自動(dòng)化系統(tǒng)或企業(yè)管理信息系統(tǒng)中有些應(yīng)用，但其實(shí)現(xiàn)過程較為復(fù)雜或?qū)I(yè)人員才能勝任[1-4]。另外，專門的通用表單數(shù)據(jù)采集系統(tǒng)很少。因此，設(shè)計(jì)并實(shí)現(xiàn)一個(gè)通用Web表單數(shù)據(jù)采集系統(tǒng)是非常有意義的，這能給日常的數(shù)據(jù)采集工作帶來很大的便捷性。

該通用表單數(shù)據(jù)采集系統(tǒng)的用戶包括系統(tǒng)管理員、普通管理員和一般用戶，主要功能包括用戶管理、表單任務(wù)設(shè)計(jì)、表單收藏、表單查看、數(shù)據(jù)填報(bào)、數(shù)據(jù)審核與導(dǎo)出。系統(tǒng)管理員能夠管理用戶基本信息。普通管理員根據(jù)采集數(shù)據(jù)的需要，可視化的進(jìn)行表單任務(wù)設(shè)計(jì)，這包括表單任務(wù)名稱、備注說明、有效填報(bào)時(shí)間、表單字段名稱、樣式及字段約束等；而且能對(duì)常用表單進(jìn)行收藏，避免以后再次使用時(shí)重復(fù)設(shè)計(jì)；此外，能夠?qū)τ脩籼峤坏臄?shù)據(jù)進(jìn)行審核、統(tǒng)計(jì)與導(dǎo)出。一般用戶可以通過Web查看所需完成的表單任務(wù)列表，選擇具體表單任務(wù)進(jìn)行數(shù)據(jù)的填報(bào)、修改和提交工作。所有數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫中，查看歷史的采集數(shù)據(jù)很方便。從系統(tǒng)整體架構(gòu)角度講，系統(tǒng)基于B/S模式，用戶通過瀏覽器進(jìn)行操作，主要特點(diǎn)是操作非常簡單、功能通用性強(qiáng)，數(shù)據(jù)規(guī)范性好。

2 系統(tǒng)總體設(shè)計(jì)（Overall design of the system）

2.1 處理流程設(shè)計(jì)

該系統(tǒng)的主要功能是表單數(shù)據(jù)的采集，涉及的主要工作流程：首先由管理員定義表單任務(wù)并發(fā)布；其次一般用戶可以在系統(tǒng)中查看已發(fā)布的表單任務(wù)，填寫表單內(nèi)容，并提交表單；最后由管理員審核與導(dǎo)出用戶提交的表單數(shù)據(jù)。

（1）管理員定義表單

當(dāng)需要采集某些數(shù)據(jù)時(shí)，管理員需要根據(jù)采集數(shù)據(jù)的需求來定義表單任務(wù)，具體定義流程如圖1所示。管理員首先創(chuàng)建表單任務(wù)，接著設(shè)置基本信息，包括表單任務(wù)名稱、備注信息和有效填報(bào)時(shí)間；其次配置表單字段，包括字段名稱、輸入形式、字段約束，其中設(shè)置字段約束時(shí)可以選擇已定義的常用約束或定義一個(gè)新的約束并應(yīng)用；最后，發(fā)布表單任務(wù)。

（2）用戶填寫表單數(shù)據(jù)

一般用戶登錄后可以看到所需填寫的表單任務(wù)列表，具體填寫流程如圖2所示。首先選擇具體的表單任務(wù)，則進(jìn)入相應(yīng)表單頁面；其次填寫表單內(nèi)容對(duì)應(yīng)的相關(guān)信息；最后提交表單數(shù)據(jù)，此時(shí)如果用戶填寫的內(nèi)容與字段約束不匹配，系統(tǒng)會(huì)提示不匹配信息，需要用戶進(jìn)行數(shù)據(jù)修改，如果用戶提交的表單數(shù)據(jù)符合對(duì)應(yīng)的字段約束，才顯示提交成功。

（3）管理員審核表單

用戶提交表單數(shù)據(jù)后，普通管理員可以對(duì)用戶提交的數(shù)據(jù)進(jìn)一步審核，確保數(shù)據(jù)準(zhǔn)確，此次審核主要是對(duì)數(shù)據(jù)實(shí)際意義審核。管理員可以查看用戶提交的表單數(shù)據(jù)，并對(duì)表單進(jìn)行審核處理，對(duì)合格的表單數(shù)據(jù)可以審核通過，對(duì)不符合要求的表單數(shù)據(jù)審核不通過。一般用戶可以查看數(shù)據(jù)審核狀態(tài)，若沒有審核或?qū)徍瞬煌ㄟ^則可以修改表單數(shù)據(jù)再提交，若審核通過則不能再修改。

2.2 程序架構(gòu)設(shè)計(jì)

系統(tǒng)基于MVC經(jīng)典模式，使用Struts2、Hibernate和Bootstrap框架作為基本開發(fā)架構(gòu)。程序構(gòu)架模塊如圖3所示，MVC模式（Model-View-Controller）把系統(tǒng)分為三個(gè)基本部分：模型（Model）、視圖（View）、控制器（Controller）。三個(gè)模塊相對(duì)獨(dú)立，降低了系統(tǒng)模塊的耦合性，提高了程序的可維護(hù)性[5，6]。

Model層實(shí)現(xiàn)系統(tǒng)中的業(yè)務(wù)邏輯，主要為功能邏輯的具體編碼。在系統(tǒng)中，Model層采用數(shù)據(jù)庫持久化框架Hibernate，通過這一輕量級(jí)的O/R Mapping框架，完成用戶對(duì)象、表單對(duì)象、字段對(duì)象、字段內(nèi)容對(duì)象等到關(guān)系數(shù)據(jù)庫的映射，完成對(duì)表單數(shù)據(jù)的提取與轉(zhuǎn)換，提高了系統(tǒng)開發(fā)效率。

View層主要用于顯示數(shù)據(jù)和提交數(shù)據(jù)，提供用戶交互界面。比如，對(duì)于表單顯示查詢請(qǐng)求的結(jié)果，系統(tǒng)以Web方式展示給用戶，并且使用Bootstrap框架中的分頁組件美化了表單列表分頁顯示，通過jQuery操作頁面元素以及結(jié)合AJAX達(dá)到異步刷新頁面的效果。Bootstrap是目前很受歡迎的前端框架，它在jQuery的基礎(chǔ)上進(jìn)行了更為個(gè)性化和人性化的完善，形成一套自己獨(dú)有的網(wǎng)站風(fēng)格[7]。

Controller層用于控制業(yè)務(wù)邏輯和頁面的跳轉(zhuǎn)，接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求。在Struts2框架下，根據(jù)需求編寫Action類用于處理邏輯，編寫JSP頁面用于展示用戶界面以及在struts.xml中配置映射關(guān)系。

其中，action標(biāo)簽用于定義處理請(qǐng)求URL為task_list.action的Action，result標(biāo)簽用于定義處理結(jié)果字符串和資源之間的映射關(guān)系，param用于對(duì)返回的結(jié)果進(jìn)行配置，其文本內(nèi)容json表示返回的是json對(duì)象，屬性值root表示返回對(duì)象的層級(jí)為根部。

3 關(guān)鍵技術(shù)的實(shí)現(xiàn)（Implementation of key

technology）

3.1 動(dòng)態(tài)表單結(jié)構(gòu)生成

由于每次所采集的數(shù)據(jù)很有可能是各式各樣的，因此不能事先設(shè)計(jì)固定的Web表單，必須要根據(jù)具體情況設(shè)計(jì)動(dòng)態(tài)表單結(jié)構(gòu)。自定義一個(gè)表單主要涉及到表單基本信息、表單字段、字段約束等信息的配置。在Bootstrap、jQuery、HTML、CSS等前端技術(shù)的支持下，為用戶提供了向?qū)降娜藱C(jī)交互界面，使之適應(yīng)于各類人群的使用，比如在需要填寫截止日期時(shí)，系統(tǒng)會(huì)自動(dòng)調(diào)用Bootstrap的日歷插件。就系統(tǒng)實(shí)現(xiàn)而言，系統(tǒng)采用MySQL數(shù)據(jù)庫，并進(jìn)行數(shù)據(jù)表和相關(guān)字段的設(shè)置。在數(shù)據(jù)庫的設(shè)計(jì)中，對(duì)于表單的生成主要涉及表單任務(wù)、表單字段、字段約束這三個(gè)實(shí)體。關(guān)系模型如下：

表單任務(wù)（表單ID，表單名稱，備注說明，有效起始時(shí)間，有效截止時(shí)間，是否被收藏）

表單字段（表單字段ID，字段名稱，所屬表單ID，字段約束ID）

字段約束（字段約束ID，規(guī)則名稱，規(guī)則的正則表達(dá)式，規(guī)則說明）

動(dòng)態(tài)表單結(jié)構(gòu)相關(guān)實(shí)體間的關(guān)系如圖4所示。一個(gè)表單任務(wù)包含多個(gè)表單字段，一個(gè)表單字段只屬于一個(gè)表單任務(wù)；一個(gè)字段約束可用于限定多個(gè)表單字段，一個(gè)表單字段只能指定一個(gè)字段約束。

例如，在學(xué)校教學(xué)管理工作中，每學(xué)期開學(xué)前學(xué)校需要向各科教師采集教材訂閱信息。這時(shí)需創(chuàng)建一個(gè)表單用于采集教材訂閱信息，表單任務(wù)表中就需存儲(chǔ)表單名稱，數(shù)據(jù)填寫的備注說明以及有效填報(bào)時(shí)間等信息。對(duì)于表單字段的設(shè)置可存儲(chǔ)在表單字段表中，在該表單中有書籍ISBN、書籍名稱、價(jià)格、出版社名稱、使用班級(jí)、訂購數(shù)量等字段。為了實(shí)現(xiàn)系統(tǒng)自動(dòng)審核表單內(nèi)容，在表單字段約束的設(shè)計(jì)中，主要利用正則表達(dá)式來規(guī)范對(duì)應(yīng)內(nèi)容的格式。正則表達(dá)式是對(duì)字符串進(jìn)行規(guī)范格式的一種邏輯表達(dá)式，用事先定義好的一些特定字符及這些特定字符的組合，組成一個(gè)“匹配字符串”，這個(gè)“匹配字符串”用來表達(dá)對(duì)字符串的一種過濾邏輯。比如，每本書會(huì)有個(gè)ISBN字段，根據(jù)ISBN組成格式，含有13位數(shù)字，可以設(shè)計(jì)一個(gè)正則表達(dá)式：[0-9]{13}，來進(jìn)行合法性驗(yàn)證。字段約束表中存儲(chǔ)有系統(tǒng)默認(rèn)定義的一些常見的字段約束規(guī)則，用戶也可以新增。

3.2 數(shù)據(jù)存儲(chǔ)與解析

對(duì)于數(shù)據(jù)的存儲(chǔ)，系統(tǒng)使用了另外兩個(gè)數(shù)據(jù)表，其中一個(gè)為表單概要表，存儲(chǔ)某個(gè)用戶提交某個(gè)表單任務(wù)的概要信息，另一個(gè)為表單詳情表，表單字段對(duì)應(yīng)的詳細(xì)信息保存在該表中。比如，學(xué)校通過教材訂閱信息表單采集教材需求信息時(shí)，用戶ID、表單ID、附件信息等存儲(chǔ)在表單概要表中，而表單中書籍ISBN、書籍名稱、價(jià)格、出版社名稱、使用班級(jí)、訂購數(shù)量等信息存儲(chǔ)在表單詳情表中。關(guān)系模型如下：

表單概要（概要信息ID，用戶ID，表單ID，附件，是否審核通過）

表單詳情（詳細(xì)信息ID，概要信息ID，字段ID，字段值）

由于表單結(jié)構(gòu)多樣，這使得數(shù)據(jù)的存儲(chǔ)與解析流程的較為復(fù)雜，系統(tǒng)設(shè)計(jì)了通用的處理程序來存儲(chǔ)與解析表單數(shù)據(jù)。

3.3 Web數(shù)據(jù)交互實(shí)現(xiàn)

當(dāng)表單創(chuàng)建完成，用戶（包括普通管理員或一般用戶）再次請(qǐng)求表單任務(wù)列表時(shí)，則從數(shù)據(jù)庫中讀取表單相關(guān)設(shè)置數(shù)據(jù)并傳遞到前端頁面，表單顯示頁面對(duì)表單結(jié)構(gòu)數(shù)據(jù)進(jìn)行解析、顯示，并且運(yùn)用jQuery的分頁插件實(shí)現(xiàn)表單列表分頁顯示。另外，用戶在請(qǐng)求某個(gè)具體的表單任務(wù)時(shí)，采用Ajax+JSON技術(shù)與服務(wù)器交換數(shù)據(jù)。比如，在教材訂閱信息表單實(shí)例中，當(dāng)學(xué)校管理員或教師請(qǐng)求教材訂閱信息表時(shí)，通過用戶界面發(fā)起AJAX異步刷新請(qǐng)求，后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁數(shù)據(jù)實(shí)現(xiàn)異步更新。這意味著不必采用會(huì)中斷交互的完整頁面刷新，就可以動(dòng)態(tài)的更新Web頁面。

AJAX的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層，使用戶操作與服務(wù)器工作異步化[5-8]。AJAX的Web模型如圖5所示。作為AJAX異步請(qǐng)求的傳輸對(duì)象，后臺(tái)通過Hibernate從數(shù)據(jù)庫讀取數(shù)據(jù)，請(qǐng)求的返回結(jié)果是JSON對(duì)象。系統(tǒng)中大多通過AJAX技術(shù)與服務(wù)器交換數(shù)據(jù)實(shí)現(xiàn)網(wǎng)頁部分刷新，將對(duì)象轉(zhuǎn)換為JSON的封裝類使用了較為流行的JSON解析庫Jackson，類中通過單例模式來獲取ObjectMapper對(duì)象，從而序列化和反序列化JSON數(shù)據(jù)。用戶界面獲取到JSON數(shù)據(jù)后進(jìn)行解析，通過jQuery的eval方法將JSON數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象，然后像調(diào)用數(shù)組元素一樣調(diào)用JSON對(duì)象的數(shù)據(jù)，以顯示在頁面列表中。

3.4 常用Web表單管理

根據(jù)用戶的實(shí)際使用情況來說，有的表單模板可能會(huì)被多次重復(fù)使用。比如，在學(xué)校采集教材訂閱信息的例子中，該表單在每個(gè)學(xué)期開學(xué)前都會(huì)用到，為提供更好的用戶體驗(yàn)，系統(tǒng)設(shè)計(jì)了常用表單收藏的功能。此外，當(dāng)系統(tǒng)中收藏的表單逐漸增多時(shí)，也可以通過關(guān)鍵詞模糊搜索或分類標(biāo)簽類進(jìn)行查找。

4 系統(tǒng)運(yùn)行效果（Operation effect of the system）

服務(wù)器端系統(tǒng)的主要功能包括任務(wù)管理、知識(shí)庫管理、用戶管理三大模塊。在任務(wù)管理模塊，管理員可以新增表單，查看、搜索、修改及刪除已定義的表單，以及配置表單字段，如圖6所示。該界面上方和左方是功能模塊欄目，右邊是信息展示窗口，所顯示的表單列表是按截止時(shí)間的先后、是否有提交數(shù)據(jù)以及是否審核通過排序，頁面過渡、翻頁、搜索等前端效果都是通過Bootstrap框架實(shí)現(xiàn)的。當(dāng)新建表單任務(wù)完成后，可以配置相應(yīng)的表單字段，字段配置界面如圖7所示。該界面右邊顯示的是關(guān)于教材訂閱信息表單的相關(guān)字段配置，有書籍ISBN、書籍名稱、價(jià)格、出版社名稱等，可以任意增加、刪除、修改表單字段，根據(jù)要求添加相應(yīng)的字段約束。

5 結(jié)論（Conclusion）

根據(jù)日常工作中的表單數(shù)據(jù)采集需求，實(shí)現(xiàn)了系統(tǒng)的基本功能，包括用戶管理、表單任務(wù)設(shè)計(jì)、表單收藏、表單查看、數(shù)據(jù)填報(bào)、數(shù)據(jù)審核與導(dǎo)出等，系統(tǒng)的實(shí)現(xiàn)主要采用如今流行的Struts2+Hibernate+Bootstrap框架技術(shù)，擴(kuò)展性較好。系統(tǒng)功能性較為實(shí)用、靈活性較好。而且，系統(tǒng)的用戶可以是很大眾化的，不要求具備程序設(shè)計(jì)方面的知識(shí)。但系統(tǒng)也還可以進(jìn)一步改進(jìn)。比如，提高個(gè)性化設(shè)置和通用性擴(kuò)展，對(duì)于不同工作需求的用戶，能自定義配置程序和系統(tǒng)參數(shù)。功能細(xì)節(jié)也可更加完善，使表單輸入框具有足夠的彈性，以接受多種有效數(shù)據(jù)形式。

參考文獻(xiàn)（References）

[1] Strme kiD，Rado evi D，Magdaleni I.Web Form Generators

Design Model[C].Ceciis，2015.

[2] Magdaleni I，Rado evi D，Orehova kiT.Autogenerator：

Generation and Execution of Programming Code on

Demand[J].Expert Systems with Applications，2013，40（8）：

2845-2857.

[3] NegametzyanovA，Lau S L，Ng C F.Web-based Interactive Form Generator for Public Kiosks[C].IEEE Conference on Open Systems，2015.

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

[5] 夏仙.基于SSI框架的通用表單開發(fā)工具的設(shè)計(jì)與實(shí)現(xiàn)[D].北京：北京郵電大學(xué)，2013.

[6] 胡麗媛，黎杰.MVC模式及Struts框架的研究與應(yīng)用[J].計(jì)算機(jī)與信息技術(shù)，2011（10）：9-12.

[7] 吳海.Bootstrap模板在后臺(tái)管理系統(tǒng)應(yīng)用中的經(jīng)驗(yàn)探討[J].信息通信，2015（2）：101-103.

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

作者簡介：

程 佳（1994-），女，本科生.研究領(lǐng)域：軟件工程.

陳 濤（1979-），男，碩士，講師.研究領(lǐng)域：計(jì)算機(jī)網(wǎng)絡(luò).（本

文通訊作者）

王 成（1993-），男，本科生.研究領(lǐng)域：軟件工程.