Vue全家桶+localstorage+socket.io簡(jiǎn)單仿一個(gè)鏈家
在線(xiàn)預(yù)覽地址
首先上項(xiàng)目和預(yù)覽地址 https://luxroid.com/lianjia/#/
Github地址 https://github.com/mixihome/lianjia
注意 如果要在本地運(yùn)行安裝完依賴(lài)之后如果報(bào)錯(cuò)
請(qǐng)手動(dòng)使用淘寶鏡像安裝node-sass和sass-loader 確保可以運(yùn)行
建議使用F12移動(dòng)端模式預(yù)覽????
使用到的技能點(diǎn)
Vue.js : 前端頁(yè)面展示
Vuex : 全局狀態(tài)通信
axios : 網(wǎng)絡(luò)請(qǐng)求
Vue-router : 頁(yè)面的切換
socket.io : 實(shí)現(xiàn)聊天功能
h5的localstorage : 實(shí)現(xiàn)發(fā)布賣(mài)房和查看租房功能
淘寶flexible和rem : 實(shí)現(xiàn)各種設(shè)備上的適配兼容
express(阿里云服務(wù)器) : 請(qǐng)求的數(shù)據(jù)和socket.io服務(wù)器
mint-ui : swiper組件
部分界面截圖
首頁(yè)
二手房界面
搜索界面
socket.io實(shí)現(xiàn)的聊天界面
功能解析
搜索
使用filter方法搜索已經(jīng)訪(fǎng)問(wèn)到了的數(shù)據(jù)title,比如萬(wàn)科室,天新區(qū)等,并在點(diǎn)擊跳轉(zhuǎn)時(shí)實(shí)時(shí)的將該index中的內(nèi)容存入vuex,并在detail中動(dòng)態(tài)變化
租房&賣(mài)房
賣(mài)房使用了h5的localstorage進(jìn)行存儲(chǔ),只存一些簡(jiǎn)單的數(shù)據(jù)??,并且可以在首頁(yè)中的查看租房頁(yè)中看到該信息
Socket.io
這個(gè)項(xiàng)目的socket.io其實(shí)去網(wǎng)上查詢(xún)一些例子,就可以很簡(jiǎn)單的做出來(lái),主要就是在服務(wù)端io.on connection之后,回調(diào)函數(shù)會(huì)有一個(gè)socket參數(shù),通過(guò)他可以監(jiān)聽(tīng)各種客戶(hù)端發(fā)送的事件,并進(jìn)行處理,然后使用this.broadcast.emit可以廣播給所有連接的用戶(hù)(除了發(fā)送者)
實(shí)現(xiàn)細(xì)節(jié)
server端
服務(wù)端通過(guò)require('socket.io')拿到io在服務(wù)器端監(jiān)聽(tīng)connection,當(dāng)發(fā)生這個(gè)事件時(shí),會(huì)給一個(gè)socket對(duì)象.該對(duì)象可以監(jiān)聽(tīng)從客戶(hù)端發(fā)來(lái)的時(shí)間,或者從服務(wù)端廣播事件給服務(wù)端
client端
客戶(hù)端可以在按鈕或者keyup.enter事件中綁定該事件使用socket.emit可以向服務(wù)器發(fā)送各種事件,socket.on可以監(jiān)聽(tīng)從服務(wù)器發(fā)來(lái)的時(shí)間
4 : 關(guān)于vuex,這個(gè)項(xiàng)目用了vuex來(lái)管理全局某些組件的狀態(tài),并且存儲(chǔ)了一些跳轉(zhuǎn)頁(yè)面時(shí)需要用到了數(shù)據(jù),比如首頁(yè)隨著scrolltop變化出現(xiàn)的下載欄
總結(jié)
Vue這個(gè)框架是在太厲害了 通過(guò)前端路由 免去了傳統(tǒng)前端跳轉(zhuǎn)頁(yè)面帶來(lái)的頁(yè)面的全部刷新 這種體驗(yàn)在pc上也許無(wú)關(guān)痛癢 但是移動(dòng)設(shè)備上 這就是完全不一樣的兩種體驗(yàn)
在寫(xiě)這個(gè)時(shí)候,有些情況要在js代碼操作dom,當(dāng)時(shí)我想的vue的虛擬dom操作dom節(jié)點(diǎn)有點(diǎn)那啥,后來(lái)我發(fā)現(xiàn)了vue的ref這個(gè)屬性?? 也算是邊寫(xiě)邊學(xué)習(xí)吧
就比如在聊天界面的時(shí)候,有一個(gè)需求是當(dāng)聊天界面的長(zhǎng)度超多頁(yè)面長(zhǎng)度的時(shí)候 頁(yè)面會(huì)自動(dòng)往下 就可以使用這個(gè)元素在vue的updated中寫(xiě)入
this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;就可以實(shí)現(xiàn)這個(gè)小細(xì)節(jié)了
在這個(gè)項(xiàng)目里也學(xué)到不少關(guān)于前端的小技巧,一些細(xì)節(jié)的處理,鍛煉了一些邏輯思維，很多知識(shí)點(diǎn)掌握得更加的牢固，對(duì) vue vuex 的理解又更深了一些。
最后
歡迎有興趣的小伙伴一起學(xué)習(xí)，也歡迎各位大佬指出項(xiàng)目的缺點(diǎn)與不足。
打個(gè)廣告 18屆前端軟件實(shí)習(xí)生跪求一份工作????????我的簡(jiǎn)歷
圖片均來(lái)自鏈家官網(wǎng),若有侵權(quán),請(qǐng)聯(lián)系我刪除。
轉(zhuǎn)載請(qǐng)注明出處,謝謝
