會議室管理系統(tǒng)的設(shè)計與實(shí)現(xiàn)

[6]。非功能性需求分析當(dāng)然除了功能性需求之外，我們還需要對非功能性需求進(jìn)行全面地考慮，本次課題會議室管理系統(tǒng)所需要滿足的非功能性需求有以下幾點(diǎn)：穩(wěn)定性需求，由于學(xué)校師生對于會議室的使用需求量非常大且頻率非常高，所以整個系統(tǒng)的需要能夠保證時刻可用，且不允許出現(xiàn)故障，否則容易出現(xiàn)會議室使用秩序混亂的情況，如果影響到大型重要會議則后果不堪設(shè)想。易用性需求，整個系統(tǒng)中不存在管理員角色，所有內(nèi)容都是用戶自主來完成，所以對應(yīng)用的上手即可使用的要求非常高，整體的界面需要十分簡潔，使用流程需要清晰易懂。可維護(hù)性需求，任何一個系統(tǒng)都會有很強(qiáng)的可維護(hù)性需求，所以編碼方面需要注意未來可能需要維護(hù)的地方，做到代碼盡量簡潔，多寫注釋；除了編碼以外還需要有完整的系統(tǒng)設(shè)計文檔以及相應(yīng)的交接文檔，方便后續(xù)的開發(fā)者進(jìn)行維護(hù)。擴(kuò)展性需求，目前校內(nèi)的會議室管理系統(tǒng)很多都和刷卡機(jī)有極度緊密的聯(lián)系，偶合在了一起，會導(dǎo)致如果需要擴(kuò)展新的會議室，比如將一個小教室改為會議，則需要安裝刷卡機(jī)并和整個系統(tǒng)連接起來，整個流程所耗費(fèi)的擴(kuò)展成本是比較高的，所以需要在滿足擴(kuò)展性需求的同時，將擴(kuò)展成本盡量降低。以上是一些主要的非功能性需求，在整個編碼過程中，也會盡量保證在滿足以上主要需求的同時能夠滿足其他的非功能性需求，盡量保證本系統(tǒng)能夠較為完善?？尚行苑治霰竟?jié)主要對于整個系統(tǒng)的實(shí)現(xiàn)進(jìn)行可行性分析，分別從經(jīng)濟(jì)和技術(shù)兩個方面入手，盡量以最為簡潔的語言描述出來。經(jīng)濟(jì)可行性分析開發(fā)系統(tǒng)成本上，整個會議室管理系統(tǒng)摘除了傳統(tǒng)的刷卡打卡機(jī)制，整體擴(kuò)展成本降到了最低。開發(fā)人員成本上，本次的開發(fā)從前端到后端到數(shù)據(jù)庫等工作，均由我一人完成，故沒有其他交流成本，代碼版本控制等等。后續(xù)的管理上，最簡化整個會議室管理系統(tǒng)的操作，完善所有報錯邏輯，去掉了傳統(tǒng)的管理員管理，由此后續(xù)投入使用之后的整個管理成本也會降至最低，最多由開發(fā)者做答疑，并定時檢查報錯日志即可。用戶使用上，由于我們整體采用了B/S的架構(gòu)，故用戶無需下載app，只需要有瀏覽器即可，且所有的操作包括打卡都是可以直接線上進(jìn)行的，大大降低了用戶的使用成本，提高用戶流量。所以總的來說，整個應(yīng)用在經(jīng)濟(jì)方面的可行性是非常高的。技術(shù)可行性分析在計算機(jī)科學(xué)與技術(shù)迅速發(fā)展的今天，很多技術(shù)都經(jīng)歷了更新?lián)Q代，應(yīng)用的開發(fā)也不像以前那樣只是簡單的頁面和數(shù)據(jù)交互的，出現(xiàn)了很多新的技術(shù)架構(gòu)，開源社區(qū)也出現(xiàn)了很多技術(shù)沉淀供我們選擇，謹(jǐn)慎選擇技術(shù)架構(gòu)能夠幫助我們緊跟時代潮流，向國內(nèi)外各大互聯(lián)網(wǎng)公司看齊。本次會議室管理系統(tǒng)所采用的技術(shù)，從整體架構(gòu)、前后端技術(shù)到數(shù)據(jù)庫技術(shù)，都遵循著穩(wěn)定性第一、創(chuàng)新性第二的原則，其成熟性和先進(jìn)性都是能夠經(jīng)得起業(yè)界各個需求場景的考驗(yàn)，同時也非常適合我們本次的需求。整個技術(shù)架構(gòu)中的每個細(xì)節(jié)都選擇了在業(yè)界使用非常多的技術(shù)，保持穩(wěn)定的同時也能夠?qū)W習(xí)新技術(shù)的思想，亦能夠?yàn)槲磥磉M(jìn)入公司做好鋪墊。本章小結(jié)本章主要描述了整個會議室管理系統(tǒng)的需求分析和可行性分析，對于這兩個方面進(jìn)行了比較細(xì)節(jié)的整理和分析，整體進(jìn)行分析之后，整個應(yīng)用的開發(fā)內(nèi)容更加明確了，也為后續(xù)的系統(tǒng)設(shè)計和實(shí)現(xiàn)打好了基礎(chǔ)。系統(tǒng)概要設(shè)計本章主要介紹會議室管理系統(tǒng)的整體設(shè)計，包括整體流程、數(shù)據(jù)結(jié)構(gòu)以及功能架構(gòu)三個方面，好的設(shè)計可以為開發(fā)工作做好鋪墊，使后續(xù)的開發(fā)能夠事半功倍?？傮w流程設(shè)計本節(jié)將描述整個應(yīng)用的使用流程設(shè)計，會將用戶行為的每個細(xì)節(jié)都體現(xiàn)出來。為了能夠更加直觀清晰地表現(xiàn)出每一個用戶的操作流程，我將使用流程圖來描述不同的操作流程。圖4-1會議室管理系統(tǒng)流程圖通過圖4-1可知，當(dāng)用戶作為會議室組織者時，可以通過注冊或者登錄進(jìn)入到系統(tǒng)，系統(tǒng)默認(rèn)展示所有的會議室，可以自行選擇需要的會議室，進(jìn)入會議室詳情頁，根據(jù)頁面展示的預(yù)覽信息選擇需要預(yù)定的時間，進(jìn)入到會議室預(yù)定界面，填寫與會人員信息，并點(diǎn)擊確認(rèn)即可成功預(yù)定會議室。當(dāng)然也可以進(jìn)入個人會議列表去查看自己的會議信息。當(dāng)用戶作為會議參與者時，同樣是通過注冊或者登錄進(jìn)入系統(tǒng)后，可以進(jìn)入個人會議列表查看自己即將參與的所有會議，當(dāng)然也可以查看會議邀請郵件，點(diǎn)擊進(jìn)入系統(tǒng)之后，選擇接受會議或者拒絕會議。數(shù)據(jù)結(jié)構(gòu)設(shè)計數(shù)據(jù)庫表的設(shè)計是整個會議室管理系統(tǒng)最重要的部分，也是整個項(xiàng)目的基礎(chǔ)，根據(jù)上面的需求，整個數(shù)據(jù)庫表的設(shè)計過程我經(jīng)歷了無數(shù)次的推翻重建，最后得出的表一共有五張，分別是用戶表、會議室表、會議預(yù)定記錄表、會議與會人員表、打卡表。圖4-2會議室管理系統(tǒng)E-R圖由圖4-2可知五張數(shù)據(jù)表之間的關(guān)系，用戶表和會議室表互相獨(dú)立，每次的預(yù)定都會在會議室預(yù)定表中增加一個預(yù)定記錄，后續(xù)如果對其進(jìn)行取消等都是重新操作這個記錄。預(yù)定會議室時可以添加與會人員，預(yù)定成功后，則會將與會人員相關(guān)數(shù)據(jù)加到與會人員表中。與會人員對于會議邀請無論是同意還是拒絕都會操作與會人員表，到達(dá)預(yù)定時間后，會議組織者則需要進(jìn)行打卡，打卡的信息會在打卡記錄表中做記錄。根據(jù)上面的E-R圖，會議室管理系統(tǒng)的數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計如下：Users（用戶ID，密碼，姓名，性別，郵箱，用戶類別，身份證號）ConferenceRooms（會議室ID，會議室名稱，可容納人數(shù)，是否有投影儀，是否支持遠(yuǎn)程）ConferenceRoomsReserveLogs（預(yù)定記錄ID，開始時間，結(jié)束時間，會議室ID，預(yù)定狀態(tài)）Conferees（與會人員記錄ID，會議預(yù)定記錄ID，用戶ID，與會狀態(tài)）PunchingCardLogs（打卡記錄ID，會議預(yù)定記錄ID，打卡時間）根據(jù)上面的E-R圖和數(shù)據(jù)庫邏輯結(jié)構(gòu)的設(shè)計，對于數(shù)據(jù)庫的物理結(jié)構(gòu)設(shè)計如下：表4-2-1Users表FieldTypeNullKeyDefaultCommentIdUsernamePasswordEmailGenderIdcarduserTypeintvarchar(50)varchar(50)varchar(50)varchar(5)varchar(50)varchar(50)NONONONONONONOPRI自動遞增NULLNULLNULLNULLNULLNULL可選項(xiàng)為Student、teacher表4-2-2ConferenceRooms表FieldTypeNullKeyDefaultCommentIdintNOPRI自動遞增houseNumbervarchar(50)NONULL會議室名稱containNumhasProjectorsupportRemoteinit(11)int(11)int(11)NONONONULL000為有，1為無表4-2-3ConferenceRoomsReserveLogs表FieldTypeNullKeyDefaultCommentIdstartTimeendTimeuserIdconfeRoomIdstatusintdatetimedatetimeintintint(11)NONONONONONOPRI自動遞增NULLNULLNULLNULLNULL用戶ID會議室ID0為已預(yù)定，1為已取消，2為已打卡表4-2-4Conferees表FieldTypeNullKeyDefaultCommentIdintNOPRI自動遞增reserveLogIdintNONULL會議預(yù)定記錄IDUseridStatusinitint(11)NONONULL0用戶ID0為未反饋，1為同意，2為不同意表4-2-5PunchingCardLogs表FieldTypeNullKeyDefaultCommentIdreserveLogIdintintNONOPRI自動遞增NULL會議預(yù)定記錄ID功能架構(gòu)設(shè)計通過將會議室管理系統(tǒng)做整體分析，我整理出了系統(tǒng)所需要的功能，其主要功能分為：用戶管理、會議預(yù)定、與會人員交互、個人會議列表，會議室列表等模塊。具體的功能架構(gòu)如圖4-3所示：圖4-3會議室管理系統(tǒng)功能架構(gòu)圖上圖展示了會議室管理系統(tǒng)的五個功能模塊，這些模塊相互之間相輔相成，最終構(gòu)成了我們的整個會議室管理系統(tǒng)。在用戶管理模塊中，主要包括了用戶登錄和注冊，摒棄了以前的cookiesession鑒權(quán)模式，采用JWT鑒權(quán)。在會議室預(yù)定模塊，包括了預(yù)定會議室、取消會議室、搶占會議室、通知與會人員以及會議室打卡等功能，這里面的整體交互邏輯要稍微復(fù)雜一些，對于預(yù)定記錄的狀態(tài)轉(zhuǎn)換、通知與會人員等功能的交互都需要深入思考。與會人員操作的部分，主要是對于發(fā)來的會議邀請進(jìn)行接受或者拒絕。同時用戶還可以查看自己未來一段時間的會議列表，其中包括自己組織的會議、已接受的會議以及未處理的會議邀請。會議室列表部分，用戶可以直接查看所有的會議室，也可以進(jìn)行關(guān)鍵字檢索，查找自己需要的會議室。本章小結(jié)本章主要描述了總體流程設(shè)計、數(shù)據(jù)結(jié)構(gòu)設(shè)計和功能架構(gòu)設(shè)計這三部分的內(nèi)容，首先通過使用流程圖將整體的流程設(shè)計以最簡潔的方式描述出來，再利用E-R圖將整個數(shù)據(jù)庫的結(jié)構(gòu)理順理清晰，搭建出可用的數(shù)據(jù)庫物理結(jié)構(gòu)。最后再利用會議室管理系統(tǒng)的功能架構(gòu)圖將整個系統(tǒng)的功能分為五大部分，并對每個部分進(jìn)行細(xì)化，最終整個系統(tǒng)的概要設(shè)計就形成了。經(jīng)過系統(tǒng)設(shè)計之后，整體思路會更加清晰，為開發(fā)賦能。系統(tǒng)實(shí)現(xiàn)開發(fā)環(huán)境本文中實(shí)現(xiàn)的會議室管理系統(tǒng)前端采用JavaScript作為開發(fā)語言，后端采用Nodejs作為開發(fā)語言，數(shù)據(jù)庫采用MySQL5.7。整個開發(fā)過程以VScode作為開發(fā)工具，Navicat作為數(shù)據(jù)庫圖形化管理工具。其中VScode是一個非常輕量的文本編輯器，好好利用它可以大大提高我們的開發(fā)效率。它的使用特點(diǎn)是：編輯器＋插件，它擁有雄厚的插件資源，多個插件一起使用就能有意想不到的奇特效果。本次開發(fā)過程中所采用的VScode插件有：HTMLSnippets（擁有HTML5代碼片段的提示）、HTMLCSSSupport（CSS的智能提示）、PathIntellisense（各種文件路徑補(bǔ)全）、ESlint（代碼格式檢查，這是最為常用的插件，在團(tuán)隊開發(fā)中可以統(tǒng)一代碼風(fēng)格）、AtuoRenameTag（HTML會有開閉兩個標(biāo)簽，使用這個插件，改動開標(biāo)簽，閉標(biāo)簽也會自動修改）。總的來說，本次開發(fā)環(huán)境的整個搭建過程還是比較繁瑣的，特別是VScode整個環(huán)境的搭建，對比WebStorm這種開箱即用的IDE，需要耗費(fèi)更多的時間和精力，但是最終依舊選擇VScode的原因是它的輕量和靈活性，使用VScode我不需要因?yàn)椴煌捻?xiàng)目要去下載不同的IDE，只需要根據(jù)項(xiàng)目的類型不同，配置不同的插件套餐即可。系統(tǒng)功能實(shí)現(xiàn)用戶管理模塊用戶管理模塊主要包括用戶注冊、用戶登錄、退出登錄、修改密碼等，是整個應(yīng)用的基礎(chǔ)。由于登錄注冊功能是后續(xù)所有用戶鑒權(quán)的基礎(chǔ)，所以在實(shí)現(xiàn)本模塊功能之前，我需要去調(diào)研過目前比較通用的用戶鑒權(quán)方式，調(diào)研結(jié)果發(fā)現(xiàn)業(yè)界的用戶鑒權(quán)主要有兩種模式：Cookie-Session模式和JWT模式REF_Ref40882032\r\h[8]。Cookie-Session模式的工作流程是：用戶在前端輸入用戶名和密碼，點(diǎn)擊登錄發(fā)送請求給服務(wù)器。服務(wù)器收到請求后驗(yàn)證用戶名和密碼的正確性，如果驗(yàn)證通過則會創(chuàng)建一個會話也就是常說的session，同時生成這個session的sessionID返回給前端。前端收到返回數(shù)據(jù)后，將返回的sessionID存儲在cookie中，后續(xù)的所有請求只需要把cookie帶上，服務(wù)端檢查是否有sessionID所帶的session即可，檢查通過則用戶鑒權(quán)成功。如果用戶退出登錄，服務(wù)端和客戶端的會話（session）都會被銷毀。由此可以看出它的弊端非常多，首先是服務(wù)端需要保存用戶信息，當(dāng)用戶數(shù)增多，服務(wù)器壓力也會不斷增大。其次是現(xiàn)在服務(wù)端為了做負(fù)載均衡會使用多個服務(wù)器，需要定時通信來保證用戶信息在每個服務(wù)端一致。最后就是退出登錄時前端和服務(wù)端都需要處理其中的邏輯。而JWT鑒權(quán)的工作模式和思想完全不同：用戶輸入用戶名和密碼，點(diǎn)擊登錄，發(fā)送請求給服務(wù)端。服務(wù)端收到請求后，驗(yàn)證用戶名和密碼，驗(yàn)證通過則計算出一個token（token在上文中JWT鑒權(quán)部分有介紹過），返回給前端。前端將token存儲在localstorage里面，后續(xù)的請求只需要將在httpheader中帶上token發(fā)送給服務(wù)器，服務(wù)器通過重新計算一遍token來驗(yàn)證其正確性，如果對比簽名相同則鑒權(quán)成功。退出登錄只需要將前端localstorage里面存儲的token刪除掉即可，后端無需做其他操作。JWT鑒權(quán)可以解決上述Cookie-Session模式存在的問題，但是由于JWT是無狀態(tài)的，所以無法暫存用戶的一些狀態(tài)，不過對于我們的系統(tǒng)來說，沒有很多需要存儲用戶狀態(tài)的地方，所以本次會議室管理系統(tǒng)鑒權(quán)最終還是決定采用JWT鑒權(quán)模式。下面將正式開始介紹用戶管理模塊的實(shí)現(xiàn)：首先是登錄功能：圖5-1會議室管理系統(tǒng)登錄界面進(jìn)入登陸頁面有兩種情況，一種是用戶進(jìn)入直接進(jìn)入login頁面進(jìn)行登錄，另一種就是在沒有登錄的情況下進(jìn)入到了其他頁面，則會自動跳轉(zhuǎn)到登陸頁面。前端使用antdesign的Form表單組件搭建登陸頁面，用戶輸入用戶名密碼后，點(diǎn)擊登錄發(fā)送請求給后端，后端使用express框架來處理請求，并利用npm包jwt-simple來生成JWT，返回token值，前端將token值存入localstorage中，為后面頁面的權(quán)限處理打好基礎(chǔ)。其次是注冊功能：注冊功能和登錄功能的JWT處理邏輯是一樣的，注冊功能主要包括創(chuàng)建用戶和生成JWT自動登錄，前端頁面同樣使用AntDesign的Form組件，用戶填寫的注冊信息并點(diǎn)擊注冊，后端進(jìn)行用戶創(chuàng)建，將用戶信息存入用戶表，同時為用戶生成token，返回給前端存儲，注冊完成。然后是退出登錄功能：圖5-2退出登錄按鈕前端頁面采用了AntDesign的Menu下拉菜單組件，退出登錄按鈕作為下拉菜單的一部分，由于采用了JWT鑒權(quán)模式，所以退出登錄功能的實(shí)現(xiàn)會更加簡單，只需要在用戶點(diǎn)擊退出登錄時，將localstorage里面的token清理掉就行，這樣再次進(jìn)入這個頁面就會因?yàn)闆]有登錄態(tài)而強(qiáng)制跳轉(zhuǎn)到登陸頁面。最后還提供了一個修改密碼的功能，在做這個功能之前我有調(diào)研很多系統(tǒng)，有的可以直接修改所有的用戶信息，有的只能修改部分信息，考慮到本系統(tǒng)中的數(shù)據(jù)結(jié)構(gòu)很多內(nèi)容比如姓名，身份證號等等都是固定不變的，提供修改所有用戶信息其實(shí)是沒有必要的，于是選擇了一個折中的方案，只提供修改密碼功能。圖5-3修改密碼功能示意整個使用流程如圖5-2和圖5-3所示，點(diǎn)擊圖5-2中的個人詳情按鈕，跳轉(zhuǎn)到個人信息頁面，頁面會展示用戶的相關(guān)信息，同時提供修改密碼的功能，用戶可以點(diǎn)擊修改密碼按鈕，則右邊會劃出修改密碼的表單，表單中做了一些校驗(yàn)處理，比如新密碼和確認(rèn)密碼是否相同等等，點(diǎn)擊確認(rèn)修改則會自動關(guān)閉表單，并彈出修改成功的提示，整個實(shí)現(xiàn)過程前端主要采用AntDesign的Description和Form組件實(shí)現(xiàn)整個交互，后端主要是密碼的檢查以及密碼的更新等邏輯處理。這樣整個用戶模塊就實(shí)現(xiàn)完成了，用戶模塊將會在應(yīng)用的整個生命周期中起作用，主要是存儲在localStorage里面的token和userId起作用，token主要是負(fù)責(zé)登錄態(tài)管理，后端的請求中除了登錄和注冊功能，其他的請求都需要登錄態(tài)，所以每次請求都需要將token作為http頭部自定義字段Authorization傳遞給后端，后端采用檢測是否有登錄態(tài)的中間件來判斷，如果有Authorization頭部并且經(jīng)計算JWT合法，則可以進(jìn)行后續(xù)操作，如果非合法則返回401，并提示重新登錄；userId則主要是為了方便在其他頁面查詢用戶信息。會議室列表查詢用戶完成登錄之后，會直接跳轉(zhuǎn)到會議室列表頁，用戶可以直接在此頁面選擇需要的會議室。整個會議室列表頁分為兩大功能，一個是搜索會議室的功能，另一個是會議室分頁列表展示的功能。搜索功能的前端樣式主要如下圖所示，可以輸入關(guān)鍵字進(jìn)行模糊搜索相應(yīng)的會議室，點(diǎn)擊搜索后，搜索結(jié)果會顯示到列表展示部分。圖5-4搜索框示意圖搜索功能的實(shí)現(xiàn)方式：前端采用AntDesign的Input組件，配置出搜索樣式，用戶輸入關(guān)鍵字并點(diǎn)擊搜索后，發(fā)送搜索請求給后端，后端根據(jù)獲取到的關(guān)鍵字在數(shù)據(jù)庫進(jìn)行模糊查詢，查詢結(jié)果返回給前端，前端頁面重新渲染展示出來。其中由于本次會議室管理系統(tǒng)的后端DAO層采用了Sequelize這個ORM框架，所以可以直接利用它提供的操作符來進(jìn)行操作，會使操作更加整潔，整個代碼如下圖所示：圖5-5Sequeliz模糊查詢代碼圖會議室列表展示模塊，由于傳統(tǒng)方式直接展示一個表格會使得整個界面有一些單調(diào)，用戶體驗(yàn)感不太好，于是決定重新設(shè)計一下會議室列表的界面，列表中的每個內(nèi)容都采用卡片的形式展示，使得整體看起來更加清晰，如下圖所示，一行展示4組數(shù)據(jù)，在列表頁能夠很直觀地預(yù)覽會議室的信息，比如容納人數(shù)、是否有投影儀，是否由電話支持遠(yuǎn)程連線等。根據(jù)這些信息用戶可以初步篩選所需要的會議室。圖5-6會議室列表示意圖如果全量一次性拉出所有的會議室數(shù)據(jù)展示在頁面上，在數(shù)據(jù)量較少的情況下是可以的，但是一旦數(shù)據(jù)量增多，可能會導(dǎo)致整個頁面的交互變卡頓，因?yàn)橐淮涡岳『弯秩镜臄?shù)據(jù)太多了，數(shù)據(jù)查詢、數(shù)據(jù)傳輸、數(shù)據(jù)渲染需要耗費(fèi)的時間都大大增加，整體的等待時間可能會延長至之前的兩倍甚至三倍，用戶體驗(yàn)感會大大降低，會使得系統(tǒng)損失很多用戶。此時分頁功能就十分重要了，設(shè)置默認(rèn)頁面大小為12，默認(rèn)頁碼為0，每次拉取12份數(shù)據(jù)，并返回總頁數(shù)，這樣需要查看更多數(shù)據(jù)的時候就可以直接采用翻頁拉去新數(shù)據(jù)進(jìn)行實(shí)現(xiàn)。分頁組件的樣式如下圖所示：圖5-7分頁功能示意圖分頁列表功能的實(shí)現(xiàn)方式：列表利用AntDesign的Card組件進(jìn)行數(shù)據(jù)渲染，分頁功能前端采用AntDesign的Pagination分頁組件，定義好pageSize（頁面大?。┖蚦urrent（當(dāng)前頁數(shù)），首先進(jìn)行默認(rèn)查詢，發(fā)送請求給后端，后端查詢第一頁的數(shù)據(jù)，以及數(shù)據(jù)總量，返回給前端，前端接收到數(shù)據(jù)后設(shè)置好Pagination的參數(shù)，分頁組件就設(shè)置完成了，將每次返回的數(shù)據(jù)，在會議室列表中渲染出來，且在切換頁碼時，要重新請求數(shù)據(jù)源，并重新渲染列表。這樣整個分頁列表的功能就實(shí)現(xiàn)了。總的來說，會議室列表頁是整個會議室管理系統(tǒng)登錄后進(jìn)入到的第一個頁面，頁是給用戶一個預(yù)覽所有會議室的地方，所以需要有較好的視覺和流暢的體驗(yàn)才能留住用戶。會議室預(yù)訂模塊會議室預(yù)定模塊是整個會議室管理系統(tǒng)的核心模塊，所有的其他模塊都是在為它打基礎(chǔ)以及進(jìn)行擴(kuò)展。整個會議室預(yù)訂模塊的使用流程如下：用戶進(jìn)入系統(tǒng)后點(diǎn)擊了某一個會議室，則會進(jìn)入到會議室詳情頁，會議室詳情頁為一個全屏的日歷頁，如圖5-8所示。圖5-8會議室詳情頁預(yù)定信息示意圖 整個日歷中會粗略展示每天的會議安排，如果需要了解詳情可以點(diǎn)擊進(jìn)入到預(yù)定頁，會有一個完整的時間線，清晰地可以看到會議室在哪些時間是空閑的，如圖5-9所示。圖5-9會議室預(yù)定界面時間線示意圖當(dāng)用戶選定了某個時間段，且該會議室在該時間段剛好是空閑的，則可以點(diǎn)擊可預(yù)訂按鈕，彈出如圖5-10所示的會議室預(yù)定表單，可以在里面填入一些會議描述以及添加與會人員，點(diǎn)擊提交且預(yù)定成功后，系統(tǒng)會自動為所有與會人員發(fā)送會議邀請郵件。圖5-10會議室預(yù)定表單到達(dá)時間之后，進(jìn)入系統(tǒng)會提示會議已經(jīng)開始，需要進(jìn)行打卡，若會議開始15分鐘后還未打卡，系統(tǒng)會將本會議室資源重新開放，這時其他同學(xué)便可以搶占這個時間段的會議室。以上便是用戶的正常使用流程，當(dāng)然還會有很多其他的使用流程分支，比如臨時取消會議室、搶占會議室等等。整個模塊功能的實(shí)現(xiàn)方式：前端采用了AntDesign的Calendar、Timeline、Form等組件，后端使用了moment、Sequelize、Nodemailer等等NPM包，出于學(xué)校安全管理以及學(xué)生人身安全的考慮，會議室管理系統(tǒng)的可預(yù)定時間為早上八點(diǎn)到晚上六點(diǎn)，所有會議室最多只能提前一個星期預(yù)定，最小預(yù)定時間粒度為一小時，會議室預(yù)定模塊被拆分為預(yù)定會議室、取消會議室、搶占會議室、通知與會人員等功能。其實(shí)在這個模塊的實(shí)現(xiàn)過程中我遇到過很多的問題，比如數(shù)據(jù)庫默認(rèn)采用UTC時區(qū)和Nodejs默認(rèn)采用本地時區(qū)造成了沖突、時間段之間的復(fù)雜邏輯處理、用戶狀態(tài)和會議室預(yù)訂狀態(tài)的復(fù)雜轉(zhuǎn)換邏輯等，經(jīng)過了我一次次地修改和重新設(shè)計，最終確定了以上的操作流程作為折中的方案。與會人員交互模塊前文有講到當(dāng)會議組織者預(yù)定會議后，會給所有與會人員發(fā)送郵件，與會人員收到郵件后，需要對與本次會議邀請做出反饋，可以點(diǎn)擊郵件中的立即處理按鈕，則會跳轉(zhuǎn)到系統(tǒng)中的個人會議列表頁，與會人員在系統(tǒng)內(nèi)點(diǎn)擊是否同意接受本次會議邀請即可完成整個交互，本次會議也會添加到個人會議列表中的已接受會議列表中。整個交互通過郵件發(fā)送和跳轉(zhuǎn)頁面來完成，那么郵件的發(fā)送和格式就需要自行定制，符合整個會議室管理系統(tǒng)的整體風(fēng)格，整個定制內(nèi)容需要注意兩大點(diǎn)，首先是用戶信息，由于需要給所有與會人員批量發(fā)送郵件，則需要查詢所有與會用戶的郵件信息，再將所有與會人員的郵件信息整合在郵件接收者列表中。其次是郵件格式，因?yàn)橛脩粜枰卩]件中進(jìn)行交互操作，所以普通的文本郵件是肯定達(dá)不到交互要求的，此時則需要發(fā)送HTML格式的郵件，需要定制對應(yīng)的HTML，并嵌入到郵件中。圖5-11郵件HTML最終效果整個郵件的交互功能主要利用NPM包NodeMailer來進(jìn)行實(shí)現(xiàn)。據(jù)調(diào)研NodeMailer是專門為Nodejs項(xiàng)目打造的，使郵件發(fā)送更加簡單方便的開源庫，這個項(xiàng)目從2010年就開始研發(fā)了，目前已經(jīng)是很多Nodejs開發(fā)者默認(rèn)使用的郵件功能庫。所以它是集創(chuàng)新性和穩(wěn)定性為一體的，既能體驗(yàn)到較新的技術(shù)氛圍，同時也有強(qiáng)大的團(tuán)隊為我們維護(hù)其穩(wěn)定性和正確性，非常適合我們的個人項(xiàng)目以及企業(yè)項(xiàng)目進(jìn)行開發(fā)。添加與會人員交互模塊之后，會議組織者就不再需要逐個給與會人員發(fā)送會議邀請，并且手動收集與會人員的會議邀請反饋信息了；與會人員也不需要在不同的渠道分散地進(jìn)行會議邀請反饋了，有統(tǒng)一的地方可以統(tǒng)一處理這些請求。大大節(jié)約了人力成本，用戶體驗(yàn)呈直線上升。個人會議列表查詢用戶除了可以進(jìn)行以上的預(yù)定會議室和接受會議等交互之外，還可以在個人會議列表里面查看與自己相關(guān)的未來一周內(nèi)的會議信息，這里面所有的列表查詢也和上文中的會議室列表一樣做了分頁處理，但是由于二者的展示方式不同，所以分頁的實(shí)現(xiàn)也有所不同。整個個人會議列表的內(nèi)容主要包括三個部分：自己組織的會議、已接受會議邀請的會議、未處理會議邀請的會議，前端頁面通過AntDesign中的Tabs組件將這些內(nèi)容進(jìn)行了分隔，點(diǎn)擊Tab按鈕即可在三部分內(nèi)容之間隨意切換，如下圖所示。圖5-12個人會議列表Tab分隔示意圖每個模塊之間的展示內(nèi)容不相同，可進(jìn)行的操作也不一樣：自己組織的會議列表會默認(rèn)列出未來一周本人組織的所有會議，可以在這里進(jìn)行查看詳情、取消預(yù)定以及查看詳情，點(diǎn)擊數(shù)據(jù)項(xiàng)詳情都可以進(jìn)入到詳情頁查看里面的具體信息，包括會議室的具體信息、會議組織者、會議描述、所有的與會人員以及與會人員的會議邀請接受情況。已接受會議邀請的會議列表模塊將會列出未來一周所有接受了會議邀請的會議列表，具體的交互行為僅有查看詳情，在這個列表里面的會議都是自己手動接受會議邀請了的，必須按時參與，可以點(diǎn)擊會議詳情進(jìn)入詳情頁，其主要內(nèi)容和自己組織的會議詳情相同。未處理會議邀請的會議列表模塊會列出所有未處理的未來一周的會議邀請信息，前端主要表現(xiàn)為一個列表，可以點(diǎn)擊任意數(shù)據(jù)項(xiàng)進(jìn)入會議詳情，會議詳情頁的內(nèi)容主要包括會議室的具體信息、會議組織者、會議描述以及會議邀請的與會人員。在這個頁面用戶可以進(jìn)行的主要交互操作為與會人員對于會議邀請的接受或者拒絕，用戶進(jìn)入本頁面主要有兩種途徑，可以自行在系統(tǒng)中進(jìn)入這個頁面進(jìn)行操作，也可以點(diǎn)擊會議邀請郵件中的處理會議邀請?zhí)D(zhuǎn)到這個頁面。會議邀請的處理可以直接在列表外部進(jìn)行操作，也可以在點(diǎn)擊詳情進(jìn)入詳情頁，查看會議詳細(xì)信息之后再進(jìn)行操作。上述的所有列表頁前端部分都是采用AntDesign的Table組件來進(jìn)行開發(fā)，此組件是整個UI組件庫里面非常強(qiáng)大的組件之一，它可以根據(jù)文檔中的示例。自行配置表格的分頁行為，避免了我們自行操作受控數(shù)據(jù)而導(dǎo)致的不可預(yù)知的漏洞，大大提升了開發(fā)效率。后端處理上則和上文會議室列表中的邏輯類似，在數(shù)據(jù)庫層面進(jìn)行分頁查詢，并注意區(qū)分會議狀態(tài)即可。本章小結(jié)結(jié)合前面幾章為應(yīng)用開發(fā)做出的鋪墊，本次的系統(tǒng)實(shí)現(xiàn)整個過程變得更加地順利且有條理性。本章主要將整個會議室管理系統(tǒng)的實(shí)現(xiàn)過程描述出來，從開發(fā)環(huán)境，到用戶操作流程，到實(shí)現(xiàn)方式，到細(xì)節(jié)代碼都進(jìn)行了詳細(xì)的說明，經(jīng)歷了整個應(yīng)用從無到有的過程，在此過程中對應(yīng)用進(jìn)行了不斷的整理和優(yōu)化，最終實(shí)現(xiàn)了一個質(zhì)量較好的會議室管理系統(tǒng)?？偨Y(jié)與展望本章主要對于本次課題會議室管理系統(tǒng)的設(shè)計與實(shí)現(xiàn)中所作的工作進(jìn)行簡要總結(jié)，并對本次工作中的創(chuàng)新點(diǎn)進(jìn)行闡述，同時提出仍需進(jìn)一步深入研究和改進(jìn)的地方，最后對未來會議室管理行業(yè)的發(fā)展做出展望。本文總結(jié)本文針對傳統(tǒng)會議室管理系統(tǒng)的一些弊端進(jìn)行梳理，調(diào)研國內(nèi)外相關(guān)產(chǎn)品的現(xiàn)狀，整理出目前存在的一系列問題，并對這些問題提出解決方案，產(chǎn)生更符合我們需求場景的會議室管理系統(tǒng)設(shè)計，同時調(diào)研國內(nèi)外基于B/S架構(gòu)的系統(tǒng)技術(shù)，整理出了適合我們目前項(xiàng)目的全新的技術(shù)架構(gòu)，對于整體需求和可行性進(jìn)行分析，并從總體流程、數(shù)據(jù)結(jié)構(gòu)、功能架構(gòu)三個方面對系統(tǒng)進(jìn)行設(shè)計，并根據(jù)以上的設(shè)計方案完成會議室管理系統(tǒng)的開發(fā)工作，最后對于整個工作過程進(jìn)行總結(jié)和梳理。本文的主要工作本文主要研究會議室管理系統(tǒng)的設(shè)計與開發(fā)，進(jìn)行的工作主要包括了以下幾個方面：會議室管理系統(tǒng)的調(diào)研與研究：在研究最開始的時候調(diào)研了國內(nèi)外的會議室管理系統(tǒng)產(chǎn)品，并對其進(jìn)行對比研究，整理出目前校園級會議室管理系統(tǒng)的痛點(diǎn)，并提出相應(yīng)的解決方案。技術(shù)架構(gòu)的設(shè)計：調(diào)研目前國內(nèi)外比較流行的技術(shù)體系，并結(jié)合本系統(tǒng)的需求，整理出最合適的技術(shù)架構(gòu)。需求和可行性分析：綜合考慮上文中的解決方案和技術(shù)架構(gòu)，針對會議室管理系統(tǒng)進(jìn)行功能性和非功能性的需求分析以及經(jīng)濟(jì)上和技術(shù)上的可行性分析。系統(tǒng)設(shè)計：進(jìn)行系統(tǒng)的整體設(shè)計，包括流程設(shè)計、數(shù)據(jù)結(jié)構(gòu)設(shè)計、功能設(shè)計，以及交互設(shè)計和視覺設(shè)計。由于以前沒有過做交互和視覺的經(jīng)驗(yàn)，所以本次的設(shè)計調(diào)研并參考了很多網(wǎng)站的優(yōu)秀交互與視覺設(shè)計。系統(tǒng)實(shí)現(xiàn)：根據(jù)上述技術(shù)設(shè)計和功能設(shè)計，搭建開發(fā)環(huán)境，進(jìn)行編碼研發(fā)，實(shí)現(xiàn)系統(tǒng)功能，整體流程走通，測試完成。系統(tǒng)優(yōu)化：將實(shí)現(xiàn)出來的會議室管理系統(tǒng)一遍遍運(yùn)行，推敲可優(yōu)化點(diǎn)并優(yōu)化各處細(xì)節(jié)。本文的主要創(chuàng)新點(diǎn)在本次課題的開發(fā)過程中，我遇到了很多問題，也攻克了很多難點(diǎn)，整個系統(tǒng)主要有以下創(chuàng)新點(diǎn)：技術(shù)架構(gòu)上采用了國內(nèi)外非常新穎的技術(shù)架構(gòu)，和很多大型互聯(lián)網(wǎng)公司的技術(shù)體系保持一致，并跟據(jù)我們的場景進(jìn)行架構(gòu)優(yōu)化。交互功能添加了和與會人員的交互，傳統(tǒng)會議室管理系統(tǒng)只是操作會議室相關(guān)內(nèi)容，本次課題研發(fā)的會議室管理系統(tǒng)除了預(yù)定會議室等功能之外，還添加了通知與會人員和與會人員選擇是否接受會議邀請等功能，會議組織者不再需要在系統(tǒng)外的地方通知與會人員參與會議，極大地提升了用戶體驗(yàn)。視覺設(shè)計上添加了日歷和時間軸樣式，用戶能夠更加直觀地了解到各會議室的當(dāng)前狀態(tài)以及可預(yù)訂時間段，方便用戶即時獲取信息，使用流暢感增強(qiáng)。展望總的來說，雖然本課題會議室管理系統(tǒng)目前已經(jīng)到了結(jié)束階段，但是仍然還有很多可以改進(jìn)以及優(yōu)化的地方，希望未來再次參與到類似項(xiàng)目的時候能夠考慮進(jìn)去：增加預(yù)定時間粒度種類，目前整個系統(tǒng)支持的最小時間粒度為1小時，主要為了是操作簡單和防止出現(xiàn)資源浪費(fèi)的情況，但是后續(xù)可以考慮分多種時間粒度進(jìn)行預(yù)定，比如適合大家上課時長的45分鐘等等。線上會議，由于此次新型冠狀病毒疫情的影響，無法返工和返校，在這期間我們進(jìn)行了很多的線上教學(xué)，線上會議等等，我發(fā)現(xiàn)其實(shí)線上會議也是會給我們帶來很多便利的，比如如果不是非得去現(xiàn)場頭腦風(fēng)暴的工作交接會等等就可以直接在線上完成，能夠大大節(jié)約會議室資源，所以校園的會議室管理系統(tǒng)推出線上功能也是非常的必要的，當(dāng)然這是一把雙刃劍，完全依賴線上會議，有些事情的效率可能會降低，使用時還是需要進(jìn)行謹(jǐn)慎考慮。增加炫酷的動效，本次開發(fā)更加側(cè)重于業(yè)務(wù)邏輯，所以前端界面主要以簡潔大氣為主