摘要[20]，主要表現(xiàn)在以下幾個方面：第一， 本系統(tǒng)的運行可以代替人工重復(fù)繁雜的勞動；第二， 本系統(tǒng)的運行能夠節(jié)省大量資源；第三， 本系統(tǒng)可以使私人信息更加安全可靠；因此，本系統(tǒng)具備廣泛的應(yīng)用價值，在經(jīng)濟上是可行的。3．法律可行性本系統(tǒng)在開發(fā)過程中沒有涉及與法律相抵觸的方面，符合國家各種政策法規(guī)。限制非管理員權(quán)限的賬號對非管理范圍信息的訪問權(quán)，不會對信息進行篡改，關(guān)鍵用戶信息的修改均需經(jīng)過重新上傳關(guān)鍵的證件進行審核，因此，本系統(tǒng)在法律上也是可行的。3.4本章小結(jié)本章主要針對圖書管理系統(tǒng)進行需求分析，包括功能性需求分析與非功能需求分析，基于需求分析和技術(shù)研究對系統(tǒng)進行了可行性分析，最終確定本系統(tǒng)是可行的。為下一章的總體設(shè)計和具體實現(xiàn)做好了充分準(zhǔn)備。 第4章圖書管理系統(tǒng)的詳細(xì)設(shè)計與實現(xiàn) 第4章圖書管理系統(tǒng)的詳細(xì)設(shè)計與實現(xiàn)4圖書管理系統(tǒng)的詳細(xì)設(shè)計與實現(xiàn)上一章節(jié)中對系統(tǒng)整體的需求進行了分析，對系統(tǒng)整體設(shè)計方向有了把握。之后可以來得出系統(tǒng)總體的架構(gòu)，并由此完成系統(tǒng)的整體可行性分析據(jù)此本章節(jié)將對系統(tǒng)的設(shè)計與實現(xiàn)進行詳細(xì)的介紹。4.1關(guān)鍵技術(shù)選型和框架設(shè)計4.1.1開發(fā)環(huán)境（1）硬件環(huán)境表4.1開發(fā)硬件環(huán)境系統(tǒng)windows11內(nèi)存16GB處理器AMDRyzen75800HwithRadeonGraphics3.20GHz（2）軟件環(huán)境表4.2開發(fā)軟件環(huán)境后端開發(fā)框架SpringBoot數(shù)據(jù)庫Mysql前端開發(fā)框架Vue.js開發(fā)工具VisualStudioCode運行環(huán)境Node.js包管理工具NPM網(wǎng)絡(luò)請求庫Axios組件庫Element-UI4.1.2關(guān)鍵技術(shù)選型本小節(jié)將從前后端開發(fā)框架的選取以及組件庫的選取來對系統(tǒng)開發(fā)中采用的關(guān)鍵技術(shù)進行了闡述。后端開發(fā)框架的選取 Java開發(fā)中Struts、Hibernate和Spring這三流行框架常常起了關(guān)鍵作用。通過對比這三種Java流行框架，分析它們的各自的特點從而選擇最適合本項目的后端開發(fā)框架，提高開發(fā)效率和提升系統(tǒng)的性能。 Struts開發(fā)過程的優(yōu)化貫徹始終，包括后期維護，尤其適合高負(fù)載系統(tǒng)；它實現(xiàn)了Action類，測試編寫代碼的工作量較少；Struts將MVC的Controller一分為三，在獲得結(jié)構(gòu)更加清晰的同時，也增加了系統(tǒng)的復(fù)雜度。

Hibernate是一個開放源代碼的對象關(guān)系映射框架，它對JDBC進行了輕量級的對象封裝，使得Java程序員可以使用對象編程思維來操縱數(shù)據(jù)庫，解決了對象和關(guān)系不匹配的問題。允許對Java對象執(zhí)行數(shù)據(jù)庫操作，利用緩存將數(shù)據(jù)從Java環(huán)境永久保存到數(shù)據(jù)庫。但同時它了限制開發(fā)者所使用的對象模型。 SpringBoot能夠創(chuàng)建獨立Spring應(yīng)用，自動starter依賴，簡化構(gòu)建配置，自動配置Spring以及第三方功能，提供生產(chǎn)級別的監(jiān)控、外部優(yōu)化配置。

但同時，他也有著項目依賴太多、項目占用較大、缺少服務(wù)的注冊和發(fā)現(xiàn)等解決方案；缺少監(jiān)控集成方案等缺點。 通過對比分析三種框架的優(yōu)缺點，本系統(tǒng)后端最終選用SpringBoot框架來實現(xiàn)。SpringBoot依賴管理方便，能夠自動配置，只要打成一個可執(zhí)行的jar包就能獨立運行，比較適合本次系統(tǒng)的開發(fā)任務(wù)。前端開發(fā)框架的選取Vue、React和Angular是目前主流的前端開發(fā)框架，這三個框架三者各有其適用的領(lǐng)域和優(yōu)點。通過對三大框架的對比能夠選擇出最適合本系統(tǒng)的前端開發(fā)框架，進而提高前端開發(fā)效率和性能。Reat.js（react）是一個用來構(gòu)建用戶界面的JavaScript庫。用戶界面會自動與底層數(shù)據(jù)保持同步。UI渲染過程中，react通過在虛擬dom中的微操來實現(xiàn)對實際dom的局部更新；借助虛擬DOM能夠幫助解決跨瀏覽器問題；能夠編寫?yīng)毩⒌哪K化UI組件，當(dāng)某個或者某些組件出問題時可以方便地進行隔離。Vue.js是一套構(gòu)建用戶界面的漸進式框架，采用自底向上增量開發(fā)的設(shè)計。Vue容易上手，與其他庫或已有的項目進行整合也較為簡單。此外，Vue也能夠采用單文件組和其支持的庫開發(fā)復(fù)雜的單頁面應(yīng)用。Angular跨平臺性極強，能夠提供無縫升級的過渡方案。它模塊功能強大，自帶豐富的指令；引入了如依賴注入等概念，能夠容易地寫出可復(fù)用的代碼。但同時入門容易但深入概念多，后續(xù)學(xué)習(xí)難度較大。教程少，遇到問題解決的難度大。通過對比分析Vue.js的開發(fā)難度、運行速度和用戶界面等方面都具有優(yōu)勢，本系統(tǒng)最終選用Vue框架來實現(xiàn)。組件庫的選取組件是Vue框架的核心——它們可以幫助開發(fā)者更快地從想法轉(zhuǎn)變?yōu)楣δ苄訳I，并決定了界面的視覺效果。主流的VueUI組件庫主要有BootstrapVue、Quasar、VueMaterial和Element。BootstrapVue可以幫助開發(fā)者構(gòu)建具有易于定制的UI元素的響應(yīng)式網(wǎng)站。BootstrapVue使得Vue能夠使用所有的Bootstrap元素，例如行、列和卡片，它使前端的實現(xiàn)變得簡單而高效。Quasar是一個擁有大量用例的框架，它遵循MaterialDesign指南并完全支持所有桌面和移動瀏覽器。它可以將自一個代碼庫的代碼同時部署為網(wǎng)站、移動應(yīng)用程序，甚至是Electron應(yīng)用程序。VueMaterial是一個廣泛使用的輕量級框架，開發(fā)者可以做出更少的設(shè)計選擇，可以創(chuàng)建應(yīng)用程序而不必覆蓋庫的默認(rèn)樣式。它具有靈活性、重量輕且易于設(shè)置的特點。Element-UI是一個擁有龐大社區(qū)的VueUI組件庫。它不僅適用于前端開發(fā)人員，還提供了設(shè)計師和產(chǎn)品經(jīng)理可以使用的完整UI工具包。該庫主要由中國貢獻者開發(fā)，原始文檔用中文編寫。綜合考慮下，組件庫選擇的是Element-UI，Element-UI在國內(nèi)使用廣泛，擁有完善的中文文檔，上手更快。支持主流瀏覽器，對于數(shù)據(jù)的處理更加成熟。4.1.3圖書管理系統(tǒng)的架構(gòu)設(shè)計圖書管理系統(tǒng)系統(tǒng)采用B/S架構(gòu)，采用前后端分離架構(gòu)，將系統(tǒng)分成了幾個層次。因此本系統(tǒng)主要分為展示層、服務(wù)層、數(shù)據(jù)存儲層。整體的架構(gòu)如圖4.1所示：圖4.1系統(tǒng)架構(gòu)圖本系統(tǒng)最終通過瀏覽器來展示前端的網(wǎng)頁，對于后端返回的數(shù)據(jù)進行展示，能夠?qū)τ谟脩舻妮斎胧录龀鱿鄳?yīng)的反饋。接口風(fēng)格為RESTful。前端的框架采用Vue，組件庫采用Element-UI風(fēng)格，與后端的通信使用Axios封裝的http類，后端采用SpringBoot和Mybatis-plus框架，數(shù)據(jù)庫使用MySQL進行數(shù)據(jù)的存儲和查詢。4.2圖書管理系統(tǒng)數(shù)據(jù)庫設(shè)計根據(jù)對圖書管理系統(tǒng)的詳細(xì)需求分析和框架設(shè)計，對管理員，用戶以及相應(yīng)的業(yè)務(wù)邏輯進行數(shù)據(jù)庫設(shè)計。圖4.2顯示的是用戶信息表，角色表以及用戶角色表。用戶與角色單獨存儲，通過用戶角色表為每個用戶賦予相應(yīng)的權(quán)限，減少了數(shù)據(jù)的冗余，更加的簡潔易懂，便于管理和維護。圖4.2用戶相關(guān)表關(guān)聯(lián)如表4.3所示，用戶表名為sys_user，用于存儲用戶的信息，包含14個字段分別是user_id、username、password、phone、email、sex、is_admin、is_account_non_expired、is_account_non_locked、is_credentials_non_expired、is_enabled、nick_name、create_time、update_time，分別代表用戶ID、登錄賬戶、用戶密碼、用戶電話、郵箱、性別、是否管理員1：是0：否、帳戶過期1：是0：否、是否鎖定1：否0：是、密碼過期1：否0：是、帳戶可用1：是0：否、姓名、創(chuàng)建時間和更新時間。這是增加用戶時需要填寫或者生成的相關(guān)信息。表4.3用戶表編號字段名數(shù)據(jù)類型標(biāo)識1user_idint用戶ID2usernamevarchar(36)登錄賬戶3passwordvarchar(128)用戶密碼4phonevarchar(13)用戶電話5emailvarchar(64)郵箱6sexvarchar(2)性別7is_adminvarchar(2)是否管理員1:是0:否8is_account_non_expiredtinyint帳戶過期1:是0:否9is_account_non_lockedtinyint是否鎖定1:否0:是10is_credentials_non_expiredtinyint密碼過期1:否0:是11is_enabledtinyint帳戶可用1:是0:否12nick_namevarchar(36)姓名13create_timedatetime創(chuàng)建時間14update_timedatetime更新時間 如表4.4所示，用戶角色表名為sys_user_role，用于存儲用戶角色的信息，包含3個字段分別是user_role_id、user_id、role_id，分別代表主鍵、用戶id和角色id。表4.4用戶角色表編號字段名數(shù)據(jù)類型標(biāo)識1user_role_idint主鍵2user_idint用戶id3role_idint角色id 如表4.5所示，角色表名為sys_role，用于存儲角色的信息，包含6個字段分別是role_id、role_name、role_type、remark、create_time、update_time，分別代表角色id、角色名稱、角色類型1：系統(tǒng)用戶2：讀者、備注、創(chuàng)建時間和更新時間。表4.5角色表編號字段名數(shù)據(jù)類型標(biāo)識1role_idint角色id2role_namevarchar(36)角色名稱3role_typevarchar(2)角色類型1:系統(tǒng)用戶2:讀者4remarkvarchar(64)備注5create_timedatetime創(chuàng)建時間6update_timedatetime更新時間圖4.3菜單相關(guān)表關(guān)聯(lián) 如表4.6所示，菜單表名為sys_menu，用于存儲菜單的信息，包含13個字段，分別是menu_id、parent_id、title、code、name、path、url、type、icon、parent_name、order_num、create_time、update_time，分別代表菜單id、父級菜單id、菜單名稱、權(quán)限字段、路由name、路由path、組件路徑、類型0:目錄1:菜單2:按鈕、菜單圖標(biāo)、上級菜單名稱、序號、創(chuàng)建時間和更新時間?？荚囆畔⒅邪顺塑嚶肪€的信息，包含3個字段，route_id、route、exam_id，分別代表乘車路線ID、乘車路線、考試場次ID，乘車路線ID為主鍵。如表4.7所示。表4.6菜單表編號字段名數(shù)據(jù)類型標(biāo)識1menu_idint菜單id2parent_idint父級菜單id3titlevarchar(64)菜單名稱4codevarchar(36)權(quán)限字段5namevarchar(36)路由name6pathvarchar(36)路由path7urlvarchar(128)組件路徑8typevarchar(2)類型0:目錄1:菜單2:按鈕9iconvarchar(36)菜單圖標(biāo)10parent_namevarchar(64)上級菜單名稱11order_numint序號12create_timedatetime創(chuàng)建時間13update_timedatetime更新時間 如表4.7所示，角色菜單表名為sys_role_menu，用于存儲角色的菜單信息，包含3個字段，分別是role_menu_id、role_id、menu_id，分別代表主鍵、角色id和菜單id。表4.7角色菜單表編號字段名數(shù)據(jù)類型標(biāo)識1role_menu_idint主鍵2role_idint角色id3menu_idint菜單id圖4.4讀者相關(guān)表關(guān)聯(lián)如表4.8所示，讀者表名為sys_reader，用于存儲讀者的信息，包含9個字段分別是reader_id、learn_num、username、id_card、sex、phone、password、check_status、user_status，分別代表讀者id、姓名、賬號、身份證號碼、性別、電話、密碼、審核狀態(tài)1:是0:否、用戶狀態(tài)1:啟用0:停用。這是增加讀者或者注冊時需要填寫或者生成的相關(guān)信息。表4.8讀者表編號字段名數(shù)據(jù)類型標(biāo)識1reader_idint讀者id2learn_numvarchar(36)姓名3usernamevarchar(36)賬號4id_cardvarchar(20)身份證號碼5sexvarchar(2)性別6phonevarchar(15)電話7passwordvarchar(128)密碼8check_statusvarchar(2)審核狀態(tài)1:是0:否9user_statusvarchar(2)用戶狀態(tài)1:啟用0:停用 如表4.9所示，讀者角色表名為sys_reader_role，用于存儲讀者的角色信息，包含3個字段，分別是reader_role_id、role_id、menu_id，分別代表主鍵、角色id和菜單id。表4.9讀者角色表編號字段名數(shù)據(jù)類型標(biāo)識1reader_role_idint主鍵2reader_idint角色id3role_idint菜單id圖4.5圖書相關(guān)表關(guān)聯(lián)如表4.10所示，借書表名為borrow_book用于存儲借書的信息，包含10個字段分別是borrow_id、book_id、reader_id、borrow_time、return_time、apply_status、borrow_status、return_status、excepion_text、apply_text，分別代表主鍵、圖書id、讀者id、借書時間、還書時間、審核狀態(tài)(0:待審核1:已審核2:拒絕)、借書狀態(tài)(0:審核中1:在借中2:已還3:拒絕)、異常還書狀態(tài)(1:正常還書2:異常還書3:丟失)、異常還書備注和審核拒絕備注。這是借圖和還書時需要填寫或者生成的相關(guān)信息。表4.10借書表編號字段名數(shù)據(jù)類型標(biāo)識1borrow_idint主鍵2book_idint圖書id3reader_idint讀者id4borrow_timedatetime借書時間5return_timedatetime還書時間6apply_statusvarchar(2)0:待審核1:已審核2:拒絕7borrow_statusvarchar(2)0:審核中1:在借中2:已還3:拒絕8return_statusvarchar(2)1:正常還書2:異常還書3:丟失9excepion_textvarchar(128)異常還書備注10apply_textvarchar(128)審核拒絕備注如表4.11所示，圖書表名為borrow_book用于存儲圖書的信息，包含9個字段分別是book_id、category_id、book_name、book_code、book_place_num、book_auther、book_product、book_price、book_store，分別代表圖書id、分類id、圖書名稱、圖書條碼、書架號、作者、出版社、價格和庫存。該表在錄入圖書時需要填寫相關(guān)信息。表4.11圖書表編號字段名數(shù)據(jù)類型標(biāo)識1book_idint圖書id2category_idint分類id3book_namevarchar(128)圖書名稱4book_codevarchar(128)圖書條碼5book_place_numvarchar(128)書架號6book_authervarchar(64)作者7book_productvarchar(128)出版社8book_pricedecimal(18,2)價格9book_storeint庫存如表4.12所示，圖書分類表名為sys_category用于存儲圖書分類的信息，包含3個字段分別是category_id、category_name、order_num，分別代表分類id、分類名稱和序號。表4.12圖書分類表編號字段名數(shù)據(jù)類型標(biāo)識1category_idint分類id2category_namevarchar(64)分類名稱3order_numint序號圖4.6公告表如表4.13所示，圖書分類表名為sys_notice用于存儲公告的信息，包含4個字段分別是notice_id、notice_title、notice_content、create_time，分別代表主鍵、標(biāo)題、內(nèi)容和創(chuàng)建時間。表4.13圖書分類表編號字段名數(shù)據(jù)類型標(biāo)識1notice_idint主鍵2notice_titlevarchar(128)標(biāo)題3notice_contenttext內(nèi)容4create_timedatetime創(chuàng)建時間4.3圖書管理系統(tǒng)功能模塊實現(xiàn)4.3.1首頁和個人中心本系統(tǒng)通過安裝echarts組件，基于準(zhǔn)備好的dom，初始化echarts實例，制定圖標(biāo)的配置項和數(shù)據(jù)，數(shù)據(jù)如用戶數(shù)量，書籍?dāng)?shù)量和公告等，通過調(diào)用后端接口查詢到，通過this.myechert進行調(diào)用就可以進行圖形和表格的展示，讓用戶可以直觀清晰的了解這些內(nèi)容。管理員可以看到所有用戶待還書的總數(shù)，而用戶則會看到自己未還書的數(shù)量，起到提醒的作用：圖4.7首頁點擊頭像會彈出下拉菜單，在這里用戶可以進行跳轉(zhuǎn)回首頁，錄入人臉，修改密碼和退出登錄的操作。圖4.8人臉錄入流程 本次人臉識別使用的是Face-api.js，它是基于tensorflow.js核心API的人臉檢測和人臉識別的瀏覽器實現(xiàn)。它實現(xiàn)了一系列的卷積神經(jīng)網(wǎng)絡(luò)，它實現(xiàn)了三種卷積神經(jīng)網(wǎng)絡(luò)架構(gòu)，能夠用于完成人臉檢測、識別和特征點檢測任務(wù)。初始化時，face-api.js會加載預(yù)先處理好的models，設(shè)置識別的最小的可信度，選擇錄入人臉后，前端會調(diào)用本機的攝像頭，沒有攝像頭系統(tǒng)會給出提示。當(dāng)攝像頭打開后，界面會彈出彈窗，上面給出兩個窗口，一個顯示當(dāng)前的錄像，另一個負(fù)責(zé)最后的照片上傳。faceapi不斷的檢測當(dāng)前視頻流中是否存在人臉并給出提示，點擊takephoto后，選取當(dāng)前幀顯示在右側(cè)的canvas，用戶點擊確認(rèn)后會將此時畫面的base64格式傳輸至后端處理。圖4.9人臉錄入（未識別到人臉）在前端調(diào)用后端接口時，有可能會出現(xiàn)跨域的情況，后端WebMvcConfigurer類負(fù)責(zé)跨域的配置，如設(shè)置允許跨域的路由，域名，方法等：@ConfigurationpublicclassWebMvcConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){ //設(shè)置允許跨域的路由registry.addMapping("/**") //設(shè)置允許跨域請求的域名 .allowedOriginPatterns("*") //設(shè)置允許的方法 .allowedMethods("*") //設(shè)置允許的請求頭 .allowedHeaders("*") //設(shè)置允許的方法 .maxAge(3600) //是否允許證書（cookies） .allowCredentials(true);}}4.3.2登錄注冊模塊圖4.10登錄流程圖本系統(tǒng)登錄模塊流程圖如圖4.10所示，用戶填寫信息點擊登錄后，首先前端對用戶輸入的賬號、密碼和用戶類型進行判斷是否為空，若為空則在相應(yīng)的輸入框下方顯示紅色的提示信息。賬號密碼驗證正確后，查詢當(dāng)前用戶權(quán)限，前端會根據(jù)當(dāng)前用戶的權(quán)限展示功能菜單；若密碼錯誤，該次登錄識別并給出錯誤提示。如果用戶忘記了賬號密碼，則可以聯(lián)系管理員進行密碼的重置（默認(rèn)為666666），用戶登錄主界面可以在個人中心修改密碼。圖4.11系統(tǒng)登錄頁面權(quán)限劃分控制路由角色默認(rèn)有管理員和讀者，其中管理員可以新增其他的系統(tǒng)用戶并為其分配權(quán)限，功能菜單根據(jù)后端返回的權(quán)限數(shù)據(jù)進行顯示：管理員顯示所有菜單，讀者顯示基本的功能菜單。用戶注冊需要填寫相應(yīng)的信息，前端會進行信息的簡單檢驗，確認(rèn)格式正確后，調(diào)用后端接口，檢驗賬號符合要求后將用戶信息加入數(shù)據(jù)庫。密碼使用md5格式存放在數(shù)據(jù)庫中，用戶登錄時，將用戶輸入的密碼用同種方式生成對應(yīng)的md5，比較兩者是否相同來判斷密碼是否正確。 圖4.12讀者注冊彈框 本系統(tǒng)利用了Vue.js的router.addRoutes對于不同類型的用戶生成不同的功能菜單。管理員首先設(shè)置不同類型的用戶所擁有的權(quán)限樹，信息存儲在數(shù)據(jù)庫中。用戶登錄時，前端傳輸?shù)男畔綆б粋€token，后端根據(jù)token獲取到用戶類型userType，之后將該類型的權(quán)限樹信息返回給前端，系統(tǒng)根據(jù)這些信息調(diào)用src/store/modules/permission.js里面的generateRoutes和filterAsyncRoutes方法，從而渲染出不同用戶的的功能菜單。 generateRoutes通過調(diào)用filterAsyncRoutes生成功能菜單，filterAsyncRoutes遍歷后端返回的routes和roles信息，一個個的遞歸判斷菜單所在的層級，組裝成路由：generateRoutes({commit},roles){……letaccessedRoutes=filterAsyncRoutes(res.data,roles)commit('SET_ROUTES',accessedRoutes)resolve(accessedRoutes)……}exportfunctionfilterAsyncRoutes(routes,roles){routes.forEach(route=>{consttmp={...route}if(hasPermission(roles,tmp)){//動態(tài)找到頁面路徑constcomponent=ponent;if(component){//判斷是否是一級菜單if(component=='Layout'){ponent=Layout;}else{ponent=(resolve)=>require([`@/views${component}`],resolve)}}if(tmp.children){tmp.children=filterAsyncRoutes(tmp.children,roles)}res.push(tmp)}})}封裝Axios發(fā)送請求系統(tǒng)前端與后端的數(shù)據(jù)交互使用Axios完成，前端完成對應(yīng)的請求代碼編寫并發(fā)送給后端接口。使用token來保證賬戶的安全，本系統(tǒng)在用戶登錄時后端會生成token，之后將token傳給前端，token具有時效性，一段時間后用戶若無操作token會過期，返回碼為600，前端會重新跳轉(zhuǎn)至登錄頁，提醒用戶重新登錄系統(tǒng)。前端發(fā)出的每個請求都要求帶token，后端可以解析token獲得信息。當(dāng)請求出錯或者后端的返回碼（res.code）異常時系統(tǒng)會自動進行攔截，并給予錯誤提示。//創(chuàng)建一個axios實例constservice=axios.create({baseURL:process.env.VUE_APP_BASE_API_PRO,//url=baseurl+requesturltimeout:5000//requesttimeout})//請求發(fā)送之前的攔截器erceptors.request.use(config=>{//如果token存在，把token添加到請求的頭部if(store.getters.token){config.headers['token']=getToken()}returnconfig},error=>{returnPromise.reject(error)})//請求返回之后的處理erceptors.response.use(response=>{constres=response.dataif(res.code!==200){Message({message:res.msg||'服務(wù)器出錯',type:'error',duration:5*1000})},)在src/utils/http.js封裝了全局request攔截器、response攔截器、統(tǒng)一的錯誤處理和對于不同的返回碼的前端提示等。封裝Axios可以大大的減少調(diào)用Axios發(fā)送請求所產(chǎn)生的冗余，提高代碼的可讀性，運行效率，提高開發(fā)速度，借閱開發(fā)時間和降低維護成本。4.3.3系統(tǒng)管理模塊 用戶管理功能圖4.13用戶管理功能流程圖用戶管理功能流程如圖4.13所示，用戶信息以列表的形式進行展示。同時為了避免信息繁多，系統(tǒng)提供搜索框，用戶在搜索框填寫限定信息后，系統(tǒng)可以根據(jù)條件進行篩選用戶。選擇新增用戶會彈出對話框，填寫相應(yīng)的信息后，驗證無誤后即可添加新用戶。此外，可以重置用戶的密碼，對現(xiàn)有用戶的信息進行修改或者刪除該用戶等操作。用戶的信息基本展示如圖4.14所示：圖4.14用戶管理頁面角色管理功能 在為角色分配權(quán)限時，需要通過查詢后端獲取當(dāng)前所有的路由列表，同時使用el-tree組件加載該列表的數(shù)據(jù)從而進行數(shù)據(jù)的樹形圖展示。管理員可以勾選或取消節(jié)點來賦予或剝奪對應(yīng)的權(quán)限。圖4.15權(quán)限分配樹展示首先，forEach遍歷權(quán)限數(shù)據(jù)，通過item.chlidren來判斷是否還存在子節(jié)點，若不存在，則本節(jié)點為末級節(jié)點；若存在，遞歸調(diào)用，最終生成數(shù)據(jù)填充tree組件：//找出所有的回顯數(shù)據(jù)

checked(id,data,newArr){

data.forEach((item)=>{

if(item.menuId==id){

//是不是末級

if(item.children&&item.children.length==0){

newArr.push(item.menuId);

}

}else{

if(item.children&&item.children.length!=0){

this.checked(id,item.children,newArr);

}

}

});

returnres;

},菜單管理功能菜單管理主要是負(fù)責(zé)將該系統(tǒng)的所有路由數(shù)據(jù)進行錄入，以供管理員在角色管理權(quán)限時有數(shù)據(jù)可以選擇。在選擇新增按鈕時，前端會查詢庫中已有數(shù)據(jù)來構(gòu)造樹形圖讓用戶選擇新增菜單的上級菜單名稱，必要屬性為上級菜單，菜單名稱，路由名稱，路由地址和路徑，填寫完成后，會在選擇菜單的下一次生成新的菜單選項。圖4.16菜單管理界面 必填的字段可以通過表單驗證規(guī)則進行配置，在el-form-item的prop綁定相應(yīng)的屬性，在data中設(shè)置rules規(guī)則進行配置，若是用戶沒有填寫需要的字段，可以進行相應(yīng)的提示，如菜單名稱選擇的驗證規(guī)則，若是未填寫相關(guān)字段就提交，系統(tǒng)會提示紅色的“請?zhí)顚懖藛蚊Q”：<el-form-itemprop="title"label="菜單名稱">rules:{

title:[

{

trigger:"blur",

required:true,

message:"請?zhí)顚懖藛蚊Q",

},

],}4.3.5圖書管理圖書功能圖4.17圖書列表頁面 在這個界面，管理員可以清晰的看到庫存圖書的位置，庫存等信息，同時允許對庫存的書籍信息進行修改。在借書時數(shù)據(jù)庫借書表存儲的是借書人的id和圖書的id，因此當(dāng)修改圖書名稱時，借書信息也會在更新，方便了借閱的管理。此外，也可以添加新的書籍或刪除現(xiàn)有書籍。若是書籍不允許外借則可以填寫庫存為負(fù)的數(shù)目，則在借書時就會自動拒絕借書。4.3.6借閱管理模塊借書功能圖4.18借書流程圖前端在登錄時會在sessionStorage存儲用戶類型的信息，之后可以通過getItem(“userType”)來獲取用戶類型。根據(jù)用戶類型查詢相應(yīng)的權(quán)限后，經(jīng)由v-if判斷賬號是夠允許當(dāng)前用戶修改：若是讀者，賬戶默認(rèn)為自己的賬戶且不可修改；若類型為管理員，默認(rèn)為空且允許填寫。圖書列表的信息通過transfer穿梭框在下列展示，可以選擇圖書，點擊添加后信息添加至右框。填好借書賬戶和還書時間后選擇借書，系統(tǒng)調(diào)用message組件彈出相應(yīng)的提示信息：借書成功；或是庫存不足或不允許外借。借書成功3秒后網(wǎng)頁自動刷新。圖4.19圖書列表頁面還書功能圖4.20還書流程圖 在這個界面，用戶可以對在借閱中的圖書進行還書處理。在借書過程中，圖書有可能破損或者丟失，用戶需要點擊異常還書按鈕，選擇異常還書或者丟失選項并填寫相應(yīng)的備注。同時，需要根據(jù)公告上的異常還書條例進行賠償。到期未還書的數(shù)量在首頁會進行提示：圖4.21到期未還書數(shù)量（右上角） 因為在同一時刻存在很多用戶在借書還書，所以需要對借書還書操作加鎖防止數(shù)據(jù)的錯亂。借書時，系統(tǒng)首先會查詢當(dāng)前圖書庫存，若是庫存不足則拒絕此次借書申請；庫存充足，則庫存減1，同時將本次借書明細(xì)插入借書表。從查詢圖書庫存到庫存減1整個操作都是原子化的，某個過程中斷需要回退之前的所有操作。還書也是同理，不過并不需要庫存的判斷，之需要對庫存進行加1的操作。借閱信息查看圖4.22借閱信息界面所有的借閱信息，包括在借閱的，已還的，異常還書的都會在這個界面進行顯示，對于不同的到期狀態(tài)采用了兩種不同的顏色進行標(biāo)識：未到期為綠色，到期為歸還為紅色，清晰易懂。用戶可以根據(jù)上面豐富的搜索限制條件快速定位到某本圖書。除了顯示所有的借書還書信息，在該界面用戶還可以進行圖書的續(xù)期，延長圖書的借閱時間。對于到期未歸還的讀者，在歸還圖書時進行一定的處罰：圖4.23異常還書4.3.6基本功能模塊日期展示處理 系統(tǒng)中存在很多關(guān)于時間日期的展示，例如借書的開始結(jié)束時間、信息更新的時間、續(xù)期的時間等，這些數(shù)據(jù)在數(shù)據(jù)庫中存儲的格式為datetime，時間的具體時分秒并不需要被展示出來，所以在后端返回的時間更新了時區(qū)，設(shè)置了固定的格式，統(tǒng)一的進行了處理。@Data

publicclassLookBorrow{

@JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")

privateDateborrowTime;

@JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8")

privateDatereturnTime;

}常用功能的封裝 在前端代碼的編寫過程中，有一些功能需要經(jīng)常的調(diào)用，為了簡化開發(fā)流程，便于后期維護，把一些常用工具比如對象的復(fù)制，表單的清空、和信息彈框進行封裝，并將這些功能在main.js全局掛載：//對象的快速復(fù)制exportdefaultasyncfunctionobjCoppy(obj1,obj2){Object.keys(obj2).forEach(key=>{obj2[key]=obj1[key]})}//表單清空//formName:表單的ref屬性obj表單的數(shù)據(jù)域exportdefaultfunctionresetForm(formName,obj){//清空表單if(this.$refs[formName]){this.$refs[formName].resetFields();this.$refs[formName].clearValidate();}//清空數(shù)據(jù)域Object.keys(obj).forEach(key=>{obj[key]='';})}4.4本章小結(jié)在本章中主要闡述了系統(tǒng)的開發(fā)環(huán)境和關(guān)鍵技術(shù)選取，并對系統(tǒng)的總體框架、數(shù)據(jù)庫以及各個功能模塊進行了詳細(xì)設(shè)計并實現(xiàn)。 第5章系統(tǒng)測試與分析 第5章系統(tǒng)測試與分析5系統(tǒng)測試與分析在上一章中主要介紹了系統(tǒng)重要功能模塊的詳細(xì)設(shè)計，并按照設(shè)計邏輯使用SpringBoot加Vue.js框架進行了編碼實現(xiàn)。在本章內(nèi)容中主要闡釋對本系統(tǒng)的測試與分析。5.1系統(tǒng)測試環(huán)境本系統(tǒng)測試將在Windows10下使用谷歌、火狐、Edge瀏覽器進行測試。5.2功能測試本節(jié)將測試圖書管理系統(tǒng)重要的功能模塊：登錄注冊模塊、密碼修改、搜索模塊、借書模塊、續(xù)期模塊，還書模塊，人臉錄入登錄模塊。表5.1功能測試表編號功能點前置條件測試步驟預(yù)期結(jié)果實際結(jié)果是否通過TP-101注冊無用戶填寫信息進行注冊，獲得登錄權(quán)限。成功注冊成功注冊是TP-102登錄無用戶填寫賬號密碼，選擇讀者或者管理員點擊登錄成功登錄且顯示各自菜單欄成功登錄且顯示各自菜單欄是TP-103密碼修改用戶登錄賬戶點擊個人中心，選擇修改密碼，填寫相應(yīng)信息密碼修改成功密碼修改成功是TP-104搜索用戶登錄且在具有搜索功能的頁面對于各項條件輸入或者選擇，點擊搜索根據(jù)條件篩選結(jié)果成功根據(jù)條件篩選結(jié)果成功是TP-105管理員新增系統(tǒng)用戶2.管理員登錄賬戶管理員進入用戶管理界面，點擊新增，填寫相應(yīng)信息系統(tǒng)用戶新增成功系統(tǒng)用戶新增成功是TP-106管理員為用戶分配權(quán)限1.管理員登錄賬戶2.存在其他系統(tǒng)用戶管理員進入用戶管理，點擊分配權(quán)限，勾選用戶所需要的權(quán)限權(quán)限分配成功，該用戶的側(cè)邊欄顯示已分配的功能權(quán)限分配成功，該用戶的側(cè)邊欄顯示已分配的功能是編號功能點前置條件測試步驟預(yù)期結(jié)果實際結(jié)果是否通過TP-107修改用戶信息1.管理員登錄賬戶2.存在用戶1.管理員進入用戶或讀者管理2.修改用戶或讀者信息修改成功修改成功是TP-108刪除用戶信息1.管理員登錄賬戶對于選定的用戶點擊刪除刪除成功刪除成功是TP-109新增書籍分類1.管理員登錄賬戶管理員進入書籍分類管理，點擊新增，填寫分類點擊錄入新增成功并能在新增書籍時顯示已有分類列表新增成功并能在新增書籍時顯示已有分類列表是TP-110書籍錄入1.管理員登錄賬戶管理員進入書籍管理，點擊新增，填寫書籍信息點擊錄入書籍加入信息并在書籍列表顯示書籍加入信息并在書籍列表顯示是TP-111借書1.讀者登錄賬戶1.用戶選擇想要借閱的書籍2.選擇還書日期3.點擊借閱借閱書籍申請發(fā)送成功借閱書籍申請發(fā)送成功是TP-112審核1.管理員登錄賬戶2.存在讀者借閱書籍申請管理員對于讀者及其借閱的書籍檢查無誤后點擊審核審核成功，讀者可以借閱該書籍審核成功，讀者可以借閱該書籍是TP-113正常還書1.讀者登錄賬戶2.讀者歸還已借閱書籍讀者對于要歸還的書籍點擊還書或者批量還書還書成功還書成功是TP-114異常還書1.讀者登錄賬戶2.讀者借閱書籍存在異?；騺G失讀者對于要異常的書籍點擊異常還書，選擇并填寫相應(yīng)的備注，并給出相應(yīng)賠償異常還書成功異常還書成功是5.3非功能測試5.3.1性能測試本系統(tǒng)對于兼容性主流瀏覽器如谷歌，火狐，Edge瀏覽器，在主流瀏覽器的頁面視覺效果均符合需求。性能測試使用谷歌瀏覽器原生工具GoogleProfiler，圖5.1為性能分析圖，測試結(jié)果顯示，在采集樣本中響應(yīng)時間區(qū)間的為80-1800ms，符合需求要求加載和響應(yīng)時間小于4000ms，對于數(shù)據(jù)存儲和并發(fā)使用的場景下，系統(tǒng)依然能夠保持高效安全穩(wěn)定的運行。綜上所述，本系統(tǒng)是一套擁有高響應(yīng)和低延遲的圖書管理系統(tǒng)，并且操作界面簡明清晰，操作簡單，用戶能得到很好的體驗。圖5.1圖書管理系統(tǒng)樣本性能分析5.3.2安全性測試本系統(tǒng)的安全性測試主要從用戶登錄和書籍借閱進行測試。測試結(jié)果如表5.2所示。表5.2安全性測試表功能點測試步驟預(yù)期結(jié)果實際結(jié)果是否通過登錄測試輸入賬號、密碼