通用Web表單數據采集系統的設計與實現

程佳　陳濤　王成

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

關鍵詞：表單；數據采集；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）

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

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

2 系統總體設計（Overall design of the system）

2.1 處理流程設計

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

（1）管理員定義表單

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

（2）用戶填寫表單數據

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

（3）管理員審核表單

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

2.2 程序架構設計

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

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

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

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

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

3 關鍵技術的實現（Implementation of key

technology）

3.1 動態表單結構生成

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

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

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

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

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

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

3.2 數據存儲與解析

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

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

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

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

3.3 Web數據交互實現

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

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

3.4 常用Web表單管理

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

4 系統運行效果（Operation effect of the system）

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

5 結論（Conclusion）

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

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

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

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

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

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

作者簡介：

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

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

文通訊作者）

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