1、本科畢業設計論文 本科畢業設計論文題 目 基于web的數據收集器表單模板設計與實現 專業名稱 軟件工程 學生姓名 XX 指導教師 XX 畢業時間 2014年6月 摘 要互聯網的規模化發展催生了大數據這個近幾年IT業界中非常火熱的一個詞匯，也啟發人們思考處理海量數據的新方式。舉個例子，以往進行問卷調查，都是由相關機構發放紙質的問卷調查表，內容填寫完成以后統一上交，進行統計。這種古老的方式成本高，效率低，已經不能滿足大眾及企業的需求。隨著互聯網的普及，如今使用信息化渠道來完成問卷調查變得頗受歡迎，具體實現方式大致有兩種，一種是用戶下載電子表格或文檔進行填寫，然后再提交；另一種是直接通過網頁的方式完

2、成問卷調查。而這兩種方式顯然都不能滿足規模化的需求。由于當前主流的一些軟件工具并不能滿足人們對于巨量數據的挖掘、收集、整理、分析的需求，盡管國內外都出現了不少根據這個痛點而進行突破的大數據服務工具，但效果并不令人滿意。本論文介紹的是基于web的在線表單數據收集系統。系統采用了目前最流行的輕量級J2EE框架，有助于應用程序邏輯與底層技術之間的分離，并結合開發模式穩定、高效的MySQL數據庫，提高了本系統的靈活性與穩定性。本系統主要包含以下功能模塊：我的表單、模板中心、后臺管理。全文以系統概述、系統分析、系統總體設計、系統詳細設計等幾個部分詳細介紹了系統模板中心模塊的開發過程。關鍵詞： 基于網絡，

3、JSP，自定義表單模板，數據收集 ABSTRACTThe large-scale development of the Internet has spawned a very popular word: big data in IT industry in the past few years, also inspires people to think of the new ways to handle the massive amounts of data. For example, it is paper questionnaires issued by the relevant aut

4、horities that worked in the survey, and then to be submitted for statistics after the content were filled out later. This old way has been unable to meet the needs of the public and businesses because of its high cost and low efficiency.With the popularity of the Internet, now the use of information

5、 channels to complete the questionnaire becomes popular, there are mainly two specific implementations. One is the user download a spreadsheet or document to fill in and then submitted; another is the user complete the survey directly through the web. Obviously, these two methods all cant meet the n

6、eeds of large-scale. Due to the current mainstream software tools cant meet the needs for massive data mining, collection, cleansing and analysis of people, there are many service tools developed to solve above problems, but the effect is not satisfactory.What this paper describes is the system to c

7、ollect data online with Html forms, it uses the most popular lightweight J2EE frame presently which is helpful between the application program logic and first floor technology separation, and the stable and efficient MySQL database which can enhance this systems flexibility and stability. Our system

8、 mainly includes the following modules: My form, template center and background management. There are several parts to introduce the development process of templates Center module such as system overview, system analysis, system design, detailed design, etc. KEY WORDS: Web-Based , JSP , custom form

9、template, data collection目 錄第一章 緒論11.1課題研究背景與意義11.2國內外研究狀況11.2.1國外現狀11.2.2國內現狀11.3研究內容和擬解決的問題21.3.1用戶對象的大眾化21.3.2前臺交互界面的友好性21.3.3表單DIY的易操作性21.3.4表單自定義規則與特效21.3.5數據獲取與處理21.3.6系統的對外擴展性21.4主要研究內容3第二章 在線表單數據收集器系統分析42.1系統需求分析42.1.1登陸注冊模塊42.1.2我的表單模塊52.1.3模板中心模塊92.1.4管理員后臺管理模塊142.2系統總體設計162.2.1系統架構設計162.2

10、.2系統功能結構162.3開發工具的選擇182.3.1 Dreamweaver CS4182.3.2 Photoshop CS4182.3.3 MyEclipse 2014182.4系統運行的軟、硬件環境要求182.4.1硬件運行環境182.4.2軟件運行環境192.5相關開發技術簡介192.5.1 JSP簡介192.5.2 CSS簡介192.5.3 JQuery簡介192.5.4 AJAX簡介20第三章 在線表單數據收集器系統表單模板設計213.1模塊流程圖213.2模塊功能結構223.3模板發布功能詳細設計233.3.1 表單字段歸納233.3.2 創建新的模板293.3.3從已有的表單復

11、制303.4 選用模板創建表單功能分析313.5模塊認證功能分析33第四章 在線表單數據收集器表單模板功能實現364.1 用戶登陸模塊364.2 查看分類模板功能404.3 模板展示功能444.4 模板認證功能474.5 模板發布功能504.5.1 設計新的模板504.5.2 從已有表單復制564.6 選用模板創建表單604.7 個人管理功能614.8 管理員字段管理功能64第五章 系統前臺兼容性的考慮及優化675.1系統兼容性問題675.2一般解決方案675.3本系統開發過程中兼容性問題的解決67第六章 總結與展望69參考文獻70致謝71畢業設計小結72第一章 緒論1.1課題研究背景與意義互

12、聯網熱潮將人們置身于一個信息爆炸空間中，人們要面對大量內容紛繁復雜的信息，涉及生活中的方方面面，比如記錄你的日常開銷，日程安排，報名，計劃安排等等，因此迫切需要以一種快捷有效的方式對數據加以采集、整理。另一方面，表單因其清晰、直觀的表達逐漸成為企業管理中必不可少的形式化表達工具，而務實地把公司的人力、物力、財力以及時間等因素作為資源，揉和成表單，以可靠、通暢、嚴謹的流程化形式承接出來，對于謀求企業內外協調發展，實現管理規范化的目標具有十分重要的意義。除此之外，表單不僅作為企業管理與信息處理的重要形式，更是一種網絡數據交流和采集的工具，漸漸地成為電子化辦公不可缺少的一部分。由于各企業單位及用戶的

13、情況和使用表單的目的不同，在不同時期對表單的種類、格式和表示方法的要求也會有所不同。因此，就需要一個通用的表單管理系統來滿足不同需求的表單建立過程，而相應地，此系統要適應不同行業、不同單位、個人以及不同時間的變化，就不能只提供一個完整統一的固定的表單表格結構，應允許用戶根據需要進行自定義。因此，快速地生成新的滿足用戶需求的表單和重用已有的表單模板，在已有形式基礎上再加工可以極大的提高效率，降低表單生成復雜度，極大的方便企業及用戶。1.2國內外研究狀況1.2.1國外現狀國外的在線表單應用已經很成熟，它使一般用戶創建各式各樣的在線表單成為可能，用戶不需要太多的HTML知識就可以輕松地制作出功能強大

14、的表單來，而不必使用FrontPage或Dreamweaver等網頁編輯器來編寫網頁表單，極大程度上改善了用戶體驗，并可以輕輕松松地嵌入到自己的網站應用中去。比較成功的如Jotform，FormSpring，Wufoo等。1.2.2國內現狀金數據是一款免費的表單設計和數據收集工具，該網站系統并不專注于某一方面的數據，其還提供了數百種專業的模板，并提供發布表單、查看數據和報表的服務，金數據譽于友好的UI和較多的表單模板。總的來說，國內在線表單網站大部分也采用了主流的表單技術，簡化了表單的開發，提高了表單的開發效率，在一定程度上滿足了用戶對表單的需求。但在易用性方面還是稍有不足，不能做到真正的“所

15、見即所得”，而且在數據的處理上也未能做到全面的分析。所以，在線表單還可以做更深一步的研究，在線表單系統的發展還能得到進一步的提高。1.3研究內容和擬解決的問題1.3.1用戶對象的大眾化目前，國內外不乏眾多大數據企業們提供精細復雜的巨量數據服務，也有專門提供在線數據服務的如Wufoo等成熟的公司存在，但都面臨著目標用戶門檻較高的缺點，這就在一定程度上限制了在線表單數據收集的普及，沒能真正方便普通用戶的生活。本系統主要面向中小團隊或者個人提供輕態數據服務，真正做到低門檻、高體驗，更廣泛地涉足用戶生活。1.3.2前臺交互界面的友好性系統網站交互設計的目的是增加網站的友好度、可用性和易用性，從而使用戶

16、能夠簡單，快速和有效地完成網站賦予或用戶自身需要的服務、功能和目標。主要包含以下內容：1 界面設計，需要設計創意性界面提高觀賞性并注意避免繁瑣的頁面元素與布局；2 導航設計，導航設計是提供給用戶去某個地方的能力，是用戶能看到的網站結構；3 信息設計，信息設計就是通過網站傳達給用戶某些信息，用戶可通過這些信息了解自己正在進行的某些事和應該如何進行某些事。1.3.3表單DIY的易操作性系統基于“所見即所得”的理念，給予用戶直觀選擇表單元素并實現輕松拖拽以自定義表單布局的能力，更提供了豐富且操作簡單的字段設計欄以完成表單控制，最大限度的簡化用戶的表單創建過程。這些功能需要在前臺采用JQuery等前端

17、技術來實現。1.3.4表單自定義規則與特效表單的每一個字段因其功能的差異可能需要有其獨有的設置，包括輸入長度、格式或內容的限制等等，因此設計適用于每個字段的應有的控制邏輯是我們需要解決的重要內容。1.3.5數據獲取與處理系統提供在線創建表單，導入Excel生成表單等操作方式，對于習慣使用Excel的用戶而言，無需重復制作即可快速生成表單。對于數據收集的結果以數據報表的形式直觀顯示，并可以導出報表圖和Excel報表到本地，方便用戶重用。這些上傳下載功能的實現也是待解決的重要問題。1.3.6系統的對外擴展性考慮到互聯網帶給人們生活方式的重大改變，微博、微信、QQ等社交平臺在人們的日常生活中已占據著

18、舉足輕重的地位。如何更廣泛完成數據采集是我們必須考慮的一個問題，這就需要系統支持與這些社交平臺的數據關聯。本系統擬為每一個表單產生發布地址，并支持將其發布到其它社交平臺以提高擴展性。1.4主要研究內容本文基于目前國內外先進的智能電子表單系統的技術和思路，并結合實際需求，提出了自己的在線表單數據收集器解決方案。本文對整個系統的設計思想和目標都給予了描述和說明，主要實現都進行了詳細分析。基于web的在線表單數據收集器系統結合B/S網絡結構，遵循MVC架構模式，著眼于系統的通用性與擴展性，解決了目前表單生成系統專業性過強，通用性不夠的矛盾。本文主要從以下幾個方面介紹課題的研究成果：第一章：闡述了設計

19、該系統的原因及背景，明確了研究目標和內容。第二章：對系統進行需求分析并給出系統架構設計和目標，完成了總體設計部分，并介紹表單的相關知識與實現所需要的技術。第三章：針對系統表單模板模塊作了詳細設計，給出此模塊的活動圖和功能結構圖，并深入研究了其主要功能模塊的功能，包括模板發布模塊和模板認證模塊。第四章：深入討論了表單模板功能模塊的具體實現，并將模板的定義過程和具體操作過程通過圖示說明，使功能更加清晰明了。第五章：對系統前臺開發過程中出現的兼容性問題進行分析并研究解決方案。第六章：對本文所做的主要工作進行了總結，并分析了系統的不足。第二章 在線表單數據收集器系統分析2.1系統需求分析2.1.1登陸

20、注冊模塊用戶登錄注冊模塊的用例圖如圖2-1所示。圖2-1 用戶登錄注冊模塊用例圖 1 注冊賬號用戶注冊操作說明如表2-1所示。表2-1用戶注冊操作說明用例名稱：注冊賬號角色說明：未注冊用戶用例說明：用戶訪問系統并注冊賬號前置條件：用戶訪問系統網頁基本事件流：1. 用戶進入系統注冊頁面2. 用戶輸入用戶名和密碼3. 系統驗證用戶名和密碼的正確性4. 系統顯示用戶注冊成功，進入使用界面其它事件流：3.1如果提供的用戶名存在或不符合格式，系統顯示“用戶名已存在”或“用戶名不合法”信息3.2如果密碼長度不符合要求或密碼重復輸入不一致，系統顯示“密碼有誤”信息異常事件流：由于系統或者數據服務器出現故障，

21、用戶注冊失敗后置條件：用戶完成賬號注冊2 登陸系統用戶登錄操作說明如表2-2所示。表2-2用戶登錄操作說明用例名稱：登錄系統角色說明：已注冊用戶用例說明：用戶訪問系統并登陸前置條件：用戶已注冊成功并訪問系統網頁基本事件流：1. 用戶進入系統登陸頁面2. 用戶提交用戶名和密碼3. 系統驗證用戶名和密碼的正確性4. 系統顯示登陸成功，進入用戶使用界面其它事件流：3.1如果提供的用戶名不存在，系統顯示“用戶名不存在”信息，詢問用戶是否輸入錯誤或者提醒用戶注冊3.2如果提供的密碼錯誤，系統顯示“密碼錯誤”信息，并結束操作異常事件流：由于系統或者數據服務器出現故障，用戶登陸失敗后置條件：用戶完成賬號登陸

22、 3 注銷系統用戶注銷操作說明如表2-3所示。表2-3用戶注銷操作說明用例名稱：注銷系統角色說明：已登陸用戶用例說明：用戶退出系統登錄狀態前置條件：用戶已登陸成功并訪問系統網頁基本事件流：1. 用戶請求從系統注銷2. 系統注銷該用戶，并清除會話信息3. 系統提示注銷成功其它事件流：無異常事件流：由于系統或者數據服務器出現故障，用戶注銷失敗后置條件：用戶完成賬號注銷，退出登錄狀態 2.1.2我的表單模塊用戶可以對表單系統進行登錄、設計表單、管理表單、查看數據和注銷幾個動作。其中管理表單有包括了添加、修改和刪除操作。我的表單模塊用例圖如圖2-2所示。圖2-2 我的表單模塊用例圖表2-4用戶設計表單

23、操作說明用例名稱：設計表單角色說明：已登陸用戶用例說明：用戶創建自己的表單前置條件：用戶已登陸成功并訪問系統網頁基本事件流：1. 用戶選擇直接設計新表單，或從表單模板庫中選用合適模板進行編輯修改2. 用戶拖放表單字段到設計器界面，并設置相關控制屬性3. 系統在編輯區顯示表單元素4. 用戶完成表單元素創建，命令系統保存該表單5. 系統驗證表單的合法性（表單名稱和表單內容不能為空）6. 系統保存表單信息，將表單放入數據庫7. 系統提示保存成功，并自動發布其它事件流：5.1如果表單內容不合法，系統提示修改，并返回26.1如果遇到系統故障，系統會提示保存失敗，并返回4異常事件流：由于系統或者數據服務器

24、出現故障，系統表單保存失敗后置條件：用戶完成表單設計，系統保存成功1 設計表單用戶設計表單操作說明如表2-4所示。2 管理表單1) 發布表單用戶發布表單操作說明如表2-5所示。表2-5用戶發布表單操作說明用例名稱：發布表單角色說明：已登陸用戶用例說明：用戶發布已創建表單前置條件：用戶已登陸成功并訪問系統網頁基本事件流：1. 用戶設計好表單，并填寫相應信息，命令系統添加到數據庫并選擇發布表單2. 系統驗證表單的合法性3. 系統保存表單信息，將表單存入數據庫4. 系統提示表單發布成功其它事件流：2.1如果表單不合法，系統提示用戶修改，并返回13.1如果遇到系統故障，系統提示保存失敗，并返回1異常事

25、件流：由于系統或者數據服務器出現故障，系統表單發布失敗后置條件：用戶表單發布成功2) 預覽表單用戶預覽表單操作說明如表2-6所示。表2-6用戶預覽表單操作說明用例名稱：預覽表單角色說明：已登陸用戶用例說明：用戶預覽表單前置條件：用戶已登陸成功并訪問系統網頁基本事件流：1. 用戶選擇要預覽的表單2. 用戶命令系統預覽該表單3. 系統以最終效果顯示該表單其它事件流：無異常事件流：由于系統或者數據服務器出現故障，系統表單預覽失敗后置條件：用戶完成表單預覽3) 修改表單用戶修改表單操作說明如表2-7所示。表2-7 用戶修改表單操作說明用例名稱：修改表單角色說明：已登陸用戶用例說明：用戶修改表單前置條件

26、：用戶已登陸成功并訪問系統網頁基本事件流：1. 用戶請求修改已創建的表單信息2. 系統顯示待修改的表單信息，等待用戶修改3. 用戶修改相應信息，命令系統更新到數據庫4. 系統驗證表單的合法性，如果表單不合法，系統提示修改，并返回35. 系統保存新的表單信息，如果遇到系統故障，系統提示保存失敗，并返回36. 系統提示修改保存成功其它事件流：無異常事件流：由于系統或者數據服務器出現故障，系統表單修改失敗后置條件：用戶完成表單修改4) 刪除表單用戶刪除表單操作說明如表2-8所示。表2-8 用戶刪除表單操作說明用例名稱：刪除表單角色說明：已登陸用戶用例說明：用戶刪除表單前置條件：用戶已登陸成功并訪問系

27、統網頁基本事件流：1. 用戶請求刪除已創建的表單2. 系統刪除該表單3. 系統提示刪除成功其它事件流：2.1如果遇到系統故障，系統提示刪除失敗，并返回1異常事件流：由于系統或者數據服務器出現故障，系統表單刪除失敗后置條件：用戶完成表單刪除5) 查看數據用戶查看表單數據操作說明如表2-9所示。表2-9 用戶查看表單數據操作說明用例名稱：查看數據角色說明：已登陸用戶用例說明：用戶查看表單已收集數據前置條件：用戶已登陸成功并訪問系統網頁基本事件流：1. 用戶選擇要查看數據的表單2. 用戶進入相關表單數據查看頁面3. 系統以表格或者數據報表的方式顯示已收集的數據其它事件流：無異常事件流：由于系統或者數

28、據服務器出現故障，系統表單收集信息查看失敗后置條件：用戶完成表單收集信息查看2.1.3模板中心模塊1 查看分類模板功能按照表單模板所實現的功能，如調查，報名，訂單，登記等，以及表單內容所屬行業不同，如餐飲，電子商務，醫療，教育等進行分類，為用戶提供結構清晰的模板分類結構，方便用戶根據模板屬性按需查找表單模板。用例圖如圖2-3所示。 圖2-3 用戶查看模板用例圖 用戶查看分類模板操作說明如表2-10所示。表2-10查看分類模板操作說明用例名稱：查看分類模板角色說明：已登錄用戶用例說明：用戶根據分類條件查看系統模板庫中的模板前置條件：用戶訪問系統模板中心基本事件流：1. 用戶進入系統模板中心頁面2

29、. 用戶選擇各個分類條件3. 系統顯示各分類條件下所屬的表單模板列表其它事件流：2.1用戶選擇“廣場”，系統默認顯示當前最熱門的表單模板列表2.1.1用戶選擇“最新認證”，系統按照認證時間顯示最近被管理員認證通過的表單模板列表2.2用戶選擇“分類”，系統默認顯示“調查”主題的表單模板列表2.2.1用戶選擇“報名”、“訂單”、“登記”、“生活”主題，查看相關主題的模板列表2.2.2用戶選擇“官方認證”，系統顯示認證狀態為“已認證”的表單模板列表2.2.3用戶選擇“沙灘”，系統顯示認證狀態為“認證中”的表單模板列表2.3用戶選擇“行業”，系統顯示“微信”行業相關的表單模板列表2.3.1用戶選擇“餐

30、飲”、“電子商務”、“醫療”、“教育”等行業，查看相關行業的模板列表2.4用戶選擇“個人”，系統默認進入“我的收藏”子欄目下，系統顯示用戶收藏的所有模板及表單列表2.4.1用戶選擇“我的創建”，系統顯示用戶創建的表單模板，包括認證成功和認證失敗的所有模板異常事件流：由于系統或者數據服務器出現故障，模板列表顯示失敗后置條件：用戶查看模板成功圖2-4 用戶發布模板 模板發布操作說明如表2-11所示。表2-11 模板發布操作說明用例名稱：模板發布角色說明：已登錄用戶用例說明：用戶根據功能需求，創建模板并發布到系統模板庫接收管理員審核前置條件：用戶已登錄系統，訪問系統模板中心模塊基本事件流：1.用戶登

31、陸成功進入系統模板中心頁面2.用戶選擇“發布模板”3.用戶進入模板創建編輯頁面，根據功能需求添加所需要的表單元素，并設置相應字段元素的控制信息，點擊“下一步”完成模板創建第一步4.用戶進入第二步，選擇表單模板圖標信息、所屬分類及行業，并填寫模板用途信息簡介，完成基本信息的編輯5.用戶點擊“發布”，完成整個表單模板發布過程6.系統跳轉到第三步頁面，顯示“表單發布成功”其它事件流：2.1用戶選擇“設計新的模板”，進入32.2用戶選擇“從已有表單復制”，系統在當前頁面彈出列表框，顯示所有用戶創建成功的表單；用戶選擇所需列表項，進入3，在所選表單信息基礎上進行編輯修改3.1用戶通過點擊“添加新字段”，

32、在系統顯示的字段列表中選擇所需的字段，并填寫相應字段控制信息異常事件流：由于系統或者數據服務器出現故障，模板創建失敗后置條件：用戶完成對表單模板的創建與發布操作2 模板發布功能用戶創建模板可以有兩種方式。一種是可以根據需要設計新的模板，這就需要用戶在創建之前有必要的構思；另一種是從已有的表單復制，這種方式是在用戶之前創建成功的表單基礎上編輯修改成表單模板上傳到模板庫。用例圖如圖2-4所示。3 選用模板創建表單用戶通過瀏覽與需求相關的表單模板，并在找到合適的模板之后選用，在此模板基礎上直接編輯修改成滿足自己需求的表單，簡化表單創建過程，提高效率及改善用戶體驗。用例圖如圖2-5所示。圖2-5 用戶

33、選用模板創建表單用戶選用模板創建表單操作說明如表2-12所示。表2-12 選用模板創建表單操作說明用例名稱：選用模板創建表單角色說明：已登錄用戶用例說明：用戶根據條件選擇所需的模板并點擊查看模板詳細信息，選用合適的模板并在該模板基礎上創建表單前置條件：用戶登錄成功后進入系統模板中心頁面基本事件流：1. 用戶登陸進入系統模板中心頁面2. 用戶根據篩選條件選擇所需表單模板并點擊查看模板詳細信息3.用戶點擊“選用”，系統跳轉至我的表單模塊的“表單創建”頁面，用戶可以在原表單模板頁面內容基礎上進行編輯修改完成表單創建其它事件流：3.1用戶點擊“收藏”，頁面顯示收藏成功。異常事件流：由于系統或者數據服務

34、器出現故障，用戶選用模板創建表單失敗后置條件：用戶完成依據表單模板創建表單的操作4 個人管理功能用戶可以收藏瀏覽過的感興趣的表單模板以備以后重用，亦可以查看自己創建的表單模板，并查看其認證狀態。此外還包括用戶注冊，登陸，修改個人信息以及丟失密碼后找回密碼等基本功能。用例圖如圖2-6所示。圖2-6 用戶個人信息管理 表2-13 個人信息管理操作說明用例名稱：個人信息管理角色說明：已登錄用戶用例說明：系統對于用戶收藏的表單模板及創建成功的表單進行整理，用戶可以查看這些表單信息，并完善自己的個人信息設置 前置條件：用戶已登錄并訪問系統模板中心模塊基本事件流：1.用戶登陸進入系統模板中心頁面2.用戶點

35、擊“個人”，進入個人管理頁面3.系統默認顯示“我的收藏”欄目下的表單模板列表其它事件流：1.1未登錄用戶點擊“注冊”，系統跳轉至注冊頁面完成用戶注冊并登錄成功1.2未登錄用戶點擊“登陸”，輸入用戶名、密碼登陸系統2.1用戶點擊“我的創建”，系統顯示用戶創建的所有表單模板，包括成功認證或未成功認證狀態的表單模板。2.2用戶點擊模板列表項，查看相關表單模板的詳細信息2.3用戶點擊“發布模板”，進入模板創建模塊2.4用戶點擊設置圖標或用戶名，系統跳轉進入個人中心頁面，用戶完成個人信息的修改異常事件流：由于系統或者數據服務器出現故障，用戶表單模板或個人信息修改失敗后置條件：用戶完成查看個人表單模板信息

36、和個人信息的修改、完善操作個人信息管理操作說明如表2-13所示。2.1.4管理員后臺管理模塊這是只有管理員才有權限進入的模塊。管理員具有設置整個系統具體表單元素是否可用、更新維護表單創建元素、對用戶創建的表單模板進行認證、管理查看用戶信息等的重要功能。用例圖如圖2-7所示。圖2-7 管理員后臺管理1 表單字段管理管理員表單字段管理操作說明如表2-14所示。表2-14管理員表單字段管理操作說明用例名稱：表單字段管理角色說明：已登錄管理員用例說明：管理員對于系統可用表單字段進行管理前置條件：系統管理員訪問系統后臺管理模塊基本事件流：1. 系統管理員登陸進入系統后臺管理頁面2. 管理員進入表單字段管

37、理子目錄3. 管理員設置表單字段是否可用狀態其它事件流：無異常事件流：由于系統或者數據服務器出現故障，管理員表單字段可用狀態修改失敗后置條件：系統管理員完成對表單字段可用性的設置操作2 用戶管理管理員用戶管理操作說明如表2-15所示。表2-15管理員用戶管理操作說明用例名稱：用戶管理角色說明：已登錄管理員用例說明：管理員對于用戶信息進行管理前置條件：系統管理員訪問系統后臺管理模塊基本事件流：1. 系統管理員登陸進入系統后臺管理頁面2. 管理員進入用戶管理子目錄3. 管理員查看用戶信息，包括用戶創建的表單和表單模板以及用戶個人基本信息其它事件流：無異常事件流：由于系統或者數據服務器出現故障，管理

38、員用戶信息查看失敗后置條件：系統管理員完成對用戶信息的管理操作表2-16管理員模板管理操作說明用例名稱：模板管理角色說明：已登錄管理員用例說明：管理員對于用戶提交的表單模板進行審核，并設置表單模板認證狀態前置條件：系統管理員訪問系統后臺管理模塊基本事件流：系統管理員登陸進入系統后臺管理頁面管理員進入模板管理子目錄2. 管理員根據審核規則對用戶提交的表單模板進行認證審核，并修改其認證狀態其它事件流：無異常事件流：由于系統或者數據服務器出現故障，管理員對模板認證信息修改失敗后置條件：系統管理員完成對表單模板的審核認證操作3 模板管理用戶創建的表單模板需要提交到系統模板庫接受審核和認證，系統管理員會

39、根據模板內容是否合理、表單是否完善、是否具有可用性、是否適合其他用戶重用等因素綜合考慮，對之審核，避免惡意創建無用的模板。通過后及給予“官方認證”狀態，否則會批回給用戶修改。管理員模板管理操作說明如表2-16所示。2.2系統總體設計2.2.1系統架構設計本系統采用了流行的B/S結構和SSH框架完成系統開發。采用B/S結構不僅把客戶機從沉重的負擔和不斷對其提高的性能的要求中解放出來，也把技術維護人員從繁重的維護升級工作中解脫出來。集成SSH框架的系統框架圖如圖2-8所示。使用SSH框架最后，系統的基本業務流程是：在表現層中，首先通過JSP頁面實現交互界面，負責傳送請求(Request)和接收響應

40、(Response)，然后Struts根據配置文件 (struts-config.xml)將ActionServlet接收到的Request委派給相應的Action處理。在業務層中，管理服務組件的 Spring IOC容器負責向Action提供業務模型(Model)組件和該組件的協作對象，數據處理(DAO)組件完成業務邏輯，并提供事務處理、緩沖池等容器組件以提升系統性能和保證數據的完整性。而在持久層中，則依賴于Hibernate的對象化映射和數據庫交互，處理DAO組件請求的數據，并返回處理結果。2.2.2系統功能結構根據系統功能分析，基于web的在線表單數據收集器功能結構如圖2-9所示。1用戶

41、表單模塊負責用戶表單的設計操作。用戶可以依照需求在線編輯目標表單完成所需功能，設計好之后并發布，由系統在用戶設定的時間內進行數據采集。在這期間，用戶可以隨時查看所收集的數據。2模板中心模塊為用戶提供表單設計的模板。用戶可以創建并發布表單模板到系統模板庫，也可以通過瀏覽模板并選用系統模板庫中已有模板進行自己的表單設計，提高表單設計效率。3后臺管理模塊系統設有管理員來對用戶的操作進行管理。系統管理員可以設置系統表單字段是否可用，查看用戶信息包括用戶創建的表單和模板、用戶的個人基本信息，并實現對用戶發布的模板進行審核認證。圖2-8 系統SSH框架圖圖2-9 系統功能結構圖2.3開發工具的選擇2.3.

42、1 Dreamweaver CS4Dreamweaver是美國MACROMEDIA公司開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器，它是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。DW最大的優點就是所見即所得，對W3C網頁標準化支持十分到位，同時它還支持網站管理，包含HTML檢查、HTML格式控制、HTML格式化選項、圖像編輯、全局查找替換、全FTP功能、處理Flash等富媒體格式和動態HTML，而且還支持ASP、JSP、PHP、ASP.NET、XML等程序語言的編寫與調試。2.3.2 Photosho

43、p CS4Adobe Photoshop，簡稱“PS”，是一個由Adobe Systems開發和發行的圖像處理軟件。Photoshop主要處理以像素所構成的數字圖像，可以為您提供專業的圖像編輯與處理，利用其廣泛的編修與繪圖工具，可以更有效的進行圖片編輯工作。它以其獨特的歷史紀錄浮動窗口和可編輯的圖層效果功能，使用戶可以方便的測試效果。對各種濾鏡的支持更使用戶能夠輕松創造出各種奇幻的效果。在網站前端開發過程中需要把圖片用Photoshop處理成加載到網站頁面的圖片，用Photoshop 制作矢量圖形用作網站頁面的修飾按鈕。在本系統開發前期階段，前臺交互頁面的友好性離不開相關圖片的裝飾，而往往沒有

44、現成素材可獲取，這就需要借助Photoshop強大的圖片編輯功能自定義制作合適的網頁圖片及按鈕。2.3.3 MyEclipse 2014MyEclipse企業級工作平臺（MyEclipse Enterprise Workbench ，簡稱MyEclipse）是對Eclipse IDE的擴展，利用它我們可以在數據庫和Java EE的開發、發布，以及應用程序服務器的整合方面極大的提高工作效率。它是功能豐富的Java EE集成開發環境，包括了完備的編碼、調試、測試和發布功能，完整支持HTML, Struts, JSF, CSS, JavaScript, SQL, Hibernate。簡單而言，MyE

45、clipse是Eclipse的插件，也是一款功能強大的Java EE集成開發環境，支持代碼編寫、配置、測試以及除錯。2.4系統運行的軟、硬件環境要求2.4.1硬件運行環境1 CPU：P4以上2 內存：1GB以上；3 硬盤：100GB以上。2.4.2軟件運行環境1 操作系統：Windows XP/ Windows 7/ Windows 8；2 開發平臺：MyEclipse 2014；3 數據庫：MySQL；4 瀏覽器：IE7/IE8/IE9/chrome/Firefox等。2.5相關開發技術簡介2.5.1 JSP簡介JSP1全名為Java Server Pages，是由Sun Microsyst

46、ems公司倡導、許多公司參與一起建立的一種動態技術標準。在傳統的網頁HTML文件（*.htm，*.html）中加入Java程序片段（Scriptlet）和JSP標簽，就構成了JSP網頁。其根本是一個簡化的Servlet設 計，他實現了HTML語法中的java擴張（以 形式）。JSP與Servlet一樣，是在服務器端執行的。通常返回給客戶端的就是一個HTML文本，因此客戶端只要有瀏覽器就能瀏覽。Web 服務器在遇到訪問JSP網頁的請求時，首先執行其中的程序段，然后將執行結果連同JSP文件中的HTML代碼一起返回給客戶端。插入的Java程序段可以操作數據庫、重定向網頁等，以實現建立動態網頁所需要的

47、功能。2.5.2 CSS簡介CSS2（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯樣式表”）是一組格式設置規則，用于控制Web頁面的外觀。通過使用CSS樣式設置頁面的格式，可將頁面的內容與表現形式分離。頁面內容存放在HTML文檔中，而用于定義表現形式的CSS規則存放在另一個文件中或HTML文檔的某一部分，通常為文件頭部分。將內容與表現形式分離，不僅可使維護站點的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。2.5.3 JQuery簡介JQuery3是一個兼容多瀏覽器的JavaScript庫，核心理念是write less, do more

48、(寫的更少,做的更多)。JQuery的語法設計可以使開發更加便捷，使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理以及其他功能，并且方便地為網站提供AJAX交互。除此以外，JQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。目前JQuery主要提供如下功能：1 訪問頁面框架的局部這是 DOM 模型所完成的主要工作之一，DOM獲取頁面中某個節點或者某一類節點有固定的方法，而JQuery則大大地簡化了其操作的步驟。2 響應事件JavaScrip

49、t 有處理事件的相關方法，而引入 JQuery 之后，可以更加輕松地處理事件，而且開發人員不再需要考慮瀏覽器兼容性問題。3 為頁面添加動畫通常在頁面中添加動畫都需要開發大量的 JavaScript代碼，而 JQuery 大大簡化了這個過程。JQuery的庫提供了大量可自定義參數的動畫效果。4 與服務器異步交互AJAX框架可以簡化代碼的編寫，JQuery也提供了一整套AJAX相關的操作，大大方便了異步交互的開發和使用。5 簡化常用的 JavaScript操作JQuery還提供了很多附加的功能來簡化常用的 JavaScript操作，例如數組的操作、迭代運算等2.5.4 AJAX簡介AJAX4的全稱

50、是Asynchronous JavaScript + XML ，AJAX不是一個技術，它實際上是幾種技術，每種技術都有其獨特這處，合在一起就成了一個功能強大的新技術。AJAX結合了Java技術、XML以及JavaScript等編程技術，可以讓開發人員構建基于Java技術的Web應用，并打破了使用頁面重載的慣例。 AJAX是使用客戶端腳本與Web服務器交換數據的Web應用開發方法。這樣，Web頁面不用打斷交互流程進行重新加載，就可以動態地更新。使用AJAX，用戶可以創建接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面。異步這個詞是指AJAX應用軟件與主機服務器進行聯系的方式。如果使

51、用舊模式，每當用戶執行某種操作、向服務器請求獲得新數據，Web瀏覽器就會更新當前窗口。如果使用AJAX的異步模式，瀏覽器就不必等用戶請求操作，也不必更新整個窗口就可以顯示新獲取的數據。第三章 在線表單數據收集器系統表單模板設計3.1模塊流程圖用戶登陸注冊模塊流程圖如圖3-1所示。 圖3-1 登陸注冊模塊流程圖用戶訪問網站，在進行模板有關操作之前需要先登錄。若用戶已注冊則直接輸入用戶名和密碼登錄，即可查看個人模板信息并進行所有系統功能操作。未注冊用戶需按照系統提示進行注冊再登錄。用戶登陸成功之后，若需要發布新的模板，可通過選擇創建新的模板或從已有表單復制兩種方式來實現，進入模板編輯創建頁面，完成

52、模板創建。其中，創建新的模板會跳轉到空內容的模板編輯頁面，而從已有表單復制方式會在已選用的表單內容基礎上進行編輯修改完成模板創建。模板創建完成后需要填寫模板設置信息，最后發布模板，等待管理員認證。用戶的模板發布流程圖如圖3-2所示。圖3-2 模板發布流程3.2模塊功能結構根據系統的流程實現以及功能分析，基于web的表單數據收集器模板中心的功能結構如圖3-3所示。圖3-3 模板中心功能結構3.3模板發布功能詳細設計用戶創建模板可以有兩種方式。一種是可以根據需要設計新的模板，這就需要用戶在創建之前有必要的構思；另一種是從已有的表單復制，這種方式是在用戶之前已創建成功的表單基礎上編輯修改成表單模板，

53、然后發布到模板庫。3.3.1 表單字段歸納在分析了眾多在線表單制作網站表單制作特點之后，系統歸納整理出的表單字段共18種，設計原型如圖3-4所示。圖3-4 系統可用表單字段 1 單行文字在數據采集時，單行文字字段應用十分廣泛，一般用于用戶填寫某一特定項文字信息，并且信息相對較短，如身份證號碼等。本系統單行文字字段樣式設有單行文字標題、提示和單行文字輸入框，具體表單樣式設計如圖3-5所示。2 多行文字多行文字相比于單行文字而言，用戶填寫的信息量相對比較大，比如一段評論文字等。本系統多行文字字段樣式設有多行文字標題、提示和多行文字輸入框，具體表單樣式設計如圖3-6所示。圖3-5 系統單行文字表單字段圖3-6 系統多行文字表單字段3 單項選擇單項選擇是用戶表單最常用的字段之一，本系統提供的電子表單樣式允許用戶自由設置選項數量和不存在沖突的選項值，最大限度的滿足了用戶功能的需求，提高了系統靈活性。單項選擇字段樣式設有標題、提示和選項列表，具體表單樣式設計如圖3-7所示。 圖3-7 系統單項選擇表單字段 4 多項選擇多項選擇允許用戶自由設置選項數量和不存在沖突的選項值，并保持用戶多選的特性。多項選擇字段樣式設有標題、提示和選項列表，具體表單樣式設計如圖3-8所示。 圖3-8 系統多項選擇表單字段 5 圖片單選圖片單選允許