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

程佳　陳濤　王成

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

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

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

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

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

2.1 處理流程設(shè)計

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

（1）管理員定義表單

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

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

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

（3）管理員審核表單

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

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

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

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

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

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

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

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

technology）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.4 常用Web表單管理

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

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

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

5 結(jié)論（Conclusion）

根據(jù)日常工作中的表單數(shù)據(jù)采集需求，實現(xiàn)了系統(tǒng)的基本功能，包括用戶管理、表單任務(wù)設(shè)計、表單收藏、表單查看、數(shù)據(jù)填報、數(shù)據(jù)審核與導(dǎo)出等，系統(tǒng)的實現(xiàn)主要采用如今流行的Struts2+Hibernate+Bootstrap框架技術(shù)，擴(kuò)展性較好。系統(tǒng)功能性較為實用、靈活性較好。而且，系統(tǒng)的用戶可以是很大眾化的，不要求具備程序設(shè)計方面的知識。但系統(tǒng)也還可以進(jìn)一步改進(jìn)。比如，提高個性化設(shè)置和通用性擴(kuò)展，對于不同工作需求的用戶，能自定義配置程序和系統(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的動態(tài)表單快速生成技術(shù)[J].計算機(jī)系統(tǒng)應(yīng)用，2010，19（9）：60-63.

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

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

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

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

作者簡介：

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

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

文通訊作者）

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