基于Vue.js租房網(wǎng)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

季杰 陳強(qiáng)仁 朱東

摘要：隨著時(shí)代的變化，對(duì)于剛畢業(yè)的大學(xué)生等經(jīng)濟(jì)薄弱人群，想要買房是不太現(xiàn)實(shí)的事情，所以大多數(shù)人都會(huì)選擇租房，可傳統(tǒng)的租房方式已經(jīng)跟不上時(shí)代了。本系統(tǒng)基于目前比較火的Vue.js框架進(jìn)行開(kāi)發(fā)，擺脫了傳統(tǒng)租房帶來(lái)的空間局限性。該文首先對(duì)Vue開(kāi)發(fā)的三大優(yōu)勢(shì)進(jìn)行闡述，然后介紹租房網(wǎng)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn);后臺(tái)系統(tǒng)使用SpringBoot框架開(kāi)發(fā)，MySQL作為數(shù)據(jù)庫(kù)，前后端分離開(kāi)發(fā)。

關(guān)鍵詞：Vue.js;Elment-UI;租房系統(tǒng)

中圖分類號(hào)：TP311? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）16-0091-02

1 引言

隨著Web應(yīng)用的不斷發(fā)展，足不出戶就可以了解天下事，同樣，對(duì)于租房行業(yè)，用戶也再也沒(méi)有必要像從前那樣一家家房產(chǎn)中介地跑，一間間房屋地看了。本系統(tǒng)基于Vue.js框架進(jìn)行Web應(yīng)用開(kāi)發(fā)，能讓客戶不出門(mén)就找到心儀的房子。不同的租房客戶需求不同，租房子要求也不同，而本系統(tǒng)可直接進(jìn)行樓盤(pán)優(yōu)化，按條件搜索即可滿足不同的租房客戶，并且租房子房租費(fèi)全透明，傳統(tǒng)的租房方式需要電話預(yù)約時(shí)間，現(xiàn)在租房網(wǎng)系統(tǒng)來(lái)了，可直接在線預(yù)約看房，可具體化承諾時(shí)間，節(jié)約各類時(shí)間。對(duì)比傳統(tǒng)租房子方式，租房網(wǎng)系統(tǒng)擁有諸多樓盤(pán)，房屋信息充分，可對(duì)比各種房屋情況。

2 Vue簡(jiǎn)介

2.1 基于MVVM的新型架構(gòu)模式

Vue.js的核心就是它快捷方便的數(shù)據(jù)雙向綁定，難以想象用慣了Vue之后，再去像以前jQuery那樣去操作DOM節(jié)點(diǎn)，因?yàn)閂ue是數(shù)據(jù)驅(qū)動(dòng)的，它通過(guò)一些特殊的語(yǔ)法將數(shù)據(jù)和DOM聯(lián)系起來(lái)，一旦你創(chuàng)建了綁定，數(shù)據(jù)就會(huì)和DOM保持同步，一方有變動(dòng)，另一方也會(huì)隨之變化，這是不是非常方便，下面具體講述一下這種新型架構(gòu)模式，MVVM架構(gòu)模式全稱為：Model View ViewModel，主要分為三個(gè)部分，分別是：1）Model：模型層，簡(jiǎn)稱M，主要任務(wù)就是跟業(yè)務(wù)數(shù)據(jù)打交道;2）View：視圖層，簡(jiǎn)稱V， 主要任務(wù)就是網(wǎng)頁(yè)上頁(yè)面的展示，也就是傳統(tǒng)的HTML+CSS;3）ViewModel，簡(jiǎn)稱VM，連接視圖層與模型層的橋梁，可以看作為是通訊器和控制器，VM是Vue.js的核心，它監(jiān)聽(tīng)著V和M的改變。然后通知對(duì)方做出相應(yīng)的改變，就這樣它實(shí)現(xiàn)類V和M的相互解耦，不像以前那樣大雜燴的模式。這種新型架構(gòu)模式給企業(yè)帶來(lái)的好處是巨大的，企業(yè)進(jìn)行系統(tǒng)開(kāi)發(fā)和維護(hù)的成本都得到了降低。

2.2 Vue豐富的組件庫(kù)

Vue.js大火的主要原因除了上面方便快捷的數(shù)據(jù)雙向綁定以外，還有一個(gè)大殺器，那就是Vue豐富的組件庫(kù)，很多大型企業(yè)都在用了Vue.js框架和UI組件庫(kù)后，開(kāi)發(fā)效率提升了很多，因?yàn)楹芏鄻I(yè)務(wù)場(chǎng)景中用到的組件模塊，Vue組件庫(kù)都幫你封裝好了，開(kāi)箱即用。下面就介紹幾個(gè)用得比較廣泛的組件庫(kù)。

1） Element UI組件庫(kù)

可能大家對(duì)它不是很熟悉，但它的爸爸大家一定很熟，那就是餓了么，Element是餓了么前端團(tuán)隊(duì)開(kāi)源維護(hù)的Vue UI組件庫(kù)，擁有著大量齊全的組件，并且網(wǎng)上的使用教程和文章很多，能很輕松上手操作。

2）Mint UI組件庫(kù)

Vue不僅讓大家快速進(jìn)行PC端開(kāi)發(fā)，還能讓大家快速進(jìn)行移動(dòng)端開(kāi)發(fā)，Mint UI就是其中比較熱門(mén)且好用的移動(dòng)端組件庫(kù)，同樣是餓了么團(tuán)隊(duì)開(kāi)發(fā)的，它是真正的按需加載組件，大大減小了前端項(xiàng)目的壓力，給用戶帶來(lái)了流暢的體驗(yàn)。網(wǎng)上有很多案例，官網(wǎng)文檔也寫(xiě)的很詳盡。

本系統(tǒng)就是基于Element-UI組件庫(kù)開(kāi)發(fā)的，大量封裝好的組件給開(kāi)發(fā)過(guò)程帶來(lái)了巨大的便利。

2.3 傳統(tǒng)的HTML開(kāi)發(fā)與Vue開(kāi)發(fā)的不同

傳統(tǒng)的HTML開(kāi)發(fā)是多頁(yè)面應(yīng)用，也就是每次頁(yè)面進(jìn)行跳轉(zhuǎn)，后臺(tái)控制器都會(huì)返回一個(gè)新的HTML頁(yè)面，路由是由后端來(lái)控制的，可這樣也就會(huì)帶來(lái)一個(gè)后果，每一次切換頁(yè)面都需要發(fā)起一個(gè)HTTP請(qǐng)求，這時(shí)要是用戶的網(wǎng)絡(luò)較慢的話就會(huì)出現(xiàn)卡頓情況，可以說(shuō)這樣用戶體驗(yàn)是很不好的。而Vue是單頁(yè)面應(yīng)用，單頁(yè)面應(yīng)用就是將所有服務(wù)實(shí)現(xiàn)在一個(gè)web頁(yè)面中，僅在該頁(yè)面初始化時(shí)加載相應(yīng)的模塊，一旦該頁(yè)面加載完成，用戶的操作就再也不會(huì)導(dǎo)致頁(yè)面的重新加載或跳轉(zhuǎn)，可以說(shuō)Vue這種單頁(yè)面應(yīng)用提供了流暢的用戶體驗(yàn)，并且還減輕了后端服務(wù)器的壓力，做到了前后端分離。

3 系統(tǒng)的功能模塊設(shè)計(jì)與實(shí)現(xiàn)

租房網(wǎng)系統(tǒng)是為了租房客戶更加方便快捷地找到自己心儀的房子，有助于減少剛畢業(yè)大學(xué)生的經(jīng)濟(jì)壓力，本系統(tǒng)主要分為“登錄”“房屋列表”“房屋詳情”“地圖找房”“后臺(tái)管理”等五個(gè)模塊。

3.1 登錄模塊

登錄模塊是初始模塊，它分為客戶登錄模塊和管理員登錄模塊，通過(guò)登錄token來(lái)判斷進(jìn)入哪個(gè)界面，如果是客戶登錄的話，就會(huì)進(jìn)入房屋業(yè)務(wù)等界面，若是管理員的話，就會(huì)進(jìn)入后臺(tái)管理界面。并且在登錄時(shí)還增加了校驗(yàn)?zāi)K，以防別人惡意爬取房源信息。

3.2 房屋列表模塊

用戶登錄成功后，可以進(jìn)入房屋列表頁(yè)面，能瀏覽大量的房屋，可以很直觀的看見(jiàn)房屋所在地區(qū)，房屋環(huán)境，房屋價(jià)格等重要信息，從中尋找自己心儀的房源，點(diǎn)擊房屋名鏈接就能進(jìn)入房屋詳情模塊，能看到更多的房屋信息。

3.3 房屋詳情模塊

客戶可以從房屋詳情頁(yè)面知道該房屋所有的信息，點(diǎn)擊“馬上預(yù)約”按鈕就能聯(lián)系上屋主，約好時(shí)間實(shí)地看房了。和傳統(tǒng)的租房方式相比，不僅節(jié)約了雙方的時(shí)間，也帶來(lái)了很多方便。

3.4 地圖找房模塊

客戶也可以根據(jù)自己心儀的房屋條件進(jìn)行搜索，例如客戶比較關(guān)心的房屋所在區(qū)域、房屋價(jià)格、房屋面積、房屋戶型、房屋裝修情況等。用戶還可以根據(jù)高德地圖來(lái)選擇所在地區(qū)，這樣客戶們能夠更快地找到自己心儀的房子。

3.5 后臺(tái)管理模塊

管理員登錄后，主要分為房屋管理和房屋銷售情況兩個(gè)模塊，房屋管理模塊用來(lái)管理數(shù)據(jù)庫(kù)中大量的房屋數(shù)據(jù)，隨時(shí)更新過(guò)期，已交易的房屋，如圖4所示。房屋銷售情況模塊用于總結(jié)每天的房屋銷售情況，通過(guò)ECharts圖表可以很直觀，很直接地將銷售情況數(shù)據(jù)呈現(xiàn)出來(lái)。

4 結(jié)論

租房網(wǎng)系統(tǒng)通過(guò)現(xiàn)在前端開(kāi)發(fā)很流行的Vue.js框架進(jìn)行Web應(yīng)用實(shí)現(xiàn)，在本文中，首先對(duì)Vue.js進(jìn)行了介紹，其中主要講述了它火的三個(gè)原因，分別是其一，它實(shí)現(xiàn)了雙向數(shù)據(jù)綁定，幫助前端開(kāi)發(fā)者更好的操作數(shù)據(jù)，其二，Vue有著豐富的組件庫(kù)，它可以幫助開(kāi)發(fā)者們快速構(gòu)建實(shí)用且優(yōu)美的頁(yè)面，其三，Vue是單頁(yè)應(yīng)用，讓前后端分工更加明確，并且大大減輕了后臺(tái)服務(wù)器的壓力。然后介紹了租房網(wǎng)系統(tǒng)功能模塊的設(shè)計(jì)與實(shí)現(xiàn)，租房網(wǎng)系統(tǒng)能幫助客戶更快更好地找到合適的房屋，讓租房變得便捷化，透明化。

參考文獻(xiàn)：

[1] 李廣宏.vue.js前端應(yīng)用技術(shù)分析[J].中國(guó)新通信，2019，21（20）：115.

[2] 沈劍翹，陳澤椿.Vue.js在構(gòu)建系統(tǒng)前端SPA的應(yīng)用[J].科技創(chuàng)新與應(yīng)用，2020（3）：181-182.

[3] 牛仁騰.基于Vue.js的表單可視化構(gòu)建系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].武漢：華中科技大學(xué)，2019.

【通聯(lián)編輯：代影】