基于Vue.js租房網系統的設計與實現

季杰 陳強仁 朱東

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

關鍵詞：Vue.js;Elment-UI;租房系統

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

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

1 引言

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

2 Vue簡介

2.1 基于MVVM的新型架構模式

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

2.2 Vue豐富的組件庫

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

1） Element UI組件庫

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

2）Mint UI組件庫

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

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

2.3 傳統的HTML開發與Vue開發的不同

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

3 系統的功能模塊設計與實現

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

3.1 登錄模塊

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

3.2 房屋列表模塊

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

3.3 房屋詳情模塊

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

3.4 地圖找房模塊

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

3.5 后臺管理模塊

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

4 結論

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

參考文獻：

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

[2] 沈劍翹，陳澤椿.Vue.js在構建系統前端SPA的應用[J].科技創新與應用，2020（3）：181-182.

[3] 牛仁騰.基于Vue.js的表單可視化構建系統的設計與實現[D].武漢：華中科技大學，2019.

【通聯編輯：代影】