基于React和Express的接待工作管理系統的設計與實現

柳海燕 鄭健

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

關鍵詞：React;Recharts;Express;企業微信

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

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

開放科學（資源服務）標識碼（OSID）：

1 背景

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

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

2 需求分析

2.1 功能性需求分析

我們經過分析整理，將系統角色劃分為訪問申請人員、培訓申請人員、審核人員、審批人員和管理員五種，所有角色人員能夠看到學校開設的培訓課程。

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

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

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

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

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

2.2 非功能性需求分析

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

2）可靠性。充分考慮到應用運行的數據異常等情況，進行異常處理。

3 系統設計

我們從系統架構、系統模塊、系統數據庫幾個方面，對系統進行了全方位的設計，方便后期實施和維護。

3.1 系統架構設計

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

考慮到接待工作管理系統涉及的CAS對接、企業微信對接、阿里云短信登錄等模塊，我們根據本校實際，設計了接待工作管理系統應用服務器與數據庫服務器。系統相關的整體架構示意圖如圖1所示。

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

3.2 系統模塊設計

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

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

3.3 數據庫設計

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

4 系統實現

4.1 前端實現與關鍵技術

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

1）中間件Redux-thunk

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

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

對于本項目而言，

const store = createStore（

rootReducer，

applyMiddleware（thunk， async），

）;

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

2）React-Redux

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

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

render（

，

document.getElementById（'app'），

）;

接下來，我們通過React-Redux提供的connect方法，從UI組件生成容器組件。connect方法接受兩個參數：mapStateToProps、mapDispatchToProps。mapStateToProps負責將state映射到UI組件的參數，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是阿里巴巴前端團隊開發的一款可視化組件庫，它用React進行設計。當前Recharts提供的圖表有PieChart、RadarChart、SankeyChart等多種類型。

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

在用PieChart進行數據顯示時，我們根據應用需要，設計并實現了自定義標簽進行數據顯示，以達到個性化顯示的目的。

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

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）}%`}

）;

};

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

4.2 后端實現與關鍵技術

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

在本項目中，除了應用express內置中間件express.static進行應用中靜態資源托管外，根據系統需要，我們重點進行了路由級中間件、應用級中間件的設計與實現。

1）工具庫utils設計

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

function sendSms（phone， template， code） {

const params = {

PhoneNumbers： phone，

SignName： '蘇州工業園區職業技術學院'，

TemplateCode： template，

TemplateParam： JSON.stringify（{code}），

};

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

}

其中phone參數，用于接收要發送到的手機號碼，template用于接收要發送的短信內容模板，code用于接收程序根據應用需要生成的參數。這樣，在后面的中間件中就可以作為工具進行調用，從而更好地實現代碼復用，提升開發效率。

2）路由級中間件設計

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

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

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 系統測試

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

6 系統測試

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

參考文獻：

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

[2] 秦子實.基于Redux數據狀態管理的前端應用實踐[J].電腦知識與技術，2020，16（8）：254-255，258.

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

[4] 沈超，曹婷婷，王一萌，等.基于React20Native的農業氣象自動化觀測系統國家級平臺移動應用APP設計[J].農業與技術，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] 張蓓蕾，彭驍，董君磊，等.基于企業微信的寧波市地震應急工作助手的設計與實現[J].地震地磁觀測與研究，2020，41（4）：251-263.

[7] 高月宏，顧敏，夏丹丹，等.基于企業微信的掌上醫護管系統的設計與實現[J].中國數字醫學，2020，15（10）：53-55.

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

【通聯編輯：謝媛媛】