程佳　陳濤　王成

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

關鍵詞：表單；數(shù)據(jù)采集；Web；程序架構

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

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

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

2.1 處理流程設計

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

（1）管理員定義表單

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

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

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

（3）管理員審核表單

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

2.2 程序架構設計

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

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

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

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

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

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

technology）

3.1 動態(tài)表單結構生成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.4 常用Web表單管理

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

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

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

5 結論（Conclusion）

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

參考文獻（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)表單快速生成技術[J].計算機系統(tǒng)應用，2010，19（9）：60-63.

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

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

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

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

作者簡介：

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

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

文通訊作者）

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