北京理工大學珠海學院2020屆本科生畢業設計網上房屋租賃平臺的設計與實現網上房屋租賃平臺的分析與設計摘要隨著中國市場經濟的發展，城市現代化建設步伐不斷加快，城市規模不斷擴大，人口流動不斷增加，房屋租賃也漸漸成為社會生活的重要組成部分。近年來，隨著互聯網技術的迅猛發展，房屋租賃管理也逐漸發展為互聯網信息平臺。本文將以房屋租賃平臺為對象，針對我國現在的房屋租賃行業的發展趨勢，建立一個界面友好，操作簡便，實時快捷的房屋租賃平臺，讓房東可以在平臺上發布自己想出租的房屋信息，提供給需求者選擇，同時又能隨時管理房屋的信息，及時更新；租客既可以不用特地經過房屋中介這個中間人，也可以隨時瀏覽各個地方各個價格區間的閑置空房，挑選自己中意的房屋。本平臺使用h5為開發語言，使用vue框架，并且使用了依賴于Vue的Element-UI，同時使用mysql作為數據庫。關鍵詞：房屋租賃，房屋租賃信息管理，信息平臺DesignandimplementationofonlinehousingrentalplatformAbstractAlongwiththeChinamarketeconomydevelopment,thecitymodernizationstepspeedsupunceasingly,thecityscaleexpandsunceasingly,thepopulationflowingincreasesunceasingly,thehouserentsalsograduallybecomesthesociallifetheimportantconstituent.Inrecentyears,alongwiththeInternettechnologyswiftandviolentdevelopment,thehouserentedthemanagementalsograduallytodevelopfortheInternetinformationplatform.Thisarticlewillrenttheplatformtakethehouseasanobject,rentstheprofessioninviewofourcountrypresenthousethetrendofdevelopment,willestablishacontactsurfacetobefriendly,theoperationwillbesimple,thereal-timequickhousewillrenttheplatform,willenablethelandlordtobepossibleintheplatformtoissueoneselfwillfindoutthehouseinformationwhichwillrent,willprovideforthedemandchoice,simultaneouslywillbeabletomanagethehouseasnecessarytheinformation,promptrenewal;Thelesseealreadymaynotneedtopassthroughespeciallythehouseintermediarythisintermediate,alsomayglanceovereachplaceeachpricesectorasnecessarytheidlevacantroom,choosestheoneselfpleasinghouse.Thisplatformusesh5isthedevelopmentlanguage,usesthevueframe,andusedhasreliedonVueElement-UI,simultaneouslyusedmysqltotakethedatabase.Keyword:Thehouserents,thehouserentstheinformationmanagement,theinformationplatform目錄TOC\o"1-3"\h\u第1章緒論 11.1系統開發的背景和目標 11.1.1系統開發的背景 11.1.2系統開發的目標 11.2系統的主要功能和特點 11.3設計開發的方法和工具的選擇 21.3.1前端html5 21.3.2Vue框架 31.3.3服務端Node 41.3.4mysql數據庫 41.3.5Vscode 41.3.6Navicate 51.4論文的內容和結構安排 5第2章系統規劃 62.1初步需求分析 62.2總體結構 62.3可行性研究 6第3章系統分析 73.1業務流程分析 73.2數據流程分析 133.3數據字典 143.3.1數據項 143.3.2數據流 153.3.3數據存儲 153.3.4外部實體 15第4章系統設計 154.1總體設計 154.2數據庫設計 174.2.1概念模型 174.2.2邏輯模型 184.2.3物理模型 194.3頁面設計 20第5章系統實現 235.1系統基礎模塊實現 235.1.1用戶注冊登錄注銷實現 235.1.2用戶修改個人信息實現 245.2系統業務模塊實現 255.2.1房東功能模塊 255.2.2租客功能模塊 27總結 29參考文獻 29謝辭 30附錄 31PAGE48第1章緒論1.1系統開發的背景和目標1.1.1系統開發的背景近年來，中國的住房價格高漲，而且還在保持著繼續上漲的勢頭，這成為政府需要解決的主要問題，人們對此非常關注。國務院相繼出臺了一系列宏觀調控政策，建設部和其他部委已開始對房地產市場進行針對性的治理，但房價在過去幾年中還是持續上漲，不但深圳，廣州這些較為發達的沿海城市的住房價格增長趨勢迅猛，就連一些中小城市的住房價格也在水漲船高。如此高的住房價格也導致了租房租賃成為了一塊肥肉，從而也帶動了房屋中介的蓬勃發展。根據有關部門的統計數據，大多數房地產交易都是通過中介機構進行的，但是由于社會上的房產經紀公司太多，在要顧及中介公司可信度的同時，還要從大量復雜的房產信息中做出選擇，這使得人們難以快速準確地找到自己適合的房租信息。另外，在出租求租過程當中，都要通過中介公司，一方面過程較為繁瑣，一方面還要支付一定的中介費用，這一定程度上較重了客戶的負擔。因此，房屋租賃平臺的設計與開發是適應時代發展的項目。1.1.2系統開發的目標開發一個實時便捷，高效安全，操作頁面簡潔的房屋租賃平臺，房東可以在平臺上發布自己想出租的房屋信息，提供給需求者選擇，同時又能隨時管理房屋的信息，及時更新；租客既可以不用特地經過房屋中介這個中間人，也可以隨時瀏覽各個地方各個價格區間的閑置空房，挑選自己中意的房屋。既簡化了信息的收集，節省一定的中介費用，又方便了租客了解房屋情況，提高效率。1.2系統的主要功能和特點房屋租賃平臺的主要功能有：（1）用戶的注冊登陸：用戶在本平臺上進行注冊登陸，不然無法進行相關的一些后續操作。（2）房東發布房屋信息：房東在本平臺上發布其出租房屋的詳細信息。（3）用戶檢索出租房屋信息：此功能為用戶提供了房屋檢索，可以設置價格區間，限定房屋戶型，同時也價格排序功能，可以有效的減少用戶尋找合適房屋的工作量。（4）房屋信息管理功能：房東對于出租房屋信息的管理，確保出租房屋信息的實時更新。（5）用戶個人信息的修改：用戶對于個人信息的修改，可以一定程度上保證個人信息的安全。此平臺在實現上述功能模塊的同時，還具有幾個顯著的特點：（1）操作簡便，頁面簡潔提供了良好的用戶體驗。（2）使用Web技術，用戶可以隨時在各種設備上使用該平臺。1.3設計開發的方法和工具的選擇本租賃平臺采用了結構化開發方法，自頂向下地對租賃平臺進行階段分解。在租賃平臺規劃階段，將使用現場調查和文獻調查的方法來收集和處理用戶的需求；在租賃平臺分析階段，根據用戶需求執行業務流程分析，并創建系統分析文檔。在平臺設計階段，將進行總體設計、數據庫設計、代碼設計、各模塊功能設計。在平臺實施階段，根據租賃平臺設計規劃結果進行編程，數據輸入和調試。在平臺運行階段，執行系統的日常管理，監視和維護等工作。以下是開發時選用的工具和插件：1.3.1前端html5Html5(Web前端技術)是由html,css,js三大框架所組成。它是web的未來，Html不僅僅在pc端，更是在移動端也被廣泛使用。1.3.2Vue框架1.簡介Vue是用于構建用戶界面的增量框架，與其他框架不同，它設計為從下到上逐層應用。Vue的核心庫僅集中在視圖層，該層易于使用并且可以輕松地與第三方庫或項目集成。為了實現各個前端和后端的開發概念，開發了前端單頁Web應用程序（SPA）項目，以實現用于一系列任務的技術框架，例如數據綁定，路由配置，項目編譯和打包。安裝首先，您需要安裝node.js，然后使用node.js安裝相關的依賴項，使用淘寶npm映像（在命令提示符中輸入:npminstall-gcnpm-registry=）。然后安裝全局vue-cli腳手架，該腳手架用于提供構造所需的模板框架。到這里就可以開始創建項目了?？赏ㄟ^cmd命令創建(vueinitwebpack項目名稱)。創建好項目后進入項目目錄通過cmd命令裝依賴(npminstall)。成功安裝后，該目錄中就有一個node_modules文件夾。最后可以通過運行剛創建的項目測試是否搭建成功。方法1:在cmd通過命令運行(npmrundev)方法2:在瀏覽器中輸入localhost:8080（默認端口號為8080）運行成功并且環境搭配成功會出現下面界面，如圖1-1所示。圖1-1配置成功界面1.3.3服務端NodeNode就是在服務器上運行的JavaScript。它是一個機遇谷歌，是使用JavaScipt運行時編寫的平臺。是一個事件驅動I/O服務端JavaScript環境，基于Google的V8引擎，V8引擎運行Javascript的速度非?？?，并且具有非常好的性能。1.3.4mysql數據庫Mysql是由瑞典mysqlAB公司開發的關系數據庫管理系統，目前屬于Oracle產品。mysql是運用最廣泛的關系數據庫管理系統之一，在Web應用程序中mysql是最好的應用程序軟件之一。1.3.5VscodeVscode是一款較為出事的開發工具，擁有比較豐富的插件，同時也是一款跨平臺的開發工具，同時支持windows,Linux,OSX系統。在界面中，Vscode的編輯界面仍然是Microsoft的經典VS風格，并且與那些異常接觸它的人相對較近。集成了現代編輯器的所有功能，包括熱鍵綁定，括號匹配和語法突出顯示以及一系列代碼片段。編程語言支持C++，玉器，PHP，Python，Java，Luna，VisualBasic，Markdown，JavaScript，JSON，HTML，CSS，LESS，SASS，C＃，TypeScript等。經過實際測試后，Vscode的啟動速度和打開大型項目的速度非常平穩，從而使某些需要效率的開發人員更加高效。1.3.6NavicateNavicat是一套快速可靠的數據庫管理工具，旨在簡化數據庫并降低系統管理成本，旨在更好地滿足數據庫管理員和開發人員的需求?；谥庇^的圖形用戶界面，用戶可以安全，簡單的方式創建，使用和修改。Navicat為客戶提供七種語言的選擇，這是世界上使用最廣泛的數據庫前端用戶界面工具。它可以用于管理和開發本地或遠程MySQL，SQLServer，SQLite，Oracle和PostgreSQL數據庫。它也是一個跨平臺工具，也適用于Windows，Linux和OSX系統。它允許用戶連接到本地或遠程服務器，并提供一些工具來幫助管理數據庫。1.3.7Element-uiElement-ui是餓了么前端團隊推出的一款基于Vue.js2.0的桌面前端框架，設計過程中所運用的相關代碼如圖1-2至圖1-3所示。圖1-2相關代碼圖1-3相關代碼1.3.8AxiosAxios是基于promise用于瀏覽器和node.js的http客戶端，設計過程中所運用的相關代碼如圖1-4所示。圖1-4相關代碼1.4論文的內容和結構安排本課題研究的主要內容是使用h5為開發語言，使用vue框架，node作為后端，以及使用mysql作為數據庫，設計并實現一個網上房屋租賃平臺。根據所研究的內容，本篇畢業設計論文一共分為五個章節，大致框架如下：第1章“緒論”。主要介紹了房屋租賃平臺的設計背景、目的和主要的功能特點，以及開發過程中做使用到的開發工具進行簡要闡述。第2章“系統規劃”。主要介紹了平臺的需求分析和總體結構方案，并分析了該平臺開發的可行性。第3章“系統分析”。主要通過業務流程、數據流程以及數據字典的分析，對平臺的功能進行相應的建模。第4章“系統設計”。主要進行平臺數據庫的的設計。第5章“系統實現”。主要進行平臺界面的設計、編程開發以及后續的測試。第2章系統規劃2.1需求分析根據網上調查數據顯示，目前人們進行的房屋租賃活動絕大多數是通過中介機構進行的，但是由于市場上的中介機構和租賃網站都存在著各種各樣的問題，加之房屋信息量過于龐大，這使得用戶難以快速準確地找到自己適合的房租信息。所以要從根本上解決以上的問題，首先需要在房東和租客之間建立直接的溝通，讓他們能夠直接地完成房屋的租賃；其次需要簡化用戶的操作界面，使得房東和租客之間的房屋信息交流更方便快捷，以最短時間、最快速度、最少的人力高效地完成房屋租賃過程中的各項工作。在現實生活的房屋租賃過程中，主要的參與者有房東和租客，該設計的核心需求就是為房東提供一個閑置房屋信息發布的服務，為租客提供檢索查看房屋信息的服務；該設計需要實現房東的閑置房屋信息的發布與展示，發布房屋的管理，租客的房屋信息的檢索等主要功能模塊。2.2總體結構該設計從總體上是由基礎模塊和業務模塊構成。平臺基礎模塊主要實現了租賃平臺的一些基礎功能，例如用戶的注冊、登錄、注銷等；業務模塊則是房屋租賃業務，業務模塊的用戶分為房東和租客，房東在本平臺上發布其出租房屋的詳細信息，同時對于出租房屋信息的管理，確保出租房屋信息的實時更新。租客通過檢索功能，設置價格區間，限定房屋戶型，找到自己想要的房屋，如表2-1所示。表2-1平臺功能表編號功能名稱描述參與者1登錄、注銷登錄注銷賬號租戶，房東2注冊注冊新用戶租戶，房東3篩選出租屋根據個人需求快速查找房屋租戶4修改排序修改房屋的顯示順序租戶5查看出租屋查看房屋詳細信息租戶6出租房屋上傳信息出租房屋房東7管理房屋管理個人所出租的房屋房東8修改個人信息修改個人相關信息租戶，房東2.3可行性研究1.經濟可行性該平臺所需的硬件（計算機和相關硬件）和軟件環境可以在市場上輕松獲得，也可以從相關網站下載。該平臺的成本主要集中在開發和維護上，盡管開發過程需要一定的費用，但是實施之后將大大提高工作的效率，減少人力，從長遠的眼光來看，效益的回報是不斷增加的。

2.技術可行性本系統基于h5作為客戶端開發，以nodejs作為服務端開發，用mysql作為數據庫存儲數據，這些工具的技術都相對比較成熟，開發系統可靠穩定，和Windows以及當前各種系統很好的兼容搭配。3.操作可行性當今時代人們離不開互聯網，網頁瀏覽是每個人都能掌握的技能，由此通過web端實現系統的開發可以更好地被人們所接觸。同時用戶可以隨時隨地地使用該系統，對信息進行瀏覽，而不一定要到指定地點了解信息。同時，該平臺的操作簡單，用戶只需要了解計算機的基本操作即可使用該平臺。通過閱讀信息獲取到自己所需的房屋便可以通過信息主動聯系房東。4.結論綜上所述，各項可行性上完全滿足需求，可以開始下一步的工作。

第3章系統分析3.1業務流程分析該平臺的整體業務流程如圖3-1所示，主要描述了房東，租客的主要業務之間的關系。圖3-1系統業務流程圖該平臺的主要業務有房東注冊登陸，房東修改個人信息，房東發布房屋信息，房東管理房屋信息，租客注冊登陸，租客修改個人信息，租客檢索房屋信息。接下來將對這些主要業務展開分析。1.房東注冊登錄房東在使用平臺前需要進行注冊登記，填寫房東的賬號，密碼，姓名，電話號碼，郵箱，在填寫的信息符合系統填寫格式后就能成功注冊，之后就能通過該平臺發布房屋信息了；如果填寫的信息不符合格式則需要重新填寫，否則無法成功注冊，房東注冊登錄流程如圖3-2所示。圖3-2房東注冊登錄流程2.房東發布房屋信息房東可以在“我要出租”頁面進行發布出租房屋信息的操作，出租房屋的信息包括了位置（省份，城市，區縣，詳細位置）、房型（室，廳，衛）、樓層、月租（租金，起租時長）、標題、房屋的實景圖片，房東發布房屋信息流程如圖3-3所示。出租房屋的所有信息填寫都是必填項，填寫完整后房東就能成功發布該信息；如果沒有填寫完整，平臺會提示“出租失敗，請完整填寫信息”。租客在進行房屋檢索時可以通過租金，戶型設置檢索條件，所以需要房東進行準確，完整的填寫才能被租客有效的檢索到。圖3-3房東發布房屋信息流程3.房東管理房屋信息房東可以在該平臺上管理自己發布的房屋信息，并根據房屋的狀態進行對應的操作，例如房屋已經租出去了，房東可以刪除該房屋的信息，房東管理房屋信息流程如圖3-4所示。圖3-4房東管理房屋信息流程4.房東修改個人信息房東在注冊后可以在“個人信息”頁進行信息的修改，例如更換手機號碼后及時更新新的號碼，確保租客能夠及時的聯系溝通，但是賬號一旦成功注冊后是無法修改的，房東修改個人信息流程如圖3-5所示。圖3-5房東修改個人信息流程5.租客注冊登陸租客在使用平臺前需要進行注冊登記，填寫自己的賬號，密碼，姓名，電話號碼，郵箱，在填寫的信息符合系統填寫格式后就能成功注冊，之后就能通過該平臺檢索房屋信息了；如果填寫的信息不符合格式則需要重新填寫，否則無法成功注冊，租客注冊登陸流程如圖3-6所示。圖3-6租客注冊登錄流程6.租客修改個人信息租客在注冊后可以在“個人信息”頁進行信息的修改，例如通過修改密碼確保賬號的安全性，但是賬號一旦成功注冊后是無法修改的，租客修改個人信息流程如圖3-7所示。圖3-7租客修改個人信息流程7.租客檢索房屋信息租客可以在該平臺上通過檢索房屋的功能進行搜索，從而找到自己滿意的房子。租客可以通過輸入關鍵詞，設置租金，戶型的條件快速有效的找到對應的房屋。檢索結果出來后，還能設置租金高低的排序，提高效率，租客檢索房屋信息流程如圖3-8所示。圖3-8租客檢索房屋信息流程3.2數據流程分析數據流分析是當前系統中數據流的抽象，舍棄諸如特定組織，信息提供者和處理之類的物理組織，而只是在數據流過程中檢查實際業務的數據處理模式。該平臺的頂層數據流如圖3-9所示。圖3-9頂層數據流圖該平臺的核心業務：房東發布出租房屋的詳細信息以及租客檢索房屋的數據流如圖3-10所示。圖3-10房東發布出租房屋的詳細信息以及租客檢索房屋的數據流圖3.3數據字典3.3.1數據項該平臺的數據項如表3-1至表3-3所示。表3-1房東的數據項屬性類型類型長度約束備注房東賬號varchar255主鍵房東密碼varchar255非空房東姓名varchar255非空房東郵箱varchar255非空房東電話varchar255非空表3-2租客的數據項屬性類型類型長度約束備注租客賬號varchar255主鍵租客密碼varchar255非空租客姓名varchar255非空租客郵箱varchar255非空租客電話varchar255非空表3-3房屋信息的數據項屬性類型類型長度約束備注房間編號varchar255主鍵詳細位置varchar255非空租金decimal10非空標題varchar255非空實名認證圖片varchar255非空房間實景圖片房型varchar255非空房屋的室，廳，衛城市varchar255非空省份varchar255非空地區varchar255非空房東郵箱varchar255非空房東電話varchar255非空便于租客與房東取得聯系房東姓名varchar255非空樓層varchar255非空起租時長varchar255非空3.3.2數據流該平臺的數據流如表3-4所示。表3-4平臺的數據流名稱來源去向組成備注房東信息房東系統后臺賬號，姓名等基本信息租客信息租客系統后臺賬號，姓名等基本信息待出租房屋信息房東房屋信息房東發布的要出租的房屋房屋信息待出租房屋信息租客系統中的房屋信息3.3.3數據存儲該平臺的數據存儲如表3-5所示。表3-5平臺的數據存儲名稱權限來源備注房東個人信息房東房東租客個人信息租客租客房屋信息房東房東3.3.4外部實體該平臺的外部實體如表3-6所示。表3-6平臺的外部實體外部實體數據結構備注房東房東賬號，房東密碼，房東姓名，房東電話，房東郵箱租客租客賬號，租客密碼，租客姓名，租客電話，租客郵箱房屋編號，位置，租金，標題，圖片，房型，城市，省份，地區，房東郵箱，房東電話，房東姓名，樓層，起租時長第4章系統設計4.1總體設計該平臺大體上可以分為兩大模塊，一是基礎模塊，二是業務模塊。大體上的設計架構如圖4-1所示；而該平臺業務模塊的總體設計如圖4-2所示。圖4-1總體架構設計圖4-2業務模塊總體設計4.2數據庫設計4.2.1概念模型在數據庫設計中，ER圖用于說明系統的概念模型。該平臺的核心業務ER圖如圖4-3所示。圖4-3核心業務ER圖核心業務的實體屬性，如圖4-4至4-6所示圖4-4房東實體屬性圖4-5房屋實體屬性圖4-6租客實體屬性4.2.2邏輯模型該平臺的核心業務模塊的數據庫邏輯模型如圖4-7所示。圖4-7核心業務邏輯模型4.2.3物理模型介紹基于數據庫模型的主數據表的物理結構如下表4-1至表4-3所示：表4-1landlord用戶表序號字段名稱數據類型備注描述1User賬號varchar主鍵房東賬號2Passoword密碼varchar非空對應密碼3name姓名varchar非空房東稱呼4email郵箱varchar非空房東郵箱5phone電話號碼varchar非空房東號碼表4-2renter用戶表序號字段名稱數據類型備注描述1User賬號varchar主鍵租客賬號2Passoword密碼varchar非空對應密碼3name姓名varchar非空租客稱呼4email郵箱varchar非空租客郵箱5phone電話號碼varchar非空租客號碼表4-3house房屋表序號字段名稱數據類型長度備注描述1ididvarchar255主鍵房屋id2location地址varchar255非空房屋詳細地址3price價格decimal10非空月租4tittle標題varchar255非空出租信息標題5img圖片varchar255非空圖片6room房間varchar255非空房間類型7city城市varchar255非空房屋所在城市8provinces省份varchar255非空房屋所在省份9area區縣varchar255非空房屋所在區縣10email郵箱varchar255非空房東郵箱11phone電話號碼varchar255非空房東電話號碼12lanlord房東varchar255非空房東13floor樓層varchar255非空房屋所在樓層14timeLimit時間限制varchar255非空房屋起租期限4.3頁面設計該平臺的頂部是一個貫穿所有頁面的導航，為用戶提供了登錄，注冊，房屋出租等業務模塊的入口；中間就是房屋列表。如圖4-8所示。圖4-8首頁用戶是必須進行注冊、登錄之后才能使用平臺相應的功能。在注冊的過程中，用戶有兩種角色可以選擇，分別是房東和租客，其對應可使用的功能是不一樣的。如圖4-9所示。圖4-9登錄框房東在導航上點擊“我要出租”按鈕后便進入了出租房屋的編輯頁面，這個頁面可以對房屋的詳情信息進行填寫。如圖4-10所示。圖4-10出租房屋編輯頁房東在導航上點擊“房屋管理”按鈕后便進入了出租房屋的管理頁面，這個頁面可以對房屋出租情況進行管理。如圖4-11所示。圖4-11出租房屋管理頁用戶在導航上點擊“個人信息”按鈕后便進入了個人信息的編輯修改頁面，這個頁面可以對用戶的個人信息進行修改。如圖4-12所示。圖4-12個人信息修改頁第5章系統實現5.1系統基礎模塊實現在這個部分中，我將每個模塊對應的重要代碼列出并作出注釋，把其余非重點的代碼放附件里。5.1.1用戶注冊登錄注銷實現在注冊的過程中，用戶有兩種角色可以選擇，分別是房東和租客，在使用平臺時其對應可使用的功能是不一樣的。該部分代碼是通過引入reg文件，通過reg.js中的內容是對于用戶輸入的信息進行合法性判斷，不合法的會有提示。代碼如圖4-13至圖4-14所示。圖4-13圖4-14之后向服務器發送請求再把用戶填寫的信息進行包裝發送，然后等待服務端返回響應，代碼如圖4-15所示。圖4-15注冊完成后用戶就可以進行登錄了，在這個部分是通過設置cookie將登陸的賬戶信息存儲到cookie中讓瀏覽器記住當前登錄賬號防止刷新丟失，代碼如圖4-16所示。圖4-165.1.2用戶修改個人信息實現用戶在登錄進入系統后可修改個人基本信息，但是賬號是唯一的，不能再進行修改。該部分代碼是先獲取了數據庫中該用戶的基本信息，通過用戶修改后把修改后信息傳至數據庫存儲，并返回響應，代碼如圖4-17所示。圖4-175.2系統業務模塊實現5.2.1房東功能模塊用戶使用房東賬號等進入系統后，可進行想要出租房屋的進行編輯出租，出租成功后會給出對應的提示，假如填寫不完整，系統也會進行提示。在這個部分，我運用了Vue的Element-UI當中的現成框架，包括了下拉列表，輪播圖等，代碼如圖4-18所示。圖4-18用戶使用房東賬號等進入系統后，可進行已經的出租房屋進行管理。在這個過程中最重要的就是圖片的上傳，首先需要通過調用第三方接口進行圖上傳保存，上傳之后會返回一個圖片的地址，之后會存入數據庫，代碼如圖4-19所示。圖4-19其中還會用到handleBeforeUplaod，handleExcead，handleRemove，handlePictureCardPreview，handelAvatarSuccess這幾個方法，作用分別是圖片上傳數量限制，移除圖片，點擊上傳圖片，圖片上傳返回地址保存，代碼如圖4-20至圖4-21所示。圖4-20圖4-21房東在出租房屋后可對于房屋進行管理。這個部分代碼是通過數據庫請求從而獲得該房東的已出租的房屋列表，然后通過rankout進行刪除，之后再存儲至數據庫，代碼如圖4-22所示。圖4-225.2.2租客功能模塊租客登錄進入系統后，可通過自己想要查找的對應房屋條件進行檢索，目前平臺只能實現租金，戶型，關鍵詞等條件進行房屋檢索。該部分代碼是通過向父組件傳值，通過點擊搜索按鈕調改變房屋列表和監聽用戶篩選的戶型，租金來直接改變顯示的房屋列表，代碼如圖4-23所示。圖4-23租客身份進入系統后是無法進入“我要出租”和“房屋管理”板塊的，這主要是通過cookie.js中的方法進行判定的，瀏覽器存儲的信息中有“房東”，“我要出租”和“房屋管理”板塊才可以點擊，代碼如圖4-24至圖4-25所示。圖4-24圖4-25租客可以點擊房屋圖片進入房屋的詳情頁，在該頁面可以看到房屋詳細的信息以及房東的聯系方式，如果房屋合適可以與房東取得聯系。這部分代碼是將點擊的房屋的id通過vuex中的set_targetHouse方法保存在瀏覽器中，以此讓瀏覽器記住當租客查看的是哪個房屋，防止刷新后丟失，代碼如圖4-26至圖4-27所示。圖4-26圖4-27總結本次設計使用H5進行開發，并且選擇了在國內比較熱門的Vue框架。選擇了H5進行網站開發是因為網頁對大多數人來說都比較方便使用，并且無需下載任何軟件便可以使用。國內前端框架比較熱門的除了Vue還有React，但個人覺得Vue比較適合這種規模較小的項目所以偏向了選擇Vue，并且使用了依賴于Vue的Element-UI。服務端使用Node，一方面是因為它是使用了JavaScript的語法，開發的過程中會比較方便，思維上比較統一。H5的強大以及深度遠遠不止于該項目，希望在今后的日子可以繼續學習，提高相關技能水平，不斷發掘它的能量。

參考文獻[1]前后端解耦模式及開發[J].吳賀.

計算機系統應用.

2017(02)[2]Web工程前端性能優化[J].李曉峰.

電子科技.

2015(05)[3]基于VueJs的WEB前端開發研究[J].徐頔,朱廣華,賈瑤.

科技風.

2017(14)[4]基于Vue.js的WebGIS云管理與服務平臺[D].黃俊勇.武漢紡織大學

2018[5]基于MVVM模式的WEB前端框架的研究[J].易劍波.

信息與電腦(理論版).

2016(19)[6]基于MVVM模式的Vue.js框架在物流軟件自動化測試系統中的應用研究[D].柴青山.北京郵電大學

2019[7]基于Vue.js的移動應用可視化平臺的研究[J].馮傳波,彭章友,張鐘浩.

工業控制計算機.

2019(05)[8]武海龍,李國平著基于SpringBoot的房屋租賃系統設計[J].電腦與信息技術,2019,27(03):76-78.[9]基于Vue.js的Web前端應用研究[J].朱二華.

科技與創新.

2017(20)[10]基于Node.js中間層Web開發的研究與實現——以微信圖書借閱平臺為例[J].仇晶,黃巖,柴瑜晗.

河北工業科技.

2017(02)[11]基于HTML5進行響應式Web應用的技巧[J].劉于沛.

中國新通信.

2017(02)[12]Web前端開發技術以及優化研究[J].吳睿.

中國新通信.

2016(17)[13]MVVM設計模式及其應用研究[J].陳濤.

計算機與數字工程.

2016(10)[14]Vue.js權威指南[M].電子工業出版社,張耀春,2016

附錄1程序源代碼Vuex/store.js代碼：const

state

=

{

data:

null,

house_list:

[],

_house_list:

[],

targetHouse:

null,

page_data:

[],

location:

'aaa'

}const

getters

=

{

get_house_list(state)

{

return

state.house_list

}}const

mutations

=

{

reset_house_list(state)

{

state.house_list

=

state._house_list

},

set_house_list(state,

data)

{

state.house_list

=

data

},

set__house_list(state)

{

state._house_list

=

state.house_list

},

set_page_data(state,

data)

{

state.page_data

=

data

},

set_targetHouse(state,

str)

{

state.targetHouse

=

str;

var

length

=

state.house_list.length;

for

(let

i

=

0;

i

<

length;

i++)

{

if

(state.house_list[i].id

==

str)

{

state.targetHouse

=

state.house_list[i]

}

}

},

set_location(state,

str)

{

state.location

=

str;

},const

actions

=

{

request_house_list({

commit

})

{

axios({

methods:

"get",

url:

"/house_list"

}).then(results

=>

{

commit('set_house_list',

results.data)

commit("set__house_list")

commit("set_page_data",

results.data.slice(0,

10))

});

},

filterMsg({

state,

commit

},

{

minPrice,

maxPrice,

minRoom,

maxRoom

})

{

commit("reset_house_list")

var

data

=

[];

var

length

=

state.house_list.length;

for

(let

i

=

0;

i

<

length;

i++)

{

if

(

minPrice

<

state.house_list[i].price

&&

state.house_list[i].price

<=

maxPrice

&&

minRoom

<

state.house_list[i].room.split("/")[0]

&&

state.house_list[i].room.split("/")[0]

<=

maxRoom

)

{

data.push(state.house_list[i]);

}

}

commit("set_house_list",

data)

commit("set_page_data",

data.slice(0,

10))

},

keyword({

state,

commit

},

val)

{

commit("reset_house_list")

let

length

=

state.house_list.length;

var

data

=

[];

for

(let

i

=

0;

i

<

length;

i++)

{

if

(state.house_list[i].tittle.includes(val)

||

state.house_list[i].area.includes(val)

||

state.house_list[i].location.includes(val)

||

state.house_list[i].provinces.includes(val)

||

state.house_list[i].city.includes(val))

{

data.push(state.house_list[i]);

}

}

commit("set_house_list",

data)

commit("set_page_data",

data.slice(0,

10))

},

turn_page({

state,

commit

},

currentPage)

{

commit("set_page_data",

state.house_list.slice(10

*

(currentPage

-

1),

10

*

currentPage))

},

change_location({

state,

commit

},

newlocation)

{

commit("set_location",

newlocation)}Vuex/reg.js代碼：const

price

=

function

(price)

{

var

myreg

=

/^[0-9]*$/;

if

(!myreg.test(price))

{

this.is_price

=

false;

retu