基于SSM的大學(xué)校園閑置物品管理系統(tǒng)設(shè)計摘要由于目前高校學(xué)生物品特別多，而且很多物品都是使用一段時間就被擱置了；或者有一部分的物品被扔掉，加上學(xué)校內(nèi)缺乏對這些閑置的物品進行統(tǒng)一的規(guī)劃、管理，不僅造成了資源浪費而且還污染環(huán)境。因此我們需要提供一個管理平臺對這些物品進行統(tǒng)一管理，而校園閑置物品管理系統(tǒng)采用的是一種線上捐贈，線上申領(lǐng)的一種模式，通過這種模式解決了不僅資源浪費、閑置物品占用空間、學(xué)校環(huán)境衛(wèi)生難以管理的問題，還節(jié)省了捐贈人的時間、空間，實現(xiàn)了捐贈簡便，收納清晰，也實現(xiàn)了資源循環(huán)利用。本系統(tǒng)采用SpringBoot+Vue前后端分離開發(fā)模式，開發(fā)工具為IntelliJIDEA軟件，使用NavicatforMySQL數(shù)據(jù)庫進行存儲系統(tǒng)的數(shù)據(jù)，采用Springboot框架等技術(shù)進行編碼。本系統(tǒng)角色分為普通用戶、超級管理員、分級管理員的角色。只有登錄成功后才能對系統(tǒng)進行相關(guān)的操作，系統(tǒng)會根據(jù)登錄的角色在頁面上顯示不同的功能模塊，游客注冊成普通用戶后可以捐贈物品、申領(lǐng)物品，以及對領(lǐng)用物品的一個評價；管理員對捐贈的物品審核，發(fā)布公告，對用戶信息進行管理等等。關(guān)鍵詞：校園；閑置物品；Springboot框架；Vue目錄78521緒論 緒論1.1系統(tǒng)設(shè)計概述傳統(tǒng)的捐贈方式是把物品放到規(guī)定地點的這種流程比較麻煩，而本系統(tǒng)采用的是線上捐贈、申領(lǐng)的方式，通過這種方式不僅能夠節(jié)約用戶的捐贈時間、購物物品的成本，還能提高閑置物品的利用率，解決資源浪費的問題。目前閑置物品管理系統(tǒng)實現(xiàn)了以下幾大功能：閑置發(fā)布、閑置論壇、申領(lǐng)管理、個人信息、領(lǐng)用記錄、捐贈記錄、用戶管理、公告管理、物品管理、捐贈統(tǒng)計、領(lǐng)用統(tǒng)計、捐贈排行、評價管理等等。1.2使用技術(shù)說明1.2.1Springboot框架簡介SpringBoot是一個基于微服務(wù)的框架[張旭剛,張昕,高若寒.基于SpringBoot與MyBatis框架構(gòu)建動態(tài)讀寫分離模型[J].微型電腦應(yīng)用,2021,(2):84-86,98]，如果使用該框架可非常巧妙的簡化應(yīng)用開發(fā)、部署。言簡意賅地說，SpringBoot是spring4.0以上版本的升華張旭剛,張昕,高若寒.基于SpringBoot與MyBatis框架構(gòu)建動態(tài)讀寫分離模型[J].微型電腦應(yīng)用,2021,(2):84-86,98邱丹萍.應(yīng)用springboot的食堂訂餐管理系統(tǒng)設(shè)計[J].福建電腦,2020,(6)：115-1171.2.2MySQL數(shù)據(jù)庫簡介MySQL是一款非常好用的、開源的數(shù)據(jù)庫「劉陽娜.大數(shù)據(jù)下的MySQL數(shù)據(jù)庫的效率優(yōu)化[J].信息通信.2017(12):111-112」，它的執(zhí)行效率很高、不會占用太多的存儲空間和多用戶多線程等特點。所以在開發(fā)小型項目常常會優(yōu)先選擇它劉陽娜.大數(shù)據(jù)下的MySQL數(shù)據(jù)庫的效率優(yōu)化[J].信息通信.2017(12):111-1121.2.3VUE簡介Vue是一個搭建前端頁面的框架，該開發(fā)框架是一個輕量MVVM(Model-view-ViewModel),它的原理就是利用數(shù)據(jù)的雙向綁定，使數(shù)據(jù)動態(tài)的變化，數(shù)據(jù)驅(qū)動加組件化的前端開發(fā)「王志文.Vue+Elementui+Echarts在項目管理平臺中的應(yīng)用[J].山西科技,2020,35(6):45-47」王志文.Vue+Elementui+Echarts在項目管理平臺中的應(yīng)用[J].山西科技,2020,35(6):45-471.2.4IntelliJIDEA簡介IntelliJIDEA的開發(fā)語言為Java語言「萬江平,嚴(yán)明,楊建梅.用Java語言開發(fā)專家系統(tǒng)[J].計算機應(yīng)用研究,2000,17(5):62-64」，也是eclipse工具的后一代產(chǎn)品，IntelliJIDEA被稱為開發(fā)工具中的頂尖，特別的方便好用。尤其是在代碼自動提示、代碼重構(gòu)、JavaEE支持等方面的功能[萬江平,嚴(yán)明,楊建梅.用Java語言開發(fā)專家系統(tǒng)[J].計算機應(yīng)用研究,2000,17(5):62-64張學(xué)敏.基于微信小程序的體質(zhì)健康管理系統(tǒng)設(shè)計與實現(xiàn)[J].電腦知識與技術(shù),2019,15(22):103-1061.2.5JPA簡介Spring為Springdatajpa提供了一套精簡開發(fā)的框架，可按照定義好的規(guī)則寫mapper層的接口，就算沒有寫實現(xiàn)接口，也不妨礙對數(shù)據(jù)庫的訪問。JPA中能夠支持面向?qū)ο蟮母呒壧匦裕热纾侯愔g的繼承、多態(tài)和類之間的復(fù)雜關(guān)系[傅莞龍,長傳武，彭金安.使用SpringData和JPA在JavaEE系統(tǒng)中簡化持久層[j].電子世界,2017,(6):88-91]，除此之外還提供了特別好用功能，比如：傅莞龍,長傳武，彭金安.使用SpringData和JPA在JavaEE系統(tǒng)中簡化持久層[j].電子世界,2017,(6):88-911.3可行性分析1.3.1技術(shù)可行性根據(jù)詳細(xì)設(shè)計的功能、性能及實現(xiàn)系統(tǒng)等各方面的條件綜合考量，本項目設(shè)計的后臺采用的是基于SpringBoot+Jpa，前端基于vue框架的一個系統(tǒng)。我有自學(xué)過Springboot框架以及Vue框架，并使用該技術(shù)實現(xiàn)過一些小的項目，而且Springboot的配置大大的簡化了Spring應(yīng)用的搭建和開發(fā)、JPA可非常高效的處理復(fù)雜查詢，所以我覺得利用目前技術(shù)可以實現(xiàn)本系統(tǒng)的功能。1.3.2操作可行性本系統(tǒng)的界面設(shè)計良好，可視化菜單通俗易懂。而本系統(tǒng)就只需要簡單的登登陸操作后根據(jù)導(dǎo)航欄的索引就能找到自己需要的物品。2需求分析2.1系統(tǒng)功能需求分析本系統(tǒng)要求實現(xiàn)對捐贈物品信息的管理，主要管理用戶發(fā)布的閑置物品、領(lǐng)用物品、對領(lǐng)用物品評價、閑置論壇、捐贈統(tǒng)計、領(lǐng)用統(tǒng)計等信息。閑置發(fā)布:用戶可以對閑置物品進行發(fā)布處理。申領(lǐng)管理:用戶可以領(lǐng)用自己需要的物品以及對領(lǐng)用的物品進行評價。閑置論壇：用戶可以對審核通過的物品進行評論、回復(fù)別人的評論。捐贈統(tǒng)計：統(tǒng)計每天用戶捐贈的數(shù)量。領(lǐng)用統(tǒng)計：統(tǒng)計每天用戶領(lǐng)用的數(shù)量。2.2功能需求描述2.2.1注冊模塊游客只有注冊成功變成普通用戶之后才擁有操作系統(tǒng)的權(quán)限。詳細(xì)的操作步驟：游客進入到系統(tǒng)的操作頁面，填寫注冊表單信息后點擊注冊按鈕，注冊成功可進行登陸。2.2.2登錄模塊只有通過此模塊，才能進入本系統(tǒng)。詳細(xì)的操作步驟：(1)系統(tǒng)的操作人員進入到閑置物品系統(tǒng)的登錄頁面。(2)系統(tǒng)的操作人員使用用戶名和密碼進行登錄2.2.3找回密碼用戶如果忘記原來的密碼，可以點擊“忘記密碼”方式找回密碼。詳細(xì)的操作步驟：系統(tǒng)的操作人員點擊登錄頁面上的“忘記密碼”的鏈接進入找回密碼頁面，輸入登錄名和郵箱后點擊“驗證”按鈕，只有登錄名和郵箱都正確才會彈出一個顯示原始密碼的彈窗。2.2.4前臺主頁模塊前臺主頁的上方是此項目的logo，右邊是發(fā)布的公告，最上方是菜單欄。每個菜單欄下面有不同的子菜單，游客注冊成普通用戶后，才有操作菜單的權(quán)利。詳細(xì)操作步驟：(1)系統(tǒng)根據(jù)操作人員的登錄名和角色類別，查詢當(dāng)前用戶的權(quán)限。(2)系統(tǒng)根據(jù)權(quán)限顯示可操作的頁面。2.2.5管理員功能模塊操作用戶：管理員1.用戶管理系統(tǒng)管理員成功登陸進入系統(tǒng)之后，可以對用戶進行查看。詳細(xì)操作為：(1)界面上顯示所有用戶信息，如果管理員發(fā)現(xiàn)有不良的違規(guī)賬號，可停用該賬號。(2)系統(tǒng)管理員可以輸入用戶姓名進行模糊查詢。(3)管理員可以導(dǎo)出用戶的數(shù)據(jù)。2.公告管理系統(tǒng)管理員登錄成功進入系統(tǒng)后，可以對公告進行發(fā)布，查看、編輯、搜索公告，也可以選擇是否啟用公告。詳細(xì)操作為：(1)公告管理界面上顯示所有公告信息，管理員點擊“編輯”可編輯現(xiàn)有的公告。(2)管理員可以點擊“啟用/停用”按鈕，可啟用/停用現(xiàn)有的公告，如果選擇啟用，則該條公告信息顯示在首頁上。(3)可以輸入與“內(nèi)容”這個字段有關(guān)的關(guān)鍵字，進行模糊搜索。3.物品管理系統(tǒng)管理員登錄成功進入系統(tǒng)后，可以對用戶捐贈的物品進行查看、審核的操作。詳細(xì)操作為：界面上顯示所有物品信息，管理員根據(jù)用戶上傳的物品圖品、說明、新舊程度進行審核，如果審核通過，顯示在首頁上。4.評價管理操作用戶：管理員、分級管理員管理員、分級管理員登陸系統(tǒng)后可查看用戶所有的評價，以及刪除惡意評價。詳細(xì)操作：管理員、分級管理員在在評價管理界面查看所有用戶的評價，點擊“刪除”按鈕，可刪除一些惡意的評論。5.領(lǐng)用統(tǒng)計管理操作用戶：管理員管理員登陸成功之后進入系統(tǒng)之后，查看領(lǐng)用統(tǒng)計數(shù)量詳細(xì)操作：管理員可在領(lǐng)用統(tǒng)計模塊中點擊柱狀圖上的色塊，顯示領(lǐng)用數(shù)量，查看折線圖上的領(lǐng)用的數(shù)量的變化情況。6.捐贈統(tǒng)計管理操作用戶：管理員管理員登陸成功之后進入系統(tǒng)之后，查看捐贈的統(tǒng)計數(shù)量詳細(xì)操作：管理員可在捐贈統(tǒng)計模塊中點擊柱狀圖上的色塊，顯示捐贈數(shù)量，查看折線圖上的捐贈的數(shù)量的變化情況。2.2.6個人中心模塊操作用戶：管理員、普通用戶1.個人信息系統(tǒng)管理員/用戶登錄成功進入系統(tǒng)后，可以修改個人的信息。詳細(xì)操作為：界面上顯示當(dāng)前用戶的所有信息，選擇需要修改的文本框進行修改后點擊保存即可。2.領(lǐng)用記錄系統(tǒng)管理員/用戶登錄成功進入系統(tǒng)后，可以查看、搜索領(lǐng)用的記錄。詳細(xì)操作為：點擊領(lǐng)用記錄，顯示目前所有領(lǐng)用的物品，搜索與“商品名”這個字段，有關(guān)的關(guān)鍵字，進行模糊搜索單條記錄。3.個人閑置系統(tǒng)管理員/用戶登錄成功進入系統(tǒng)后，可以查看、搜索、修改捐贈的物品信息。詳細(xì)操作為：(1)點擊個人閑置，顯示目前所有捐贈的物品，點擊“修改介紹”按鈕，可修改捐贈物品的信息。(2)在搜索框中輸入與“商品名”這個字段有關(guān)的關(guān)鍵字，進行模糊搜索單條記錄。2.2.7申領(lǐng)管理模塊操作用戶：管理員、普通用戶系統(tǒng)管理員登錄成功進入系統(tǒng)后，可以查看、搜索申領(lǐng)管理頁面物品的記錄；也可點擊“領(lǐng)用此物品”領(lǐng)用物品以及點擊“刪除”按鈕可刪除待領(lǐng)用物品。詳細(xì)操作為：(1)界面上顯示用戶領(lǐng)用的記錄，可以輸入與“商品名”這個字段有關(guān)的關(guān)鍵字，進行模糊搜索單條記錄。(2)用戶點擊“領(lǐng)用此物品”按鈕，領(lǐng)用該物品，點擊“刪除”可刪除加入申領(lǐng)管理的待領(lǐng)用物品2.2.8物品評價模塊操作用戶：管理員、普通用戶管理員、普通用戶登錄成功進入系統(tǒng)之后，都可以對物品進行評論。詳細(xì)操作為：管理員、用戶可以點擊首頁上的“查看詳情”進入商品詳情頁面，點擊“更多評論”可查看所有的評論，如果用戶領(lǐng)取物品之后，可對物品進行評價。2.2.9閑置發(fā)布模塊操作用戶：管理員、普通用戶管理員、用戶登錄成功進入系統(tǒng)之后，可以捐贈物品。詳細(xì)操作為：(1)如果是“管理員”，填寫捐贈物品的信息，點擊“捐贈物品”提交成功之后無需進行審核，且會顯示相應(yīng)的信息在首頁。(2)如果是“普通用戶”，填寫捐贈物品的信息，點擊“捐贈物品”提交成功之后需要進行審核，且會顯示相應(yīng)的信息在首頁。2.2.10閑置論壇模塊操作用戶：管理員、普通用戶管理員、用戶登陸成功進入系統(tǒng)之后，查看目前所有物品帖子的評論、新增評論以及回復(fù)評論。詳細(xì)操作為：點擊已存在的物品帖子，可查看物品帖子的詳情、評論，以及發(fā)布新的評論、回復(fù)評論。2.2.11捐贈排行榜模塊操作用戶：管理員管理員登陸成功之后進入系統(tǒng)之后，查看個人捐贈排行前十的名單，分類捐贈的信息3概要設(shè)計3.1系統(tǒng)結(jié)構(gòu)設(shè)計閑置物品管理系統(tǒng)的功能構(gòu)造圖如圖3.1所示。圖3.1閑置物品管理系統(tǒng)Fig3.1Idlegoodsmanagementsystem3.2數(shù)據(jù)庫表設(shè)計3.2.1數(shù)據(jù)庫表邏輯設(shè)計用戶基本信息表E-R圖：圖3.2用戶基本信息表Fig3.2Userbasicinformationtable物品信息表E-R圖：圖3.3物品信息表Fig3.3Informationtableofidlegoods公告信息表E-R圖：圖3.4公告信息表Fig3.4Announcementinformationsheet評論信息表E-R圖：圖3.5評論信息表Fig3.5Commentinformationtable圖3.6圖片鏈接表Fig3.6Linktoitempicture圖3.7交換車信息表Fig3.7Shoppingcarttable圖3.8回復(fù)信息表Fig3.8Replyinformationform本系統(tǒng)的數(shù)據(jù)存儲共有七個表，下面為各表的詳細(xì)描述(用下劃線標(biāo)注本表的主鍵字段)：用戶基本信息表（用戶ID，密碼，登錄名，角色分類，昵稱，注冊時間，電話，郵箱）物品信息表（物品ID，捐贈用戶ID，物品名，物品介紹，物品新舊程度，捐贈時間，審核狀態(tài)，積分，聯(lián)系電話，自取地址）公告信息表（公告ID，用戶ID，公告內(nèi)容，公告狀態(tài)，創(chuàng)建時間）評論信息表（評論ID，評論用戶ID，物品ID,評論內(nèi)容，評論時間，評分）領(lǐng)用表（圖片ID，物品ID，圖片地址）領(lǐng)用車表（用戶ID，物品ID）物品照片鏈接表（圖片ID，物品ID，圖片地址）回復(fù)評論表（回復(fù)ID，物品ID，評論ID，回復(fù)內(nèi)容，創(chuàng)建時間，狀態(tài)）3.2.2數(shù)據(jù)庫表物理設(shè)計本系統(tǒng)包含8張數(shù)據(jù)表：基本信息表(sys_user)、公告表(t_announcement)、物品表(t_goodsitem)、評論表(t_goodsScore)、圖片表(t_goodsurl)、領(lǐng)用表(t_orders)、領(lǐng)用車表(t_shopcar)、回復(fù)評論表((t_goodsScoreReplay)的物理設(shè)計，如下描述：表3.1用戶基本信息表Table3.1Userbasicinformationtable字段名字段說明字段類型字段長度是否為空備注id用戶idvarchar100notnull主鍵nickName昵稱varchar30nullloginName登錄名varchar100nullpassword密碼varchar100nullsex性別smallint6nullmobilePhone手機號碼varchar50nullemail郵箱varchar50nullstatus狀態(tài)varchar100nullregisterDate日期datetime0nullcategoryId人員類型int11null表3.2物品信息表Table3.2Iteminformationsheet字段名字段說明字段類型字段長度是否為空備注ididbigint20notnull主鍵goodsId物品idvarchar50nulldscribe物品介紹varchar500nullupstatus審核狀態(tài)int11notnullcreateTime創(chuàng)建時間datetime0nullgoodsLevel新舊程度varchar50nulluserId捐贈用戶idbigint50notnullprice積分doublenotnullphone聯(lián)系電話varchar50notnulladdress地址varchar100notnull表3.3公告信息表Table3.3Announcementinformationsheet字段名字段說明字段類型字段長度是否為空備注id公告idbigint100notnull主鍵status公告狀態(tài)varchar30nullremarks公告內(nèi)容varchar1000nullcreateTime創(chuàng)建時間datetime0nullupdateTime更新時間datetime0null表3.4評論信息表Table3.4Commentinformationtable字段名字段說明字段類型字段長度是否為空備注ididbigint20notnull主鍵status狀態(tài)varchar50nullgoodsId物品idvarchar255nullgoodsScore評分decimal20nullevaluation評論內(nèi)容datetime0nullcreateTime創(chuàng)建時間varchar50null表3.5領(lǐng)用信息表Table3.5Applicationinformationform字段名字段說明字段類型字段長度是否為空備注id物品idbigint50notnull主鍵img_url圖片urlvarchar200notnullimg_id圖片idvarchar50notnullgoods_id物品idvarchar50notnullstatus領(lǐng)用狀態(tài)int20notnullname物品名varchar30notnullcreateTime領(lǐng)用時間datetimenotnull表3.6領(lǐng)用車表Table3.6Collectioninformationtable字段名字段說明字段類型字段長度是否為空備注id領(lǐng)用車idbigint50notnull主鍵goodsId物品idvarchar50notnulluserId用戶idvarchar50notnull表3.7圖片信息表Table3.7Pictureinformationsheet字段名字段說明字段類型字段長度是否為空備注goods_id物品idvarchar50nullimg_url圖片urlvarchar200nullimg_id圖片idvarchar50notnull主鍵表3.8回復(fù)信息表Table3.8Replyinformationform字段名字段說明字段類型字段長度是否為空備注replayId回復(fù)idvarchar50notnull主鍵goodsId圖片urlvarchar200notnullscoreId評論idvarchar50notnullcreateTime創(chuàng)建時間datetimenullstatus狀態(tài)int6nullevaluation回復(fù)內(nèi)容varchar200notnull4系統(tǒng)實現(xiàn)4.1注冊模塊游客點擊首頁上的注冊菜單，填寫信息點擊注冊按鈕，注冊成功后方可登陸操作系統(tǒng)注冊頁面如圖4.1所示：圖4.1注冊界面Fig4.1Registerscreen實現(xiàn)思路：后端：在注冊頁面上輸入用戶信息后點擊注冊按鈕，后臺調(diào)用saveOrUpdateSysUser()方法接收用戶輸入的數(shù)據(jù)信息。后端首先判斷用戶id是否存在，如果不存在，則后端調(diào)用insert()方法新增，并把新增的用戶信息保存到數(shù)據(jù)庫。前端：填寫注冊表單的內(nèi)容，點擊注冊按鈕后觸發(fā)@click="register()點擊事件，前后端交互使用axios.post('api/sysUserMgmt/saveOrUpdateSysUser.do',jsonObj)，且通過post請求的方式把數(shù)據(jù)發(fā)送到后端，如果response.data.su-ccess=true，則前端會彈出注冊成功的提示內(nèi)容。核心代碼：后端：后端：定義一個方法：saveOrUpdateSysUser(UserDtodto){//如果獲取到id為空，則創(chuàng)建一個新的對象LongdataId=dto.getDataId();if(null==dataId||dataId<0||dataId==0){//新增對象，并調(diào)用mapper層的insert（）方法，把新注冊的用戶的信息寫入數(shù)據(jù)庫user=newUser();user.setRegisterDate(now);user.setCreateTime(now);user.setCategoryId(3);//默認(rèn)注冊是普通用戶this.sysUserMapper.insert(user);}前端：//根據(jù)請求路徑找到接口，并把注冊的信息傳到后端axios.post('api/sysUserMgmt/saveOrUpdateSysUser.do',jsonObj).then(function(response){//如果后端接口響應(yīng)返回的成功信息，則彈出注冊成功的消息，否則就返回注冊失敗if(response.data.success){if(response.data.success){self.dialogValue="注冊成功";}else{_this.$message.error(response.data.msg);}}4.2前臺登錄模塊當(dāng)啟動本項目的時候，首先需要用戶登陸成功之后才有權(quán)限操作系統(tǒng)，如果以游客身份進去，可以查看物品的詳情、評論，但想要操作別的菜單的時候，則會有提示信息“請登錄”。登錄頁面如圖4.2所示：圖4.2登錄界面Fig4.2Loginscreen實現(xiàn)思路：后端：在登錄頁面上輸入登錄信息，點擊登錄，調(diào)用后端的userLogin()方法接收前臺表單發(fā)送過來的數(shù)據(jù)，查找數(shù)據(jù)庫的數(shù)據(jù)與用戶輸入的數(shù)據(jù)進行對比，如果用戶存在且密碼正確，則登錄成功，否則登錄失敗。前端：用戶填寫登錄的信息后點擊登陸后觸發(fā)登陸的點擊事件，通過axois.post('sysUserMgmt/userLogin.do',jsonObj).then，調(diào)用userlogin()接口，如果后端響應(yīng)信息成功，用戶存在，密碼匹配成功則登錄成功，同時保存token的信息（token是用來保存用戶的登陸狀態(tài)，根據(jù)token找用戶的一些信息）核心代碼:后端：后端：定義userlogin(){//定義String類型的變量login接收頁面?zhèn)魅氲挠脩裘?/定義String類型的變量password接收頁面?zhèn)魅氲拿艽aIf(如果用戶名和密碼不為空){//首先根據(jù)用戶的登錄名查出登錄的密碼,然后再用一個CommonUser類型的變量resultUser接收用戶傳過來的密碼CommonUserresultUser=this.sysUserMapper.findPassword(commonUser);If(resultUser=null){"賬號或密碼錯誤！！！"}If(resultUser=！null){//將用戶輸入的密碼進行加密}If(如果加密后的密碼==數(shù)據(jù)庫的密碼){//登陸成功}else{"賬號或密碼錯誤！！！"}If(status=！2){//將用戶輸入的密碼進行加密}}}前端：//根據(jù)路徑發(fā)送請求，傳遞參數(shù)并調(diào)用接口，響應(yīng)服務(wù)器的內(nèi)容axios.post('api/sysUserMgmt/userLogin.do',jsonObj).then(function(response){//用sessionStorage保存用戶的id、name，保存這個id、name是為了實現(xiàn)數(shù)據(jù)共享window.sessionStorage.setItem("userId",response.data.object.userId);window.sessionStorage.setItem("name",response.data.object.nickName);//彈出提示的內(nèi)容self.dialogValue="登錄成功";//將用戶的token保存到vuex中，訪問其他接口的時候需要攜帶token進行驗證localStorage.setItem('Authorization',response.data.object.token);}else{self.$message.error(response.data.msg);}//self.centerDialogVisible=true;//self.centerDialogVisible=true;}).catch(function(error){console.log(error);});4.3主頁的設(shè)計與實現(xiàn)后臺主頁是index.vue頁面,index-header.vue由index-body.vue、index-footer.vue、index-logo.vue界面組成。后臺主頁設(shè)計如圖4.3所示：圖4.3首頁界面Fig4.3Homepage實現(xiàn)思路：后端：在GoodsController控制層調(diào)用service層getIndexGoods()方法，根據(jù)接收到的index值判斷可調(diào)用mapper層的那個方法，以此控制物品顯示的位置。如果index=1，則調(diào)用mapper層的findAllSortListByHot()，物品就顯示在“熱門精品”的位置，index=3，則調(diào)用findAllSortListByLevel(),物品顯示在“九成新”的位置前端：通過axios.get(‘a(chǎn)pi/sysGoodsMgmt/getIndexGoods.do/index’),調(diào)用后端的接口發(fā)送get請求，并把index作為參數(shù)傳遞給后端，后端執(zhí)行成功后，再遍歷服務(wù)器響應(yīng)回來的數(shù)據(jù)，通過物品的id再次向后端發(fā)送請求，為每個物品找到對應(yīng)的圖片。核心代碼：后端：后端：publicList<Goods>getIndexGoods(intindex){List<Goods>list=null;//獲取熱門精品if(index==1){list=goodsMapper.findAllSortListByHot();}else{//獲取9新以上list=goodsMapper.findAllSortListByLevel(90);}returnlist;}前端：axios.get('api/sysGoodsMgmt/getIndexGoods.do/1').then((response)=>{self.data1=response.data;$(self.data1).each(function(index,element){letjsonObj={};jsonObj.goodsId=element.goodsId;//為每個表格元素加載圖片數(shù)據(jù)，主圖$.get("http://localhost:8083/api/sysGoodsMgmt/getGoodsMainImg.do",jsonObj,function(data){//本地映射到9090端口，部署到遠(yuǎn)程服務(wù)器需要修改這里，服務(wù)端返回的imgUrl應(yīng)該為相對路徑，這里圖片名字就行element.picture="http://localhost:9090/"+data.imgUrl;//因為數(shù)組單值更新不會引起Vue重新渲染，手動通知Vue渲染self.$set(self.data1,index,element);console.log(element)},"json");4.4閑置發(fā)布模塊普通用戶可在閑置發(fā)布頁面發(fā)布閑置物品，如果管理員審核通過后可在首頁顯示。閑置發(fā)布如圖4.4所示：圖4.4閑置發(fā)布界面Fig4.4IdlePublishing實現(xiàn)思路：后端：在閑置發(fā)布頁面上輸入物品信息點擊捐贈按鈕，后臺調(diào)用saveOrUpdateSysUser(goods)方法接收用戶輸入的數(shù)據(jù)信息。后端首先判斷用物品id是否存在，如果不存在，則后端調(diào)用insert()方法新增，并把新增的用戶信息保存到數(shù)據(jù)庫。前端：在捐贈按鈕上綁定click="submitForm('submitGoodsForm')點擊事件，當(dāng)”點擊閑置捐贈”按鈕時觸發(fā)點擊事件，先判斷用戶是否已經(jīng)上傳圖片，如果未上傳，則彈出提示，如果已傳，其他信息也填寫完畢時，通過ajax.post(url,pram)根據(jù)url找到調(diào)用后端的接口，并把物品信息傳遞到后端，如果后端響應(yīng)回來數(shù)據(jù),則彈出成功提示。核心代碼：后端：后端：控制層：createGoods(@RequestBodyGoodsDtogoods){//調(diào)用service層的方法this.goodsService.saveOrUpdateGoods(goods);}Service層：Service層：LongdataId=dto.getDataId();//用來接收id,如果接收到的id為空，則創(chuàng)建一個物品對象if(null==dataId||dataId<0){//新增一個物品對象goods=newGoods();goods.setCreatorId(dto.getCreatorId());goods.setCreateTime(now);if(null==dataId||dataId<0){//新增goods=newGoods();goods.setCreatorId(dto.getCreatorId());goods.setCreateTime(now);}else{goods=this.goodsMapper.selectById(dataId);}調(diào)用this.goodsMapper.insert(goods);}前端：submitForm(submitGoodsForm){

if(this.submitFlag){

this.$refs[submitGoodsForm].validate((valid)=>{

if(valid){

letself=this;

//獲取當(dāng)前登錄的用戶this.submitGoodsForm.userId=window.sessionStorage.getItem("userId");

letjsonMsg=JSON.stringify(this.submitGoodsForm);

//調(diào)用后端接口，this.submitgoodform作為參數(shù)axios.post('api/sysGoodsMgmt/createGoods.do',this.submitGoodsForm).then(function(response){if(response.data.success){self.dialogValue=response.data.msg;}else{self.dialogValue=response.data.msg;self.$message.error(response.data.msg);

returnfalse;

}

});

this.submitFlag=false;

}else{

this.dialogValue="請先上傳商品圖";

this.centerDialogVisible=true;

}

}4.5物品審核模塊管理員可對用戶捐贈的物品進行審核，如果審核通過，則在首頁上顯示，否則不顯示，也可對已上架的物品下架，下架之后不顯示在首頁。物品審核頁面如圖4.5所示：圖4.5閑置物品審核界面Fig4.5Auditofidleitems實現(xiàn)思路：后端：在GoodsController控制層中調(diào)用service層的changeGoodsStatus()方法。首先判斷物品id是否存在，如果id存在，通過id找到需要審核的某條物品記錄，然后再判斷這個物品狀態(tài)，如果處于“下架”狀態(tài)，可改變狀態(tài)值，讓該物品上架。前端：前端點擊“審核上架”“審核下架”，根據(jù)按鈕觸發(fā)點擊事件，并獲取到相應(yīng)觸發(fā)點數(shù)據(jù)id，通過axios.post(api/sysGoodsMgmt/changeGoodsStatus.do,jsonbj),調(diào)用后端的審核接口，并把物品狀態(tài)status封裝成jsonObj的形式傳遞給后端接口，如果審核成功，則彈出成功提示，否則彈出失敗的提示。核心代碼：后端：后端：//查詢所有的捐贈物品publicList<Goods>getAllGoods(){//查詢t_goodsitem表，返回多條記錄，queryWrapper是mybatisplus中實現(xiàn)查詢的對象封裝操作類QueryWrapper<Goods>qw=newQueryWrapper<>();returnthis.goodsMapper.selectList(qw);}//修改審核狀態(tài)publicvoidchangeGoodsStatus(StringgoodsId){QueryWrapper<Goods>qw=newQueryWrapper<>();qw.eq("goodsId",goodsId);Goodsgoods=this.goodsMapper.selectOne(qw);if(null!=goods){if(goods.getUpStatus()==1){goods.setUpStatus(2);//1為未審核下架狀態(tài)，2審核上架狀態(tài)}else{goods.setUpStatus(1);}this.goodsMapper.updateById(goods);}}前端：mounted(){//getAllGoods所有用戶捐贈的物品letjsonObj={};letself=this;axios.post('api/sysGoodsMgmt/getAllGoods.do',jsonObj).then((response)=>{letvalues=response.data.object;this.tableData=response.data.object;//為每個表格元素加載圖片數(shù)據(jù)，主圖$(self.tableData).each(function(index,element){letjsonObj={};jsonObj.goodsId=element.goodsId;$.get("http://localhost:8083/sysGoodsMgmt/getGoodsMainImg.do",jsonObj,function(data){element.picture="http://localhost:9090/"+data.imgUrl;//因為數(shù)組單值更新不會引起Vue重新渲染，手動通知Vue渲染self.$set(self.tableData,index,element);this.tableData=response.data.object;//為每個表格元素加載圖片數(shù)據(jù)，主圖$(self.tableData).each(function(index,element){letjsonObj={};jsonObj.goodsId=element.goodsId;$.get("http://localhost:8083/sysGoodsMgmt/getGoodsMainImg.do",jsonObj,function(data){element.picture="http://localhost:9090/"+data.imgUrl;//因為數(shù)組單值更新不會引起Vue重新渲染，手動通知Vue渲染self.$set(self.tableData,index,element);},"json");});changeStatus(index,row){letjsonObj={};jsonObj.goodsId=row.goodsId;let_this=this;axios.post('api/sysGoodsMgmt/changeGoodsStatus.do',jsonObj).then((response)=>{if(response.data.success){_this.$message({message:'修改成功！',type:'success'});_this.reload();}}).catch((error)=>{console.log(error);//異常});用戶可查看捐贈帖子的詳情，查看該帖子所有的評論、發(fā)表自己的評論以及回復(fù)評論。閑置論壇頁面如圖4.6所示：圖4.6閑置論壇界面Fig4.6IdleForum實現(xiàn)思路：后端：先在GoodsController控制層中調(diào)用getAllGoodsPost()，查出論壇頁面的物品信息，然后在該控制層調(diào)用findOneByGoodsId(StringgoodsId)方法，可根據(jù)方法里的物品id，查看物品帖子的詳情，再調(diào)用mapper層的listGoodsScore(id)方法，可根據(jù)物品id查出目前已有的評論信息。可在GoodsScoreController控制層中調(diào)用saveGoodsScore()方法，且根據(jù)接受到的物品id、用戶id、評論等信息作為此方法的參數(shù)，執(zhí)行該方法可新增評論。然后在GoodsReplayController控制層中調(diào)用saveGoodsScore(scoreDto)且根據(jù)接受到的物品id、評論id等信息作為此方法的參數(shù),再調(diào)用insert()方法執(zhí)行回復(fù)評論操作。前端：先通過axios.post('api/sysGoodsMgmt/findOneByGoodsId.do',jsonObj)調(diào)用后端的接口且把物品id作為參數(shù)請求服務(wù)器，找到關(guān)于該物品的帖子評論，則服務(wù)器響應(yīng)后端數(shù)據(jù)，前端結(jié)合v-model指令把數(shù)據(jù)渲染。然后再次通過Post方法發(fā)送請求，將前端渲染的信息保存下來進行新增評論，如新增成功，則有提示信息評論成功，同時前端使用reload()方法重新加載頁面數(shù)據(jù)，顯示新的評論信息。核心代碼：后端：后端：論壇頁面信息：List<GoodsDto>goodsDtos=this.goodsMapper.getAllGoodsPost();論壇詳情頁：publicGoodsDtofindOneByGoodsId(StringgoodsId){GoodsDtogoods=goodsMapper.findOneByGoodsId(goodsId);List<GoodsScore>goodsScores=goodsMapper.listGoodsScore(goodsId);List<GoodsScore>goodsScoreList=goodsMapper.listAllGoodsScore(goodsId);doubletmpScore=0;doublescoreCount=0;if(null!=goodsScores){goods.setGoodsScoreList(goodsScores);for(GoodsScorescore:goodsScoreList){tmpScore=tmpScore+score.getGoodsScore();}scoreCount=tmpScore/goodsScoreList.size();//平均分，goods.setTotalNum(goodsScoreList.size());}Stringaa=String.format("%.1f",scoreCount);goods.setScoreCount(Double.valueOf(aa));新增評論：publicvoidsaveGoodsScore(GoodsScoreDtodto){//當(dāng)前時間Datenow=JodaTimeUtils.getCurrentDate();if(null==dto){thrownewPreconditionCheckFailedException("未獲取商品信息");}GoodsScoregoodsScore=newGoodsScore();...this.goodsScoreMapper.insert(goodsScore);}回復(fù)評論：回復(fù)評論：publicvoidsaveGoodsScore(GoodsReplayDtodto){//當(dāng)前時間Datenow=JodaTimeUtils.getCurrentDate();if(null==dto){thrownewPreconditionCheckFailedException("未獲取商品信息");}GoodsReplaygoodsScore=newGoodsReplay();goodsScore.setGoodsId(dto.getGoodsId());//物品idgoodsScore.setGoodsScore(dto.getGoodsScore());goodsScore.setEvaluation(dto.getEvaluation());goodsScore.setCreateTime(now);goodsScore.setStatus(2);goodsScore.setReplayId(dto.getReplayId());//回復(fù)人idthis.goodsReplayMapper.insert(goodsScore);}前端：物品、評論詳情：axios.post('api/sysGoodsMgmt/getAllGoodsPost.do',jsonObj).then((response)=>{this.tableData=response.data.object;//為每個表格元素加載圖片數(shù)據(jù)，主圖$(self.tableData).each(function(index,element){letjsonObj2={};jsonObj2.goodsId=element.goodsId;$.get("http://localhost:8083/sysGoodsMgmt/getGoodsMainImg.do",jsonObj2,function(data){element.picture="http://localhost:9090/"+data.imgUrl;//因為數(shù)組單值更新不會引起Vue重新渲染，手動通知Vue渲染self.$set(self.tableData,index,element);},"json");letobj={};obj.goodsId=this.goodsId;obj.replayId=window.sessionStorage.getItem("userId");//回復(fù)人idobj.nickname=window.sessionStorage.getItem("nickname");letself=this;if(this.reply!==''){obj.goodsScore=4;obj.scoreId=this.goodsScoreList.idconsole.log(obj.scoreId)obj.evaluation=this.reply;//回復(fù)內(nèi)容self.buttonReplay=false;axios.post('api/sysGoodsReplayMgmt/saveReplayScore.do',obj).then((response)=>{console.log(response)self.reload();this.reply="";}).catch((error)=>{console.log(error);//異常});4.7申領(lǐng)管理模塊用戶可在首頁中點擊“查看詳情”，然后對喜歡的物品可“加入交換車”,在申領(lǐng)管理界面可看到加入交換車成功的物品信息，可領(lǐng)用這些物品或是刪除待領(lǐng)用的物品。申領(lǐng)管理頁面如圖4.7所示：圖4.7申領(lǐng)管理界面Fig4.7Applicationmanagement說明:先在物品的詳情頁中點擊“加入領(lǐng)用車”，加入領(lǐng)用車成功之后，物品就進入申領(lǐng)管理界面。實現(xiàn)思路：后端：(1)首先是將物品加入領(lǐng)用車中。在ShopCarController控制層中調(diào)用service層的addToShop(ShopCarshopCar)方法，先判斷物品id、用戶id是否存在，如果存在，則調(diào)用mapper層的insert(),把數(shù)據(jù)插入到數(shù)據(jù)庫關(guān)系表t_shopCar中，此時加入領(lǐng)用車成功。當(dāng)物品進入申領(lǐng)管理界面后，在該控制層調(diào)用service層的listShopCar(userId)方法，接收用戶id且根據(jù)id查找所有加入領(lǐng)用車的物品信息。(2)領(lǐng)用此物品:在OrderController控制層調(diào)用service層createOrder(shop)，然后在createOrder()方法里調(diào)用findOldOrderByUserId()查詢用戶在某個時間段內(nèi)是否領(lǐng)用過物品，如果沒有領(lǐng)用過則再調(diào)用mapper層的insert()方法，加入到t_order表中，如果領(lǐng)用過，則不能再次領(lǐng)用，前端彈出提示。刪除加入交換車的物品：在OrderController控制層中調(diào)用deleteOneByUid-AndGid方法，根據(jù)接受到的物品id，執(zhí)行即可刪除單個加入交換車的物品。前端：通過axios.post('api/shopCarMgmt/addToShopCar.do',jsonObj)調(diào)用后端的接口，并把物品id、用戶id作為參數(shù)傳遞到服務(wù)器，如執(zhí)行成功前端則提示“加入領(lǐng)用車”。然后再通過axios.post('api/shopCarMgmt/findAllByUid.do',jsonObj)，向后端服務(wù)器再次發(fā)送請求查詢“加入領(lǐng)用車”的數(shù)據(jù)。當(dāng)查到數(shù)據(jù)之后，點擊“領(lǐng)用此物品”時，觸發(fā)handleEdit2點擊事件，通過axios.post(""api/orderMgmt/createOrder.do",jsonObj)調(diào)用后端并發(fā)送請求，則服務(wù)器響應(yīng)回來數(shù)據(jù)并發(fā)出“領(lǐng)用成功”或者是領(lǐng)用“本月已領(lǐng)用，請下個月再來！”的提示；同時點擊“刪除”按鈕，觸發(fā)刪除操作，如執(zhí)行成功，則提示“刪除成功”核心代碼：后端：后端：//加入領(lǐng)用車publicvoidaddToShopCar(ShopCarshopCar){if(null!=shopCar&&null!=shopCar.getGoodsId()&&null!=shopCar.getUserId()){this.shopCarMapper.insert(shopCar);}//查找所有加入領(lǐng)用車的物品publicList<Goods>listShopCar(LonguserId){QueryWrapper<ShopCar>qw=newQueryWrapper<>();qw.eq("userId",userId);List<ShopCar>shopCars=this.shopCarMapper.selectList(qw);List<String>goodsIds=newArrayList<>();//遍歷；領(lǐng)用車中所有的idfor(ShopCars:shopCars){goodsIds.add(s.getGoodsId());}returngoodsService.getMyGoodsByGoodsId(goodsIds);//根據(jù)id查找所有的物品信息}前端：//加入領(lǐng)用車前端：//加入領(lǐng)用車letjsonObj={};jsonObj.userId=window.sessionStorage.getItem("userId");jsonObj.goodsId=this.goodsInfoId;letjsonMsg=JSON.stringify(jsonObj);letself=this;axios.post('api/shopCarMgmt/addToShopCar.do',jsonObj).then((response)=>{if(response.data.success){self.dialogValue="加入領(lǐng)用車成功！";//領(lǐng)用@Transactional(propagation=Propagation.REQUIRED)publicvoidcreateOrder(ShopCarshopCar){//當(dāng)前時間Datenow=JodaTimeUtils.getCurrentDate();Orderorder=newOrder();order.setCreateTime(now);order.setUserId(shopCar.getUserId());order.setGoodsId(shopCar.getGoodsId());order.setOrdersId(UUID.randomUUID().toString());GoodsDtogoods=goodsService.findOneByGoodsId(shopCar.getGoodsId());order.setName(goods.getName());order.setPrice(goods.getPrice());order.setPhone(goods.getPhone());order.setAddress(goods.getAddress());order.setOrdersStatus(2);//領(lǐng)用完成狀態(tài)order.setPayId(UUID.randomUUID().toString());GoodsDtogoods=goodsService.findOneByGoodsId(shopCar.getGoodsId());order.setName(goods.getName());order.setPrice(goods.getPrice());order.setPhone(goods.getPhone());order.setAddress(goods.getAddress());order.setOrdersStatus(2);//領(lǐng)用完成狀態(tài)order.setAdminStatus(2);this.orderMapper.insert(order);//刪除this.shopCarService.deleteOneByUidAndGid(shopCar);}self.goToShopCar=false;self.goToShopCar=false;}else{self.dialogValue="加入領(lǐng)用車失敗！";self.goToShopCar=true;}領(lǐng)用此物品：letjsonObj={};jsonObj.goodsId=row.goodsId;jsonObj.userId=window.sessionStorage.getItem("userId");letjsonMsg=JSON.stringify(jsonObj);axios.post("api/orderMgmt/createOrder.do",jsonObj).then(function(response){if(response.data.success){self.$message({message:'創(chuàng)建領(lǐng)用成功！',type:'success'});self.reload();}else{self.$message.error('創(chuàng)建訂單失敗！');}刪除：letjsonObj={};jsonObj.goodsId=row.goodsId;jsonObj.userId=window.sessionStorage.getItem("userId");letself=this;axios.post("api/shopCarMgmt/deleteOneByUidAndGid.do",jsonObj).then(function(response){if(response.data.success){self.$message({message:'刪除成功！',type:'success'});}4.8個人中心4.8.1查詢、修改個人信息管理員、普通用戶點擊個人信息菜單后，可查看個人信息，點擊“修改資料”按鈕可修改個人信息。個人資料頁面如圖4.8所示：圖4.8個人信息界面Fig4.8Personalinformation實現(xiàn)思路：后端：通過用戶id調(diào)用selectById()方法找到這個用戶的信息，找到用戶信息之后，再調(diào)用updateById()方法進行修改并把修改后的信息用saveOrUpdateSysUser()進行保存。前端：通過window.sessionStorage.getItem("userId")的方式來獲取用戶的id，然后再通過axios.post('api/sysUserMgmt/findUserData.do',jsonObj)向后端發(fā)送請求，查找用戶的信息，將修改后的用戶信息保存下來。當(dāng)點擊“提交修改”時，調(diào)用后端updateById()方法進行修改，把修改過后的信息保存。核心代碼：后端：后端：saveOrUpdateSysUser(){//如果用戶id不為空if(null!=dataId||dataId>0){//使用updateByid()對用戶的信息修改this.sysUserMapper.updateById(user);}}前端：前端：//獲取用戶idjsonObj.dataId=window.sessionStorage.getItem("userId");//調(diào)用查詢用戶的接口，并把id通過jsonObj形式傳遞axios.post('api/sysUserMgmt/findUserData.do',jsonObj).then(function(response){if(response.data.success){self.form=obj;//把找到的數(shù)據(jù)用form保存}//調(diào)用修改用戶接口axios.post('api/sysUserMgmt/saveOrUpdateSysUser.do',jsonObj).then(funct