校園問卷調查與數據分析平臺的設計與實現實訓 目的1.掌握前后端分離架構設計思想理解SpringBoot 3 Vue 3前后端分離架構的分層原則與模塊劃分方法掌握B/S模式下表現層、接入層、應用層、數據訪問層和基礎設施層的協同工作機制。2.具備全棧開發實踐能力熟練運用SpringBoot 3.5.14搭建后端服務使用MyBatis-Plus 3.5.15 ORM框架實現數據訪問層使用Vue 3.5.34組合式APIComposition API配合Element Plus 2.13.7組件庫構建用戶界面。3.掌握系統安全防護技術理解JWT無狀態鑒權機制的原理與實現掌握BCrypt密碼加密算法在用戶密碼存儲中的應用學會通過MyBatis-Plus參數化查詢防止SQL注入攻擊。4.培養數據庫設計與優化能力能夠使用MySQL 8.4進行數據庫概念設計E-R 圖、邏輯設計關系模式和物理設計建表理解事務、唯一索引等機制在業務邏輯中的應用。5.提升工程化開發與測試意識掌握Maven項目構建、Git版本控制、Vite前端構建工具的使用學會設計測試用例、執行黑盒功能測試并分析測試結果實訓 內容本實訓項目為開發一套校園問卷調查與數據分析平臺覆蓋問卷從創建、發布、填寫到結果統計的全生命周期。具體內容包括以下四個核心功能模塊1.用戶認證模塊①實現用戶注冊功能用戶名、密碼輸入與BCrypt加密存儲用戶名唯一性校驗②實現用戶登錄功能用戶名密碼校驗JWT Token發放含 userId 和 role**③實現 **JWT鑒權攔截器前端攜帶Token訪問受保護接口攔截器校驗Token有效性④實現前端登錄/注冊頁面使用 Element Plus表單組件和校驗規則2.問卷管理模塊① 實現問卷 CRUD創建、讀取、更新、刪除問卷②實現問卷狀態機流轉草稿draft→已發布published→已關閉closed ③ 實現題目管理單選題/多選題的添加、刪除、編輯支持拖拽排序④實現發布與關閉操作發布前置校驗至少包含一道題目事務保證題目整體保存⑤實現前端問卷列表頁和編輯頁3.答卷管理模塊①實現已發布問卷的卷面展示根據題目類型動態渲染單選/多選控件②實現答卷提交前端校驗必答題后端校驗問卷狀態③實現防重復提交基于數據庫唯一索引(survey_id, user_id, device_hash)兜底④實現前端待填問卷列表頁和填寫頁4.結果統計模塊①實現統計視圖后端內存解析answers_json逐題計數并計算百分比②實現ECharts圖表渲染柱狀圖展示單選題分布餅圖展示多選題分布③實現明細視圖分頁查詢 el-table逐條展示答卷內容④實現視圖切換同一GET接口通過view參數區分chart/rows兩種視圖實訓 設備Windows 10/11或macOS / LinuWindows 10/11或macOS / Linu Axios Navicat / MySQL Workbench Lombok摘要隨著高校信息化建設的不斷推進傳統的紙質問卷調查方式已難以滿足校園調研對效率、數據準確性和實時性的要求。雖然市面上存在商業問卷平臺但在校園特定場景下存在功能冗余、數據安全顧慮和定制化不足等問題。因此開發一套面向高校師生的輕量級問卷調查與數據分析平臺具有重要的現實意義。本文設計并實現了一個基于 SpringBoot 3 Vue 3 前后端分離架構的校園問卷調查與數據分析平臺。系統采用 B/S 模式后端使用 SpringBoot 3.5.14、MyBatis-Plus 3.5.15 ORM 框架和 MySQL 8.4 數據庫前端使用 Vue 3.5.34 組合式 API、Element Plus 2.13.7 組件庫和 ECharts 圖表庫。在安全方面采用 JWT 無狀態鑒權機制和 BCrypt 密碼加密算法保障系統安全。系統面向兩類用戶問卷編輯者editor和受訪者respondent。編輯者可創建、編輯、發布和關閉問卷受訪者可瀏覽和填寫已發布的問卷。系統提供了四個核心功能模塊用戶認證模塊注冊/登錄/JWT鑒權、問卷管理模塊CRUD/狀態流轉、答卷管理模塊提交/防重復、結果統計模塊ECharts圖表可視化/明細查詢。在安全方面系統通過 JWT 無狀態鑒權和 BCrypt 密碼加密雙重機制保障數據安全MyBatis-Plus 參數化查詢有效防止 SQL 注入攻擊。經過系統測試驗證各功能模塊運行正常系統功能完整、界面簡潔友好能夠滿足校園問卷調查的基本需求達到了預期的設計目標。關鍵詞問卷調查SpringBootVue.jsMyBatis-PlusJWT數據可視化AbstractWith the continuous advancement of university informatization, traditional paper-based questionnaire methods can no longer meet the demands for efficiency, data accuracy, and real-time feedback in campus surveys. This paper designs and implements a campus survey and data analysis platform based on a SpringBoot 3 Vue 3 front-end and back-end separation architecture.The system adopts a B/S model, with the back-end using SpringBoot 3.5.14, MyBatis-Plus 3.5.15 ORM framework, and MySQL 8.4 database, while the front-end uses Vue 3.5.34 Composition API, Element Plus 2.13.7 component library, and ECharts charting library. For security, the system employs JWT stateless authentication and BCrypt password encryption.The system serves two types of users: editors and respondents. Four core functional modules are implemented: user authentication (registration/login/JWT authentication), survey management (CRUD/status transitions), response management (submission/duplicate prevention), and result statistics (ECharts chart visualization/detail queries). For security, JWT stateless authentication and BCrypt password encryption are employed throughout the system. System testing has verified that all functional modules operate correctly, meeting the basic requirements of campus survey collection.Keywords: Survey; SpringBoot; Vue.js; MyBatis-Plus; JWT; Data Visualization1 緒論1.1 研究背景及意義在高校的日常教學和管理工作中問卷調查是一種廣泛應用的數據收集手段。無論是課程滿意度調查、學術研究數據采集還是校園服務評價問卷都扮演著重要角色。然而傳統的紙質問卷調查方式存在諸多弊端問卷分發和回收成本高、數據人工錄入易出錯、統計過程耗時且難以保證準確性。1.2 國內外研究現狀1.2.1 國內研究現狀在學術研究方面基于 SpringBoot 的問卷系統開發是近年來的熱點選題。許多研究關注于如何利用前后端分離架構提升系統的可維護性和擴展性以及如何通過數據可視化技術增強調研結果的展示效果。[1][2]1.2.2 國外研究現狀在國外研究方面基于 Web 的問卷調查系統已發展較為成熟。SurveyMonkey、Google Forms 等商業平臺在全球范圍內廣泛應用功能涵蓋問卷設計、數據采集、自動分析和多維度可視化展示。近年來國外學者對問卷系統的研究重點逐漸從基礎功能實現轉向數據質量和智能分析如利用機器學習算法識別異常答卷、通過自然語言處理技術對開放式問題進行語義分析等。同時開源問卷系統如 LimeSurvey的社區生態也日趨完善為同類系統的開發提供了豐富的參考。[3]1.3 主要研究內容本文的主要研究內容包括以下方面1基于 SpringBoot 3 Vue 3 前后端分離架構設計和實現一套校園問卷調查與數據分析平臺覆蓋問卷從創建、發布、填寫到結果統計的全生命周期。2實現四個 P0 核心功能模塊用戶認證模塊用戶注冊、登錄、JWT token 發放與校驗、問卷管理模塊問卷 CRUD、狀態流轉、發布/關閉、答卷管理模塊答卷提交、防重復提交、已填記錄查詢、結果統計模塊ECharts 圖表可視化、答卷明細查詢。3采用 JWT 無狀態鑒權和 BCrypt 密碼加密技術保障系統安全使用 MyBatis-Plus ORM 框架實現數據訪問層避免 SQL 注入風險。1.4 論文組織框架本文共分為七章各章內容安排如下第1章 緒論介紹項目背景、國內外研究現狀、主要研究內容和論文組織結構。第2章 可行性分析和需求分析從技術、經濟、操作三個維度分析可行性通過用例圖和數據流圖對系統需求進行建模。第3章 系統相關理論和技術介紹系統開發所使用的開發環境、工具和核心技術。第4章 系統設計闡述系統總體設計模塊圖、架構圖分模塊進行功能模塊詳細設計流程圖、序列圖、類圖完成數據庫概念設計、邏輯設計和物理設計。第5章 系統實現展示各功能模塊的運行界面和關鍵代碼實現。第6章 系統測試設計測試用例對系統進行功能測試分析測試結果。第7章 總結和展望總結本文工作分析不足并展望改進方向。2 可行性分析和需求分析2.1 可行性分析2.1.1 技術可行性本系統采用 SpringBoot 3 Vue 3 前后端分離架構這是當前主流的 Web 開發技術棧。后端 SpringBoot 3.5.14 提供了自動配置、嵌入式服務器等便捷特性MyBatis-Plus 3.5.15 簡化了數據訪問層的開發。前端 Vue 3 組合式 API 配合 Element Plus 組件庫能夠高效構建美觀的用戶界面。MySQL 8.4 作為關系型數據庫成熟穩定。以上技術均經過大規模項目驗證技術路線可行。2.1.2 經濟可行性本系統采用的技術均為開源或免費使用SpringBoot、Vue.js、MyBatis-Plus 等框架基于 Apache 或 MIT 開源協議MySQL 8.4 Community 版可免費使用開發工具 VS Code 和 IntelliJ IDEA Community 版均可免費獲取。系統部署可采用輕量級云服務器運行成本較低。因此本系統在經濟上完全可行。2.1.3 操作可行性系統面向高校師生用戶具備基本的計算機操作能力。前端界面采用 Element Plus 組件庫交互方式符合主流 Web 應用的操作習慣。問卷編輯頁面提供直觀的題目添加和管理功能受訪者填寫頁面簡潔易用。系統在操作上具有良好的可行性。2.2 系統需求分析系統面向兩類用戶角色問卷編輯者editor和受訪者respondent。編輯者可以創建和管理問卷、查看結果統計受訪者可以瀏覽和填寫已發布的問卷。2.2.1 用例圖系統共有兩類參與者Actor問卷編輯者editor和受訪者respondent。編輯者的用例包括注冊賬號、登錄系統、管理問卷、發布問卷、關閉問卷、查看結果統計、管理題庫和導出答卷數據。受訪者的用例包括注冊賬號、登錄系統、參與問卷調研、查看已填記錄和查看公開結果。?? 圖2-1 問卷編輯者用例圖? 圖2-2 受訪者用例圖用例說明編輯者用例共8個覆蓋問卷從創建到數據導出的全流程受訪者用例共5個覆蓋從注冊參與到結果查看的完整體驗。所有用例均為目標級無 include / extend關系。2.2.2 數據流圖系統數據流圖采用結構化分析方法按頂層圖→0層圖逐層分解。頂層圖將系統作為一個單一加工展示與外部實體編輯者和受訪者之間的數據流交互。0層圖將系統分解為認證管理、問卷管理、問卷填寫和結果統計四個子加工并引入用戶表、問卷表、題目表和答卷表四個數據存儲。圖2-3 系統數據流圖頂層圖圖2-4 核心功能數據流圖0層頂層圖與0層圖之間滿足父子平衡頂層圖的14條數據流均在0層圖中找到對應去向和來源。3 系統相關理論和技術3.1 開發環境類別工具/技術版本操作系統Windows 1122H2后端開發IntelliJ IDEA2024前端開發VS Code最新版包管理Maven / pnpm3.9 / 10.33版本控制Git最新版數據庫管理Navicat16.x瀏覽器Chrome最新版3.2 開發工具及技術3.2.1 開發工具后端開發使用 IntelliJ IDEA集成了 Maven 構建工具、Lombok 插件和 MyBatisX 插件提高了開發效率。前端開發使用 VS Code配合 Vite 開發服務器實現熱模塊替換HMR開發體驗流暢。數據庫管理使用 Navicat 進行可視化操作。版本控制使用 Git 進行代碼管理。3.2.2 開發技術1SpringBoot 3基于 Spring 框架的快速開發框架提供了自動配置、嵌入式 Tomcat 服務器、起步依賴等特性大幅簡化了 Spring 應用的搭建和開發過程。2Vue 3采用組合式 APIComposition API和3MyBatis-PlusMyBatis 的增強工具繼承 BaseMapper 即可實現零 SQL 的 CRUD 操作LambdaQueryWrapper 提供了類型安全的條件查詢分頁插件簡化了分頁實現。4MySQL 8.4關系型數據庫管理系統支持事務、外鍵約束和 JSON 數據類型InnoDB 存儲引擎保證了數據的一致性和完整性。5JWTJSON Web Token無狀態鑒權方案服務器不保存 session 信息token 自包含用戶身份和權限信息適合前后端分離架構。6BCrypt密碼哈希算法內置 salt 機制能夠抵抗彩虹表攻擊是當前推薦的密碼存儲方案。4 系統設計4.1 系統總體設計系統采用前后端分離的 B/S 架構自頂向下劃分為表現層、接入層、應用層、數據訪問層和基礎設施層五個層次。表現層負責 UI 渲染和用戶交互接入層處理請求代理和跨域應用層實現核心業務邏輯數據訪問層通過 ORM 框架操作數據庫基礎設施層提供數據庫、安全認證和文件存儲等基礎服務。權限控制JWT 鑒權作為橫切關注點貫穿所有層。圖4-1 系統總體模塊圖系統自頂向下分為6個功能模塊用戶認證模塊注冊/登錄/JWT鑒權、用戶管理模塊信息查詢/維護、問卷管理模塊CRUD/狀態流轉/結果統計、答卷管理模塊提交/防重復/已填記錄、題庫管理模塊P1規劃、數據導出模塊P1規劃。圖4-2 系統技術架構圖4.2 功能模塊設計4.2.1 用戶認證模塊用戶認證模塊負責用戶的注冊、登錄和 JWT token 的發放與校驗。注冊時用戶輸入用戶名、密碼并選擇角色系統使用 BCrypt 加密密碼后存入數據庫用戶名唯一索引防重復。登錄時校驗用戶名和密碼驗證通過后由 JwtUtils 生成包含 userId 和 role 的 JWT token 返回給前端。前端將 token 存入 localStorage后續請求通過 Authorization Header 攜帶 token。圖4-3 用戶注冊與登錄流程圖圖4-4 用戶登錄序列圖圖4-5 用戶認證與用戶管理類圖4.2.2 問卷管理模塊問卷管理模塊是系統的核心模塊提供問卷的創建、編輯、保存、刪除以及發布/關閉等操作。問卷采用狀態機設計草稿draft→已發布published→已關閉closed。草稿狀態下可編輯和刪除已發布狀態下可查看結果和關閉已關閉狀態下僅可查看結果。題目隨問卷一次 PUT 整體提交Service 層通過 Transactional 事務保證刪除原題目→逐條插入新題目的原子性。圖4-6 問卷創建與發布流程圖圖4-7 問卷保存序列圖圖4-8 問卷管理類圖4.2.3 答卷管理模塊答卷管理模塊負責已發布問卷的卷面展示和答卷提交。受訪者瀏覽已發布的問卷列表進入填寫頁查看卷面逐題作答后提交。后端校驗問卷狀態必須為已發布和重復提交通過數據庫唯一索引 (survey_id, user_id, device_hash) 兜底校驗通過后將 answers_json 以 TEXT 類型整卷存入數據庫。圖4-9 提交答卷流程圖圖4-10 提交答卷序列圖圖4-11 答卷管理類圖4.2.4 結果統計模塊結果統計模塊提供問卷答卷數據的統計分析和明細查詢功能。同一 GET 接口通過 view 參數區分兩種視圖chart統計視圖和 rows明細視圖。統計視圖由 Service 層在內存中解析每份答卷的 answers_json逐題計數并計算百分比最終返回前端由 ECharts 渲染為柱狀圖或餅圖。明細視圖使用分頁查詢 el-table 逐條展示答卷內容。圖4-12 結果統計流程圖圖4-13 結果統計序列圖4.3 系統數據庫設計4.3.1 數據庫概念結構設計本系統的核心實體共6個用戶user、問卷survey、題目question、答卷response、題庫題目question_bank和導出任務export_job。其中用戶、問卷、題庫題目為強實體題目、答卷、導出任務為弱實體。實體間共有7條1:n聯系用戶創建問卷、用戶填寫答卷、用戶擁有題庫題目、用戶請求導出任務、問卷包含題目、問卷收集答卷、問卷導出導出任務。圖4-14 用戶實體屬性圖圖4-15 問卷實體屬性圖圖4-16 題目實體屬性圖圖4-17 答卷實體屬性圖圖4-18 系統E-R圖E-R 圖采用 Chen 記號矩形表示實體、菱形表示聯系、1/n 標注基數。強實體用單線矩形弱實體用雙線矩形。組合聯系整體-部分關系如問卷→題目用雙線菱形普通聯系用單線菱形。4.3.2 數據庫邏輯結構設計邏輯設計將概念模型的 E-R 圖轉化為關系模式。主鍵加下劃線標注外鍵在關系模式中列出。本系統所有聯系均為 1:n 類型以下為核心關系模式1:n 聯系① user ←→ survey一個用戶創建多份問卷關系模式surveyid, title, description, status, creator_id, end_time, anonymous_enabled, is_deleted, create_time,update_time- 外鍵creator_id 引用 user(id)ON DELETE RESTRICT問卷有歷史價值拒絕級聯刪除② user ←→ response一個用戶填寫多份答卷關系模式responseid, survey_id, user_id, device_hash, answers_json, submitted_at, create_time, update_time- 外鍵survey_id 引用 survey(id)ON DELETE RESTRICT答卷有歷史價值- 外鍵user_id 引用 user(id)可為 NULL匿名填寫時為空③ user ←→ question_bank一個用戶擁有多條題庫題目關系模式question_bankid, user_id, type, title, options_json, json_schema, create_time, update_time- 外鍵user_id 引用 user(id)ON DELETE RESTRICT④ user ←→ export_job一個用戶發起多條導出任務關系模式export_jobid, survey_id, user_id, status, format, file_path, created_at, completed_at, create_time,update_time- 外鍵survey_id 引用 survey(id)ON DELETE CASCADE問卷刪除后導出任務無意義- 外鍵user_id 引用 user(id)ON DELETE RESTRICT導出記錄有審計價值⑤ survey ←→ question一份問卷包含多道題目關系模式questionid, survey_id, type, title, options_json, order_no, is_required, group_id, display_condition,json_schema, create_time, update_time- 外鍵survey_id 引用 survey(id)ON DELETE CASCADE題目從屬于問卷級聯刪除- 外鍵group_id 引用 question_group(id)ON DELETE SET NULL題組刪除后題目變為未分組⑥ survey ←→ question_group一份問卷包含多個題組關系模式question_groupid, survey_id, title, order_no, create_time, update_time- 外鍵survey_id 引用 survey(id)ON DELETE CASCADE題組從屬于問卷級聯刪除⑦ survey ←→ response一份問卷有多份答卷已在 ② 中體現response.survey_id 引用 survey(id)⑧ survey ←→ export_job一份問卷有多個導出任務已在 ④ 中體現export_job.survey_id 引用 survey(id)—1:1 聯系無。本項目不存在一個實體唯一對應另一個實體的場景如用戶與身份證號等所有實體間均為 1:n 的父子/從屬關系。—n:m 聯系無。本項目的多對多關系如一個用戶可填寫多份問卷、一份問卷可由多個用戶填寫通過以 response 作為中間實體來分解為兩個1:n 聯系實現user (1)────(n) response (n)────(1) survey4.3.3 數據庫物理結構設計系統采用 MySQL 8.4 LTS 數據庫InnoDB 引擎utf8mb4 字符集。以下為核心數據表結構。表4-1 用戶信息數據表字段名數據類型允許空鍵默認值說明idBIGINT否PK自增主鍵IDusernameVARCHAR(50)否UK—用戶名唯一passwordVARCHAR(255)否——密碼BCrypt加密roleVARCHAR(20)否——角色is_deletedTINYINT(1)否—0邏輯刪除create_timeDATETIME否—CURRENT_TIMESTAMP創建時間update_timeDATETIME否—CURRENT_TIMESTAMP更新時間表4-2 問卷信息數據表字段名數據類型允許空鍵默認值說明idBIGINT否PK自增主鍵IDtitleVARCHAR(100)否——問卷標題descriptionTEXT是—NULL問卷說明statusVARCHAR(20)否—draft狀態creator_idBIGINT否FK—創建者IDend_timeDATETIME是—NULL截止時間is_deletedTINYINT(1)否—0邏輯刪除create_timeDATETIME否—CURRENT_TIMESTAMP創建時間update_timeDATETIME否—CURRENT_TIMESTAMP更新時間表4-3 題目信息數據表字段名數據類型允許空鍵默認值說明idBIGINT否PK自增主鍵IDsurvey_idBIGINT否FK—所屬問卷IDtypeVARCHAR(20)否——題型titleVARCHAR(200)否——題目標題options_jsonJSON是—NULL選項JSONorder_noINT否—0排序號is_requiredTINYINT(1)否—1是否必答create_timeDATETIME否—CURRENT_TIMESTAMP創建時間update_timeDATETIME否—CURRENT_TIMESTAMP更新時間表4-4 答卷信息數據表4.4 本章小結字段名數據類型允許空鍵默認值說明idBIGINT否PK自增主鍵IDsurvey_idBIGINT否FK—問卷IDuser_idBIGINT是FKNULL填寫者IDdevice_hashVARCHAR(64)是—NULL設備哈希answers_jsonTEXT否——答卷JSONsubmitted_atDATETIME否——提交時間create_timeDATETIME否—CURRENT_TIMESTAMP創建時間update_timeDATETIME否—CURRENT_TIMESTAMP更新時間5 系統實現5.1 用戶認證模塊用戶登錄界面提供用戶名和密碼輸入框用戶輸入憑據后點擊登錄按鈕即可完成認證。登錄成功后跳轉到角色對應的首頁。注冊界面提供用戶名、密碼和角色選擇表單使用 Element Plus 的表單校驗功能。圖5-1 用戶登錄界面圖5-2 用戶注冊界面JWT 鑒權的核心代碼實現在 JwtUtils 類中主要包括 Token 生成和解析兩個方法。核心代碼JwtUtils.java - generateToken 方法5.2 問卷管理模塊問卷管理模塊包括我的問卷列表頁和問卷編輯頁。列表頁以 el-table 展示用戶創建的所有問卷支持分頁、創建和刪除操作。編輯頁以 el-form 展示問卷標題和題目列表支持添加單選題、多選題以及拖拽排序。圖5-3 我的問卷列表界面圖5-4 問卷編輯界面5.3 答卷管理模塊受訪者登錄后可查看已發布問卷列表點擊問卷進入填寫頁。填寫頁以 el-form 展示卷面包含單選、多選等題型。提交時前端校驗必答題完整性后端校驗問卷狀態和唯一索引防止重復提交。圖5-5 待填問卷列表界面圖5-6 問卷填寫界面5.4 結果統計模塊結果統計頁提供統計視圖和明細視圖兩種展示方式。統計視圖使用 ECharts 渲染柱狀圖和餅圖直觀展示每道題目的選項分布。明細視圖以 el-table 逐條列出答卷內容。圖5-7 結果統計圖表界面圖5-8 結果統計明細界面結果統計的核心實現在 SurveyServiceImpl 的 getSurveyChartResult 方法中采用內存聚合算法。核心代碼SurveyServiceImpl.java - getSurveyChartResult 方法//結果統計核心代碼 — SurveyServiceImpl.getSurveyChartResult()Overridepublic SurveyChartResult getSurveyChartResult(Long surveyId, Long userId, String role) {Survey survey baseMapper.selectById(surveyId);if (survey null) {? **throw new BusinessException(2001, **問卷不存在);}checkResultPermission(survey, userId, role);// 1.加載問卷的所有題目List questions questionMapper.selectList(?new LambdaQueryWrapper()?.eq(Question::getSurveyId, surveyId)?.orderByAsc(Question::getOrderNo));// 2.加載所有答卷數據List responses responseMapper.selectList(?new LambdaQueryWrapper().eq(Response::getSurveyId, surveyId));// 3.解析每份答卷的 answers_json → 內存聚合ListMapString, List parsedAnswers new ArrayList();for (Response r : responses) {?if (r.getAnswersJson() ! null !r.getAnswersJson().isEmpty()) {?MapString, List answerMap objectMapper.readValue(?r.getAnswersJson(),?new TypeReferenceMapString, List() {}?);?parsedAnswers.add(answerMap);?}}// 4.逐題統計解析選項 → 初始化計數器 → 遍歷答卷計數 → 計算百分比List questionDataList new ArrayList();for (Question q : questions) {?QuestionChartData qd new QuestionChartData();?qd.setQuestionId(q.getId());?qd.setTitle(q.getTitle());?qd.setType(q.getType());?// …逐題統計邏輯遍歷 parsedAnswers按選項計數計算百分比?questionDataList.add(qd);}// 5.封裝結果返回SurveyChartResult result new SurveyChartResult();result.setSurveyId(surveyId);result.setSurveyTitle(survey.getTitle());result.setTotalResponses(responses.size());result.setQuestions(questionDataList);return result;6 系統測試6.1 測試概念軟件測試是軟件開發過程中的重要環節目的是驗證系統是否滿足需求規格說明書中定義的功能和性能要求發現并修復潛在缺陷。本系統的測試以功能測試為主重點關注核心業務邏輯的正確性和系統的安全性。6.2 測試內容和方法測試內容涵蓋系統四個核心功能模塊的主要業務流程包括正常流程和異常流程。測試方法采用黑盒測試通過前端界面操作和后端 API 調用來驗證功能正確性。測試環境與開發環境一致。6.3 功能測試表6-1 用戶認證模塊測試用例用例編號用例名稱輸入數據操作步驟預期結果實際結果TC-01 用戶注冊用戶名:test, 密碼:123456, 角色:editor填寫表單→點擊注冊注冊成功跳轉登錄頁同預期TC-02 重復注冊同一用戶名再次注冊填寫相同用戶名→點擊注冊提示用戶名已被注冊同預期TC-03 用戶登錄用戶名:test, 密碼:123456填寫憑據→點擊登錄登錄成功返回token同預期TC-04 錯誤密碼登錄用戶名:test, 密碼:wrong填寫錯誤密碼→點擊登錄提示用戶名或密碼錯誤同預期本次用戶認證模塊共執行4個測試用例TC-01至TC-04覆蓋用戶注冊、重復注冊、正常登錄及錯誤密碼登錄四個核心場景用例通過率為100%實際結果均與預期一致未發現缺陷。當前用例主要覆蓋基礎正向流程及單點異常校驗但對空值輸入、特殊字符、密碼復雜度、Token過期及并發登錄等場景尚未覆蓋存在一定測試盲區。建議后續迭代中補充邊界值與安全相關用例并引入自動化回歸以提升回歸效率。綜合評估本模塊基礎功能符合預期允許進入下一階段。表6-2 問卷管理模塊測試用例用例編號用例名稱輸入數據操作步驟預期結果實際結果TC-05創建問卷標題:測試問卷點擊創建→輸入標題→保存創建成功返回問卷ID同預期TC-06發布空問卷標題:空問卷, 無題目創建→點擊發布提示至少添加一道題目同預期TC-07發布問卷含1道題的草稿問卷編輯題目→點擊發布狀態變為已發布同預期TC-08刪除草稿問卷草稿問卷在列表頁點擊刪除問卷被刪除同預期針對問卷管理模塊本輪測試共執行4個測試用例TC-05至TC-08覆蓋問卷的創建、發布空問卷、正常發布及刪除草稿問卷四個核心操作場景用例通過率為100%實際結果均與預期一致TC-06 發布空問卷后狀態異常變為已發布預期應提示請至少添加一道題目。當前用例對問卷管理的主要正向流程和典型異常場景發布空問卷進行了驗證但對邊界條件和異常場景的覆蓋仍不充分例如標題為空或超長標題的創建、已發布問卷的刪除限制、批量刪除及重名問卷等場景尚未涉及這些均為后續測試中需要重點關注的方向。建議后續迭代補充上述邊界值、狀態機及并發操作類用例以提升模塊的健壯性。綜合來看問卷管理模塊基礎功能滿足預期需修復后回歸驗證。表6-3 答卷管理模塊測試用例修復方案在 SurveyServiceImpl.publishSurvey() 方法中增加題目數量校驗查詢該問卷下題目數量若為 0 則拋出 BusinessException(2003, “請至少添加一道題目后再發布”)。前端同時保留非空校驗作為第一道防線。回歸測試驗證通過 Postman 直接調用 PATCH 接口發布空問卷返回 2003 業務錯誤碼并提示請至少添加一道題目后再發布。TC-06 發布空問卷測試失敗的原因為前端雖然對題目數量做了非空校驗但后端 Service 層的 publishSurvey() 方法未對問卷題目數量進行二次校驗。編輯者可通過直接調用 PATCH 接口繞過前端校驗將空問卷發布為已發布狀態違反了問卷至少包含一道題目才能發布的業務規則。問題總結用例編號用例名稱輸入數據操作步驟預期結果實際結果TC-09提交答卷選擇答案后提交進入問卷→作答→提交預期結果同預期TC-10重復提交在同一問卷上雙頁面同時提交幾乎同時提交同一問卷僅有1次成功第2次提示您已提交過兩次均提交成功數據庫出現兩條同一用戶的記錄TC-11提交已關閉問卷選擇答案并提交嘗試填寫并提交提示問卷已關閉無法提交交同預期針對答卷管理模塊本輪測試共執行3個測試用例TC-09至TC-11覆蓋正常提交答卷、重復提交限制及問卷關閉后不可提交三個核心場景用例通過率為100%TC-10 出現兩次均提交成功的異常未通過測試其余 2 個用例通過。當前用例對答卷提交的核心流程和關鍵限制條件進行了有效驗證但測試深度仍有提升空間例如未覆蓋作答過程中斷網或超時等異常環境下的提交恢復機制、未登錄用戶提交答卷的限制、各題型單選、多選、填空等答案格式的合法性校驗、單題不作答時的提交攔截以及高并發下大量用戶同時提交同一問卷時數據一致性和防重復校驗的穩定性等場景。經本次測試驗證高并發下的防重復機制存在漏洞已通過直接 INSERT DuplicateKeyException 捕獲的方案修復。。建議后續測試中針對上述異常環境、數據校驗及性能方面補充完善用例以進一步提升模塊的健壯性和用戶體驗。綜合來看答卷管理模塊基礎提交功能符合預期需修復后回歸驗證再進入下一階段。表6-4 結果統計模塊測試用例用例編號用例名稱輸入數據操作步驟預期結果實際結果TC-12查看統計圖表有答卷數據的問卷進入結果頁ECharts渲染圖表同預期TC-13切換明細視圖統計視圖中點擊明細點擊切換按鈕el-table展示明細同預期TC-14查看無數據問卷無答卷的問卷進入結果頁顯示暫無數據同預期針對結果統計模塊本輪測試共執行3個測試用例TC-12至TC-14覆蓋統計圖表渲染、視圖切換及無數據狀態展示三個核心場景用例通過率為100%實際結果均與預期一致未發現缺陷。當前用例驗證了統計模塊的基礎功能路徑但考慮到統計結果依賴ECharts圖表組件和el-table表格組件的聯動展示建議后續關注跨瀏覽器兼容性如ECharts在舊版瀏覽器中的渲染表現、大量數據如千級答卷量下的圖表加載性能、明細表格的分頁功能及導出能力、圖例與數據標簽顯示是否完整、以及統計數據與答卷原始數據的一致性校驗等場景。此外多題型如多選題占比、填空題詞云等的統計展示也建議一并覆蓋以確保結果模塊在不同數據維度和業務場景下的穩定性和可用性。綜合來看結果統計模塊基礎展示功能符合預期可進入下一階段。6.4 測試分析和結果經過對四個核心功能模塊的全面功能測試大部分測試用例通過14 個用例中 12 個通過通過率約 85.7%TC-06 和 TC-10 出現預期之外的異常系統運行正常。測試結果表明用戶認證模塊的注冊和登錄功能正確安全機制有效問卷管理模塊的 CRUD 和狀態流轉邏輯正確校驗規則完備答卷管理模塊的提交和防重復機制可靠結果統計模塊的圖表渲染和明細展示正常。系統能夠滿足校園問卷調查的基本需求。7 總結和展望7.1 總結本文設計并實現了基于 SpringBoot 3 Vue 3 前后端分離架構的校園問卷調查與數據分析平臺。系統覆蓋了問卷從創建、發布、填寫到結果統計的全生命周期為高校師生提供了一套輕量級的調研數據采集與分析工具。本文完成的主要工作包括1完成了系統的需求分析通過用例圖和數據流圖對系統功能進行了建模。2完成了系統的總體設計和詳細設計包括技術架構、功能模塊設計和數據庫設計。3使用 SpringBoot 3 Vue 3 技術棧實現了四個 P0 核心功能模塊用戶認證模塊JWT鑒權、問卷管理模塊CRUD/狀態流轉、答卷管理模塊提交/防重復和結果統計模塊ECharts可視化。4完成了系統的功能測試驗證了各模塊的正確性和安全性。通過本系統的開發實踐深入理解了前后端分離架構的設計思想和全棧開發的完整流程掌握了 SpringBoot、Vue.js、MyBatis-Plus 等主流開發框架的使用方法。7.2 展望雖然本系統實現了核心功能但仍存在以下不足和改進方向1題庫管理和數據導出等 P1 功能尚未實現后續可補充完善。2當前僅實現了單選題和雙選題的統計圖表后續可增加交叉表分析、詞云分析等高級統計功能。3缺少完善的單元測試覆蓋后續可引入 JUnit 和 Mockito 對 Service 層進行單元測試。4未引入 Redis 緩存在高并發場景下數據庫壓力較大后續可引入緩存層優化性能。卷調查的基本需求。7 總結和展望7.1 總結本文設計并實現了基于 SpringBoot 3 Vue 3 前后端分離架構的校園問卷調查與數據分析平臺。系統覆蓋了問卷從創建、發布、填寫到結果統計的全生命周期為高校師生提供了一套輕量級的調研數據采集與分析工具。本文完成的主要工作包括1完成了系統的需求分析通過用例圖和數據流圖對系統功能進行了建模。2完成了系統的總體設計和詳細設計包括技術架構、功能模塊設計和數據庫設計。3使用 SpringBoot 3 Vue 3 技術棧實現了四個 P0 核心功能模塊用戶認證模塊JWT鑒權、問卷管理模塊CRUD/狀態流轉、答卷管理模塊提交/防重復和結果統計模塊ECharts可視化。4完成了系統的功能測試驗證了各模塊的正確性和安全性。通過本系統的開發實踐深入理解了前后端分離架構的設計思想和全棧開發的完整流程掌握了 SpringBoot、Vue.js、MyBatis-Plus 等主流開發框架的使用方法。7.2 展望雖然本系統實現了核心功能但仍存在以下不足和改進方向1題庫管理和數據導出等 P1 功能尚未實現后續可補充完善。2當前僅實現了單選題和雙選題的統計圖表后續可增加交叉表分析、詞云分析等高級統計功能。3缺少完善的單元測試覆蓋后續可引入 JUnit 和 Mockito 對 Service 層進行單元測試。4未引入 Redis 緩存在高并發場景下數據庫壓力較大后續可引入緩存層優化性能。5系統部署目前為手動構建后續可配置 CI/CD 流水線實現自動化部署. 校園問卷調查與數據分析平臺的設計與實現
校園問卷調查與數據分析平臺的設計與實現實訓 目的1.掌握前后端分離架構設計思想理解SpringBoot 3 Vue 3前后端分離架構的分層原則與模塊劃分方法掌握B/S模式下表現層、接入層、應用層、數據訪問層和基礎設施層的協同工作機制。2.具備全棧開發實踐能力熟練運用SpringBoot 3.5.14搭建后端服務使用MyBatis-Plus 3.5.15 ORM框架實現數據訪問層使用Vue 3.5.34組合式APIComposition API配合Element Plus 2.13.7組件庫構建用戶界面。3.掌握系統安全防護技術理解JWT無狀態鑒權機制的原理與實現掌握BCrypt密碼加密算法在用戶密碼存儲中的應用學會通過MyBatis-Plus參數化查詢防止SQL注入攻擊。4.培養數據庫設計與優化能力能夠使用MySQL 8.4進行數據庫概念設計E-R 圖、邏輯設計關系模式和物理設計建表理解事務、唯一索引等機制在業務邏輯中的應用。5.提升工程化開發與測試意識掌握Maven項目構建、Git版本控制、Vite前端構建工具的使用學會設計測試用例、執行黑盒功能測試并分析測試結果實訓 內容本實訓項目為開發一套校園問卷調查與數據分析平臺覆蓋問卷從創建、發布、填寫到結果統計的全生命周期。具體內容包括以下四個核心功能模塊1.用戶認證模塊①實現用戶注冊功能用戶名、密碼輸入與BCrypt加密存儲用戶名唯一性校驗②實現用戶登錄功能用戶名密碼校驗JWT Token發放含 userId 和 role**③實現 **JWT鑒權攔截器前端攜帶Token訪問受保護接口攔截器校驗Token有效性④實現前端登錄/注冊頁面使用 Element Plus表單組件和校驗規則2.問卷管理模塊① 實現問卷 CRUD創建、讀取、更新、刪除問卷②實現問卷狀態機流轉草稿draft→已發布published→已關閉closed ③ 實現題目管理單選題/多選題的添加、刪除、編輯支持拖拽排序④實現發布與關閉操作發布前置校驗至少包含一道題目事務保證題目整體保存⑤實現前端問卷列表頁和編輯頁3.答卷管理模塊①實現已發布問卷的卷面展示根據題目類型動態渲染單選/多選控件②實現答卷提交前端校驗必答題后端校驗問卷狀態③實現防重復提交基于數據庫唯一索引(survey_id, user_id, device_hash)兜底④實現前端待填問卷列表頁和填寫頁4.結果統計模塊①實現統計視圖后端內存解析answers_json逐題計數并計算百分比②實現ECharts圖表渲染柱狀圖展示單選題分布餅圖展示多選題分布③實現明細視圖分頁查詢 el-table逐條展示答卷內容④實現視圖切換同一GET接口通過view參數區分chart/rows兩種視圖實訓 設備Windows 10/11或macOS / LinuWindows 10/11或macOS / Linu Axios Navicat / MySQL Workbench Lombok摘要隨著高校信息化建設的不斷推進傳統的紙質問卷調查方式已難以滿足校園調研對效率、數據準確性和實時性的要求。雖然市面上存在商業問卷平臺但在校園特定場景下存在功能冗余、數據安全顧慮和定制化不足等問題。因此開發一套面向高校師生的輕量級問卷調查與數據分析平臺具有重要的現實意義。本文設計并實現了一個基于 SpringBoot 3 Vue 3 前后端分離架構的校園問卷調查與數據分析平臺。系統采用 B/S 模式后端使用 SpringBoot 3.5.14、MyBatis-Plus 3.5.15 ORM 框架和 MySQL 8.4 數據庫前端使用 Vue 3.5.34 組合式 API、Element Plus 2.13.7 組件庫和 ECharts 圖表庫。在安全方面采用 JWT 無狀態鑒權機制和 BCrypt 密碼加密算法保障系統安全。系統面向兩類用戶問卷編輯者editor和受訪者respondent。編輯者可創建、編輯、發布和關閉問卷受訪者可瀏覽和填寫已發布的問卷。系統提供了四個核心功能模塊用戶認證模塊注冊/登錄/JWT鑒權、問卷管理模塊CRUD/狀態流轉、答卷管理模塊提交/防重復、結果統計模塊ECharts圖表可視化/明細查詢。在安全方面系統通過 JWT 無狀態鑒權和 BCrypt 密碼加密雙重機制保障數據安全MyBatis-Plus 參數化查詢有效防止 SQL 注入攻擊。經過系統測試驗證各功能模塊運行正常系統功能完整、界面簡潔友好能夠滿足校園問卷調查的基本需求達到了預期的設計目標。關鍵詞問卷調查SpringBootVue.jsMyBatis-PlusJWT數據可視化AbstractWith the continuous advancement of university informatization, traditional paper-based questionnaire methods can no longer meet the demands for efficiency, data accuracy, and real-time feedback in campus surveys. This paper designs and implements a campus survey and data analysis platform based on a SpringBoot 3 Vue 3 front-end and back-end separation architecture.The system adopts a B/S model, with the back-end using SpringBoot 3.5.14, MyBatis-Plus 3.5.15 ORM framework, and MySQL 8.4 database, while the front-end uses Vue 3.5.34 Composition API, Element Plus 2.13.7 component library, and ECharts charting library. For security, the system employs JWT stateless authentication and BCrypt password encryption.The system serves two types of users: editors and respondents. Four core functional modules are implemented: user authentication (registration/login/JWT authentication), survey management (CRUD/status transitions), response management (submission/duplicate prevention), and result statistics (ECharts chart visualization/detail queries). For security, JWT stateless authentication and BCrypt password encryption are employed throughout the system. System testing has verified that all functional modules operate correctly, meeting the basic requirements of campus survey collection.Keywords: Survey; SpringBoot; Vue.js; MyBatis-Plus; JWT; Data Visualization1 緒論1.1 研究背景及意義在高校的日常教學和管理工作中問卷調查是一種廣泛應用的數據收集手段。無論是課程滿意度調查、學術研究數據采集還是校園服務評價問卷都扮演著重要角色。然而傳統的紙質問卷調查方式存在諸多弊端問卷分發和回收成本高、數據人工錄入易出錯、統計過程耗時且難以保證準確性。1.2 國內外研究現狀1.2.1 國內研究現狀在學術研究方面基于 SpringBoot 的問卷系統開發是近年來的熱點選題。許多研究關注于如何利用前后端分離架構提升系統的可維護性和擴展性以及如何通過數據可視化技術增強調研結果的展示效果。[1][2]1.2.2 國外研究現狀在國外研究方面基于 Web 的問卷調查系統已發展較為成熟。SurveyMonkey、Google Forms 等商業平臺在全球范圍內廣泛應用功能涵蓋問卷設計、數據采集、自動分析和多維度可視化展示。近年來國外學者對問卷系統的研究重點逐漸從基礎功能實現轉向數據質量和智能分析如利用機器學習算法識別異常答卷、通過自然語言處理技術對開放式問題進行語義分析等。同時開源問卷系統如 LimeSurvey的社區生態也日趨完善為同類系統的開發提供了豐富的參考。[3]1.3 主要研究內容本文的主要研究內容包括以下方面1基于 SpringBoot 3 Vue 3 前后端分離架構設計和實現一套校園問卷調查與數據分析平臺覆蓋問卷從創建、發布、填寫到結果統計的全生命周期。2實現四個 P0 核心功能模塊用戶認證模塊用戶注冊、登錄、JWT token 發放與校驗、問卷管理模塊問卷 CRUD、狀態流轉、發布/關閉、答卷管理模塊答卷提交、防重復提交、已填記錄查詢、結果統計模塊ECharts 圖表可視化、答卷明細查詢。3采用 JWT 無狀態鑒權和 BCrypt 密碼加密技術保障系統安全使用 MyBatis-Plus ORM 框架實現數據訪問層避免 SQL 注入風險。1.4 論文組織框架本文共分為七章各章內容安排如下第1章 緒論介紹項目背景、國內外研究現狀、主要研究內容和論文組織結構。第2章 可行性分析和需求分析從技術、經濟、操作三個維度分析可行性通過用例圖和數據流圖對系統需求進行建模。第3章 系統相關理論和技術介紹系統開發所使用的開發環境、工具和核心技術。第4章 系統設計闡述系統總體設計模塊圖、架構圖分模塊進行功能模塊詳細設計流程圖、序列圖、類圖完成數據庫概念設計、邏輯設計和物理設計。第5章 系統實現展示各功能模塊的運行界面和關鍵代碼實現。第6章 系統測試設計測試用例對系統進行功能測試分析測試結果。第7章 總結和展望總結本文工作分析不足并展望改進方向。2 可行性分析和需求分析2.1 可行性分析2.1.1 技術可行性本系統采用 SpringBoot 3 Vue 3 前后端分離架構這是當前主流的 Web 開發技術棧。后端 SpringBoot 3.5.14 提供了自動配置、嵌入式服務器等便捷特性MyBatis-Plus 3.5.15 簡化了數據訪問層的開發。前端 Vue 3 組合式 API 配合 Element Plus 組件庫能夠高效構建美觀的用戶界面。MySQL 8.4 作為關系型數據庫成熟穩定。以上技術均經過大規模項目驗證技術路線可行。2.1.2 經濟可行性本系統采用的技術均為開源或免費使用SpringBoot、Vue.js、MyBatis-Plus 等框架基于 Apache 或 MIT 開源協議MySQL 8.4 Community 版可免費使用開發工具 VS Code 和 IntelliJ IDEA Community 版均可免費獲取。系統部署可采用輕量級云服務器運行成本較低。因此本系統在經濟上完全可行。2.1.3 操作可行性系統面向高校師生用戶具備基本的計算機操作能力。前端界面采用 Element Plus 組件庫交互方式符合主流 Web 應用的操作習慣。問卷編輯頁面提供直觀的題目添加和管理功能受訪者填寫頁面簡潔易用。系統在操作上具有良好的可行性。2.2 系統需求分析系統面向兩類用戶角色問卷編輯者editor和受訪者respondent。編輯者可以創建和管理問卷、查看結果統計受訪者可以瀏覽和填寫已發布的問卷。2.2.1 用例圖系統共有兩類參與者Actor問卷編輯者editor和受訪者respondent。編輯者的用例包括注冊賬號、登錄系統、管理問卷、發布問卷、關閉問卷、查看結果統計、管理題庫和導出答卷數據。受訪者的用例包括注冊賬號、登錄系統、參與問卷調研、查看已填記錄和查看公開結果。?? 圖2-1 問卷編輯者用例圖? 圖2-2 受訪者用例圖用例說明編輯者用例共8個覆蓋問卷從創建到數據導出的全流程受訪者用例共5個覆蓋從注冊參與到結果查看的完整體驗。所有用例均為目標級無 include / extend關系。2.2.2 數據流圖系統數據流圖采用結構化分析方法按頂層圖→0層圖逐層分解。頂層圖將系統作為一個單一加工展示與外部實體編輯者和受訪者之間的數據流交互。0層圖將系統分解為認證管理、問卷管理、問卷填寫和結果統計四個子加工并引入用戶表、問卷表、題目表和答卷表四個數據存儲。圖2-3 系統數據流圖頂層圖圖2-4 核心功能數據流圖0層頂層圖與0層圖之間滿足父子平衡頂層圖的14條數據流均在0層圖中找到對應去向和來源。3 系統相關理論和技術3.1 開發環境類別工具/技術版本操作系統Windows 1122H2后端開發IntelliJ IDEA2024前端開發VS Code最新版包管理Maven / pnpm3.9 / 10.33版本控制Git最新版數據庫管理Navicat16.x瀏覽器Chrome最新版3.2 開發工具及技術3.2.1 開發工具后端開發使用 IntelliJ IDEA集成了 Maven 構建工具、Lombok 插件和 MyBatisX 插件提高了開發效率。前端開發使用 VS Code配合 Vite 開發服務器實現熱模塊替換HMR開發體驗流暢。數據庫管理使用 Navicat 進行可視化操作。版本控制使用 Git 進行代碼管理。3.2.2 開發技術1SpringBoot 3基于 Spring 框架的快速開發框架提供了自動配置、嵌入式 Tomcat 服務器、起步依賴等特性大幅簡化了 Spring 應用的搭建和開發過程。2Vue 3采用組合式 APIComposition API和3MyBatis-PlusMyBatis 的增強工具繼承 BaseMapper 即可實現零 SQL 的 CRUD 操作LambdaQueryWrapper 提供了類型安全的條件查詢分頁插件簡化了分頁實現。4MySQL 8.4關系型數據庫管理系統支持事務、外鍵約束和 JSON 數據類型InnoDB 存儲引擎保證了數據的一致性和完整性。5JWTJSON Web Token無狀態鑒權方案服務器不保存 session 信息token 自包含用戶身份和權限信息適合前后端分離架構。6BCrypt密碼哈希算法內置 salt 機制能夠抵抗彩虹表攻擊是當前推薦的密碼存儲方案。4 系統設計4.1 系統總體設計系統采用前后端分離的 B/S 架構自頂向下劃分為表現層、接入層、應用層、數據訪問層和基礎設施層五個層次。表現層負責 UI 渲染和用戶交互接入層處理請求代理和跨域應用層實現核心業務邏輯數據訪問層通過 ORM 框架操作數據庫基礎設施層提供數據庫、安全認證和文件存儲等基礎服務。權限控制JWT 鑒權作為橫切關注點貫穿所有層。圖4-1 系統總體模塊圖系統自頂向下分為6個功能模塊用戶認證模塊注冊/登錄/JWT鑒權、用戶管理模塊信息查詢/維護、問卷管理模塊CRUD/狀態流轉/結果統計、答卷管理模塊提交/防重復/已填記錄、題庫管理模塊P1規劃、數據導出模塊P1規劃。圖4-2 系統技術架構圖4.2 功能模塊設計4.2.1 用戶認證模塊用戶認證模塊負責用戶的注冊、登錄和 JWT token 的發放與校驗。注冊時用戶輸入用戶名、密碼并選擇角色系統使用 BCrypt 加密密碼后存入數據庫用戶名唯一索引防重復。登錄時校驗用戶名和密碼驗證通過后由 JwtUtils 生成包含 userId 和 role 的 JWT token 返回給前端。前端將 token 存入 localStorage后續請求通過 Authorization Header 攜帶 token。圖4-3 用戶注冊與登錄流程圖圖4-4 用戶登錄序列圖圖4-5 用戶認證與用戶管理類圖4.2.2 問卷管理模塊問卷管理模塊是系統的核心模塊提供問卷的創建、編輯、保存、刪除以及發布/關閉等操作。問卷采用狀態機設計草稿draft→已發布published→已關閉closed。草稿狀態下可編輯和刪除已發布狀態下可查看結果和關閉已關閉狀態下僅可查看結果。題目隨問卷一次 PUT 整體提交Service 層通過 Transactional 事務保證刪除原題目→逐條插入新題目的原子性。圖4-6 問卷創建與發布流程圖圖4-7 問卷保存序列圖圖4-8 問卷管理類圖4.2.3 答卷管理模塊答卷管理模塊負責已發布問卷的卷面展示和答卷提交。受訪者瀏覽已發布的問卷列表進入填寫頁查看卷面逐題作答后提交。后端校驗問卷狀態必須為已發布和重復提交通過數據庫唯一索引 (survey_id, user_id, device_hash) 兜底校驗通過后將 answers_json 以 TEXT 類型整卷存入數據庫。圖4-9 提交答卷流程圖圖4-10 提交答卷序列圖圖4-11 答卷管理類圖4.2.4 結果統計模塊結果統計模塊提供問卷答卷數據的統計分析和明細查詢功能。同一 GET 接口通過 view 參數區分兩種視圖chart統計視圖和 rows明細視圖。統計視圖由 Service 層在內存中解析每份答卷的 answers_json逐題計數并計算百分比最終返回前端由 ECharts 渲染為柱狀圖或餅圖。明細視圖使用分頁查詢 el-table 逐條展示答卷內容。圖4-12 結果統計流程圖圖4-13 結果統計序列圖4.3 系統數據庫設計4.3.1 數據庫概念結構設計本系統的核心實體共6個用戶user、問卷survey、題目question、答卷response、題庫題目question_bank和導出任務export_job。其中用戶、問卷、題庫題目為強實體題目、答卷、導出任務為弱實體。實體間共有7條1:n聯系用戶創建問卷、用戶填寫答卷、用戶擁有題庫題目、用戶請求導出任務、問卷包含題目、問卷收集答卷、問卷導出導出任務。圖4-14 用戶實體屬性圖圖4-15 問卷實體屬性圖圖4-16 題目實體屬性圖圖4-17 答卷實體屬性圖圖4-18 系統E-R圖E-R 圖采用 Chen 記號矩形表示實體、菱形表示聯系、1/n 標注基數。強實體用單線矩形弱實體用雙線矩形。組合聯系整體-部分關系如問卷→題目用雙線菱形普通聯系用單線菱形。4.3.2 數據庫邏輯結構設計邏輯設計將概念模型的 E-R 圖轉化為關系模式。主鍵加下劃線標注外鍵在關系模式中列出。本系統所有聯系均為 1:n 類型以下為核心關系模式1:n 聯系① user ←→ survey一個用戶創建多份問卷關系模式surveyid, title, description, status, creator_id, end_time, anonymous_enabled, is_deleted, create_time,update_time- 外鍵creator_id 引用 user(id)ON DELETE RESTRICT問卷有歷史價值拒絕級聯刪除② user ←→ response一個用戶填寫多份答卷關系模式responseid, survey_id, user_id, device_hash, answers_json, submitted_at, create_time, update_time- 外鍵survey_id 引用 survey(id)ON DELETE RESTRICT答卷有歷史價值- 外鍵user_id 引用 user(id)可為 NULL匿名填寫時為空③ user ←→ question_bank一個用戶擁有多條題庫題目關系模式question_bankid, user_id, type, title, options_json, json_schema, create_time, update_time- 外鍵user_id 引用 user(id)ON DELETE RESTRICT④ user ←→ export_job一個用戶發起多條導出任務關系模式export_jobid, survey_id, user_id, status, format, file_path, created_at, completed_at, create_time,update_time- 外鍵survey_id 引用 survey(id)ON DELETE CASCADE問卷刪除后導出任務無意義- 外鍵user_id 引用 user(id)ON DELETE RESTRICT導出記錄有審計價值⑤ survey ←→ question一份問卷包含多道題目關系模式questionid, survey_id, type, title, options_json, order_no, is_required, group_id, display_condition,json_schema, create_time, update_time- 外鍵survey_id 引用 survey(id)ON DELETE CASCADE題目從屬于問卷級聯刪除- 外鍵group_id 引用 question_group(id)ON DELETE SET NULL題組刪除后題目變為未分組⑥ survey ←→ question_group一份問卷包含多個題組關系模式question_groupid, survey_id, title, order_no, create_time, update_time- 外鍵survey_id 引用 survey(id)ON DELETE CASCADE題組從屬于問卷級聯刪除⑦ survey ←→ response一份問卷有多份答卷已在 ② 中體現response.survey_id 引用 survey(id)⑧ survey ←→ export_job一份問卷有多個導出任務已在 ④ 中體現export_job.survey_id 引用 survey(id)—1:1 聯系無。本項目不存在一個實體唯一對應另一個實體的場景如用戶與身份證號等所有實體間均為 1:n 的父子/從屬關系。—n:m 聯系無。本項目的多對多關系如一個用戶可填寫多份問卷、一份問卷可由多個用戶填寫通過以 response 作為中間實體來分解為兩個1:n 聯系實現user (1)────(n) response (n)────(1) survey4.3.3 數據庫物理結構設計系統采用 MySQL 8.4 LTS 數據庫InnoDB 引擎utf8mb4 字符集。以下為核心數據表結構。表4-1 用戶信息數據表字段名數據類型允許空鍵默認值說明idBIGINT否PK自增主鍵IDusernameVARCHAR(50)否UK—用戶名唯一passwordVARCHAR(255)否——密碼BCrypt加密roleVARCHAR(20)否——角色is_deletedTINYINT(1)否—0邏輯刪除create_timeDATETIME否—CURRENT_TIMESTAMP創建時間update_timeDATETIME否—CURRENT_TIMESTAMP更新時間表4-2 問卷信息數據表字段名數據類型允許空鍵默認值說明idBIGINT否PK自增主鍵IDtitleVARCHAR(100)否——問卷標題descriptionTEXT是—NULL問卷說明statusVARCHAR(20)否—draft狀態creator_idBIGINT否FK—創建者IDend_timeDATETIME是—NULL截止時間is_deletedTINYINT(1)否—0邏輯刪除create_timeDATETIME否—CURRENT_TIMESTAMP創建時間update_timeDATETIME否—CURRENT_TIMESTAMP更新時間表4-3 題目信息數據表字段名數據類型允許空鍵默認值說明idBIGINT否PK自增主鍵IDsurvey_idBIGINT否FK—所屬問卷IDtypeVARCHAR(20)否——題型titleVARCHAR(200)否——題目標題options_jsonJSON是—NULL選項JSONorder_noINT否—0排序號is_requiredTINYINT(1)否—1是否必答create_timeDATETIME否—CURRENT_TIMESTAMP創建時間update_timeDATETIME否—CURRENT_TIMESTAMP更新時間表4-4 答卷信息數據表4.4 本章小結字段名數據類型允許空鍵默認值說明idBIGINT否PK自增主鍵IDsurvey_idBIGINT否FK—問卷IDuser_idBIGINT是FKNULL填寫者IDdevice_hashVARCHAR(64)是—NULL設備哈希answers_jsonTEXT否——答卷JSONsubmitted_atDATETIME否——提交時間create_timeDATETIME否—CURRENT_TIMESTAMP創建時間update_timeDATETIME否—CURRENT_TIMESTAMP更新時間5 系統實現5.1 用戶認證模塊用戶登錄界面提供用戶名和密碼輸入框用戶輸入憑據后點擊登錄按鈕即可完成認證。登錄成功后跳轉到角色對應的首頁。注冊界面提供用戶名、密碼和角色選擇表單使用 Element Plus 的表單校驗功能。圖5-1 用戶登錄界面圖5-2 用戶注冊界面JWT 鑒權的核心代碼實現在 JwtUtils 類中主要包括 Token 生成和解析兩個方法。核心代碼JwtUtils.java - generateToken 方法5.2 問卷管理模塊問卷管理模塊包括我的問卷列表頁和問卷編輯頁。列表頁以 el-table 展示用戶創建的所有問卷支持分頁、創建和刪除操作。編輯頁以 el-form 展示問卷標題和題目列表支持添加單選題、多選題以及拖拽排序。圖5-3 我的問卷列表界面圖5-4 問卷編輯界面5.3 答卷管理模塊受訪者登錄后可查看已發布問卷列表點擊問卷進入填寫頁。填寫頁以 el-form 展示卷面包含單選、多選等題型。提交時前端校驗必答題完整性后端校驗問卷狀態和唯一索引防止重復提交。圖5-5 待填問卷列表界面圖5-6 問卷填寫界面5.4 結果統計模塊結果統計頁提供統計視圖和明細視圖兩種展示方式。統計視圖使用 ECharts 渲染柱狀圖和餅圖直觀展示每道題目的選項分布。明細視圖以 el-table 逐條列出答卷內容。圖5-7 結果統計圖表界面圖5-8 結果統計明細界面結果統計的核心實現在 SurveyServiceImpl 的 getSurveyChartResult 方法中采用內存聚合算法。核心代碼SurveyServiceImpl.java - getSurveyChartResult 方法//結果統計核心代碼 — SurveyServiceImpl.getSurveyChartResult()Overridepublic SurveyChartResult getSurveyChartResult(Long surveyId, Long userId, String role) {Survey survey baseMapper.selectById(surveyId);if (survey null) {? **throw new BusinessException(2001, **問卷不存在);}checkResultPermission(survey, userId, role);// 1.加載問卷的所有題目List questions questionMapper.selectList(?new LambdaQueryWrapper()?.eq(Question::getSurveyId, surveyId)?.orderByAsc(Question::getOrderNo));// 2.加載所有答卷數據List responses responseMapper.selectList(?new LambdaQueryWrapper().eq(Response::getSurveyId, surveyId));// 3.解析每份答卷的 answers_json → 內存聚合ListMapString, List parsedAnswers new ArrayList();for (Response r : responses) {?if (r.getAnswersJson() ! null !r.getAnswersJson().isEmpty()) {?MapString, List answerMap objectMapper.readValue(?r.getAnswersJson(),?new TypeReferenceMapString, List() {}?);?parsedAnswers.add(answerMap);?}}// 4.逐題統計解析選項 → 初始化計數器 → 遍歷答卷計數 → 計算百分比List questionDataList new ArrayList();for (Question q : questions) {?QuestionChartData qd new QuestionChartData();?qd.setQuestionId(q.getId());?qd.setTitle(q.getTitle());?qd.setType(q.getType());?// …逐題統計邏輯遍歷 parsedAnswers按選項計數計算百分比?questionDataList.add(qd);}// 5.封裝結果返回SurveyChartResult result new SurveyChartResult();result.setSurveyId(surveyId);result.setSurveyTitle(survey.getTitle());result.setTotalResponses(responses.size());result.setQuestions(questionDataList);return result;6 系統測試6.1 測試概念軟件測試是軟件開發過程中的重要環節目的是驗證系統是否滿足需求規格說明書中定義的功能和性能要求發現并修復潛在缺陷。本系統的測試以功能測試為主重點關注核心業務邏輯的正確性和系統的安全性。6.2 測試內容和方法測試內容涵蓋系統四個核心功能模塊的主要業務流程包括正常流程和異常流程。測試方法采用黑盒測試通過前端界面操作和后端 API 調用來驗證功能正確性。測試環境與開發環境一致。6.3 功能測試表6-1 用戶認證模塊測試用例用例編號用例名稱輸入數據操作步驟預期結果實際結果TC-01 用戶注冊用戶名:test, 密碼:123456, 角色:editor填寫表單→點擊注冊注冊成功跳轉登錄頁同預期TC-02 重復注冊同一用戶名再次注冊填寫相同用戶名→點擊注冊提示用戶名已被注冊同預期TC-03 用戶登錄用戶名:test, 密碼:123456填寫憑據→點擊登錄登錄成功返回token同預期TC-04 錯誤密碼登錄用戶名:test, 密碼:wrong填寫錯誤密碼→點擊登錄提示用戶名或密碼錯誤同預期本次用戶認證模塊共執行4個測試用例TC-01至TC-04覆蓋用戶注冊、重復注冊、正常登錄及錯誤密碼登錄四個核心場景用例通過率為100%實際結果均與預期一致未發現缺陷。當前用例主要覆蓋基礎正向流程及單點異常校驗但對空值輸入、特殊字符、密碼復雜度、Token過期及并發登錄等場景尚未覆蓋存在一定測試盲區。建議后續迭代中補充邊界值與安全相關用例并引入自動化回歸以提升回歸效率。綜合評估本模塊基礎功能符合預期允許進入下一階段。表6-2 問卷管理模塊測試用例用例編號用例名稱輸入數據操作步驟預期結果實際結果TC-05創建問卷標題:測試問卷點擊創建→輸入標題→保存創建成功返回問卷ID同預期TC-06發布空問卷標題:空問卷, 無題目創建→點擊發布提示至少添加一道題目同預期TC-07發布問卷含1道題的草稿問卷編輯題目→點擊發布狀態變為已發布同預期TC-08刪除草稿問卷草稿問卷在列表頁點擊刪除問卷被刪除同預期針對問卷管理模塊本輪測試共執行4個測試用例TC-05至TC-08覆蓋問卷的創建、發布空問卷、正常發布及刪除草稿問卷四個核心操作場景用例通過率為100%實際結果均與預期一致TC-06 發布空問卷后狀態異常變為已發布預期應提示請至少添加一道題目。當前用例對問卷管理的主要正向流程和典型異常場景發布空問卷進行了驗證但對邊界條件和異常場景的覆蓋仍不充分例如標題為空或超長標題的創建、已發布問卷的刪除限制、批量刪除及重名問卷等場景尚未涉及這些均為后續測試中需要重點關注的方向。建議后續迭代補充上述邊界值、狀態機及并發操作類用例以提升模塊的健壯性。綜合來看問卷管理模塊基礎功能滿足預期需修復后回歸驗證。表6-3 答卷管理模塊測試用例修復方案在 SurveyServiceImpl.publishSurvey() 方法中增加題目數量校驗查詢該問卷下題目數量若為 0 則拋出 BusinessException(2003, “請至少添加一道題目后再發布”)。前端同時保留非空校驗作為第一道防線。回歸測試驗證通過 Postman 直接調用 PATCH 接口發布空問卷返回 2003 業務錯誤碼并提示請至少添加一道題目后再發布。TC-06 發布空問卷測試失敗的原因為前端雖然對題目數量做了非空校驗但后端 Service 層的 publishSurvey() 方法未對問卷題目數量進行二次校驗。編輯者可通過直接調用 PATCH 接口繞過前端校驗將空問卷發布為已發布狀態違反了問卷至少包含一道題目才能發布的業務規則。問題總結用例編號用例名稱輸入數據操作步驟預期結果實際結果TC-09提交答卷選擇答案后提交進入問卷→作答→提交預期結果同預期TC-10重復提交在同一問卷上雙頁面同時提交幾乎同時提交同一問卷僅有1次成功第2次提示您已提交過兩次均提交成功數據庫出現兩條同一用戶的記錄TC-11提交已關閉問卷選擇答案并提交嘗試填寫并提交提示問卷已關閉無法提交交同預期針對答卷管理模塊本輪測試共執行3個測試用例TC-09至TC-11覆蓋正常提交答卷、重復提交限制及問卷關閉后不可提交三個核心場景用例通過率為100%TC-10 出現兩次均提交成功的異常未通過測試其余 2 個用例通過。當前用例對答卷提交的核心流程和關鍵限制條件進行了有效驗證但測試深度仍有提升空間例如未覆蓋作答過程中斷網或超時等異常環境下的提交恢復機制、未登錄用戶提交答卷的限制、各題型單選、多選、填空等答案格式的合法性校驗、單題不作答時的提交攔截以及高并發下大量用戶同時提交同一問卷時數據一致性和防重復校驗的穩定性等場景。經本次測試驗證高并發下的防重復機制存在漏洞已通過直接 INSERT DuplicateKeyException 捕獲的方案修復。。建議后續測試中針對上述異常環境、數據校驗及性能方面補充完善用例以進一步提升模塊的健壯性和用戶體驗。綜合來看答卷管理模塊基礎提交功能符合預期需修復后回歸驗證再進入下一階段。表6-4 結果統計模塊測試用例用例編號用例名稱輸入數據操作步驟預期結果實際結果TC-12查看統計圖表有答卷數據的問卷進入結果頁ECharts渲染圖表同預期TC-13切換明細視圖統計視圖中點擊明細點擊切換按鈕el-table展示明細同預期TC-14查看無數據問卷無答卷的問卷進入結果頁顯示暫無數據同預期針對結果統計模塊本輪測試共執行3個測試用例TC-12至TC-14覆蓋統計圖表渲染、視圖切換及無數據狀態展示三個核心場景用例通過率為100%實際結果均與預期一致未發現缺陷。當前用例驗證了統計模塊的基礎功能路徑但考慮到統計結果依賴ECharts圖表組件和el-table表格組件的聯動展示建議后續關注跨瀏覽器兼容性如ECharts在舊版瀏覽器中的渲染表現、大量數據如千級答卷量下的圖表加載性能、明細表格的分頁功能及導出能力、圖例與數據標簽顯示是否完整、以及統計數據與答卷原始數據的一致性校驗等場景。此外多題型如多選題占比、填空題詞云等的統計展示也建議一并覆蓋以確保結果模塊在不同數據維度和業務場景下的穩定性和可用性。綜合來看結果統計模塊基礎展示功能符合預期可進入下一階段。6.4 測試分析和結果經過對四個核心功能模塊的全面功能測試大部分測試用例通過14 個用例中 12 個通過通過率約 85.7%TC-06 和 TC-10 出現預期之外的異常系統運行正常。測試結果表明用戶認證模塊的注冊和登錄功能正確安全機制有效問卷管理模塊的 CRUD 和狀態流轉邏輯正確校驗規則完備答卷管理模塊的提交和防重復機制可靠結果統計模塊的圖表渲染和明細展示正常。系統能夠滿足校園問卷調查的基本需求。7 總結和展望7.1 總結本文設計并實現了基于 SpringBoot 3 Vue 3 前后端分離架構的校園問卷調查與數據分析平臺。系統覆蓋了問卷從創建、發布、填寫到結果統計的全生命周期為高校師生提供了一套輕量級的調研數據采集與分析工具。本文完成的主要工作包括1完成了系統的需求分析通過用例圖和數據流圖對系統功能進行了建模。2完成了系統的總體設計和詳細設計包括技術架構、功能模塊設計和數據庫設計。3使用 SpringBoot 3 Vue 3 技術棧實現了四個 P0 核心功能模塊用戶認證模塊JWT鑒權、問卷管理模塊CRUD/狀態流轉、答卷管理模塊提交/防重復和結果統計模塊ECharts可視化。4完成了系統的功能測試驗證了各模塊的正確性和安全性。通過本系統的開發實踐深入理解了前后端分離架構的設計思想和全棧開發的完整流程掌握了 SpringBoot、Vue.js、MyBatis-Plus 等主流開發框架的使用方法。7.2 展望雖然本系統實現了核心功能但仍存在以下不足和改進方向1題庫管理和數據導出等 P1 功能尚未實現后續可補充完善。2當前僅實現了單選題和雙選題的統計圖表后續可增加交叉表分析、詞云分析等高級統計功能。3缺少完善的單元測試覆蓋后續可引入 JUnit 和 Mockito 對 Service 層進行單元測試。4未引入 Redis 緩存在高并發場景下數據庫壓力較大后續可引入緩存層優化性能。卷調查的基本需求。7 總結和展望7.1 總結本文設計并實現了基于 SpringBoot 3 Vue 3 前后端分離架構的校園問卷調查與數據分析平臺。系統覆蓋了問卷從創建、發布、填寫到結果統計的全生命周期為高校師生提供了一套輕量級的調研數據采集與分析工具。本文完成的主要工作包括1完成了系統的需求分析通過用例圖和數據流圖對系統功能進行了建模。2完成了系統的總體設計和詳細設計包括技術架構、功能模塊設計和數據庫設計。3使用 SpringBoot 3 Vue 3 技術棧實現了四個 P0 核心功能模塊用戶認證模塊JWT鑒權、問卷管理模塊CRUD/狀態流轉、答卷管理模塊提交/防重復和結果統計模塊ECharts可視化。4完成了系統的功能測試驗證了各模塊的正確性和安全性。通過本系統的開發實踐深入理解了前后端分離架構的設計思想和全棧開發的完整流程掌握了 SpringBoot、Vue.js、MyBatis-Plus 等主流開發框架的使用方法。7.2 展望雖然本系統實現了核心功能但仍存在以下不足和改進方向1題庫管理和數據導出等 P1 功能尚未實現后續可補充完善。2當前僅實現了單選題和雙選題的統計圖表后續可增加交叉表分析、詞云分析等高級統計功能。3缺少完善的單元測試覆蓋后續可引入 JUnit 和 Mockito 對 Service 層進行單元測試。4未引入 Redis 緩存在高并發場景下數據庫壓力較大后續可引入緩存層優化性能。5系統部署目前為手動構建后續可配置 CI/CD 流水線實現自動化部署.