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

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

1 引言

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

2 系統(tǒng)設(shè)計(jì)

2.1 功能設(shè)計(jì)

本文的問卷調(diào)查系統(tǒng)是一個(gè)嵌入到企業(yè)微信、服務(wù)于企業(yè)員工的在線問卷調(diào)查平臺(tái)，為用戶提供集在線設(shè)計(jì)問卷、發(fā)布問卷、作答問卷和問卷管理于一體的功能完整的智能化服務(wù)。

問卷調(diào)查系統(tǒng)分為創(chuàng)建問卷、問卷廣場(chǎng)和問卷管理三大模塊，系統(tǒng)的各功能模塊如圖1 所示。其中，創(chuàng)建問卷模塊包括在線設(shè)計(jì)問卷、設(shè)置問卷屬性、問卷模板管理等操作；問卷管理模塊主要負(fù)責(zé)問卷的發(fā)布、收藏列表的管理；問卷廣場(chǎng)模塊負(fù)責(zé)問卷的瀏覽、作答等基礎(chǔ)操作。

（1）在線設(shè)計(jì)問卷：問卷調(diào)查系統(tǒng)提供了所見即所得的設(shè)計(jì)問卷界面，支持多種題型以及分頁欄，并可以設(shè)置選項(xiàng)分值，設(shè)置跳轉(zhuǎn)邏輯，同時(shí)還提供了問卷模板功能，可以自定義問卷模板。在創(chuàng)建問卷模塊時(shí)，將選擇題、填空題等題型歸類存放，便于創(chuàng)建問卷時(shí)復(fù)用。

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

（3）發(fā)布問卷：問卷屬性設(shè)置完成之后，便可以直接進(jìn)行發(fā)布問卷。也可以對(duì)問卷進(jìn)行復(fù)制、修改、刪除和收藏等操作。

（4）問卷作答：當(dāng)問卷發(fā)布后，相關(guān)用戶可以通過企業(yè)微信登錄問卷調(diào)查系統(tǒng)，進(jìn)入問卷廣場(chǎng)選擇相應(yīng)問卷進(jìn)行作答。

2.2 架構(gòu)設(shè)計(jì)

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

項(xiàng)目的架構(gòu)設(shè)計(jì)如圖2所示，相比于傳統(tǒng)的MVC模式，MVVM 模式實(shí)現(xiàn)了對(duì)數(shù)據(jù)的雙向綁定，不僅View 的變化會(huì)自動(dòng)更新到ViewModel，而且ViewModel 的變化也會(huì)自動(dòng)同步到View上顯示，MVVM的本質(zhì)是通過數(shù)據(jù)綁定連接View和Model，讓數(shù)據(jù)的變化自動(dòng)映射為視圖的更新。這種自動(dòng)同步是因?yàn)閂iewModel 中的屬性實(shí)現(xiàn)了Observer，Observer是數(shù)據(jù)的監(jiān)控器，它的主要作用就是對(duì)數(shù)據(jù)進(jìn)行監(jiān)控，當(dāng)屬性值變更時(shí)候就能觸發(fā)對(duì)應(yīng)的操作。

前端模型負(fù)責(zé)構(gòu)建視圖層和接口層，其中視圖層包含終端、組件和路由模塊；接口層包括所有具體的業(yè)務(wù)接口，并使用Vue-Router 管理用戶請(qǐng)求和頁面跳轉(zhuǎn)，通過Axios 向后端服務(wù)層發(fā)送請(qǐng)求。

后端負(fù)責(zé)接收前端的業(yè)務(wù)請(qǐng)求，做出相應(yīng)的處理。當(dāng)后端從數(shù)據(jù)源獲取到數(shù)據(jù)后由SpringBoot 將數(shù)據(jù)轉(zhuǎn)換為Json格式返回給前端，從而完成前后端的數(shù)據(jù)交互。后端主要由服務(wù)層構(gòu)成，服務(wù)層采用Nginx作為靜態(tài)資源代理，并使用基于Node.Js 的分布式處理方式完成不同的數(shù)據(jù)處理工作[4]。因此服務(wù)層可以根據(jù)應(yīng)用的性能要求，采用負(fù)載均衡的方案以達(dá)到高性能的要求，從而快速響應(yīng)前端的業(yè)務(wù)請(qǐng)求。

2.3 前端設(shè)計(jì)

本小節(jié)基于上述的功能設(shè)計(jì)和架構(gòu)設(shè)計(jì)，對(duì)本系統(tǒng)的主要功能進(jìn)行詳細(xì)的設(shè)計(jì)，并著重于前端邏輯的實(shí)現(xiàn)。

2.3.1 創(chuàng)建問卷

創(chuàng)建問卷主要由問卷內(nèi)容設(shè)計(jì)、問卷屬性設(shè)置這兩個(gè)基礎(chǔ)功能組成，詳細(xì)設(shè)計(jì)如圖3所示，主要包括以下過程：

Step1：管理員登錄企業(yè)微信，并通過企業(yè)微信的認(rèn)證后，進(jìn)入問卷系統(tǒng)首頁。

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

Step3：在問卷列表頁面選擇相應(yīng)的問卷，為其設(shè)置屬性。問卷包括開始時(shí)間、結(jié)束時(shí)間、允許作答次數(shù)以及參與人員等屬性，其中參與人員為從企業(yè)通訊錄中選擇的企業(yè)員工，確保了問卷的安全性、機(jī)密性。問卷管理員設(shè)置好問卷屬性后，點(diǎn)擊“保存”按鈕保存問卷屬性信息，問卷即進(jìn)入待發(fā)布狀態(tài)。

2.3.2 問卷管理

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

Step1：管理員登錄企業(yè)微信平臺(tái)后，進(jìn)入問卷管理模塊查看待發(fā)布的問卷列表，然后選擇相應(yīng)的問卷。此時(shí)，管理員可以對(duì)問卷進(jìn)行復(fù)制、修改、收藏、刪除、發(fā)布等操作。

Step2：管理員點(diǎn)擊“發(fā)布”按鈕，觸發(fā)后端更改問卷狀態(tài)，然后問卷調(diào)查系統(tǒng)會(huì)將問卷相關(guān)信息發(fā)送給相關(guān)人員，最后系統(tǒng)返回至問卷管理頁面，管理員可以看到已發(fā)布的問卷。

2.3.3 授權(quán)認(rèn)證

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

Step1：用戶訪問問卷調(diào)查系統(tǒng)（此時(shí)作為第三方服務(wù)）時(shí)，問卷管理系統(tǒng)（第三方服務(wù)）通過構(gòu)造OAuth2鏈接，將用戶引導(dǎo)到認(rèn)證服務(wù)器的授權(quán)頁。

Step2：用戶選擇是否同意授權(quán)，若用戶同意授權(quán)，則認(rèn)證服務(wù)器將用戶的訪問地址重定向到第一步指定的重定向URI，同時(shí)附上一個(gè)授權(quán)碼。

Step3：問卷調(diào)查系統(tǒng)（第三方服務(wù)）收到授權(quán)碼，帶上授權(quán)碼來源的重定向URI，向認(rèn)證服務(wù)器申請(qǐng)憑證。

Step4：認(rèn)證服務(wù)器檢查授權(quán)碼和重定向URI 的有效性，驗(yàn)證通過后頒發(fā)Access-Token 作為訪問開發(fā)者服務(wù)器資源的調(diào)用憑證。

2.4 后端設(shè)計(jì)

后端主要采用SpringBoot 框架、MySQL 數(shù)據(jù)庫和Nginx服務(wù)器，基于微信工具包WxJava 和業(yè)內(nèi)主流權(quán)限管理架構(gòu)Shiro+Jwt實(shí)現(xiàn)了Restful風(fēng)格的資源無狀態(tài)權(quán)限認(rèn)證后端系統(tǒng)，并且使用Docker+Jenkins技術(shù)實(shí)現(xiàn)持續(xù)集成部署。問卷管理系統(tǒng)通過H5 頁面植入企業(yè)微信，應(yīng)用企業(yè)微信和SMAP進(jìn)行單點(diǎn)登錄獲取用戶信息。SpringBoot框架包含兩部分：View視圖層、H5Service邏輯層，View層用來渲染頁面結(jié)構(gòu)，H5Service層用來邏輯處理、數(shù)據(jù)請(qǐng)求、接口調(diào)用，它們?cè)趦蓚€(gè)線程里運(yùn)行。視圖層使用WebView渲染，邏輯層使用JSCore 運(yùn)行。視圖層和邏輯層通過系統(tǒng)層的JSBridge 進(jìn)行通信，邏輯層把數(shù)據(jù)變化通知到視圖層，觸發(fā)視圖層頁面更新，視圖層把觸發(fā)的事件通知到邏輯層進(jìn)行業(yè)務(wù)處理。

本系統(tǒng)主要使用SpringBoot 的邏輯層處理后端業(yè)務(wù)邏輯，前端使用基于Vue.js 的MVVM 架構(gòu)開發(fā)，以此構(gòu)建前后端分離的系統(tǒng)架構(gòu)。

3 部署實(shí)現(xiàn)

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

4 結(jié)語

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