職場大變樣社區（）：下載畢業設計成品全套資料，全部50元以下畢業設計說明書小區物業停車管理系統小區停車管理系統摘要隨著現代社會的不斷發展，小區業主汽車擁有數量越來越多，直接導致了人們停車難、亂停車的現象。同時大中城市的很多住宅小區，包括以前建造的小區，由于在規劃設計中沒有充分考慮到汽車進入到家庭的速度和數量，沒有預留出足夠的空間用來建造停車場或者停車位，因此，住宅小區的停車難問題也十分嚴重，給居民的正常生活帶來了嚴重的不良影響。再加上小區的管理人員，對車輛的隨意進出缺乏有力的管理措施，這樣不僅破壞了小區的停車秩序，也給小區的業主帶來了生活上的不便。居住區作為人們日常生活交往的空間，隨著汽車的涌入居住區在功能結構、服務范圍、空間布局、用地規劃等很多方面受到了前所未有的挑戰和沖擊。這種挑戰和沖擊對于中國的小區停車物業管理特別的嚴重。本系統前臺主要使用JSP作為開發語言，后臺使用ORACLE作為數據庫管理系統，開發環境是Eclipse。實現了小區業主的增刪改查管理和車輛的查詢，增刪改查管理，開發出的一個基于Web技術的B/S結構的小區停車管理系統。關鍵詞：小區停車管理，WEBABSTRACTWiththecontinuousdevelopmentofmodernsociety,thedistricthasanincreasingnumberofcarowners,adirectresultofpeopleparkingdifficult,chaoticparkingphenomenon.Meanwhile,manycitiesresidentialdistrict,includingthedistrictbeforeconstruction,becausetheplanninganddesignofthecarisnotfullytakenintoaccountintothespeedandthenumberoffamiliesdidnotreserveenoughspacefortheconstructionofaparkinglotorparkingspaces,so,residentialparkingproblemisalsoveryserious,tothenormallifeoftheresidentsbroughtseriousadverseeffects.Coupledwiththedistrict'smanagementstaff,thelackofeffectivemanagementmeasurestowanderinandoutofthevehicle,sothatnotonlydestroyedthedistrictparkingorder,butalsotoownersofresidentiallifebringsinconvenience.Asresidentialareasofdailylifeinteractionspace,withtheinfluxofresidentialareasinmanywaysthecarfunctionalstructure,scopeofservices,spatiallayout,landuseplanninghasbeenunprecedentedchallengesandimpact.ThischallengeandimpactparticularlyseriousforChina'sresidentialparkingpropertymanagement.ThesystemmainlyusesJSPforegroundasthedevelopmentlanguage,thebackgroundusingMySQLasthedatabasemanagementsystem,developmentenvironmentisEclipse.ResidentialpropertyownerstoachieveaqueryCRUDmanagementandvehicleCRUDmanagement,thedevelopmentofaWeb-basedtechnology,B/Sstructureoftheresidentialparkingmanagementsystem.Keywords:Residentialparkingmanagement,WEB,JSP,B/Sstructure目錄TOC\o"1-2"\h\z\t"標題3,3,標題4,4"1緒論 11.1課題背景 11.2目的和意義 11.3開發工具及技術 1開發工具 11.3.2JSP技術 31.3.3JQuery 41.3.4Ajax 41.4軟硬件需求 42需求分析 52.2可行性分析 5技術的可行性 5經濟的可行性 5操作可行性 5法律的可行性 62.3系統用例圖 62.4功能模塊圖 72.5設計基本思想 72.6性能需求 8系統的安全性 8數據的完整性 82.7界面需求 83系統分析與設計 103.1數據庫的分析與設計 10數據庫的概念結構設計 10數據庫的邏輯結構設計 11數據持久化方案 134系統功能實現 144.1系統核心業務邏輯設計 14用戶登錄功能系統交互 14車輛添加功能系統交互 15車輛停靠功能系統交互 17車輛駛離功能系統交互 174.2系統代碼框架類圖 194.3系統登陸頁面實現 204.3系統主界面設計 20車輛信息管理 21車輛高級查詢 30可用車位查詢 34車輛停靠 35車輛離開 364.4系統異常處理機制 375系統測試 385.1系統測試目的與意義 385.2測試過程 38常見Error/Exception解決辦法 38結論 40參考文獻 41致謝 42第一章緒論1.1課題背景隨著隨著小區業主汽車擁有數量越來越多，直接導致了人們停車難、亂停車的現象。同時大中城市的很多住宅小區，包括以前建造的小區，由于在規劃設計中沒有充分考慮到汽車進入到家庭的速度和數量，沒有預留出足夠的空間用來建造停車場或者停車位，因此，住宅小區的停車難問題也十分嚴重，給居民的正常生活帶來了嚴重的不良影響。再加上小區的管理人員，對車輛的隨意進出缺乏有力的管理措施，這樣不僅破壞了小區的停車秩序，也給小區的業主帶來了生活上的不便。居住區作為人們日常生活交往的空間，隨著汽車的涌入居住區在功能結構、服務范圍、空間布局、用地規劃等很多方面受到了前所未有的挑戰和沖擊。這種挑戰和沖擊對于中國的小區停車物業管理特別的嚴重。在停車越來越麻煩，物業管理越來越困難的情況下，小區停車管理系統的出現迫在眉睫，如何合理的搭建貼近需求，合理，高效的小區停車管理軟件也成為網站建設和編程人員研究的方向1.2目的和意義1.3開發工具及技術開發工具此次設計主要采用Eclipse+Maven+Jetty后臺服務器進行，設計過程中頁面主要使用JSP+Jquery+Ajax技術完成，下面對Eclipse、Jetty和Orcle數據庫進行簡要介紹。EclipseEclipse，是一個十分優秀的用于開發Java,J2EE的Eclipse插件集合，MyEclipse的功能非常強大，支持也十分廣泛，尤其是對各種開元產品的支持十分不錯。MyEclipse企業級工作平臺（MyEclipseEnterpriseWorkbench，簡稱MyEclipse）是對EclipseIDE的擴展，利用它我們可以在數據庫和JavaEE的開發、發布，以及應用程序服務器的整合方面極大的提高工作效率。它是功能豐富的JavaEE集成開發環境，包括了完備的編碼、調試、測試和發布功能，完整支持HTML,Struts,JSP,CSS,Javascript,SQL,Hibernate。MavenMaven是一個項目管理工具，它包含了一個項目對象模型(ProjectObjectModel)，一組標準集合，一個項目生命周期(ProjectLifecycle)，一個依賴管理系統(DependencyManagementSystem)，和用來運行定義在生命周期階段(phase)中插件(plugin)目標(goal)的邏輯。當你使用Maven的時候，你用一個明確定義的項目對象模型來描述你的項目，然后Maven可以應用橫切的邏輯，這些邏輯來自一組共享的（或者自定義的）插件。Maven有一個生命周期，當你運行mvninstall的時候被調用。這條命令告訴Maven執行一系列的有序的步驟，直到到達你指定的生命周期。遍歷生命周期旅途中的一個影響就是，Maven運行了許多默認的插件目標，這些目標完成了像編譯和創建一個JAR文件這樣的工作。JettyJetty是一個開源的servlet容器，它為基于Java的web內容，例如JSP和servlet提供運行環境。Jetty是使用Java語言編寫的，它的API以一組JAR包的形式發布。開發人員可以將Jetty容器實例化成一個對象，可以迅速為一些獨立運行（stand-alone）的Java應用提供網絡和web連接。OrcleORACLE數據庫系統是美國ORACLE公司（甲骨文）提供的以分布式數據庫為核心的一組軟件產品，是目前最流行的客戶/服務器(CLIENT/SERVER)或B/S體系結構的數據庫之一。比如SilverStream就是基于數據庫的一種中間件。ORACLE數據庫是目前世界上使用最為廣泛的數據庫管理系統，作為一個通用的數據庫系統，它具有完整的數據管理功能；作為一個關系數據庫，它是一個完備關系的產品；作為分布式數據庫它實現了分布式處理功能。同時ORACEL數據庫具有規模大，多用戶，支持工具多，可移植性強，備份與恢復便捷，安全性強，支持多種網絡協議等優點。1.3.2JSP技術JSP技術使用Java編程語言編寫類XML的tags和scriptlets，來封裝產生動態網頁的處理邏輯。網頁還能通過tags和scriptlets訪問存在于服務端的資源的應用邏輯。JSP將網頁邏輯與網頁設計和顯示分離，支持可重用的基于組件的設計，使基于Web的應用程序的開發變得迅速和容易。Web服務器在遇到訪問JSP網頁的請求時，首先執行其中的程序段，然后將執行結果連同JSP文件中的HTML代碼一起返回給客戶。插入的Java程序段可以操作數據庫、重新定向網頁等，以實現建立動態網頁所需要的功能。JSP與Servlet一樣，是在服務器端執行的，通常返回給客戶端就是一個HTML文本，因此客戶端只要有瀏覽器能瀏覽。JSP頁面由HTML代碼和嵌入其中的Java代碼所組成。服務器在頁面被客戶端請求以后對這些Java代碼進行處理，然后將生成的HTML頁面返回給客戶端的瀏覽器。Servlet是JSP的技術基礎，而且大型的Web應用程序的開發需要JavaServlet和JSP配合才能完成。JSP具備了Java技術的簡單易用，完全的面向對象，具有平臺無關性且安全可靠，主要面向因特網的所有特點。JSP技術的優點：（1）一次編寫，到處運行。除了系統之外，代碼不用做任何更改。（2）系統的多平臺支持。基本上可以在所有平臺上的任意環境中開發，在任意環境中進行系統部署，在任意環境中擴展。相比ASP/.net的局限性是顯而易見的。（3）強大的可伸縮性。從只有一個小的Jar文件就可以運行Servlet/JSP，到由多臺服務器進行集群和負載均衡，到多臺Application進行事務處理，消息處理，一臺服務器到無數臺服務器，Java顯示了一個巨大的生命力。（4）多樣化和功能強大的開發工具支持。Java已經有了許多非常優秀的開發工具，而且許多可以免費得到，并且其中許多已經可以順利的運行于多種平臺之下(5)支持服務器端組件。web應用需要強大的服務器端組件來支持，開發人員需要利用其他工具設計實現復雜功能的組件供web頁面調用，以增強系統性能。JSP可以使用成熟的JAVABEANS組件來實現復雜商務功能。內部對象說明：request客戶端請求，此請求會包含來自GET/POST請求的參數；response網頁傳回客戶端的響應；pageContext網頁的屬性是在這里管理；session與請求有關的會話；applicationservlet正在執行的內容；out用來傳送響應的輸出流；config代碼片段配置對象；pageJSP網頁本身；exception針對錯誤網頁，未捕捉的例外1.3.3JQueryjQuery是一個兼容多瀏覽器的javascript框架，核心理念是writeless,domore(寫得更少,做得更多)。jQuery在2006年1月由美國人JohnResig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由DaveMethvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript框架，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可以使開發者更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。1.3.4AjaxAjax基于Web的應用到基于數據的應用的轉換。在基于數據的應用中，用戶需求的數據如聯系人列表，可以從獨立于實際網頁的服務端取得并且可以被動態地寫入網頁中，給緩慢的Web應用體驗著色使之像桌面應用一樣。Ajax的核心是JavaScript對象XmlHttpRequest。該對象在InternetExplorer5中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。1.4軟硬件需求硬件需求：CPU：Pentium以上計算機內存:512M以上軟件需求：操作系統版本：WindowsXP/vista/Win7開發工具：Eclipse3.6for8.8后臺服務器：Jetty開發語言：Java瀏覽器：FF26.0及以上，兼容Chrome,IE7及以上。第二章需求分析2.2可行性分析開發任何一個系統，都會受到時間和資源上的限制。因此，在每一個項目開發之前，都要進行可行性分析，可以減少項目的開發風險，避免人力、物力和財力的浪費。下面就技術、經濟、操作和法律四個方面來介紹。技術的可行性本系統開發工具是Eclipse和Orcle數據庫，開發語言是Java，主要使用了J2EE的技術，java是一種面向對象編程語言，簡單易學而且靈活方便。大三時就學習了java課程，大四期間也系統的了解了J2EE的知識，小區停車管理系統總體上開發難度不高，數據庫的設計和操作是本系統設計的核心。在大學期間學習過軟件工程，軟件測試，UML統一建模語言等課程，每個學期也會完成對應的課程設計，具備一定的系統分析、設計和測試能力。因此，完成系統實現在技術上完全具有可行性。經濟的可行性如今是信息化時代，信息化管理可以使小區停車管理工作更加系統化、快速化、全面化。這樣可以為社區管理帶來較高的工作效益和經濟效益，本系統對計算機配置的要求不高，企業機房更換下來的低配置電腦都可以完全滿足需要，再者，企業在管理工作上的高效率和便捷性遠遠超過了開發本系統的成本，所以在經濟上具有完全的可行性。操作可行性本系統操作簡單，輸入信息頁面大多數都是下拉框的選擇形式，在某些頁面，信息可以自動生成，無需輸入，時間的輸入也是用的日歷控件，操作簡便，對操作人員的要求很低，只需對WINDOWS操作熟練，加之對本系統的操作稍加培訓即可工作，而且本系統可視性非常好，所以在技術上不會有很大難度。法律的可行性本系統是自行開發的管理系統，是很有實際意義的系統,開發環境軟件和使用的數據庫都是開源代碼，開發這個系統不同于開發普通的系統軟件，不存在侵權等問題，即法律上是可行的。2.3系統用例圖管理員是系統的核心用戶，涉及到六大功能模塊，其中管理員添加，管理車輛信息，車輛停靠/駛離操作為核心業務。2.4功能模塊圖2.5設計基本思想設計思想遵循以下幾點：1.采用B/S模式進行開發，其優點是后臺與前臺處理層次分明，而且符合眾多已經習慣網頁方式的用戶。2.采用面向對象的開發與設計理念。運用面向對象技術的前提是對整體系統的高度和準確抽象，通過它可以保證系統良好的框架，進而帶來產品較強的穩定性和運行效率。3.采用模塊化設計。模塊化設計要求將整個系統劃分成基于小的模塊，有利于代碼的重載，簡化設計和實現過程。4.簡單方便的系統界面。設計簡單友好的系統界面，方便用戶較快的適應系統的操作。5．速度優先原則。由于此工具最重要的評測標準就是速度，因此在設計過程中，具體過程盡量做到資源占用少，速度快。6．設計既要突出重點，又要細致周到。要符合設計需求，在有可能改進的地方進行擴充，使系統更適應用戶的需要。2.6性能需求系統的安全性小區停車管理數據的完整性12.7界面需求界面設計目前已經成為評價軟件質量的一條重要指標，一個好的用戶界面可以增加用戶使用系統的信心和興趣，提高工作效率，JSP技術是用JAVA語言作為腳本語言的，JSP網頁為整個服務器端的JAVA庫單元提供了一個接口來服務于HTTP的應用程序。創建動態頁面非常方便。用戶界面是指軟件系統與用戶交互的接口，通常包括輸出、輸入、人-機對話的界面格式等。1.輸出設計輸出是由計算機對輸入的原始信息進行加工處理，形成高質量的有效信息，并使之具有一定的格式，提供管理者使用，這是輸出設計的主要職責和目標。系統設計的過程正好和實施過程相反，并不是從輸入設計到輸出設計，而是從輸出設計到輸入設計，這是因為輸出表格直接與使用者相聯系，設計的出發點應當是保證輸出表格方便地為使用者服務，正確及時反映和組成用于各部門的有用信息。輸出設計的原則是考慮既要全面反映不同管理層的各項需要，又要言簡意賅，不要將用戶需要和不需要的都提供給用戶。2.輸入設計輸入數據的收集和錄入是比較費事的，需要大量的人力和一定設備，并且容易出錯。如果輸入系統的數據有錯誤，則處理后的輸出將擴大這些錯誤，因此輸入數據的正確性對于整個系統質量的好壞是具有決定性意義的。輸入設計的原則有如下幾點：1）輸入量應保持在能滿足處理要求的最低限度。設計中可采用設置字段初值，下拉式數據窗口等方式盡量減少用戶鍵盤輸入量。輸入量越少，錯誤率就越少，數據準備時間也減少。2）輸入的準備及輸入過程應盡量容易進行，從而減少錯誤的發生。3）應盡量早對輸入數據進行檢查（盡量接近原數據發生點）,以便使錯誤及時得到更正。4）輸入數據盡早地用其處理所需的形式被記錄，以避免數據由一種介質轉移到另一種介質時需要轉錄而可能發生的錯誤第三章系統分析與設計3.1數據庫的分析與設計計算機信息系統以數據庫為核心，在數據庫管理系統的支持下，進行信息的收集、整理、存儲、檢索、更新、加工、統計和傳播等操作。數據庫已經成為現在信息系統等計算機系統的基礎與核心部分。數據庫設計的好壞直接影響到整個系統的質量和效率。數據庫的設計一般經過規劃。需求分析、概念設計、邏輯設計、物理設計5個步驟。數據庫的概念結構設計概念設計是指在數據分析的基礎上自底向上的建立整個系統的數據庫概念結構，從用戶的角度進行視圖設計，然后將視圖集成，最后對集成的結構分析優化得到最后結果。數據庫的概念結構設計采用實體—聯系（E-R）模型設計方法。E-R模型法的組成元素有：實體、屬性、聯系，E-R模型用E-R圖表示，是提示用戶工作環境中所涉及的事物，屬性則是對實體特性的描述。概念設計的目標是產生反映企業組織信息要求的數據庫概念結構，即概念模式。概念模式是獨立于數據庫邏輯結構，獨立于支持數據庫的DBMS，不依賴于計算機系統的，根據以上對數據庫的需求分析，并結合系統概念模型的特點及建立方法，建立E-R模型圖。停車管理系統主要業務實體ER圖如圖3.1所示：(2)管理員實體E-R圖如圖3.2所示：數據庫的邏輯結構設計我們知道，數據庫概念模型獨立于任何特定的數據庫管理系統，因此，需要根據具體使用的數據庫管理系統的特點進行轉換。即轉化為按計算機觀點處理的邏輯關系模型,E-R模型向關系數據庫模型轉換應遵循下列原則：*每一個實體要轉換成一個關系*所有的主鍵必須定義非空（NOTNULL）*對于二元聯系應按照一對多、弱對實、一對一、多對多等聯系來定義外鍵。根據E-R模型，網吧管理系統建立了以下邏輯數據結構，下面是各數據表的詳細說明。(1)會員信息表主要是記錄了網吧會員的基本信息，表結構如圖3.1所示。表3.1業主表(T_OWNER_EVEN)列名數據類型長度允許空是否主鍵說明IDnumber否是自增IDOWNER_NOVarchar232否否門牌號ADDRESSVarchar264是否實際地址(2)上機信息表主要是記錄了會員的上機信息。表結構如表3.2所示。表3.2車輛表(T_CAR_EVEN)列名數據類型長度允許空是否主鍵說明IDnumber否是自增IDCAR_NOVarchar232否否車輛牌照CAR_TYPEVarchar216是否車輛類型CAR_COLORVarchar216是否車輛顏色IS_RESIDENTVarchar216否否是否常駐(3)管理員信息表主要記錄的管理員的賬號信息，包括用戶名和密碼，表結構如表3.5所示。表3.5車位表(T_ZONE_EVEN)列名數據類型長度允許空是否主鍵說明IDNUMBER否是自增IDZONE_NOVarchar250否否車位編碼ADDRESSVarchar250是否地址AREAVarchar216是面積(4)管理員信息表主要記錄的管理員的賬號信息，包括用戶名和密碼，表結構如表3.5所示。表3.5歷史記錄表(T_CAR_ZONE_MAPPING)列名數據類型長度允許空是否主鍵說明IDNUMBER否是自增IDCAR_NOVarchar216否否車輛牌照ZONE_NOVarchar216否否車位編碼IN_USEVarchar216否否是否可用IS_AVAILABLEVarchar216否否是否歷史記錄ACTIVE_STARTVarchar2DATE否否開始時間ACTIVE_ENDVarchar2DATE是否結束時間MODIFY_TIMEVarchar2DATE是否更新時間MODIFY_BYVarchar232是否更新人VERSION_NONUMBER否否版本號REMARKVarchar264是否備注(5)管理員信息表主要記錄的管理員的賬號信息，包括用戶名和密碼，表結構如表3.5所示。表3.5管理員表(T_USER_EVEN)列名數據類型長度允許空是否主鍵說明IDNUMBER否是自增IDUSERNAMEVarchar264否否用戶名PSSWORDVarchar264否否密碼（MD5）Hinernate數據持久化方案采用Hibernate數據持久化方案，需在Maven工程中導入對Hibernate的依賴，即在父項目的pom.xml添加Hibernate提供的Dependency屬性就可以方便的為項目添加Hibernate。在程序中，為了提高代碼的復用性，提高程序的可擴展性，并未采取原生的hibernate方法直接交互數據庫，而是進行了一定程度的抽象和封裝，在Dao層對原生方法進行封裝，加強了程序對于分頁的處理，Hibernate工作原理如圖所示使用使用Hibernate對JDBC進行了非常輕量級的對象封裝，使得Java程序員可以隨心所欲的使用對象編程思維來操縱數據庫。Hibernate可以應用在任何使用JDBC的場合，既可以在Java的客戶端程序使用，也可以在Servlet/JSP的Web應用中使用，最具革命意義的是，Hibernate可以在應用EJB的J2EE架構中取代CMP，完成數據持久化的重任。Hibernate封裝類代碼展示，分頁查詢功能代碼如下：/***通過HQL方式查詢分頁列表*@parampage分頁*@paramcountHql總數HQL*@paramqueryHql查詢HQL*@paramconditions條件*@return分頁列表*/@SuppressWarnings({"rawtypes","unchecked"})publicPageListqueryPageListByHql(finalPagepage,finalString countHql,finalStringqueryHql,finalObject...conditions){longcount=(Long)this.queryByHql(countHql,conditions);page.setCount(count);Listlist=null;if(count>0){list=this.hibernateTemplate.executeFind(newHibernateCallback(){publicObjectdoInHibernate(Sessionsession)throwsHibernateException,SQLException{Queryquery=createQuery(session,queryHql,conditions);query.setFirstResult(page.getIndex());query.setMaxResults(page.getPageSize());returnquery.list();}});}returnnewPageList(page,list);}第四章系統功能實現在管理信息系統的生命周期中，經過了需求分析、系統設計等階段之后，便開始了系統實施階段。在系統分析和設計階段，系統開發工作主要是集中在邏輯、功能和技術設計上，系統實施階段要繼承此前面各個階段的工作成果，將技術設計轉化為物理實現，因此系統實施的成果是系統分析和設計階段的結晶。4.1系統核心業務邏輯設計用戶登錄功能系統交互在管理員輸入了賬號密碼，并點擊登錄按鈕后將出發登錄業務，系統會將所獲取的用戶數據進行加密加簽等防泄密操作，使用密文進行業務處理和系統交互，并最終與數據庫中的密文進行對比，以確定用戶身份。登錄業務時序圖如圖4.1所示：車輛添加功能系統交互每當有新車進入小區時將會出發車輛添加業務，由于功能限制將由管理員手動添加，當管理員打開添加對話框并輸入信息后，程序將自行校驗常規信息的正確定（如：車牌號是否符合中華人民共和國機動車牌照標準，用戶輸入長度是否超于程序界限等）添加業務時序圖如圖4.1所示：

車輛停靠功能系統交互當管理員打開備選車位對話框時出發車輛停靠業務邏輯，系統將根據管理員選定車輛的特性進行選擇，當車輛為常駐是表明該車有固定的停車位可選，當車輛為臨時則表明該車只能被分配臨時停車位。停靠業務時序圖如圖4.1所示：車輛駛離功能系統交互當車輛駛離時，管理員需要釋放車位，此時出發車輛駛離業務邏輯，當管理員確認車輛離開后選中該車，點擊駛離按鈕，程序會將車輛停靠記錄置為歷史記錄，并釋放綁定的停車位。駛離業務時序圖如圖4.1所示：4.2系統代碼框架類圖小區停車管理系統在系統架構上遵循了MVC的設計模式，代碼框架如圖所示：4.3系統登陸頁面實現1.描述：為了保證系統的安全性，要先使用本系統必須先登陸到系統中，用戶需要正確的賬號和密碼登錄本系統。2.程序運行效果圖如圖4.1所示：3.在登陸頁面輸入用戶名和密碼以，點擊提交按鈕，跳轉到登陸的service中，在該service中會對用戶名，密碼，驗證碼進行判斷，驗證通過進入對應的頁面。4.3系統主界面設計1.描述：系統主頁面：左方頁面展示了管理員可操作的四大功能，進入相關的管理頁面可以鏈接到子菜單，并且高亮顯示，每個管理模塊下面都有相應的子菜單。2.程序運行效果圖如圖4.2所示：在跳轉至住車輛界面后將動態展示車輛圖片，同時左側浮動展示導航欄，導航欄采用可伸縮設計，頁面美觀，占用空間小，可擴展性大。在頁面中部動態顯示車輛圖片，頁面加載過程中異步訪問后臺檢索車輛并在車輛管理表格中展示車輛簡要信息，以及詳情、信息修改、選車位、停靠歷史的點擊按鈕。在頁面底部浮動展示系統名稱，用戶名稱，和當前時間。車輛信息管理車輛信息錄入描述：管理員在操作欄中點擊添加后網頁生成彈出框，展示加載頁面。由于加載代碼邏輯簡單不做過多展示。在加載過程中程序會自動對用戶輸入的信息進行校驗，在當前添加業務邏輯中主要校驗包括：字符串長度限制4-32位（可變更）；是否為空提交；數字范圍是否在程序可承受范圍內，車輛牌照編號是否符合中華人民共和國車輛牌照格式，車主信息中手機號碼是否符合手機號碼格式，同時做異步后臺校驗所添加車輛是否已經存在。若所以校驗有一項未通過則內容不能提交后臺。各項不通過均有紅色字體的頁面提示。前臺校驗核心代碼如下：//加載表單提交校驗functioninitValidateForm(target){ //字符串驗證 jQuery.validator.addMethod("stringCheck",function(value,element){ returnthis.optional(element)||/^[\u0391-\uFFE5\w]+$/.test(value); },"只能包括中文字、英文字母、數字和下劃線"); jQuery.validator.addMethod("positiveInteger",function(value,element){ varaint=parseInt(value); returnaint>0&&(aint+"")==value; },"Pleaseenteravalidnumber."); //數字驗證 jQuery.validator.addMethod("numberCheck",function(value,element){ returnthis.optional(element)||/^[1-9]\d*$/.test(value); },"只能包括數字"); //車牌號驗證 jQuery.validator.addMethod("carNoCheck",function(value,element){ returnthis.optional(element)||/^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/.test(value); },"請輸入正確格式的機動車牌照"); //中文字兩個字節 jQuery.validator.addMethod("byteRangeLength",function(value,element,param){ varlength=value.length; for(vari=0;i<value.length;i++){ if(value.charCodeAt(i)>127){ length++; } } returnthis.optional(element)||(length>=param[0]&&length<=param[1]); },"請確保輸入的值在3-15個字節之間(一個中文字算2個字節)"); //重名校驗 jQuery.validator.addMethod("existCheck",function(value,element){ varflag=false; varparams={"carNo":value}; $.ajax({ url:"${ctx}/car/carNoExistCheck.action", type:"post", dataType:"json", data:params, async:false, success:function(data){ if(data.isSuccess==true){ flag=true; }else{ flag=false; } } }); returnflag; },"輸入的參數已被使用，請確認輸入"); target.validate({ //鍵盤按下時校驗 onkeyup:false, //規則 rules:{ carNo:{ carNoCheck:true, existCheck:true, stringCheck:true, byteRangeLength:[4,32], required:true }, carType:{ stringCheck:true, byteRangeLength:[2,32], required:true }, carColor:{ stringCheck:true, byteRangeLength:[2,32], required:true, } }, messages:{ carNo:{ carNoCheck:"請輸入正確格式的機動車牌照", existCheck:"輸入參數已存在", stringCheck:"只能輸入中文字、英文字母、數字和下劃線", byteRangeLength:"確保輸入長度在4-32位之間", required:"請輸入內容" }, carType:{ stringCheck:"只能輸入中文字、英文字母、數字和下劃線", byteRangeLength:"確保輸入長度在4-32位之間", required:"請輸入內容" }, carColor:{ stringCheck:"只能輸入中文字、英文字母、數字和下劃線", byteRangeLength:"確保輸入長度在4-32位之間", required:"請輸入內容" } }, //通過回調,有時校驗不通過也會執行，先注釋掉 //submitHandler:ajaxSubmit(target,targetURL), //不通過回調 invalidHandler:function(form,validator){ alert("表單校驗不通過"); returnfalse; } }); }2.程序效果圖如下圖4.3所示：圖4.3車輛信息錄入車輛信息管理1.描述：在主頁車輛頁面加載過程中會自動加載表格，同事異步訪問后臺檢索車輛信息并作展示，更具不同的信息可展示不同的顏色一遍管理員區分。由于表格采用AJAX技術，可以異步刷新，整個頁面不會有重新加載的動作，反應速度快，用戶體驗好。2.程序效果圖如下圖4.4所示圖4.4車輛信息管理車輛信息管理表格核心代碼：//加載表格 functioninitCarTable(table,pager,URL){ table.jqGrid({ url:URL, datatype:"json", mtype:"post", viewrecords:true, multiselect:false, height:240, width:1000, scrollrows:true, shrinkToFit:true, altRows:true,//各行變色 altclass:"altclass",//隔行變色樣式 colNames:["序號","車牌號","型號","顏色","停泊狀態","使用狀態","啟用時間","注銷時間","詳情","修改","可選車位","停靠歷史"], //對顯示列屬性的設置，是一個數組對象。常用到的屬性：name列顯示的名稱；index傳到服務器端用來排序用的列名稱； //sortable是否可以排序,editable是否可以在快捷修改方法中做修改 colModel:[{ name:"id", index:"id", label:"id", width:40, sortable:false, editable:false, align:"center" },{ name:"carNo", index:"carNo", label:"carNo", width:80, sortable:false, editable:false, align:"center", classes:"code-column" },{ name:"carType", index:"carType", label:"carType", width:100, sortable:false, editable:false, align:"center" },{ name:"carColor", index:"carColor", label:"carColor", width:40, sortable:false, editable:false, align:"center" },{ name:"inUse", index:"inUse", label:"inUse", width:60, sortable:false, editable:false, align:"center", formatter:function(cellvalue,options,rowObject){ vartemp="未停泊" if(cellvalue=="INUSE00"){ temp="停泊中" } returntemp; } },{ name:"isAvailable", index:"isAvailable", label:"isAvailable", width:60, sortable:false, editable:false, align:"center", formatter:function(cellvalue,options,rowObject){ vartemp="歷史車輛" if(cellvalue=="ISAVAILABLE00"){ temp="有效車輛" } returntemp; } },{ name:"activeStart", index:"activeStart", label:"activeStart", width:120, sortable:false, editable:false, align:"center", formatter:function(value){ if(null==value||""==value){ return""; } vardate=newDate(value); returndate.pattern("yyyy-MM-ddHH:mm:ss"); } },{ name:"activeEnd", index:"activeEnd", label:"activeEnd", width:120, sortable:false, editable:false, align:"center", formatter:function(value){ if(null==value||""==value){ return"使用..."; } vardate=newDate(value); returndate.pattern("yyyy-MM-ddHH:mm:ss"); } },{ name:"detail", index:"detail", label:"detail", width:60, sortable:false, editable:false, align:"center" },{ name:"update", index:"update", label:"update", width:60, sortable:false, editable:false, align:"center" },{ name:"zone", index:"zone", label:"zone", width:60, sortable:false, editable:false, align:"center" },{ name:"history", index:"history", label:"history", width:60, sortable:false, editable:false, align:"center" }], //排序列的名稱，此參數會被傳到后臺 sortname:"id", prmNames:{search:"search",postdata:"eventId"},//jsonReader描述期望數據格式的數組，在Action中構建JSON要被jsonReader讀取 jsonReader:{ root:"carList",//這個元素指明表格所需要的數據從哪里開始 total:"carTotal", records:"carRecords", page:"carCurrentPage", repeatitems:false //指明每行的數據是可以重復的，如果設為false，則會從返回的數據中按名字來搜索元素，這個名字就是colModel中的名字 }, //設置Page欄里的內容顯示 prmNames:{rows:"carPageSize",page:"carCurrentPage"}, rowNum:10, rowList:[1,5,10,20,50,100], emptyrecords:"所查詢的項無數據", pagerpos:"center", recordpos:"right", pager:pager, pgtext:"page{0}of{1}", recordtext:"view{0}-{1}of{2}", //設置有關多選框的內容 multiboxonly:false,//是否只有點擊多選框時,才執行選擇多選框checkbox.默認為false,點擊一行亦選定此行的多選框 //multiselectWidth:25,//多選框所在列的寬度 gridview:true,//加速顯示 //caption:"風險事件列表",//抬頭 hidegrid:false, loadtext:"數據加載中...", //為最后一個單元格添加按鈕的代碼 gridComplete:function(){ varids=$("#gridTable_car").jqGrid("getDataIDs");//得到行id數組，下面的ids[0]就表示第一行 for(vari=0;i<ids.length;i++){ varid=ids[i]; varcarNo=$("#gridTable_car").jqGrid("getCell",id,"carNo"); $("#gridTable_car").jqGrid("setRowData",ids[i],{ detail:"<buttononclick='javascript:openDetailInfoDlg(\""+id+"\")'><span>詳細</span></button>", update:"<buttononclick='javascript:openUpdateInfoDlg(\""+id+"\")'><span>修改</span></button>", zone:"<buttononclick='javascript:openZoneInfoDlg(\""+carNo+"\")'><span>可用車位</span></button>", history:"<buttononclick='javascript:openHistoryInfoDlg(\""+carNo+"\")'><span>停靠歷史</span></button>", //此處的operation指的是colModel中的operation classes:"code-column", align:"left" }); } } }) //設置頁碼欄快捷鍵 .navGrid("#gridPager_car",{edit:false,add:false,del:false,search:false,refreshtext:"刷新"}) .jqGrid("setGridParam",{ }); }車輛高級查詢描述：在頁面下方通過下拉條可以展示車輛高級查詢部分和操作部分。高級查詢部分主要是配合車輛信息展示，做到快速精準的信息定位。同樣采用AJAX異步提交，反應迅速。程序效果圖如下圖4.6所示：圖4.6車輛高級查詢查詢部分前臺核心代碼如下： functionqueryCar(){ varURL="${ctx}/car/queryCar.action"; varcarNo=$("#query_carNo").val(); varcarType=$("#query_thresholdValue").val(); varcarColor=$("#query_carColor").val(); varisResident=$("#query_isResident").val(); varisAvailable=$("#query_isAvailable").val(); varinUse=$("#query_inUse").val(); varqueryValidTimeBeginStr=$("#query_activeStart_begin").val(); varqueryValidTimeEndStr=$("#query_activeStart_end").val(); varqueryInvalidTimeBeginStr=$("#query_activeEnd_begin").val(); varqueryInvalidTimeEndStr=$("#query_activeEnd_end").val(); if((queryInvalidTimeEndStr<queryInvalidTimeBeginStr)||(queryValidTimeEndStr<queryValidTimeBeginStr)){ alert("起始時間必須小于終止時間!"); return; } varparams={ "carNo":carNo, "carType":carType, "carColor":carColor, "isResident":isResident, "isAvailable":isAvailable, "inUse":inUse, "queryValidTimeBeginStr":queryValidTimeBeginStr, "queryValidTimeEndStr":queryValidTimeEndStr, "queryInvalidTimeBeginStr":queryInvalidTimeBeginStr, "queryInvalidTimeEndStr":queryInvalidTimeEndStr } $("#gridTable_car").jqGrid('setGridParam',{ postData:params }).trigger("reloadGrid"); } 車輛信息萬能查詢功能后臺核心代碼如下:@SuppressWarnings("unchecked")@OverridepublicPageList<Car>queryCarByCriteria(Pagepage,CarDtocarDto){Map<String,Object>conditions=newHashMap<String,Object>();if(carDto.getId()!=null){conditions.put("id",carDto.getId());}if(StringUtil.isNotNull(carDto.getCarNo())){conditions.put("carNo",carDto.getCarNo());}if(StringUtil.isNotNull(carDto.getCarType())){conditions.put("carType",carDto.getCarType());}if(StringUtil.isNotNull(carDto.getImg())){conditions.put("img",carDto.getImg());}if(StringUtil.isNotNull(carDto.getCarColor())){conditions.put("carColor",carDto.getCarColor());}if(StringUtil.isNotNull(carDto.getIsResident())){conditions.put("isResident",carDto.getIsResident());}if(carDto.getVersion()!=null){conditions.put("versionNo",carDto.getVersion());}if(StringUtil.isNotNull(carDto.getInUse())){conditions.put("inUse",carDto.getInUse());}if(StringUtil.isNotNull(carDto.getIsAvailable())){conditions.put("isAvailable",carDto.getIsAvailable());}if(carDto.getQueryUpdateTimeBegin()!=null){conditions.put("queryUpdateTimeBegin",carDto.getQueryUpdateTimeBegin());}if(carDto.getQueryUpdateTimeEnd()!=null){conditions.put("queryUpdateTimeEnd",carDto.