基于Vue.js前后端分離技術的問卷調查系統

朱曉妤 陳 思 張 愷 周辰駿 王洪波

（中移信息技術有限公司，廣東 深圳 518048）

1 引言

問卷調查是企業生產活動中必不可少的工作，通過問卷調查可以收集職工意見，了解員工對企業各方面的意見和建議，彌補日常工作中看不到的漏洞和缺點；也可以通過問卷調查宣傳健康、安全、法律和科學知識，營造積極向上的工作氛圍。傳統的問卷調查是組織大量的人力物力對用戶散發調查表，然后對收集的信息進行統計并得到結果。但這種做法耗費大、效率低、周期長。因此，集問卷設計、管理、分析和統計于一體的智能化問卷調查系統應運而生，具有調查范圍廣、不受時間和空間限制、速度快、準確度高等特點而逐漸取代了傳統的紙質問卷調查。本文采用Vue.js 的前后端分離技術實現了智能化的問卷調查系統。

2 系統設計

2.1 功能設計

本文的問卷調查系統是一個嵌入到企業微信、服務于企業員工的在線問卷調查平臺，為用戶提供集在線設計問卷、發布問卷、作答問卷和問卷管理于一體的功能完整的智能化服務。

問卷調查系統分為創建問卷、問卷廣場和問卷管理三大模塊，系統的各功能模塊如圖1 所示。其中，創建問卷模塊包括在線設計問卷、設置問卷屬性、問卷模板管理等操作；問卷管理模塊主要負責問卷的發布、收藏列表的管理；問卷廣場模塊負責問卷的瀏覽、作答等基礎操作。

（1）在線設計問卷：問卷調查系統提供了所見即所得的設計問卷界面，支持多種題型以及分頁欄，并可以設置選項分值，設置跳轉邏輯，同時還提供了問卷模板功能，可以自定義問卷模板。在創建問卷模塊時，將選擇題、填空題等題型歸類存放，便于創建問卷時復用。

（2）設置問卷屬性：問卷內容設計完成之后，需要為該問卷設置相關屬性，如問卷開始時間、作答次數和參與人員等。其中參與人員為從企業通訊錄中選擇的員工，確保了問卷的安全性、保密性。

（3）發布問卷：問卷屬性設置完成之后，便可以直接進行發布問卷。也可以對問卷進行復制、修改、刪除和收藏等操作。

（4）問卷作答：當問卷發布后，相關用戶可以通過企業微信登錄問卷調查系統，進入問卷廣場選擇相應問卷進行作答。

2.2 架構設計

為了降低開發成本、提高開發效率和代碼復用率，從而快速迭代產品以滿足企業日益增加的需求，提高員工體驗，本系統采用前后端分離的方式開發。項目前端采用MVVM[3]的模式開發，借助其模塊化、雙向數據綁定和自定義路由等功能來簡化系統的開發，后端使用Spring Boot框架進行開發，處理復雜業務邏輯，為前端提供數據服務。

項目的架構設計如圖2所示，相比于傳統的MVC模式，MVVM 模式實現了對數據的雙向綁定，不僅View 的變化會自動更新到ViewModel，而且ViewModel 的變化也會自動同步到View上顯示，MVVM的本質是通過數據綁定連接View和Model，讓數據的變化自動映射為視圖的更新。這種自動同步是因為ViewModel 中的屬性實現了Observer，Observer是數據的監控器，它的主要作用就是對數據進行監控，當屬性值變更時候就能觸發對應的操作。

前端模型負責構建視圖層和接口層，其中視圖層包含終端、組件和路由模塊；接口層包括所有具體的業務接口，并使用Vue-Router 管理用戶請求和頁面跳轉，通過Axios 向后端服務層發送請求。

后端負責接收前端的業務請求，做出相應的處理。當后端從數據源獲取到數據后由SpringBoot 將數據轉換為Json格式返回給前端，從而完成前后端的數據交互。后端主要由服務層構成，服務層采用Nginx作為靜態資源代理，并使用基于Node.Js 的分布式處理方式完成不同的數據處理工作[4]。因此服務層可以根據應用的性能要求，采用負載均衡的方案以達到高性能的要求，從而快速響應前端的業務請求。

2.3 前端設計

本小節基于上述的功能設計和架構設計，對本系統的主要功能進行詳細的設計，并著重于前端邏輯的實現。

2.3.1 創建問卷

創建問卷主要由問卷內容設計、問卷屬性設置這兩個基礎功能組成，詳細設計如圖3所示，主要包括以下過程：

Step1：管理員登錄企業微信，并通過企業微信的認證后，進入問卷系統首頁。

Step2：管理員點擊進入問卷內容設計模塊，完成問卷內容的設計。首先完成標題的設計、問卷題型的選擇，用于初始化問卷信息，基于這些信息構建問卷前端展示形式，然后設計題目內容和選項，并設置選項的分數、跳轉邏輯等。完成問卷內容的設計后，管理員點擊“保存”按鈕，前端通過Axios 的post 請求向服務器請求添加問卷接口，當后臺返回“code”為200 時，表示請求接口成功。然后前端基于Vue-Router 進行路由跳轉，進入問卷列表頁，同時在mouted 鉤子函數中，使用Axios 發送get 請求獲取問卷列表數據，通過vfor 完成列表的最終渲染，管理員即可看到含有其創建的問卷的列表。

Step3：在問卷列表頁面選擇相應的問卷，為其設置屬性。問卷包括開始時間、結束時間、允許作答次數以及參與人員等屬性，其中參與人員為從企業通訊錄中選擇的企業員工，確保了問卷的安全性、機密性。問卷管理員設置好問卷屬性后，點擊“保存”按鈕保存問卷屬性信息，問卷即進入待發布狀態。

2.3.2 問卷管理

設置完成后，直接進行發布問卷。也可以對問卷進行復制、收藏和刪除等操作。問卷發布流程如圖4所示，主要包括以下過程：

Step1：管理員登錄企業微信平臺后，進入問卷管理模塊查看待發布的問卷列表，然后選擇相應的問卷。此時，管理員可以對問卷進行復制、修改、收藏、刪除、發布等操作。

Step2：管理員點擊“發布”按鈕，觸發后端更改問卷狀態，然后問卷調查系統會將問卷相關信息發送給相關人員，最后系統返回至問卷管理頁面，管理員可以看到已發布的問卷。

2.3.3 授權認證

通過將問卷調查系統接入企業微信的方式，為企業員工提供更加便捷、安全的在線問卷調查服務。其中系統登錄采用OAuth2 授權登錄方式，從企業微信終端打開的網頁獲取成員的身份信息，免去額外的密碼登錄的環節。企業微信的OAuth2授權訪問的流程如圖5所示，其中授權認證的邏輯主要體現在以下過程：

Step1：用戶訪問問卷調查系統（此時作為第三方服務）時，問卷管理系統（第三方服務）通過構造OAuth2鏈接，將用戶引導到認證服務器的授權頁。

Step2：用戶選擇是否同意授權，若用戶同意授權，則認證服務器將用戶的訪問地址重定向到第一步指定的重定向URI，同時附上一個授權碼。

Step3：問卷調查系統（第三方服務）收到授權碼，帶上授權碼來源的重定向URI，向認證服務器申請憑證。

Step4：認證服務器檢查授權碼和重定向URI 的有效性，驗證通過后頒發Access-Token 作為訪問開發者服務器資源的調用憑證。

2.4 后端設計

后端主要采用SpringBoot 框架、MySQL 數據庫和Nginx服務器，基于微信工具包WxJava 和業內主流權限管理架構Shiro+Jwt實現了Restful風格的資源無狀態權限認證后端系統，并且使用Docker+Jenkins技術實現持續集成部署。問卷管理系統通過H5 頁面植入企業微信，應用企業微信和SMAP進行單點登錄獲取用戶信息。SpringBoot框架包含兩部分：View視圖層、H5Service邏輯層，View層用來渲染頁面結構，H5Service層用來邏輯處理、數據請求、接口調用，它們在兩個線程里運行。視圖層使用WebView渲染，邏輯層使用JSCore 運行。視圖層和邏輯層通過系統層的JSBridge 進行通信，邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，視圖層把觸發的事件通知到邏輯層進行業務處理。

本系統主要使用SpringBoot 的邏輯層處理后端業務邏輯，前端使用基于Vue.js 的MVVM 架構開發，以此構建前后端分離的系統架構。

3 部署實現

前端基于NodeJs和npm對開源依賴包和工具進行管理，通過Webpack 工具實現前端模塊化打包、合并和壓縮文件。后端根據特定的開發環境，打包構建相應的生產環境應用。但當系統進行前后端分離部署時，會出現跨域問題，為此本系統基于Nginx設計了前后端分離的部署架構解決跨域問題。系統利用了Nginx[5]反向代理以及靜態資源文件管理的功能，將客戶端（或前端服務器）的請求交給Nginx，Nginx進行跨域邏輯處理，再調用后端的代碼，這樣前后端可以分開部署在兩臺機器上，或是部署在一臺機器上不同端口號中，從而解決跨域問題。該方法實現了前后端代碼的單獨部署，便于項目管理。同時，為了提高后端服務器的性能，采用Nginx 輪詢策略，將請求平均分配到每臺后端服務器上，達到負載均衡的效果，從而提升后端服務器處理前端請求的效率。

4 結語

本文主要從系統架構設計、前后端設計和部署實現三個方面，詳細描述基于Vue.js 的問卷管理系統的設計與實現。Vue.js 具備組件化、雙向綁定等特性。組件化提高了代碼復用率和項目的可維護性；雙向綁定可以高效地將數據反映到頁面模型上，提高了用戶體驗感。