柳海燕 鄭健

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

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

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

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

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

1 背景

React是Facebook于2013年開源的Web框架， React將DOM抽象為虛擬DOM的特性，使我們在開發(fā)接待工作管理系統(tǒng)時，無須擔心性能問題可以根據(jù)需要隨時刷新整個頁面。張根[1]、秦子實[2]等用React構建網(wǎng)站前端開發(fā)，郝駿[3]、沈超[4]等用React Native 開發(fā)原生移動應用，SUBRAMANIAN V[5]為使用React構建現(xiàn)代應用提供了完整技術棧解決方案，從而形成對React技術的完美補充。本文使用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è)微信進行了管理平臺的設計與開發(fā)。由于目前企業(yè)微信是我校常用辦公工具之一，所以我們將基于React框架開發(fā)的接待工作管理系統(tǒng)接入企業(yè)微信，使得內部員工可以通過企業(yè)微信授權登錄，無須輸入用戶名、密碼，進而簡化用戶操作。為打通與原有系統(tǒng)數(shù)據(jù)的連接，我們還將本系統(tǒng)對接CAS單點登錄系統(tǒng)，有效避免了信息孤島問題。對于外部申請訪問人員，我們通過接入阿里云短信業(yè)務，使用戶通過手機號、驗證碼進行登錄，免去了用戶記憶賬號、 密碼的麻煩。

2 需求分析

2.1 功能性需求分析

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

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

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

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

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

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

2.2 非功能性需求分析

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

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

3 系統(tǒng)設計

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

3.1 系統(tǒng)架構設計

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

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

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

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

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

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

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

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

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

4.1 前端實現(xiàn)與關鍵技術

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

1）中間件Redux-thunk

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

然而問題是，Action發(fā)出后，Reducer如何在異步操作結束后自動執(zhí)行計算出新的State。為了解決這一難題，我們采用了中間件技術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è)務邏輯。

首先我們將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進行設計。當前Recharts提供的圖表有PieChart、RadarChart、SankeyChart等多種類型。

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

在用PieChart進行數(shù)據(jù)顯示時，我們根據(jù)應用需要，設計并實現(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)與關鍵技術

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

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

1）工具庫utils設計

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

function sendSms（phone， template， code） {

const params = {

PhoneNumbers： phone，

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

TemplateCode： template，

TemplateParam： JSON.stringify（{code}），

};

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

}

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

2）路由級中間件設計

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

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

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

6 系統(tǒng)測試

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

參考文獻：

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

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

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

[4] 沈超，曹婷婷，王一萌，等.基于React20Native的農業(yè)氣象自動化觀測系統(tǒng)國家級平臺移動應用APP設計[J].農業(yè)與技術，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è)微信的寧波市地震應急工作助手的設計與實現(xiàn)[J].地震地磁觀測與研究，2020，41（4）：251-263.

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

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

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