【導(dǎo)讀】研究工作所取得的成果。除文中已注明引用的內(nèi)容外，本畢業(yè)設(shè)計(jì)（論文）不包。含任何其他個(gè)人或集體已經(jīng)發(fā)表或撰寫過的作品成果。對(duì)本研究做出過重要貢獻(xiàn)。的個(gè)人和集體，均已在文中以明確方式標(biāo)明并表示了謝意。便了師生的學(xué)習(xí)生活。本論文基于B/S實(shí)現(xiàn)了一個(gè)在線實(shí)驗(yàn)室預(yù)約系統(tǒng)。約、審核和管理等功能?；蛘叻駴Q；普通用戶也可以自行進(jìn)行注冊?；贐/S的結(jié)構(gòu)清晰，操作方便，界面美觀，具有一定的實(shí)用價(jià)值。

　　

【正文】 21 第五章 各個(gè)功能模塊的設(shè)計(jì)與實(shí)現(xiàn) 在建立后臺(tái)數(shù)據(jù)庫并完成相關(guān)配置后，開始具體設(shè)計(jì)網(wǎng)絡(luò)頁面。 用戶 登錄 是實(shí)驗(yàn)室預(yù)約系統(tǒng)的入口（如果沒有注冊，應(yīng)該從用戶注冊開始） 。用戶輸入 用戶名 、密碼， 選擇用戶類型 ，點(diǎn)擊登錄按鈕后， 系統(tǒng)到用戶表中查找，如果查到用戶輸入的 用戶名 、 密碼 和對(duì)應(yīng)的用戶類型 都正確，則登錄成功。用戶登錄成功后 進(jìn)入用戶控制面板，不同類型用戶對(duì)應(yīng)有不同的功能。 普通 用戶可以管理自己的基本資料， 修改密碼，進(jìn)行實(shí)驗(yàn)室查詢與預(yù)約 。 管理員可以管理用戶，管理實(shí)驗(yàn)室，審核預(yù)約 。 系統(tǒng)的總體功能設(shè)計(jì) 圖如 圖 41 所示 。 實(shí)驗(yàn)室預(yù)約系統(tǒng)登錄 （ 注冊 ）普通用戶模塊 管理員模塊用戶管理實(shí)驗(yàn)室管理預(yù)約管理密碼修改個(gè)人信息管理課表查詢實(shí)驗(yàn)室預(yù)約預(yù)約狀態(tài)查詢 圖 41 系統(tǒng)總體功能設(shè)計(jì) 圖 登錄 注冊模塊的設(shè)計(jì)與實(shí)現(xiàn) 登陸注冊模塊是整個(gè)應(yīng)用程序的入口，通過注 冊頁面，游客可以注冊為網(wǎng)站用戶，獲得網(wǎng)站下各種資源的使用權(quán)限；通過登陸頁面，系統(tǒng)會(huì)為不同身份、不同名稱的用戶提供指定頁面的跳轉(zhuǎn)，并獲得當(dāng)前用戶所擁有的權(quán)限，以便進(jìn)行網(wǎng)站下的其它操作。 用戶注冊模塊 用戶注冊這里指的是 普通 用戶 的注冊， 用戶通過點(diǎn)擊鏈接用戶注冊，進(jìn)入register 頁面 ， 進(jìn)行用戶表單信息的填寫，填寫 用戶名 、 密碼 ，選擇用戶類型 等信南京郵電大學(xué) 2021 屆本科生畢業(yè)設(shè)計(jì)（論文） 22 息。點(diǎn)擊立即提交后， 檢測用戶名是否存在，兩次密碼是否 相同 等，如果通過，則用戶 的信息就被插入到 對(duì)應(yīng)的 用戶數(shù)據(jù)庫中 。 普通用戶注冊時(shí)，系統(tǒng)進(jìn)行了嚴(yán)格的用戶輸入信息檢 測。用戶注冊采用的是AJAX 異步數(shù)據(jù)傳輸機(jī)制，在數(shù)據(jù)上傳至服務(wù)器之前，系統(tǒng)首先利用 JavaScript獲用戶填寫的表單信息，然后進(jìn)行用戶名和密碼的非空檢測，密碼與確認(rèn)密碼是否相同的檢測，當(dāng)檢測成功后，系統(tǒng)把表單數(shù)據(jù)壓縮為 JSON 格式的數(shù)據(jù)包，然后數(shù)據(jù)被傳輸?shù)胶笈_(tái) ，如果檢測失敗，則在模態(tài)框上顯示失敗的原因 。數(shù)據(jù)進(jìn)入到后臺(tái)后，首先進(jìn)行的同樣是非空檢測、密碼與確認(rèn)密碼是否相同的檢測。當(dāng)這些條件符合要求時(shí)，系統(tǒng)就會(huì)進(jìn)行下一步數(shù)據(jù)庫操作的部分。新用戶注冊時(shí)，要到數(shù)據(jù)庫中查詢是否有同名用戶，如果存在同名用戶則返回前端查 詢結(jié)果，如果不存在同名用戶，則把新用戶的信息插入的對(duì)應(yīng)的數(shù)據(jù)表中。 用戶名支持中文名。最后返回?cái)?shù)據(jù)插入的情況給前端。 用戶注冊頁面如圖 42 所示。 圖 42 用戶注冊頁面 用戶 登錄 模塊 用戶 登錄 過程是一個(gè)驗(yàn)證過程， 首先系統(tǒng)會(huì)進(jìn)行相應(yīng)的 JavaScript 前端驗(yàn)證，驗(yàn)證成功后使用 AJAX 異步傳輸技術(shù)，把數(shù)據(jù)打包成 JSON 格式傳輸?shù)胶笈_(tái)。后臺(tái)系統(tǒng) 首先從數(shù)據(jù)庫 對(duì)應(yīng)的數(shù)據(jù)表中 獲取該用戶的信息，如 用戶名 和用戶密碼等然后判斷 用戶名 對(duì)應(yīng)的用戶密碼是否和提交的一致，如果一致說明登錄成功，系統(tǒng)開啟全局會(huì)話模式， 設(shè)置一個(gè)全局變量 SESSION[39。user39。]保存 用戶信息 ， SESSIOIN[39。user39。]. u_status 如果為 0 說明用戶是 管理員 ，如果為 1 說明用戶是 教師 ，如果為 2 則用戶是 學(xué)生 。 登錄成功以后，根據(jù)用戶類型的不同， 系統(tǒng)跳轉(zhuǎn)進(jìn) 不同的用戶界面： 普通 用戶 為 index，管理員 為 admin/index。 點(diǎn)擊 退出 按鈕退出系統(tǒng)時(shí)，將設(shè)置南京郵電大學(xué) 2021 屆本科生畢業(yè)設(shè)計(jì)（論文） 23 SESSION[39。user39。] 清空 ，此時(shí)重新打開之 前的網(wǎng)頁要求重新登錄，以避免未登錄而通過地址進(jìn)入對(duì)應(yīng)界面的情況 。 用戶登陸頁面如圖 43 所示。 圖 43 用戶登陸頁面 管理員 管理模塊的設(shè)計(jì)與實(shí)現(xiàn) 管理員 登錄 后系統(tǒng)會(huì)判斷 SESSION[39。user39。]. u_status 是否為 0，如果符合，則順利進(jìn)入對(duì)應(yīng)管理界面 。管理員 可通過左側(cè)導(dǎo)航進(jìn)入 相應(yīng)的 管理 操作界面 ， 如普通用戶管理、實(shí)驗(yàn)室管理、實(shí)驗(yàn)室預(yù)約管理 。 普通用戶管理 模塊的設(shè)計(jì)與實(shí)現(xiàn) 普通用戶管理 包含的主要界面文件為： admin/， admin/，admin/ 以及其他配置文件。 普通用戶管理模塊包括用戶列表模塊，用戶添加模塊，用戶修改模塊和用戶刪 除模塊 。這些模塊方便了對(duì)用戶信息的綜合管理，可以在用戶不登陸甚至不注冊的情況下，直接通過后臺(tái)管理員對(duì)用戶進(jìn)行操作。在實(shí)驗(yàn)室預(yù)約系統(tǒng)中，經(jīng)常會(huì)出現(xiàn)這些情況的應(yīng)用，比如新用戶的批量添加，當(dāng)一個(gè)組織或班級(jí)需要以學(xué)號(hào)和默認(rèn)密碼添加進(jìn)我們的用戶系統(tǒng)中時(shí)，使用此頁面能夠大大的 加速用戶的添加速度。另一種情況可能出現(xiàn)在用戶忘記密碼的時(shí)候，只需給管理員發(fā)送申請重置密碼的郵件，當(dāng)管理員認(rèn)為你的條件符合要求時(shí)，就可以將用戶密碼重新變更為一個(gè)指定值。該功能的實(shí)現(xiàn)以用戶管理主界面用戶列表中的用戶 ID 為關(guān)鍵值，當(dāng)進(jìn)行任何一個(gè)修改時(shí)，該 值一直是相應(yīng)界面的用戶 ID。 用戶管理 頁面 如圖 44 所示。 實(shí)驗(yàn)室管理 模塊的設(shè)計(jì)與實(shí)現(xiàn) 實(shí)驗(yàn)室管理 包含的主要界面文件為： admin/， admin/，admin/ 以及其他配置文件。 實(shí)驗(yàn)室 管理模塊包括 實(shí)驗(yàn)室 列表模塊， 實(shí)驗(yàn)?zāi)暇┼]電大學(xué) 2021 屆本科生畢業(yè)設(shè)計(jì)（論文） 24 室 添加模塊， 實(shí)驗(yàn)室 修改模塊和 實(shí)驗(yàn)室 刪除模塊。 實(shí)驗(yàn)室管理模塊主要是針對(duì)學(xué)?，F(xiàn)有實(shí)驗(yàn)室的情況進(jìn)行一個(gè)綜合管理， 當(dāng)實(shí)驗(yàn)室有變動(dòng)時(shí)，能夠?qū)崟r(shí)根據(jù)當(dāng)前的變動(dòng)情況進(jìn)行修改，這樣在新用戶預(yù)約實(shí)驗(yàn)室的時(shí)候，根據(jù)查詢出的實(shí)驗(yàn)室狀況，就能夠做相 應(yīng)的使用調(diào)整。 該功能的實(shí)現(xiàn)以 實(shí)驗(yàn)室 管理主界面 實(shí)驗(yàn)室 列表中的 實(shí)驗(yàn)室 ID 為關(guān)鍵值，當(dāng)進(jìn)行任何一個(gè)修改時(shí)，該值一直是相應(yīng)界面的 實(shí)驗(yàn)室ID。 實(shí)驗(yàn)室管理頁面如圖 45 所示。 圖 44 用戶管理頁面 圖 45 實(shí)驗(yàn)室管理頁面 實(shí)驗(yàn)室預(yù)約管理 模塊的設(shè)計(jì)與實(shí)現(xiàn) 實(shí)驗(yàn)室預(yù)約 管理 包含的主要界面文件為： admin/ 以及其他配置文件。 admin/ 頁面顯示的是用戶預(yù)約申請列表，管理員可對(duì)每個(gè)申請進(jìn)行相應(yīng)的操作。每個(gè)申請都有 3 中狀態(tài)：未審核、通過、未通過 ，申請第 一次提交到數(shù)據(jù)庫時(shí)，該申請的狀態(tài)為未審核，這時(shí)如果觸發(fā)相應(yīng)的更改按鈕，系統(tǒng)就南京郵電大學(xué) 2021 屆本科生畢業(yè)設(shè)計(jì)（論文） 25 會(huì)進(jìn)入到 Action 中，判斷當(dāng)申請狀態(tài)為未審核的時(shí)候，直接將其更改為通過。同樣的，當(dāng)申請狀態(tài)為通過 /未通過的時(shí)候，點(diǎn)擊更改按鈕后，在相應(yīng)的 Action 里會(huì)將其更改為未通過 /通過 。 然后將更改好的申請 更新到數(shù)據(jù)庫中。更改按鈕簡化了后臺(tái)管理員的操作，在后臺(tái)添加了相應(yīng)的判斷，將審核是否通過狀態(tài)更改合二為一。 實(shí)驗(yàn)室預(yù)約 管理 頁面如圖 46 所示。 圖 46 實(shí)驗(yàn)室 預(yù)約 管理頁面 用戶管理模塊的設(shè)計(jì)與實(shí)現(xiàn) 普通用戶 登錄成功后進(jìn)入 index 界面， 右側(cè) 導(dǎo)航 欄顯示 其 用戶 管理 界面， 系統(tǒng)通過用戶登錄時(shí)存儲(chǔ)的 session 值直接獲取用戶名顯示在這里。用戶名下對(duì)應(yīng)著相應(yīng)的操作，普通用戶可以進(jìn)行的操作是密碼修改、個(gè)人信息管理和用戶退出。 密碼修改 模塊的設(shè)計(jì)與實(shí)現(xiàn) 其 主要界面文件 為： 以及其他配置文件。 當(dāng)用戶點(diǎn)擊導(dǎo)航欄的密碼修改按鈕后，系統(tǒng)將進(jìn)入密碼修改頁面，系統(tǒng)從 session 中取出當(dāng)前登陸用戶的用戶名和密碼，并將其顯示在該頁面。 用戶名欄已經(jīng)設(shè)定為不可修改，密碼欄與確認(rèn)密碼欄的輸入值需保持一致，才能觸發(fā) AJAX 數(shù)據(jù)提交事 件。 密碼修改完成后，點(diǎn)擊修改按鈕，系統(tǒng)會(huì)將新密碼提交后臺(tái)并存儲(chǔ)到數(shù)據(jù)庫中，下次該用戶登陸時(shí)，就可以使用新密碼直接登陸該系統(tǒng)。 數(shù)據(jù)提交之前，會(huì)使用 JavaScript 對(duì)輸入的密碼和確認(rèn)密碼進(jìn)行非空驗(yàn)證和是否相同的驗(yàn)證，驗(yàn)證代碼如下： if(==||==||==){ (loginresult).innerHTML=39。用戶名或密碼不能為空！span id=linkhref style=display:noneregister/span39。 (tzbtn).innerHTML=返回 。 南京郵電大學(xué) 2021 屆本科生畢業(yè)設(shè)計(jì)（論文） 26 }else if(!==){ (loginresult).innerHTML=39。 兩次輸入密碼不一致！span id=linkhref style=display:noneregister/span39。 (tzbtn).innerHTML=返回 。 } 密碼修改頁面如圖 47 所示。 圖 47 密碼修改 頁面 圖 48 基本資料 修改 頁面 基本資料 修改 模塊的設(shè)計(jì)與實(shí)現(xiàn) 其主要界面文件為： 以及其他配置文件。 當(dāng)用戶點(diǎn)擊導(dǎo)航欄的用戶管理按鈕后，系統(tǒng)將進(jìn)入用戶管理頁面，系統(tǒng)把從后臺(tái)數(shù)據(jù)庫中取出當(dāng)前登陸南京郵電大學(xué) 2021 屆本科生畢業(yè)設(shè)計(jì)（論文） 27 用戶的基本資料，并將其顯示在該頁面?；举Y料修改完成后，點(diǎn)擊修改按鈕，系統(tǒng)會(huì)將新的用戶 資料提交后臺(tái)并存儲(chǔ)到數(shù)據(jù)庫中，再次刷新該頁面，就可以看到剛剛填寫的基本資料。 該頁面的用戶資料修改采用了 JavaScript 的嚴(yán)格格式驗(yàn)證，只有通過格式驗(yàn)證后，數(shù)據(jù)才會(huì)被提交到后臺(tái)處理。當(dāng)驗(yàn)證出錯(cuò)或者數(shù)據(jù)被提交到后臺(tái)處理過程中出錯(cuò)，系統(tǒng)會(huì)給出相應(yīng)的錯(cuò)誤提示信息。 基本資料 修改 頁面如圖 48 所示。 用戶預(yù)約 模塊的設(shè)計(jì)與實(shí)現(xiàn) 該模塊是本系統(tǒng)的核心模塊，該模塊實(shí)現(xiàn)了本系統(tǒng)的核心功能，把數(shù)據(jù)庫的表通過后臺(tái)邏輯代碼聯(lián)系在了一起。 普通用戶 登錄成功后進(jìn)入 index 界面，可通過 頂端 導(dǎo)航進(jìn)入其 實(shí)驗(yàn)室預(yù)約 界面，可以 進(jìn)行 實(shí)驗(yàn) 室課表查詢下載、實(shí)驗(yàn)室預(yù)約、預(yù)約查詢 等。 導(dǎo)航欄的設(shè)計(jì)沿用了大部分網(wǎng)站的設(shè)計(jì)風(fēng)格，分別展示首頁，主要功能頁和幫助頁面。通過點(diǎn)擊主要功能頁的鏈接，就可以進(jìn)入到相應(yīng)的展示和操作頁面。普通用戶登錄 后系統(tǒng)會(huì)判斷 SESSION[39。user39。]. u_status 的值 ，如果 為 1 為教師，如果為 2 為學(xué)生 ， 當(dāng)進(jìn)行實(shí)驗(yàn)室預(yù)約的時(shí)候，頁面會(huì)根據(jù)用戶類型的不同有不同的顯示 。 課表查詢下載 模塊的設(shè)計(jì)與實(shí)現(xiàn) 其主要界面文件為： 以及其他配置文件。 主要的后臺(tái)邏輯文件包括 和 ，分別負(fù)責(zé)課表的查詢邏輯和下載邏輯。 中通過從數(shù)據(jù)庫中查詢相應(yīng)的數(shù)據(jù)，然后將數(shù)據(jù)打包成 ArrayList 格式傳輸給前端頁面， 對(duì)下載的 Excel 格式 進(jìn)行了一定的渲染和美化工作。 WritableFont wf = new WritableFont(, 23, , false, , )。 WritableCellFormat wcf = new WritableCellFormat(wf)。 ()。 (new (0, 0, ()+號(hào)實(shí)驗(yàn)室課程表 ,wcf))。 這段代碼是關(guān)于 Excel 表第一行的顯示內(nèi)容的渲染美化，其它單元格借用了類似的格式進(jìn)行美化加工。 Excel 表格繪制完成后，系統(tǒng)以字節(jié)流的方式將表格傳輸給用戶。 課表查詢下載頁面如圖 49 所示。 南京郵電大學(xué) 2021 屆本科生畢業(yè)設(shè)計(jì)（論文） 28 圖 49 課表查詢下載頁面 實(shí)驗(yàn)室預(yù)約 模塊的設(shè)計(jì)與實(shí)現(xiàn) 其主要界面文件為： 以及其他配置文件。 未注冊用戶和其它登錄用戶一樣，可以進(jìn)入該界面并進(jìn)行課表查詢。 查詢結(jié)果欄的實(shí)驗(yàn)室余量是實(shí)驗(yàn)室容量與已通過系統(tǒng)審核但未通過管理員審核或者管理員審核通過的數(shù)量差，這樣安排就可以避免用戶預(yù)約時(shí)發(fā)生同一實(shí)驗(yàn)室同時(shí)預(yù)約的沖突，提高了系統(tǒng)的穩(wěn)定性。 普通用戶登錄后，當(dāng)進(jìn)行完實(shí)驗(yàn)室狀態(tài)查詢后，右 側(cè)根據(jù)用戶權(quán)限的不同顯示不同的界面。老師可以自己選擇當(dāng)前實(shí)驗(yàn)室的余量之內(nèi)的值進(jìn)行預(yù)約，學(xué)生則只可以進(jìn)行單人單次的預(yù)約。當(dāng)預(yù)約信息填寫完成并提交時(shí)，后臺(tái)會(huì)根據(jù)用戶的不同自動(dòng)篩選預(yù)約信息，老師的預(yù)約信息直接提交給管理員審核，學(xué)生的信息則要先交由系統(tǒng)審核，如果預(yù)約未來五天之內(nèi)的課程，系統(tǒng)可以通過學(xué)生的請求并提交給管理員處理。 預(yù)約邏輯處理部分的代碼如下： Date n = new Date(())。 MapString, Object session = ().getSession()。 User u = (User) (user)。 boolean flagi=false。 if (() == 2 amp。amp。 (().getDate() ()) 5 amp。amp。 (().getMonth() == ()) amp。amp。 (().getYear() == ())) { flagi=false。 } else { flagi = new LaboDao().insert(labo)。 } 南京郵電大學(xué) 2021 屆