基于React和Express的接待工作管理系統(tǒng)的設(shè)計與實現(xiàn)

柳海燕 鄭健

摘要：每年來學(xué)校參觀交流的院校、企業(yè)等單位眾多，接待工作涉及接待方案確定、領(lǐng)導(dǎo)審批等多個環(huán)節(jié)。目前該類應(yīng)用開發(fā)成本高，且功能不能完全滿足學(xué)校個性化需求。針對這些問題，自主采用React和Express技術(shù)，設(shè)計并實現(xiàn)了IVT接待工作管理系統(tǒng)。前端頁面基于React用Material-UI和Recharts構(gòu)建，有效解決了客戶端多端訪問問題和刷新頁面帶來的性能問題。后端采用輕量框架Express進行開發(fā)，極大地提高了開發(fā)效率。項目同時對接了CAS服務(wù)、企業(yè)微信和阿里云短信服務(wù)，在方便用戶登錄的同時，也有效避免了信息孤島問題。

關(guān)鍵詞：React;Recharts;Express;企業(yè)微信

中圖分類號：TP311.5? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）17-0010-04

開放科學(xué)（資源服務(wù)）標識碼（OSID）：

1 背景

React是Facebook于2013年開源的Web框架， React將DOM抽象為虛擬DOM的特性，使我們在開發(fā)接待工作管理系統(tǒng)時，無須擔心性能問題可以根據(jù)需要隨時刷新整個頁面。張根[1]、秦子實[2]等用React構(gòu)建網(wǎng)站前端開發(fā)，郝駿[3]、沈超[4]等用React Native 開發(fā)原生移動應(yīng)用，SUBRAMANIAN V[5]為使用React構(gòu)建現(xiàn)代應(yīng)用提供了完整技術(shù)棧解決方案，從而形成對React技術(shù)的完美補充。本文使用Material-UI和Recharts框架完成系統(tǒng)UI顯示和統(tǒng)計圖表顯示，不僅系統(tǒng)風格統(tǒng)一，也極大地提高了開發(fā)效率。后端我們采用基于Node.js的輕量框架Express進行開發(fā)，可以快速創(chuàng)建健壯、友好的API，由于全棧使用React解決方案，在提高開發(fā)效率的同時也降低運維成本。

企業(yè)微信是騰訊公司推出的一款與微信有一致溝通體驗的企業(yè)通訊與辦公工具。張蓓蕾[6]、高月宏[7]、解攀科[8]等都基于企業(yè)微信進行了管理平臺的設(shè)計與開發(fā)。由于目前企業(yè)微信是我校常用辦公工具之一，所以我們將基于React框架開發(fā)的接待工作管理系統(tǒng)接入企業(yè)微信，使得內(nèi)部員工可以通過企業(yè)微信授權(quán)登錄，無須輸入用戶名、密碼，進而簡化用戶操作。為打通與原有系統(tǒng)數(shù)據(jù)的連接，我們還將本系統(tǒng)對接CAS單點登錄系統(tǒng)，有效避免了信息孤島問題。對于外部申請訪問人員，我們通過接入阿里云短信業(yè)務(wù)，使用戶通過手機號、驗證碼進行登錄，免去了用戶記憶賬號、 密碼的麻煩。

2 需求分析

2.1 功能性需求分析

我們經(jīng)過分析整理，將系統(tǒng)角色劃分為訪問申請人員、培訓(xùn)申請人員、審核人員、審批人員和管理員五種，所有角色人員能夠看到學(xué)校開設(shè)的培訓(xùn)課程。

訪問申請人員的功能需求包括：訪問申請的提交、修改、刪除、查詢操作。訪問申請人員還能夠查看已提交申請的審核進度，當審批結(jié)束后能夠下載接待方案，訪問結(jié)束后能夠填寫滿意度問卷對本次接待進行評價。

培訓(xùn)申請人員的功能需求包括：培訓(xùn)申請的提交、修改、刪除、查詢操作。培訓(xùn)申請人員還能查看審核結(jié)果。

審核人員負責訪問申請的審核、培訓(xùn)申請的審核、培訓(xùn)課程的增加、刪除、修改、查詢。當拒絕申請時，需選擇拒絕理由;當同意訪問申請時，應(yīng)制作并上傳接待方案，供上級領(lǐng)導(dǎo)審批;當同意培訓(xùn)申請時，應(yīng)及時與申請人員取得聯(lián)系商討培訓(xùn)計劃。

審批人員負責接待方案審批。當審批人員不滿意接待方案時，可退回給審核人員進行修改。當審批人員同意接待方案時，系統(tǒng)會自動發(fā)送短信到申請人手機，申請人可登錄系統(tǒng)下載接待方案，按照接待方案來訪。審批人員還可以用圖形化方式查看不同進度的訪問申請、培訓(xùn)申請，查看完成訪問人員的滿意度分布情況。

系統(tǒng)管理員擁有系統(tǒng)最高權(quán)限，能夠完成系統(tǒng)用戶、培訓(xùn)課程、訪問申請和培訓(xùn)申請的增加、刪除修改、查找等維護操作。

2.2 非功能性需求分析

1）易用性。在考慮用戶使用習慣的基礎(chǔ)上，我們要進一步簡化用戶操作。通過手機號、驗證碼登錄，可以免去用戶記憶密碼的煩惱。對于內(nèi)部員工通過企業(yè)微信授權(quán)登錄，既不用單獨記憶網(wǎng)址，也無須輸入用戶名、密碼。在線審批的各個環(huán)節(jié)通過短信提醒到申請人，可以方便用戶及時知道下一步該如何操作。

2）可靠性。充分考慮到應(yīng)用運行的數(shù)據(jù)異常等情況，進行異常處理。

3 系統(tǒng)設(shè)計

我們從系統(tǒng)架構(gòu)、系統(tǒng)模塊、系統(tǒng)數(shù)據(jù)庫幾個方面，對系統(tǒng)進行了全方位的設(shè)計，方便后期實施和維護。

3.1 系統(tǒng)架構(gòu)設(shè)計

為免去外部用戶記憶賬號、密碼的不便，我們設(shè)計使其通過阿里云短信登錄應(yīng)用服務(wù)器。為避免信息孤島的出現(xiàn)，我們設(shè)計內(nèi)部員工通過阿里云短信、企業(yè)微信授權(quán)登錄或CAS服務(wù)器登錄三種方式之一登錄應(yīng)用進行數(shù)據(jù)訪問。

考慮到接待工作管理系統(tǒng)涉及的CAS對接、企業(yè)微信對接、阿里云短信登錄等模塊，我們根據(jù)本校實際，設(shè)計了接待工作管理系統(tǒng)應(yīng)用服務(wù)器與數(shù)據(jù)庫服務(wù)器。系統(tǒng)相關(guān)的整體架構(gòu)示意圖如圖1所示。

用戶通過PC、筆記本、手機、Pad等終端設(shè)備訪問應(yīng)用系統(tǒng)。系統(tǒng)頁面采用HTML5響應(yīng)式設(shè)計，用戶在多種設(shè)備上有一致的使用體驗。

3.2 系統(tǒng)模塊設(shè)計

根據(jù)之前確認的用戶需求，我們進一步分角色繪制了系統(tǒng)模塊圖，如圖2所示。

對于整個接待工作管理系統(tǒng)而言，參觀訪問的接待工作是重中之重。我們對參觀訪問模塊繪制的數(shù)據(jù)流程圖如下圖3所示。對于用戶上傳的訪問申請，先由審核人員根據(jù)學(xué)校實際情況做出初步篩查，如果雙方條件無法匹配以致不能接待，由審核人員給出拒絕理由并拒絕申請，申請人員除可在系統(tǒng)查看通知外，也會收到相應(yīng)的短信提醒。對于可以接待的訪問申請，審核人員需撰寫接待方案，提交審批領(lǐng)導(dǎo)進行方案審批。待領(lǐng)導(dǎo)審批同意后，訪問申請人員可收到短信提醒，到系統(tǒng)下載接待方案后，即可按照接待方案來校訪問。訪問結(jié)束后，訪問申請者需到系統(tǒng)完成接待滿意度調(diào)查問卷，方可結(jié)束本次訪問。審批人員和管理員，可在系統(tǒng)中查看訪問申請、用戶滿意度的圖形化統(tǒng)計顯示結(jié)果，以便對工作更好的管理和部署。

3.3 數(shù)據(jù)庫設(shè)計

根據(jù)圖2所示的系統(tǒng)模塊，我們先畫出該接待工作管理系統(tǒng)的E-R圖，根據(jù)ER模型轉(zhuǎn)換為關(guān)系數(shù)據(jù)庫的一般原則，我們設(shè)計了7張表用于存儲接待工作管理系統(tǒng)的數(shù)據(jù)。其中user表用來存儲所有用戶的信息，包括企業(yè)微信ID、手機號、驗證碼等相關(guān)屬性，我們用字段power區(qū)分用戶的級別，并用這張表和其他六張表建立聯(lián)系。visit_apply為訪問申請表，記錄了用戶填寫的各項訪問申請記錄，包括單位名稱、來訪人數(shù)、到達時間、離開時間、是否需要安排住宿、交流目的等內(nèi)容。visit_verify為訪問審核表，記錄了用戶訪問申請的審核情況，包括申請表ID、審核人、審核時間、審核意見、審批人、審批人意見、接待方案等字段。visit_satisfy為訪問滿意度記錄表，記錄了已經(jīng)完成參觀訪問人員對我校接待情況的滿意度評價，包括申請表ID、滿意度評分、意見建議等字段。course為培訓(xùn)課程記錄表，用于展示學(xué)校已經(jīng)開設(shè)的培訓(xùn)課程的信息，主要包括課程名稱、課程學(xué)時、任課教師、教師簡介、課程簡介等信息。train_apply為培訓(xùn)申請表，記錄了用戶填寫的各項培訓(xùn)需求記錄，包括申請單位、需培訓(xùn)人數(shù)、培訓(xùn)地點、培訓(xùn)方向等內(nèi)容。train_verify為培訓(xùn)審核表，記錄了對用戶培訓(xùn)申請的審核情況，包括申請表ID、審核人、審核時間、審核意見等字段。

4 系統(tǒng)實現(xiàn)

4.1 前端實現(xiàn)與關(guān)鍵技術(shù)

本文前端采用React+Redux+Material-UI+Recharts進行搭建。Material-UI是基于React的界面框架，還支持Node.js V6以上的服務(wù)端渲染。本系統(tǒng)前端開發(fā)實現(xiàn)需要的關(guān)鍵技術(shù)主要有如下幾點。

1）中間件Redux-thunk

單純的Redux工作流如圖4所示，用戶在View中通過store.dispatch（）發(fā)出Action，當然它可以接受一個由Action Creator函數(shù)生成的Action作為參數(shù)。對于每一個Action對象，用type屬性來表示其名稱。Store通過純函數(shù)Reducer返回一個全新的對象State。由于View對應(yīng)的State是一個不變的對象，所以一旦State發(fā)生變化，Store允許設(shè)置監(jiān)聽函數(shù)，實現(xiàn)View的重新渲染。

然而問題是，Action發(fā)出后，Reducer如何在異步操作結(jié)束后自動執(zhí)行計算出新的State。為了解決這一難題，我們采用了中間件技術(shù)redux-thunk。這樣我們只需首先編寫返回函數(shù)而不僅僅是對象的action creator。然后用redux-thunk改造store.dispatch，使其可接受函數(shù)作為參數(shù)即可。

對于本項目而言，

const store = createStore（

rootReducer，

applyMiddleware（thunk， async），

）;

我們在index.js中引入兩個中間件來完成所需操作。

2）React-Redux

本項目涉及頁面、模塊較多，在本文中我們采用了Redux專門封裝的React-Redux庫。這樣每一個功能頁面我們都可以拆分成UI組件與容器組件兩大類。UI組件依靠Material-UI實現(xiàn)，容器組件使用Redux的API管理數(shù)據(jù)和業(yè)務(wù)邏輯。

首先我們將store作為參數(shù)放入Provider組件，這樣頂層組件被包裹在Provider組件中，使得所有組件能夠訪問到Redux的數(shù)據(jù)。其代碼為：

render（

，

document.getElementById（'app'），

）;

接下來，我們通過React-Redux提供的connect方法，從UI組件生成容器組件。connect方法接受兩個參數(shù)：mapStateToProps、mapDispatchToProps。mapStateToProps負責將state映射到UI組件的參數(shù)，mapDispatchToProps負責將用戶對UI組件的操作映射成Action。由于本項目模塊眾多，僅以Visit為例，其綁定的核心代碼為：

const mapStateToProps = state => （{

visit： state.visit，

user： state.user，

}）;

const mapDispatchToProps = dispatch => （{

visitAction： bindActionCreators（VisitAction， dispatch），

}）;

@connect（mapStateToProps， mapDispatchToProps）。

3）Recharts

Recharts是阿里巴巴前端團隊開發(fā)的一款可視化組件庫，它用React進行設(shè)計。當前Recharts提供的圖表有PieChart、RadarChart、SankeyChart等多種類型。

我們通過npm或yarn安裝后，可以通過import添加所需要的組件。比如，我們想用PieChart組件來展示數(shù)據(jù)，就可以通過語句import { PieChart， Pie， } from 'recharts'; 來引入。這里Pie是PieChart的子組件。

在用PieChart進行數(shù)據(jù)顯示時，我們根據(jù)應(yīng)用需要，設(shè)計并實現(xiàn)了自定義標簽進行數(shù)據(jù)顯示，以達到個性化顯示的目的。

我們通過Pie組件的label屬性來展示圖形上的文本標簽，只不過這個label的值我們寫成一個函數(shù)，具體代碼為：

renderLabel = （{

cx， cy， midAngle， innerRadius， outerRadius， percent， payload，

}） => {

const radius = innerRadius + （outerRadius - innerRadius） * 0.5;

const x = cx + radius * Math.cos（-midAngle * RADIAN）;

const y = cy + radius * Math.sin（-midAngle * RADIAN）;

return （

cx ？ 'start' ： 'end'} dominantBaseline="central">

{`${payload.label}：${（percent * 100）.toFixed（0）}%`}

）;

};

我們用這個函數(shù)來渲染自定義的文本標簽，并將其作為Pie的label屬性，從而達到個性化圖形顯示的目的。

4.2 后端實現(xiàn)與關(guān)鍵技術(shù)

本項目后端采用Node+Express+MariaDB實現(xiàn)。由于Node.js不需要額外的HTTP服務(wù)器，因此減少了一層抽象，可以很好地提升系統(tǒng)性能。Express作為目前最穩(wěn)定最流行的開發(fā)框架之一，除了其極簡的內(nèi)核，還因其可提供緩存、路由控制、錯誤控制器、CSRF保護等功能而備受開發(fā)者青睞。 MariaDB是由Mysql之父Widenius開發(fā)的Mysql分支產(chǎn)品，但它不僅僅是Mysql的替代品，它更好地提高了Mysql技術(shù)，MariaDB社區(qū)發(fā)布的MariaDB Connector是非阻塞客戶端，可提供對插入流、管道傳輸和批處理的支持，還通過多節(jié)點配置支持故障轉(zhuǎn)移和負載平衡，不僅減少了網(wǎng)絡(luò)流量還有效避免網(wǎng)絡(luò)延遲。

在本項目中，除了應(yīng)用express內(nèi)置中間件express.static進行應(yīng)用中靜態(tài)資源托管外，根據(jù)系統(tǒng)需要，我們重點進行了路由級中間件、應(yīng)用級中間件的設(shè)計與實現(xiàn)。

1）工具庫utils設(shè)計

我們在utils中設(shè)計并實現(xiàn)了阿里云短信的發(fā)送、Cookies的讀寫、企業(yè)微信注冊、CAS注冊等獨立模塊內(nèi)容，以供后面路由調(diào)用。以發(fā)送阿里云短信為例，在utils中核心代碼為：

function sendSms（phone， template， code） {

const params = {

PhoneNumbers： phone，

SignName： '蘇州工業(yè)園區(qū)職業(yè)技術(shù)學(xué)院'，

TemplateCode： template，

TemplateParam： JSON.stringify（{code}），

};

return client.request（'SendSms'， params， {method： 'POST'}）;

}

其中phone參數(shù)，用于接收要發(fā)送到的手機號碼，template用于接收要發(fā)送的短信內(nèi)容模板，code用于接收程序根據(jù)應(yīng)用需要生成的參數(shù)。這樣，在后面的中間件中就可以作為工具進行調(diào)用，從而更好地實現(xiàn)代碼復(fù)用，提升開發(fā)效率。

2）路由級中間件設(shè)計

我們將系統(tǒng)用到的增、刪、改、查相關(guān)函數(shù)，掛載到指定路徑句柄，這不僅可以用來處理用戶發(fā)起的GET、POST請求，還可以為路徑定義多個路由。

根據(jù)應(yīng)用需要，我們只需對不同的表進行類似的操作即可。所以這里僅以訪問課程列表為例，其路由句柄的核心代碼為：

router.post（'/api/courseList'， （req， res） => {

const {limit} = req.body;

const sql = `select * from course ${limit ？ 'limit ？' ： ''}`;

db.query（sql， [limit]， （error， list） => {

if （error） {

…

} else {

…

}

}）;

}）;

5 系統(tǒng)測試

為發(fā)現(xiàn)系統(tǒng)潛在問題，我們設(shè)計了120多個測試用例，包含了正常數(shù)據(jù)和異常數(shù)據(jù)。我們分別采用筆記本、臺式機、Android手機、iOS手機，對系統(tǒng)進行了功能測試和可靠性測試。我們通過模擬在內(nèi)存使用率、CPU使用率達到80%情況下，進行壓力測試，系統(tǒng)能夠穩(wěn)定運行并未出現(xiàn)錯誤。因為由于施工或某些特殊原因，機房偶有停電發(fā)生，我們進行了基于錯誤的策略對系統(tǒng)進行健壯性測試，系統(tǒng)適應(yīng)性良好。

6 系統(tǒng)測試

本接待工作管理系統(tǒng)在實際使用中節(jié)約了工作人員的溝通成本，提升了溝通效率，也為每年接待工作的統(tǒng)計提供方便。本文重點從需求分析、系統(tǒng)架構(gòu)設(shè)計、數(shù)據(jù)庫設(shè)計、系統(tǒng)設(shè)計與實現(xiàn)等多個方面，討論了其設(shè)計與實現(xiàn)。React、Express框架不僅在多端訪問、頁面渲染、開發(fā)效率等方面具有優(yōu)勢，還可以為我們節(jié)約開發(fā)的時間成本和經(jīng)濟成本，本文涉及的基于React和Express框架的搭建工具和使用方法，對于同類需求系統(tǒng)的開發(fā)具有一定的借鑒意義。

參考文獻：

[1] 張根，蔡永香，高靜文.基于React組件快速構(gòu)建網(wǎng)站前端[J].電腦知識與技術(shù)，2019，15（15）：119-121.

[2] 秦子實.基于Redux數(shù)據(jù)狀態(tài)管理的前端應(yīng)用實踐[J].電腦知識與技術(shù)，2020，16（8）：254-255，258.

[3] 郝駿，鄭紫微，段歡.基于React20Native圖像隱寫的研究和實現(xiàn)[J].無線通信技術(shù)，2019，28（1）：36-41.

[4] 沈超，曹婷婷，王一萌，等.基于React20Native的農(nóng)業(yè)氣象自動化觀測系統(tǒng)國家級平臺移動應(yīng)用APP設(shè)計[J].農(nóng)業(yè)與技術(shù)，2019，39（18）：132-135，138.

[5] Subramanian V. Pro MERN Stack：Full Stack Web App Development with Mongo， Express，React，and Node[M].Berkeley：Apress，2017.

[6] 張蓓蕾，彭驍，董君磊，等.基于企業(yè)微信的寧波市地震應(yīng)急工作助手的設(shè)計與實現(xiàn)[J].地震地磁觀測與研究，2020，41（4）：251-263.

[7] 高月宏，顧敏，夏丹丹，等.基于企業(yè)微信的掌上醫(yī)護管系統(tǒng)的設(shè)計與實現(xiàn)[J].中國數(shù)字醫(yī)學(xué)，2020，15（10）：53-55.

[8] 解攀科，郭偉秀，許婷，等.基于企業(yè)微信的信息化需求采集管理平臺[J].計算機系統(tǒng)應(yīng)用，2020，29（11）：92-96.

【通聯(lián)編輯：謝媛媛】