網(wǎng)上房屋租賃平臺的設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

參考文獻(xiàn)[1]前后端解耦模式及開發(fā)[J].吳賀.

計(jì)算機(jī)系統(tǒng)應(yīng)用.

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

電子科技.

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

科技風(fēng).

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

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

信息與電腦(理論版).

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

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

工業(yè)控制計(jì)算機(jī).

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

科技與創(chuàng)新.

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

河北工業(yè)科技.

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

中國新通信.

2017(02)[12]Web前端開發(fā)技術(shù)以及優(yōu)化研究[J].吳睿.

中國新通信.

2016(17)[13]MVVM設(shè)計(jì)模式及其應(yīng)用研究[J].陳濤.

計(jì)算機(jī)與數(shù)字工程.

2016(10)[14]Vue.js權(quán)威指南[M].電子工業(yè)出版社,張耀春,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