目錄PAGEIII基于Springboot+Vue框架的停車場管理系統(tǒng)的設(shè)計與實現(xiàn)目錄28286摘要 III6318Abstract IV285271緒論 1311461.1研究的背景及意義 1174571.2國內(nèi)外發(fā)展概況和最新發(fā)展趨勢 181701.3課題的主要研究工作 2214751.4論文的組織結(jié)構(gòu) 2268152相關(guān)技術(shù)研究 42582.1Springboot后端框架開發(fā)模式 448212.2Vue前端開發(fā)框架 577962.3Mybatis-plus框架工具 786802.4本章小結(jié) 8267723停車場管理系統(tǒng)的需求分析 9121283.1系統(tǒng)的功能需求分析 9132363.2系統(tǒng)的性能需求分析 1288523.3可行性分析 1250173.4本章小結(jié) 13300894停車場管理系統(tǒng)的總體設(shè)計與實現(xiàn) 14139664.1開發(fā)環(huán)境和關(guān)鍵技術(shù)選型 1491524.2停車場管理系統(tǒng)的框架設(shè)計 1583034.3停車場管理系統(tǒng)功能模塊實現(xiàn) 2075874.4本章小結(jié) 40234765系統(tǒng)測試與分析 41266785.1系統(tǒng)測試環(huán)境 41287385.2功能測試 4126475.3非功能測試 43282295.4本章小結(jié) 44153066總結(jié)與展望 4511535參考文獻 468493致謝 47摘要基于Springboot+Vue框架的停車場管理系統(tǒng)的設(shè)計與實現(xiàn)摘要隨著人口的增加以及人民物質(zhì)消費水平的提高，機動車和停車場數(shù)量的高速增長帶來了人工管理上的諸多問題，在部分地區(qū)，傳統(tǒng)的的停車管理系統(tǒng)效率低下，管理混亂。一方面，停車場仍依賴人工記錄停車數(shù)據(jù)，這不僅增加了人工成本，還影響了數(shù)據(jù)的準確性，尤其是在深夜凌晨時間段，極其容易發(fā)生數(shù)據(jù)的誤錄；另一方面，對停車數(shù)據(jù)的手動管理維護不夠智能，浪費了大量的停車資源，由于缺乏引導(dǎo)，使得更多車主選擇路邊停車，最終嚴重危害了公共交通安全。為了滿足人們對智能化停車場的需求，本課題基于Springboot、Vue前端框架開發(fā)一款停車場管理系統(tǒng)。該系統(tǒng)實現(xiàn)車牌識別，車輛出入統(tǒng)計，收支統(tǒng)計等功能。管理員能進行查看修改停車數(shù)據(jù)，手動錄入新數(shù)據(jù)和設(shè)置收費標準等操作，用戶也可進行查看?？寇囕v信息、通過車牌識別實現(xiàn)車輛出入庫和查看停車支付記錄等操作。停車場管理系統(tǒng)能提高車輛管理效率，降低人力物力上的消耗，實現(xiàn)停車場管理的智能化和自動化，系統(tǒng)數(shù)據(jù)提供的實時車位信息可以減少車主尋找車位的時間，一定程度上緩解違章停車和交通擁堵問題，因而本課題具有較高的社會效益和廣泛的實用價值。關(guān)鍵詞：Springboot；Vue；停車場管理系統(tǒng)；智能化；AbstractDesignandImplementationofParkingLotManagementSystemBasedonSpringboot+VueFrameworkAbstractWiththeincreaseofpopulationandtheimprovementofpeople'smaterialconsumptionlevel,therapidgrowthinthenumberofmotorvehiclesandparkinglotshasbroughtmanyproblemsinmanualmanagement.Insomeregions,traditionalparkingmanagementsystemsareinefficientandmanagementischaotic.Ontheonehand,parkinglotsstillrelyonmanualrecordingofparkingdata,whichnotonlyincreaseslaborcosts,butalsoaffectstheaccuracyofdata.Especiallyinthelatenightandearlymorninghours,itisextremelypronetodatamisrecording;Ontheotherhand,themanualmanagementandmaintenanceofparkingdataisnotintelligentenough,wastingalotofparkingresources.Duetothelackofguidance,morecarownerschoosetoparkontheroadside,ultimatelyseriouslyendangeringpublictransportationsafety.Inordertomeettheneedsofpeopleforintelligentparkinglots,thistopicdevelopsaparkinglotmanagementsystembasedonSpringbootandVuefront-endframeworks.Thesystemimplementsfunctionssuchaslicenseplaterecognition,vehicleaccessstatistics,andrevenueandexpenditurestatistics.Administratorscanviewandmodifyparkingdata,manuallyenternewdata,setchargingstandards,andotheroperations.Userscanalsoviewparkedvehicleinformation,achievevehicleentryandexitthroughlicenseplaterecognition,andviewparkingpaymentrecords.Theparkinglotmanagementsystemcanimprovetheefficiencyofvehiclemanagement,reducetheconsumptionofhumanandmaterialresources,andachieveintelligentandautomatedparkinglotmanagement.Thereal-timeparkingspaceinformationprovidedbythesystemdatacanreducethetimeforcarownerstofindparkingspaces,andtosomeextentalleviatetheproblemsofillegalparkingandtrafficcongestion.Therefore,thistopichasnotlowsocialbenefitsandextensivepracticalvalue.Keywords:Springboot;Vue;Vehiclemanagementsystem;Intelligence;第1章緒論PAGE21緒論1.1研究的背景及意義隨著人口的增加以及人民物質(zhì)消費水平的提高，機動車的數(shù)量迅速增長，公安部數(shù)據(jù)顯示，截至今年8月11日，我國機動車保有數(shù)量已達4.08億倆，其中汽車數(shù)量為3.12億倆[1]。水漲船高，隨之增長的還有停車場的數(shù)量。根據(jù)估算，2020年我國停車位缺口高達8000萬個左右[2]，經(jīng)過兩年的停車場建設(shè)，各省各市新增多個城市公共停車場，例如在江蘇，2022年建設(shè)超15萬個公共停車泊位，以緩解繁華區(qū)域停車矛盾，減少違章停車等問題[3]。停車場數(shù)量的高速增長帶來了人工管理上的諸多問題，在部分地區(qū)，傳統(tǒng)的的停車管理系統(tǒng)效率低下，管理混亂。一方面，停車場仍依賴人工記錄停車數(shù)據(jù)，這不僅增加了人工成本，還影響了數(shù)據(jù)的準確性，尤其是在深夜凌晨時間段，極其容易發(fā)生數(shù)據(jù)的誤錄[4]；另一方面，對停車數(shù)據(jù)的手動管理維護不夠智能，浪費了大量的停車資源，由于缺乏引導(dǎo)，使得更多車主選擇路邊停車，最終嚴重危害了公共交通安全[5]。因此，無人值守的智能化停車場亟須普及。為了滿足人們對智能化停車場的需求，本課題基于Springboot、Vue前端框架開發(fā)一款停車場管理系統(tǒng)。該系統(tǒng)實現(xiàn)車牌識別，車輛出入統(tǒng)計，收支統(tǒng)計等功能。管理員能進行查看修改停車數(shù)據(jù)，手動錄入新數(shù)據(jù)和設(shè)置收費標準等操作，用戶也可進行查看停靠車輛信息、通過車牌識別實現(xiàn)車輛出入庫和查看停車支付記錄等操作。停車場管理系統(tǒng)能提高車輛管理效率，降低人力物力上的消耗，從而實現(xiàn)停車場管理的智能化和自動化，系統(tǒng)數(shù)據(jù)提供的實時車位信息可以減少車主尋找車位的時間，一定程度上緩解違章停車和交通擁堵問題[6]，因而本課題具有較高的社會效益和廣泛的實用價值。1.2國內(nèi)外發(fā)展概況和最新發(fā)展趨勢1.2.1國外發(fā)展現(xiàn)狀國外停車管理系統(tǒng)的發(fā)展遠遠早于國內(nèi)，目前經(jīng)過多年的發(fā)展，整體上已步入智能無人化收費階段，從傳統(tǒng)的接觸型收費方式逐漸過渡為新型非接觸類型的收費方式。大部分國外停車場收費系統(tǒng)通過采用電子化設(shè)備，早早實現(xiàn)無人化、自動化收費，減少現(xiàn)金交易帶來的隱患，并通過智能設(shè)備拓寬了停車場管理系統(tǒng)的作用范圍和功能[11]。交通管理方面，國外大都市早早地加大了對智能建筑的投資，采取了合理布局規(guī)劃，將場內(nèi)停車與場外停車相結(jié)合，增加了額外20%的周轉(zhuǎn)車位等措施，基本解決了高峰時期城市交通擁擠問題。雖然國外的停車場管理系統(tǒng)技術(shù)運用十分成熟，但先進的背后卻是高昂的系統(tǒng)造價和維護成本，減少人工成本反而增大了技術(shù)開銷[12]。1.2.2國內(nèi)發(fā)展現(xiàn)狀目前我國國內(nèi)停車場管理已漸漸步入智能化階段，但相較國外仍然較為落后。國內(nèi)許多收費系統(tǒng)完善的停車場，往往缺少對入庫的車輛實時情況的了解，對車輛的安全性也不夠重視[13]，大多集成度較低，在管理上仍存在運行效率低、安全性能低下的特點。與國外相比，國內(nèi)停車場通信協(xié)議、管理方式等由各個公司自己制定，缺乏數(shù)據(jù)共享和網(wǎng)絡(luò)互聯(lián)。隨著GPS、RFID、物聯(lián)網(wǎng)等先進信息通訊技術(shù)不斷應(yīng)用在停車行業(yè)以及人民對智能停車的需求越來越大，智能停車的市場正在蓬勃發(fā)展[14]，相關(guān)企業(yè)正逐步對過往的功能進行升級，包括更精準的車牌識別、更智能的車輛監(jiān)控以及更友好的車輛引導(dǎo)。在這樣一個背景下，更能適配新技術(shù)的停車場管理系統(tǒng)顯得尤為重要。時至今日，全自動車輛管理已成為智能交通發(fā)展的重要環(huán)節(jié)之一，一定程度上能決定智能交通的成敗。未來的停車場管理系統(tǒng)也將朝著智能化、網(wǎng)絡(luò)化、低污染方向發(fā)展，在技術(shù)上和理論上都有很大進步空間。1.3課題的主要研究工作隨著人口的增加以及人民物質(zhì)消費水平的提高，機動車的數(shù)量迅速增長，隨之增長的還有停車場的數(shù)量。停車場數(shù)量高速增長帶來了人工管理上的諸多問題，為了滿足人們對智能化停車場的需求，本課題基于Springboot和Vue前端框架開發(fā)一款停車場管理系統(tǒng)，該系統(tǒng)能提高車輛管理效率，減少人力物力的消耗，實現(xiàn)車牌識別，車輛出入統(tǒng)計，收支統(tǒng)計等功能，達到停車場管理的智能化和自動化。本系統(tǒng)前后端分離開發(fā)，后端使用Springboot+MyBatis-plus技術(shù)實現(xiàn)，前端使用Vue.js技術(shù)，element-ui組件庫，通過axios進行交互，mysql和redis存儲數(shù)據(jù)庫實現(xiàn)系統(tǒng)。本系統(tǒng)模塊主要有：賬號管理模塊，停車場管理模塊，車輛管理模塊，車牌識別模塊，記錄查詢模塊，信息管理模塊等。1.4論文的組織結(jié)構(gòu)本篇論文結(jié)構(gòu)安排如下：第一章緒論。本章主要介紹了停車場管理系統(tǒng)的研究背景、當下需求及現(xiàn)實意義，說明了如今車輛數(shù)量越來越多，智能化的停車場管理需求也在不斷加大，詳細分析了國內(nèi)外停車場管理的發(fā)展概況與未來趨勢，并在最后說明了本篇論文的論文結(jié)構(gòu)安排。第二章相關(guān)技術(shù)研究。本章主要介紹了研究過程中系統(tǒng)設(shè)計使用的的技術(shù)，包括Springboot后端，Vue前端，Mybtus-plus等框架。通過分析其優(yōu)缺點以及與其他類似技術(shù)的比較體現(xiàn)所運用技術(shù)的獨特優(yōu)勢，系統(tǒng)性的講解JWT，調(diào)用百度云實現(xiàn)車牌識別，支付寶沙箱支付等技術(shù)的實現(xiàn)。第三章停車場管理系統(tǒng)的需求分析。本章對停車場管理系統(tǒng)進行功能需求與非功能需求分析，論述系統(tǒng)在實際生產(chǎn)環(huán)境中所實現(xiàn)的功能。同時對整個系統(tǒng)進行可行性分析，確定本系統(tǒng)可行。第四章停車場管理系統(tǒng)的總體設(shè)計與實現(xiàn)。本章具體闡述系統(tǒng)的開發(fā)環(huán)境與關(guān)鍵技術(shù)選型，介紹其框架設(shè)計，結(jié)合代碼與運行界面展示系統(tǒng)重要功能模塊的設(shè)計和具體實現(xiàn)。第五章系統(tǒng)測試與分析。本章對停車場管理系統(tǒng)進行了包括環(huán)境測試、功能測試、非功能測試等全面的測試，分析測試結(jié)果，以便對不足之處進行完善。第六章總結(jié)與展望。本章主要總結(jié)整個停車場管理系統(tǒng)設(shè)計的心路歷程與實現(xiàn)目的，并對未來的設(shè)計與自我提升進行展望。 第2章相關(guān)技術(shù)研究2相關(guān)技術(shù)研究2.1Springboot后端框架開發(fā)模式2.1.1Springboot本次課題采用的后端框架為Springboot框架，它是Spring技術(shù)的升級，不同于傳統(tǒng)的SSM框架，Springboot的xml配置過程不再那么繁瑣，通過預(yù)設(shè)大量默認配置，有效的簡化開發(fā)過程,以便更簡單迅速的開發(fā)軟件程序[7]。通過集成大量的框架，Springboot解決了不同項目之間的包依賴的問題，提高了軟件適配性與穩(wěn)定性，同時良好地應(yīng)用Springcloud的相關(guān)組件項目，深刻改變了web開發(fā)應(yīng)用模式[8]。傳統(tǒng)的SSM或SSH框架將項目打成war包，將其放到Tomcat的Webapps下運行，而Springboot則在java中內(nèi)置Tomcat服務(wù)器，將項目打成jar包通過輸入命令運行，從而減少了對第三方軟件的依賴。通過以上幾點優(yōu)勢，Springboot框架成為如今各大中小企業(yè)運用最為廣泛的后端框架之一。2.1.2JWTJWT（jsonwebtoken）是一種基于json的實現(xiàn)輕量級身份驗證和授權(quán)的技術(shù)，用于在客戶端和服務(wù)器之間傳遞表示和聲明信息。在使用JWT進行身份驗證和授權(quán)時，首先需要創(chuàng)建一個token，這個token是由三部分構(gòu)成：標頭（header）、負載（payload）和簽名（signature）。標頭指定了JWT使用的算法和token的類型等元信息；負載是包含實際用戶數(shù)據(jù)的部分，比如用戶名和角色等聲明信息；簽名則用于驗證token是否被篡改過。生成的token會發(fā)送給客戶端，并在客戶端進行保存，下次請求時會攜帶token作為權(quán)限憑證。在服務(wù)端對token進行驗證時，會先校驗header和payload，再利用保密的密鑰生成簽名進行比較，如果比對成功說明token合法。JWT交互時序圖如圖2.1所示。圖2.1JWT交互時序圖使用JWT優(yōu)勢主要體現(xiàn)在以下幾點：（1）無狀態(tài)：服務(wù)端不需要存儲任何token相關(guān)的信息，節(jié)省了數(shù)據(jù)庫查詢開銷。（2）安全性高：使用簽名機制使得偽造token和篡改難度極大，提高了安全性。（3）可擴展性強：payload部分可以自定義消息項，便于進行功能拓展。但也需要注意使用JWT存儲信息時，不能動態(tài)修改token中的聲明信息；同時需要注意token的過期時間，過長或過短都會對安全性造成影響。2.1.3百度智能云接口百度智能云是一個綜合性的云計算平臺，提供了豐富的api服務(wù)和開發(fā)工具來支持用戶構(gòu)建自己的ai應(yīng)用程序，可應(yīng)用于圖像識別、自然語言處理、音頻視頻處理等多個領(lǐng)域，滿足開發(fā)者在不同領(lǐng)域的需求。本次停車場管理系統(tǒng)所實現(xiàn)的車牌識別功能可通過調(diào)用百度智能云api接口達成需求。本次的車牌識別是一種基于人工智能技術(shù)的車牌識別系統(tǒng)，它可以實現(xiàn)對車輛行駛過程中出現(xiàn)的車牌信息進行實時準確的自動識別。該系統(tǒng)的工作流程主要包括圖像采集、圖像預(yù)處理、車牌定位、字符分割、字符識別等多個步驟。首先，通過攝像頭或者其他設(shè)備采集到待識別車輛的圖像，然后利用深度學(xué)習(xí)等技術(shù)對圖像進行預(yù)處理和特征提取，對車牌區(qū)域進行定位和分割，最后采用ocr（opticalcharacterrecognition，光學(xué)字符識別）技術(shù)對車牌中的字符進行識別，從而達到車牌號碼的自動識別目的。百度智能云的接口調(diào)用流程也十分方便。首先注冊百度智能云賬戶并創(chuàng)建應(yīng)用程序，獲取APP_ID和API_KEY以及SECRET_KEY。其次在SpringBoot項目中引入相關(guān)依賴，以及SDK工具包。然后在代碼中引入相應(yīng)的SDK并進行初始化。最后根據(jù)具體的接口文檔，進行參數(shù)設(shè)置、請求發(fā)送和結(jié)果解析等操作；根據(jù)具體的業(yè)務(wù)邏輯，將接口調(diào)用結(jié)果返回給前端或者保存在數(shù)據(jù)庫中等操作。2.2Vue前端開發(fā)框架2.2.1Vue.js本次課題采用的前端端框架為Vue.js框架。近年來前端開發(fā)中主要有三類比較常用的開發(fā)框架，分別是Google收購的AngularJS框架、Facebook出品的React框架，以及國產(chǎn)研發(fā)的Vue.js框架。其中，Vue.js框架借鑒了前兩個框架的優(yōu)點并進行了相關(guān)優(yōu)化，同時開發(fā)文檔比較清晰容易理解，在國內(nèi)非常流行[9]。三大框架各有特色。AngularJS用于創(chuàng)建單一界面的應(yīng)用程序，與Vue.js都擁有雙向數(shù)據(jù)綁定，支持指令，過濾器等特色，它是三個框架中最為完善且完整的。AngularJS模板功能強大，但說明文檔較少，缺少直觀的樣例幫助開發(fā)者學(xué)習(xí)；同時雖然可以注入依賴，如果代碼需要壓縮，又要另外顯示聲明，較為繁瑣。React在性能上遠強于angularJS，與Vue.js都擁有VirtualDOM，Diff算法等特色，雖然學(xué)習(xí)門檻不低，但靈活高效的特點使得它一經(jīng)推出便火爆全球。React用組件式、模塊化的思想，編寫?yīng)毩⒌腢I組件并嵌入程序，便于組件出現(xiàn)問題時將其隔離，大大提高了程序的可修改性。React的缺點在于其并非是一個完整的框架，需要加入許多插件才能開發(fā)大型項目。Vue.js是三大框架中最為年輕的，通過吸取前輩的經(jīng)驗，Vue.js首先編寫了更為清晰的文檔，便于初學(xué)者學(xué)習(xí)；其次，它采用了和React類似的模塊化、組件化程序，靈活且高效；最后，Vue.js更為輕量化，開發(fā)流程較短[10]，適合本次課題將要實現(xiàn)的項目。通過對比，最終選擇了Vue.js框架實現(xiàn)本次課題前端程序。2.2.2Navigator攝像頭Vue可通過調(diào)用本地Navigator攝像頭實現(xiàn)拍照功能，因為調(diào)用攝像頭有使用權(quán)限，所以一般在本地運行，若要在線上運行則需使用https域名。調(diào)用攝像頭需要用到MediaDevices.getUserMedia()，該api需要用戶給予使用媒體輸入的許可，媒體輸入會產(chǎn)生一個包含請求的媒體類型軌道MediaStream，媒體流包含視頻軌道、音頻軌道以及其他軌道。調(diào)用api會返回一個Promise對象，成功調(diào)用后會回調(diào)一個MediaStream對象。如果使用權(quán)限被用戶拒絕，或者瀏覽器中需要的媒體源無法使用，Promise對象最終則會回調(diào)一個PermissionDeniedError或者NotFoundError。實際操作中，一些瀏覽器實現(xiàn)了部分mediaDevices，因為getUserMedia會覆蓋現(xiàn)有的屬性，所以我們要分配多個對象。如下面代碼所示，如果缺少getUserMedia屬性，就新添加一個。

if(navigator.mediaDevices.getUserMedia===undefined){

navigator.mediaDevices.getUserMedia=function(constraints){

letgetUserMedia=

navigator.webkitGetUserMedia||

navigator.mozGetUserMedia||

navigator.getUserMedia;

if(!getUserMedia){

returnPromise.reject(

newError("getUserMediaisnotimplementedinthisbrowser")

);

}

returnnewPromise(function(resolve,reject){

getUserMedia.call(navigator,constraints,resolve,reject);

});

};

}2.2.3支付寶沙箱支付支付寶為開發(fā)者提供了一個測試用的沙箱環(huán)境，沙箱環(huán)境中包含一個模擬沙箱版的支付寶app，一個買家賬戶和一個商家賬戶。利用這個沙盒環(huán)境，我們可以避免注冊商家賬號和企業(yè)資質(zhì)審核等繁瑣流程，直接啟動測試。支付寶沙箱支付詳細過程如下：當用戶確認訂單，選擇支付方式，并點擊立即支付時，會發(fā)送拉起支付請求到我們的服務(wù)器http://localhost:8080/alipay/pay。請求參數(shù)通常包括訂單基本信息。服務(wù)端會響應(yīng)這個請求，處理用戶下單需求，并根據(jù)客戶端的訂單信息進行商品單價、訂單總額的計算，之后生成一個訂單號。服務(wù)端隨后調(diào)用支付寶支付接口，并上傳訂單信息，成功則支付寶會返回一段html文檔，其中包含一個帶付款碼的pc端頁面。當買家使用二維碼完成支付后，支付寶會調(diào)用同步回調(diào)api接口跳轉(zhuǎn)到自定義的成功頁面(此頁面只展示消息，用于告訴用戶支付已完成，并非真正回調(diào)接口)。在支付完成后，支付寶會調(diào)用異步回調(diào)api接口并向服務(wù)端傳遞某些參數(shù)(如交易流水號和訂單號)，服務(wù)端可以利用這些數(shù)據(jù)來查詢是否交易已經(jīng)成功，然后執(zhí)行其他操作，例如將訂單狀態(tài)修改為已支付，給用戶增加積分或扣減優(yōu)惠券等。圖2.2支付寶支付的業(yè)務(wù)流程圖2.3Mybatis-plus框架工具除此以外，本次課題還采用了Mybatis-plus框架。作為Mybatis的強化工具，它生態(tài)齊全，版本全面，功能簡潔，支持多種模式，有效地減少了開發(fā)難度。Mybatis-plus是在Mybatis基礎(chǔ)上進行擴展的一個orm框架，Mybatis-plus不僅繼承了Mybatis所有的優(yōu)點（如靈活性、易用性等），而且還采用了大量的開發(fā)范式和設(shè)計模式，提供了許多內(nèi)置功能，如自動生成代碼、通用crud操作、分頁插件、性能優(yōu)化、sql注入防護等。使Mybatis-plus開發(fā)者可以避免重復(fù)勞動和重復(fù)代碼，更專注于業(yè)務(wù)邏輯。Mybatis-plus框架無需xml映射文件或者接口方法注解，dao層零代碼實現(xiàn)；內(nèi)置通用Mapper,Service，可通過少量配置生成最基本的的CRUD前后端代碼，實現(xiàn)基礎(chǔ)的增刪改查功能，無需關(guān)注底層實現(xiàn)原理。相較于類似的Mybatis、Hibernate框架，

提供了豐富的通用sql、lambda表達式和代碼生成器，使得對數(shù)據(jù)庫操作的增刪改查等操作變得更加簡單和高效，大大簡化了開發(fā)過程，提高開發(fā)效率。雖然存在對關(guān)聯(lián)查詢（join）等復(fù)雜查詢支持較弱，需要自己手動編寫sql語句以及當表結(jié)構(gòu)發(fā)生變化時，可能會影響自動映射的正確性等問題，但對于本次課程設(shè)計已完全足夠。2.4本章小結(jié)在本章中，主要對整個研究過程中所用到的Springboot后端+Vue前端框架，Mybatis-plus進行介紹，并與其他類似技術(shù)進行對比，說明其優(yōu)勢。詳細闡述了JWT，調(diào)用百度云實現(xiàn)車牌識別，支付寶沙箱支付等技術(shù)的實現(xiàn)方法。第3章停車場管理系統(tǒng)的需求分析3停車場管理系統(tǒng)的需求分析在上一章中對整個研究過程中所用到的理論及技術(shù)進行介紹。在本章中將對停車場管理系統(tǒng)進行功能需求分析和性能需求分析，最后對整個研究結(jié)果進行可行性分析并判斷整個課題是否具有可行性。功能需求分析主要從系統(tǒng)的功能模塊進行劃分，性能需求分析主要考慮系統(tǒng)的性能和安全性等方面，可行性分析從技術(shù)條件、經(jīng)濟、法律三方面分析。3.1系統(tǒng)的功能需求分析3.1.1系統(tǒng)功能模塊劃分圖3.1系統(tǒng)功能模塊圖本系統(tǒng)的功能模塊主要可以分為三個部分：管理員模塊、用戶模塊和基本功能，管理員模塊和用戶模塊分別為各自可以使用的功能，基本功能為本系統(tǒng)的核心功能。詳細功能模塊如圖3.1所示。管理員模塊中主要包括停車場管理、車輛管理、信息修改、記錄查詢。主要包括對系統(tǒng)中的停車場和車輛信息進行增刪改查，可以修改各個用戶的信息，同時查詢到收支訂單、停車記錄的詳細信息?；竟δ苤饕擒囕v出庫入庫時進行的信息填寫、車牌識別等操作。用戶模塊中包含用戶對個人用戶信息、車輛信息的查詢修改，同時還可以進行導(dǎo)入導(dǎo)出等操作。3.1.2總體功能需求用戶個人信息管理相關(guān)功能該功能為普通用戶與管理員提供，功能主要包括：登錄，注冊，退出登錄，修改個人信息，修改密碼等操作。用戶輸入正確的用戶名和密碼即可登錄，若無帳號則點擊注冊按鈕，輸入用戶名、昵稱、密碼、電話、郵箱等信息后點擊注冊按鈕。待注冊完成后再登錄。登錄成功后可以修改個人信息、修改密碼以及退出登錄。用戶個人信息管理用例規(guī)約描述如表3.1所示。表3.1用戶個人信息管理用例規(guī)約描述表用例名稱用戶個人信息管理參與者普通用戶、管理員用例說明實現(xiàn)不同角色用戶的注冊、登錄、修改個人信息、修改密碼，登出等功能前置條件無基本事件流無賬號用戶填寫個人信息并注冊已有賬號用戶直接登錄登錄后用戶修改個人信息、修改密碼其他事件流注冊失敗登陸失敗異常事件流1.賬號不存在后置條件無車輛、停車場信息管理相關(guān)功能該功能為管理員提供，管理員對車輛、停車場信息進行增刪改查、導(dǎo)入導(dǎo)出等操作。車輛、停車場信息管理相關(guān)功能用例規(guī)約描述如表3.2所示。表3.2車輛、停車場信息管理相關(guān)功能用例規(guī)約描述表用例名稱車輛、停車場信息管理參與者管理員用例說明管理停車場、車輛相關(guān)信息前置條件以管理員身份登錄基本事件流1.管理員管理車場、車輛相關(guān)信息，進行增刪改查、導(dǎo)入導(dǎo)出其他事件流1.信息增刪改查失敗異常事件流1.未登錄管理員賬號后置條件無車牌識別相關(guān)功能該功能為普通用戶提供，普通用戶可以進行新車輛入庫與舊車輛出庫兩種操作，車輛入庫需填寫停車場、車主、停車時間、是否營運等信息。信息填寫完成后可選擇圖片上傳和拍照上傳兩種方式上傳車牌照片，之后選擇提交本次操作訂單。車牌識別相關(guān)功能用例規(guī)約描述如表3.3所示。表3.3車牌識別相關(guān)功能用例規(guī)約描述表用例名稱車牌識別參與者普通用戶用例說明進行新車輛入庫與舊車輛出庫兩種操作前置條件以普通用戶身份登錄基本事件流選擇入庫還是出庫填寫必要信息，上傳車牌照片提交本次操作訂單其他事件流1.信息未填寫異常事件流1.未登錄普通用戶賬戶后置條件無訂單管理相關(guān)功能該功能為普通用戶和管理員提供，普通用戶在成功提交車輛入庫訂單后可對訂單進行導(dǎo)入導(dǎo)出操作、付款操作，管理員可對訂單進行增刪改查操作。點擊付款按鈕會調(diào)用支付寶沙箱接口進行支付。訂單管理用例規(guī)約描述如表3.4所示。表3.4訂單管理用例規(guī)約描述表用例名稱訂單管理參與者管理員、普通用戶用例說明對訂單進行增刪改查、導(dǎo)入導(dǎo)出、付款等操作前置條件無基本事件流增刪改查訂單訂單付款訂單導(dǎo)入導(dǎo)出其他事件流1.訂單支付失敗異常事件流1.賬號未登錄后置條件無3.2系統(tǒng)的性能需求分析智能化停車場管理系統(tǒng)除了在功能上有開發(fā)要求，還擁有滿足各種場合與用戶的性能需求：（1）可用性停車場管理系統(tǒng)必須保證24小時正常運行以提供給用戶服務(wù)，滿足數(shù)百個賬戶的在線并發(fā)操作，因此該系統(tǒng)需要具備高可用性并且需要有備用機制。同時還應(yīng)該易學(xué)易操作，讓用戶在初次接觸時可以很快地了解該系統(tǒng)的基本操作方法并上手使用，在平時運營中能夠輕松地完成各項操作。（2）穩(wěn)定性停車場管理系統(tǒng)的服務(wù)端與客戶端應(yīng)該運行穩(wěn)定，前端界面反應(yīng)及時，兼容常用的edge、chrome等瀏覽器，能夠及時響應(yīng)用戶提交的請求，如進出車輛信息、收費等，對于這些請求，響應(yīng)時間應(yīng)該在毫秒級別內(nèi)完成，以便用戶能夠快速獲取最新的系統(tǒng)狀態(tài)等信息。（3）安全性停車場管理系統(tǒng)需要具備高度的安全性，確保用戶信息、車牌號、交易記錄等數(shù)據(jù)不會被泄露、篡改或者丟失。同時，還需要有防止黑客攻擊、病毒感染等措施，確保系統(tǒng)的穩(wěn)定性和安全性。數(shù)據(jù)的安全存儲和防止非法修改或篡改也是該系統(tǒng)的重要指標之一，應(yīng)該能夠拒絕用戶的越權(quán)操作。3.3可行性分析3.3.1技術(shù)條件可行性Springboot+Vue框架非常成熟且易于上手，在數(shù)年的版本迭代后幾乎不存在使用風(fēng)險。其框架技術(shù)發(fā)展迅速，生態(tài)完善，在GitHub和Gitee上有著許多優(yōu)秀的開源樣例模板可供開發(fā)者學(xué)習(xí)，Vue.js還擁有官方中文文檔，其中的ElementUI組件庫使用方便，效果強大。通過Springboot集成Mybatis-plus，便于實現(xiàn)增刪改查等數(shù)據(jù)處理功能，簡化xml文件，且復(fù)用性高，減少代碼冗余。同時還可以集成代碼自動生成器，便于完成相關(guān)開發(fā)、測試和維護，很適合新手開發(fā)者。數(shù)據(jù)庫方面，mysql一直是國內(nèi)最為流行的數(shù)據(jù)庫技術(shù)，通過Nevicat軟件連接數(shù)據(jù)庫更加快捷，可視化程度更高，便于維護。因此，現(xiàn)有技術(shù)水平已經(jīng)完全可以實現(xiàn)該項目的目標，本系統(tǒng)在技術(shù)上可行。3.3.2經(jīng)濟可行性停車管理系統(tǒng)系統(tǒng)符合車輛管理智能化、自動化的需求，順應(yīng)時代發(fā)展趨勢，契合當下停車位與車輛比不平衡的背景，也相應(yīng)了國家政策號召?？梢栽谝韵聨讉€方面有效地解決問題：本系統(tǒng)的運行可以減少人力資源消耗，降低人工開銷；本系統(tǒng)的運行可以提高車輛出入庫效率；本系統(tǒng)可以增加停車場管理的安全性；因此，本系統(tǒng)具有較廣泛的應(yīng)用價值，在經(jīng)濟上可行。3.3.3法律可行性本系統(tǒng)在開發(fā)過程和項目實踐中沒有出現(xiàn)與法律相悖的方面，嚴格遵守國家各項法律法規(guī)。賬號密碼進行加密，非管理員的權(quán)限賬號受到限制，不會影響到關(guān)鍵數(shù)據(jù)的錄入與保存，數(shù)據(jù)庫由管理員保密維護，因而本系統(tǒng)在法律上可行。3.4本章小結(jié)本節(jié)主要對停車場管理系統(tǒng)的需求和系統(tǒng)的可行性進行總結(jié)，包括功能需求分析和性能需求分析，同時從技術(shù)條件、經(jīng)濟、法律三個方面確定本系統(tǒng)是可行的，為接下來的總體設(shè)計與實現(xiàn)做出準備。第4章停車場管理系統(tǒng)的總體設(shè)計與實現(xiàn)

4停車場管理系統(tǒng)的總體設(shè)計與實現(xiàn)在上一章中對整個停車場管理系統(tǒng)進行需求分析。在本章中將使用前兩章所涉及的理論技術(shù)對停車場管理系統(tǒng)進行設(shè)計與實現(xiàn)。4.1開發(fā)環(huán)境和關(guān)鍵技術(shù)選型4.1.1開發(fā)環(huán)境（1）硬件環(huán)境表4.1開發(fā)硬件環(huán)境系統(tǒng)windows10內(nèi)存8GB處理器Intel(R)Core(TM)i5-9400CPU@2.90GHz2.90GHz（2）軟件環(huán)境表4.2前端開發(fā)軟件環(huán)境前端開發(fā)框架Vue.js開發(fā)工具VisualStudioCode運行環(huán)境Node.js包管理工具NPM網(wǎng)絡(luò)請求庫Axios組件庫Element-UI表4.3后端開發(fā)軟件環(huán)境前端開發(fā)框架Springboot開發(fā)工具IntelliJIDEA2022.2.2運行環(huán)境Java數(shù)據(jù)庫工具Mybatis-plus4.1.2關(guān)鍵技術(shù)選型本系統(tǒng)最核心的功能為車牌識別功能的實現(xiàn)。近年來車牌識別技術(shù)發(fā)展非常迅速，許多云存儲服務(wù)提供商均提供了車牌識別服務(wù)，其中代表性的是百度旗下的百度智能云與?？低暺煜碌奈炇?。兩大云存儲服務(wù)各具特色，通過對比其中的優(yōu)劣能夠選擇出最適合本系統(tǒng)的車牌識別實現(xiàn)方式。表4.4兩大云存儲服務(wù)提供商對比對比項百度智能云螢石云智能進化快較慢可靠性高中等支持平臺restapi和sdkapp移動端多場景適配完善一般安裝部署較為麻煩詳細簡便實時視頻不支持支持如表4.4所示可以看出：百度云使用強大的深度學(xué)習(xí)算法，在車牌定位、字符分割、ocr等多個方面進行優(yōu)化，自我進化速度快，同時擁有數(shù)據(jù)和算力優(yōu)勢，其車牌識別模型在各種環(huán)境下具有較高的準確率和穩(wěn)定性。百度云車牌識別服務(wù)支持使用restapi和sdk，開發(fā)者也可以通過c#/java/python/go/node.js/php等語言調(diào)用其api。相較于螢石云，百度云車牌識別服務(wù)支持夜間、雨天等特殊情況的車牌識別，適用場景更加全面。螢石云也有其獨特的優(yōu)勢，它提供了詳細的文檔和教程，可以幫助用戶快速預(yù)覽、連接攝像頭并實現(xiàn)車牌識別，還可以和螢石云攝像頭的實時畫面配合，讓用戶及時獲得識別結(jié)果。通過對比分析，百度云在智能進化、可靠性、支持平臺、多場景適配等方面具有優(yōu)勢，最終決定使用百度云來實現(xiàn)本系統(tǒng)的車牌識別功能。4.2停車場管理系統(tǒng)的框架設(shè)計4.2.1停車場管理系統(tǒng)的框架設(shè)計停車場管理系統(tǒng)采用B/S架構(gòu)和前后端分離開發(fā)模式，將系統(tǒng)分為表現(xiàn)層、服務(wù)層和數(shù)據(jù)存儲層。整體架構(gòu)如圖4.1所示。圖4.1系統(tǒng)架構(gòu)圖本系統(tǒng)的展示和交流主要通過網(wǎng)頁的單頁面呈現(xiàn)。前端采用Vue.js和Element-ui來構(gòu)建界面，采用用Axios向后端接口發(fā)送請求。后端使用Springboot和Mybatis-plus作為主要技術(shù)棧，負責(zé)處理接收到的請求并將用戶相關(guān)數(shù)據(jù)儲存在數(shù)據(jù)存儲層中。4.2.2停車場管理系統(tǒng)的數(shù)據(jù)庫設(shè)計根據(jù)需求分析和框架設(shè)計，對停車場管理系統(tǒng)進行數(shù)據(jù)庫設(shè)計。圖4.2是停車場和車輛的ER圖，停車場包含多輛車，管理員管理多個停車場。圖4.2停車場和車輛ER圖如表4.5所示，停車場信息表名為park，用于存儲停車場相關(guān)信息，包含7個字段，分別是id、park_name、total_lot、last_lot、park_price、park_place、create_time，分別代表停車場ID、停車場名、總車位、剩余車位、收費標準、停車場位置、創(chuàng)建時間，主鍵是停車場ID。停車場包含每輛車的詳細信息，車輛信息表名為car，包含8個字段，id、car_license、car_owner、car_location、car_duration、create_time、end_time、is_service，分別代表車輛ID、車牌號、車主、所屬停車場、停車時間、入庫時間、到期時間、是否營運，車輛ID為主鍵。如表4.6所示。表4.5停車場信息表編號字段名數(shù)據(jù)類型標識1idint停車場ID2park_namevarchar(255)停車場名3total_lotint總車位4last_lotint剩余車位5park_pricedecimal收費標準6park_placevarchar(255)停車場位置7create_timetimestamp創(chuàng)建時間表4.6車輛信息表編號字段名數(shù)據(jù)類型標識1idint車輛ID2car_licensevarchar(255)車牌號3car_ownervarchar(255)車主4car_locationvarchar(255)所屬停車場5car_durationvarchar(255)停車時間6create_timetimestamp入庫時間7end_timetimestamp到期時間8is_servicevarchar(255)是否營運如表4.7所示，管理員身份表名為role，存儲了管理員的相關(guān)信息。表4.7管理員身份表編號字段名數(shù)據(jù)類型標識1idintID2namevarchar(255)名稱3flagvarchar(255)唯一標識用戶和訂單記錄的ER圖如圖4.3所示，用戶管理多個訂單，訂單支付成功后會生成一條記錄。圖4.3用戶和訂單記錄ER圖如表4.8所示，用戶信息表名為sys_user，用于存儲用戶相關(guān)信息，包含9個字段，分別是id、username、password、nickname、email、phone、create_time、avatar、role，分別代表用戶ID、用戶名、密碼、昵稱、郵箱、電話、創(chuàng)建時間、頭像、身份，主鍵是用戶ID。表4.8用戶信息表編號字段名數(shù)據(jù)類型標識1idint用戶ID2usernamevarchar(50)用戶名3passwordvarchar(50)密碼4nicknamevarchar(50)昵稱5emailvarchar(50)郵箱6phonevarchar(20)電話7create_timetimestamp創(chuàng)建時間8avatarvarchar(255)頭像9rolevarchar(50)身份 如表4.9所示，訂單信息表名為orders，用于存儲訂單相關(guān)信息，包含9個字段，分別是id、no、payment、car_license、time、state、alipay_no、payment_time、name，分別代表訂單ID、訂單號、付款金額、車牌號、訂單時間、支付狀態(tài)、支付寶交易號、支付時間、訂單名稱，主鍵是訂單ID。表4.9訂單信息表編號字段名數(shù)據(jù)類型標識1idint訂單ID2novarchar(255)訂單號3paymentdecimal付款金額4car_licensevarchar(255)車牌號5timedatetime訂單時間6statevarchar(255)支付狀態(tài)7alipay_novarchar(50)支付寶交易號8payment_timedatetime支付時間9namevarchar(255)訂單名稱 如表4.10所示，停車記錄信息表名為record，用于存儲停車記錄相關(guān)信息，包含5個字段，分別是id、park_name、car_license、type、time，分別代表停車記錄ID、停車場、車牌號、操作類型、操作時間，主鍵是停車記錄ID。表4.7停車記錄信息表編號字段名數(shù)據(jù)類型標識1idint停車記錄ID2park_namevarchar(255)停車場3car_licensevarchar(255)車牌號4typevarchar(255)操作類型5timedatetime操作時間4.3停車場管理系統(tǒng)功能模塊實現(xiàn)4.3.1登錄注冊模塊圖4.4登錄注冊流程圖本系統(tǒng)登錄注冊模塊流程如圖4.4所示，用戶注冊時需填寫用戶名、密碼、郵箱、電話等基本信息，同時填寫確認密碼確保與密碼一致，若不一致或其他信息不符合規(guī)則提示輸入；用戶登錄只需要輸入正確的用戶名和密碼，輸入錯誤發(fā)送錯誤提示，輸入正確則成功進入前端界面。登陸注冊頁面如圖4.5，4.6所示。圖4.5登錄頁面圖4.6注冊頁面Axios封裝在本系統(tǒng)中使用了axios庫進行前后端的數(shù)據(jù)交互。為了增強用戶賬戶的安全性，我對其進行了一些封裝操作。常用的請求方法被抽象成公共代碼，保證了請求的一致性。同時，在登錄成功后，后端通過傳遞token給前端來標記本次登錄信息，該token具有時效性，若到達過期時間則需要用戶重新登錄。前端發(fā)送的每個請求都要求攜帶token，并且返回值中都包含一個新的headers.authorization字段用于更新token的值。如果請求失敗或者后端返回碼不為200，則頁面會自動提示錯誤信息，并禁止繼續(xù)執(zhí)行請求操作。這樣可以有效地避免用戶的非正常登錄行為，從而增加系統(tǒng)的安全性。constrequest=axios.create({

baseURL:'http://localhost:9090',

timeout:5000})//request攔截器//可以自請求發(fā)送前對請求做一些處理//比如統(tǒng)一加token，對請求參數(shù)統(tǒng)一加密erceptors.request.use(config=>{

config.headers['Content-Type']='application/json;charset=utf-8';

letuser=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):null

if(user){

config.headers['token']=user.token;

//設(shè)置請求頭

}

returnconfig},error=>{

returnPromise.reject(error)});//response攔截器//可以在接口響應(yīng)后統(tǒng)一處理結(jié)果erceptors.response.use(

response=>{

letres=response.data;

//如果是返回的文件

if(response.config.responseType==='blob'){

returnres

}

//兼容服務(wù)端返回的字符串數(shù)據(jù)

if(typeofres==='string'){

res=res?JSON.parse(res):res

}

//當權(quán)限驗證不通過的時候給出提示

if(res.code==='401'){

ElementUI.Message({

message:res.message,

type:'error'

});

}

returnres;

},

error=>{

console.log('err'+error)//fordebug

returnPromise.reject(error)

})exportdefaultrequest4.3.2停車場管理模塊與車輛管理模塊圖4.7停車場管理系統(tǒng)流程圖停車場管理系統(tǒng)界面中，各個停車場的數(shù)據(jù)以表單形式展示，可對庫中數(shù)據(jù)進行增刪改查、導(dǎo)入導(dǎo)出等操作。停車場信息修改時，后端會檢驗數(shù)據(jù)是否重復(fù)，是否符合規(guī)范，若不符合則修改失敗。刪除停車場時，該停車場下不能有車輛停放，否則無法刪除。停車場管理界面如圖4.8所示。圖4.8停車場管理頁面車輛管理模塊與停車場管理模塊類似管理員可以對車輛數(shù)據(jù)進行增刪改查，用戶也可以對自己的車輛進行數(shù)據(jù)修改，但是僅能修改車主，車牌號等基礎(chǔ)屬性。刪除車輛時，停車場下的的車輛總數(shù)也會隨之更改。車輛管理頁面如圖4.9所示。圖4.9車輛管理頁面Mybatis-plus框架Mybatis-plus是Mybatis框架的增強版，不僅可以在xml或注解中通過SQL語句操作數(shù)據(jù)庫，還通過提前封裝好一些crud方法，在需要的時候直接調(diào)用，簡化開發(fā)、提高效率。Mybatis-plus封裝好的crud方法大多在BaseMapper這個接口中，這個接口里面封裝了一些常用的sql，比如insert，updateById，deleteById等常用增刪改查方法。同時Mybatis-plus還有一些常用注解，可以在實體類中使用，方便修改數(shù)據(jù)表屬性。比如@TableId關(guān)聯(lián)主鍵，可以通過修改type屬性來指定某一字段是否自增，再比如@TableName通過value屬性關(guān)聯(lián)表名，當項目的類名與表名一致時，可省寫value屬性。這些注解可以極大地降低crud操作所需的代碼量。@PostMapping//新增和更新

publicResultsave(@RequestBodyParkpark){

returnResult.success(parkService.saveOrUpdate(park));

}

@DeleteMapping("/{id}")//刪除

publicResultdelete(@PathVariableIntegerid){

returnResult.success(parkService.removeById(id));

}

@PostMapping("/del/batch")//批量刪除

publicResultdeleteBatch(@RequestBodyList<Integer>ids){

returnResult.success(parkService.removeByIds(ids));

}

@GetMapping//查詢所有

publicResultfindAll(){

returnResult.success(parkService.list());

}

@GetMapping("/{id}")//按頁查詢

publicResultfindOne(@PathVariableIntegerid){

returnResult.success(parkService.getById(id));

}timestamp日期處理本模塊需要展示許多時間日期相關(guān)信息，如入庫時間、到期時間等。這些時間以timestamp類型的形式存儲在數(shù)據(jù)庫中，而在java中格式則為LocalDateTime。停車時間可通過數(shù)據(jù)庫中的CURRENT_TIMESTAMP默認值實現(xiàn)，而到期時間則需要進行格式轉(zhuǎn)換，讓入庫時間加上停車時間最后得出。//獲取到期時間

LocalDateTimelocalDateTime=LocalDateTime.now();

longhours=Long.parseLong(car.getCarDuration());

car.setEndTime(localDateTime.plusHours(hours));4.3.3主頁圖表模塊本模塊中，主頁頁面顯示登陸用戶的頭像，用戶名，角色等基本信息，展示了系統(tǒng)中用戶總數(shù)，車輛總數(shù)，銷售總額等統(tǒng)計數(shù)據(jù)，同時還通過兩個圖表鮮明的展現(xiàn)出各個停車場的營運車輛數(shù)據(jù)以及一周內(nèi)車輛入庫分析。如圖4.10所示。圖4.10主頁頁面echarts圖表echarts是一款開源的可視化圖表庫，通過JavaScript實現(xiàn)。它支持多種常用的圖表類型，包括折線圖、柱狀圖、散點圖、餅狀圖等，在項目中使用echarts圖表可以很清晰展現(xiàn)數(shù)據(jù)趨勢，便于分析判斷。使用echarts圖標首先需要引入echarts庫，包括echarts.js和echarts.min.js兩個文件，在Vue中引入其中之一即可。之后需要準備容器，在Javascript中創(chuàng)建一個echarts實例，并傳入要綁定的div元素。然后還需要定義圖表的基本參數(shù)，例如標題、x軸和y軸的名稱和類型、數(shù)據(jù)等。最后在網(wǎng)頁中除了放置div元素存儲數(shù)據(jù)外，同樣需要在頁面完成加載后再執(zhí)行將這個圖表展示給用戶的功能，這可以通過使用myChart.setOption(option)來實現(xiàn)。varoption={

title:{

text:"一周車輛入庫統(tǒng)計",

subtext:"趨勢圖",

left:"center",

},

xAxis:{

type:"category",

data:["周一","周二","周三","周四","周五","周六","周日"],

},

yAxis:{

type:"value",

},

series:[

{

data:[],

type:"line",

},

{

data:[],

type:"bar",

},

],

};

varchartDom=document.getElementById("main");

varmyChart=echarts.init(chartDom);

this.request.get("/echarts/cars").then((res)=>{

//填空

//option.xAxis.data=res.data.x

option.series[0].data=res.data;

option.series[1].data=res.data;

//數(shù)據(jù)準備完畢之后再set

myChart.setOption(option);

});4.3.4信息修改模塊用戶可以修改自己的個人信息，包括昵稱、郵箱、電話、頭像等，用戶名與角色不可更改。修改頭像時可選擇電腦中的JPG格式圖片，暫不支持其他格式圖片。信息修改頁面如圖4.11所示。圖4.11信息修改頁面element-ui框架element-ui是一款基于Vue.js2.0的ui框架，提供了豐富的組件，方便開發(fā)者快速搭建web應(yīng)用程序。該框架采取簡潔明亮的設(shè)計風(fēng)格，為開發(fā)者提供了大量的組件（按鈕、表單、表格等），并支持自定義主題和樣式。同時還內(nèi)置多種插件，如日期選擇器、時間選擇器、下拉菜單等。為實現(xiàn)修改頭像功能，我在Vue中引入了upload上傳組件，通過該組件調(diào)用后端接口，快速上傳用戶頭像。<el-upload

class="avatar-uploader"

action="http://localhost:9090/file/upload"

:show-file-list="false"

:on-success="handleAvatarSuccess"

>

<imgv-if="form.avatar":src="form.avatar"class="avatar"/>

<iv-elseclass="el-icon-plusavatar-uploader-icon"></i>

</el-upload>4.3.5記錄查詢模塊圖4.12記錄查詢系統(tǒng)流程圖管理員點擊停車記錄按鈕可查看最近車輛出入庫記錄，車牌識別完的車輛記錄會自動錄入此處；點擊訂單管理按鈕可查看停車場車輛入庫訂單記錄，并了解到各個訂單的時間狀態(tài)，可對訂單信息進行設(shè)置。普通用戶可對未支付的訂單進行支付，但不可以修改。兩個模塊均可進行修改刪除導(dǎo)入導(dǎo)出操作。停車記錄、訂單管理頁面如圖4.13，4.14所示圖4.13停車記錄頁面圖4.14訂單管理頁面Excel格式導(dǎo)入導(dǎo)出本模塊中的核心功能之一是導(dǎo)入導(dǎo)出記錄訂單數(shù)據(jù)。導(dǎo)出操作通過工具類創(chuàng)建writer，在內(nèi)存操作查詢所有數(shù)據(jù)，并把這些對象寫入到Excel內(nèi)，最后服務(wù)器將此Excel文件通過http響應(yīng)返回給瀏覽器下載。導(dǎo)入操作則相反，通過javabean的方式讀取Excel內(nèi)的對象,再調(diào)用saveBatch(list)方法存儲到數(shù)據(jù)庫里。@GetMapping("/export")

publicvoidexport(HttpServletResponseresponse)throwsException{

//從數(shù)據(jù)庫查詢出所有的數(shù)據(jù)

List<Record>list=recordService.list();

//通過工具類創(chuàng)建writer寫出到磁盤路徑

//ExcelWriterwriter=ExcelUtil.getWriter(filesUploadPath+"/用戶信息.xlsx");

//在內(nèi)存操作，寫出到瀏覽器

ExcelWriterwriter=ExcelUtil.getWriter(true);

//一次性寫出list內(nèi)的對象到excel，使用默認樣式，強制輸出標題

writer.write(list,true);

//設(shè)置瀏覽器響應(yīng)的格式response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");

StringfileName=URLEncoder.encode("用戶信息","UTF-8");

response.setHeader("Content-Disposition","attachment;filename="+fileName+".xlsx");

ServletOutputStreamout=response.getOutputStream();

writer.flush(out,true);

out.close();

writer.close();

}

@PostMapping("/import")

publicResultimp(MultipartFilefile)throwsException{

InputStreaminputStream=file.getInputStream();

ExcelReaderreader=ExcelUtil.getReader(inputStream);

//通過javabean的方式讀取Excel內(nèi)的對象，但是要求表頭必須是英文，跟javabean的屬性要對應(yīng)起來

List<Record>list=reader.readAll(Record.class);

recordService.saveBatch(list);

returnResult.success(true);

}具體步驟如下：1.從數(shù)據(jù)庫中獲取car對象列表。2.使用easyexcel創(chuàng)建excelwriter實例，并將數(shù)據(jù)記錄集合寫入工作表中。3.配置httpservletresponse響應(yīng)的content-type為"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"，并設(shè)置該響應(yīng)附帶的文件名稱和類型。4.獲取servletoutputstream并將結(jié)果通過excelwriter的flush()方法傳遞到response流中。5.關(guān)閉worksheet和excelwriter實例，釋放資源。4.3.6車牌識別模塊圖4.15車牌識別系統(tǒng)流程圖車牌識別模塊用于實現(xiàn)車輛出庫入庫，進入頁面后選擇出庫還是入庫操作，車輛入庫時需要填寫所在停車場、車主等數(shù)據(jù)，出庫時則不需要。確認后可選擇兩種方式識別車牌，分別為攝像頭識別和圖片識別。圖片識別調(diào)用百度云接口，提取出車牌號與車牌顏色；攝像頭自動拍下車牌的照片，并轉(zhuǎn)為JPG格式，再進行圖片識別。車牌識別成功后，點擊確定按鈕自動展示車輛數(shù)據(jù)，并提交支付訂單。如圖4.16，4.17所示。圖4.16車牌識別圖片上傳頁面圖4.17車牌識別拍照上傳頁面百度云接口實現(xiàn)車牌識別百度智能云是一個綜合性的云計算平臺，提供了豐富的api服務(wù)和開發(fā)工具來支持用戶構(gòu)建自己的ai應(yīng)用程序，滿足開發(fā)者在不同領(lǐng)域的需求。本次停車場管理系統(tǒng)所實現(xiàn)的車牌識別功能可通過調(diào)用百度智能云api接口達成需求。本次的車牌識別是一種基于人工智能技術(shù)的車牌識別系統(tǒng)，它可以實現(xiàn)對車輛行駛過程中出現(xiàn)的車牌信息進行實時準確的自動識別。該系統(tǒng)的工作流程主要由圖像采集、圖像預(yù)處理、車牌定位、字符分割、字符識別等多個步驟組成。首先，通過攝像頭或者其他設(shè)備采集到待識別車輛的圖像，然后利用深度學(xué)習(xí)等技術(shù)對圖像進行預(yù)處理和特征提取，對車牌區(qū)域進行定位和分割，最后采用ocr技術(shù)對車牌中的字符進行識別，從而達到車牌號碼的自動識別目的。百度智能云的接口調(diào)用流程也十分方便。首先注冊百度智能云賬戶并創(chuàng)建應(yīng)用程序，獲取APP_ID和API_KEY以及SECRET_KEY。其次在SpringBoot項目中引入相關(guān)依賴，以及SDK工具包。然后在代碼中引入相應(yīng)的SDK并進行初始化。最后根據(jù)具體的接口文檔，進行參數(shù)設(shè)置、請求發(fā)送和結(jié)果解析等操作；根據(jù)具體的業(yè)務(wù)邏輯，將接口調(diào)用結(jié)果返回給前端或者保存在數(shù)據(jù)庫中等操作。publicstaticStringgetAuth(){

//官網(wǎng)獲取的APIKey

StringclientId="2t660nw7VgXTVZZ4Qt7h0Yn2";

//官網(wǎng)獲取的SecretKey

StringclientSecret="nYvxi8Iq7s4XpbdSpPzRLVwEr8rvf84U";

returngetAuth(clientId,clientSecret);

}

/**

*調(diào)用OCR

*/

publicstaticStringrequest(StringhttpUrl,StringhttpArg){

BufferedReaderreader=null;

Stringresult=null;

StringBuffersbf=newStringBuffer();

try{

URLurl=newURL(httpUrl);

HttpURLConnectionconnection=(HttpURLConnection)url

.openConnection();

connection.setRequestMethod("POST");

connection.setRequestProperty("Content-Type","application/x-www-form-urlencoded");

connection.setRequestProperty("apikey","2t660nw7VgXTVZZ4Qt7h0Yn2");

connection.setRequestProperty("access_token",BaiDuOCR.getAuth());

connection.setDoOutput(true);

connection.getOutputStream().write(httpArg.getBytes("UTF-8"));

connection.connect();

InputStreamis=connection.getInputStream();

reader=newBufferedReader(newInputStreamReader(is,"UTF-8"));

StringstrRead=null;

while((strRead=reader.readLine())!=null){

sbf.append(strRead);

sbf.append("\r\n");

}

reader.close();

result=sbf.toString();

}catch(Exceptione){

e.printStackTrace();

}

returnresult;

}

/**

*車牌號參數(shù)轉(zhuǎn)換

*@paramjsonResult

*@return

*/

publicstaticHashMap<String,String>getHashMapByJson(StringjsonResult){

HashMapmap=newHashMap<String,String>();

try{

JSONObjectjsonObject=newJSONObject(jsonResult);

JSONObjectwords_result=jsonObject.getJSONObject("words_result");

map.put("color",words_result.get("color"));

map.put("number",words_result.get("number"));

}catch(Exceptione){

e.printStackTrace();

}

returnmap;

}Vue調(diào)用攝像頭權(quán)限Vue可通過調(diào)用本地Navigator攝像頭實現(xiàn)拍照功能，因為調(diào)用攝像頭有使用權(quán)限，所以一般在本地運行，若要在線上運行則需使用https域名。調(diào)用攝像頭需要用到MediaDevices.getUserMedia()，該api需要用戶給予使用媒體輸入的許可，媒體輸入會產(chǎn)生一個包含請求的媒體類型軌道MediaStream，媒體流包含視頻軌道、音頻軌道以及其他軌道。調(diào)用api會返回一個Promise對象，成功調(diào)用后會回調(diào)一個MediaStream對象。如果使用權(quán)限被用戶拒絕，或者瀏覽器中需要的媒體源無法使用，Promise對象最終則會回調(diào)一個PermissionDeniedError或者NotFoundError。實際操作中，一些瀏覽器實現(xiàn)了部分mediaDevices，因為getUserMedia會覆蓋現(xiàn)有的屬性，所以我們要分配多個對象。如下面代碼所示，如果缺少getUserMedia屬性，就新添加一個。

if(navigator.mediaDevices.getUserMedia===undefined){

navigator.mediaDevices.getUserMedia=function(constraints){

letgetUserMedia=

navigator.webkitGetUserMedia||

navigator.mozGetUserMedia||

navigator.getUserMedia;