季杰 陳強仁 朱東

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

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

中圖分類號：TP311? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2020）16-0091-02

1 引言

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

2 Vue簡介

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

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

2.2 Vue豐富的組件庫

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

1） Element UI組件庫

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

2）Mint UI組件庫

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

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

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

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

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

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

3.1 登錄模塊

登錄模塊是初始模塊，它分為客戶登錄模塊和管理員登錄模塊，通過登錄token來判斷進入哪個界面，如果是客戶登錄的話，就會進入房屋業(yè)務(wù)等界面，若是管理員的話，就會進入后臺管理界面。并且在登錄時還增加了校驗模塊，以防別人惡意爬取房源信息。

3.2 房屋列表模塊

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

3.3 房屋詳情模塊

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

3.4 地圖找房模塊

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

3.5 后臺管理模塊

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

4 結(jié)論

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

參考文獻：

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

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

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

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