Vue全家桶+localstorage+socket.io简单仿一个链家
在线预览地址
首先上项目和预览地址 https://luxroid.com/lianjia/#/
Github地址 https://github.com/mixihome/lianjia
注意 如果要在本地运行安装完依赖之后如果报错
请手动使用淘宝镜像安装node-sass和sass-loader 确保可以运行
建议使用F12移动端模式预览😀😀
使用到的技能点
Vue.js : 前端页面展示
Vuex : 全局状态通信
axios : 网络请求
Vue-router : 页面的切换
socket.io : 实现聊天功能
h5的localstorage : 实现发布卖房和查看租房功能
淘宝flexible和rem : 实现各种设备上的适配兼容
express(阿里云服务器) : 请求的数据和socket.io服务器
mint-ui : swiper组件
部分界面截图
首页
二手房界面
搜索界面
socket.io实现的聊天界面
功能解析
搜索
使用filter方法搜索已经访问到了的数据title,比如万科室,天新区等,并在点击跳转时实时的将该index中的内容存入vuex,并在detail中动态变化
租房&卖房
卖房使用了h5的localstorage进行存储,只存一些简单的数据😂,并且可以在首页中的查看租房页中看到该信息
Socket.io
这个项目的socket.io其实去网上查询一些例子,就可以很简单的做出来,主要就是在服务端io.on connection之后,回调函数会有一个socket参数,通过他可以监听各种客户端发送的事件,并进行处理,然后使用this.broadcast.emit可以广播给所有连接的用户(除了发送者)
实现细节
server端
服务端通过require('socket.io')拿到io在服务器端监听connection,当发生这个事件时,会给一个socket对象.该对象可以监听从客户端发来的时间,或者从服务端广播事件给服务端
client端
客户端可以在按钮或者keyup.enter事件中绑定该事件使用socket.emit可以向服务器发送各种事件,socket.on可以监听从服务器发来的时间
4 : 关于vuex,这个项目用了vuex来管理全局某些组件的状态,并且存储了一些跳转页面时需要用到了数据,比如首页随着scrolltop变化出现的下载栏
总结
Vue这个框架是在太厉害了 通过前端路由 免去了传统前端跳转页面带来的页面的全部刷新 这种体验在pc上也许无关痛痒 但是移动设备上 这就是完全不一样的两种体验
在写这个时候,有些情况要在js代码操作dom,当时我想的vue的虚拟dom操作dom节点有点那啥,后来我发现了vue的ref这个属性😂 也算是边写边学习吧
就比如在聊天界面的时候,有一个需求是当聊天界面的长度超多页面长度的时候 页面会自动往下 就可以使用这个元素在vue的updated中写入
this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;就可以实现这个小细节了
在这个项目里也学到不少关于前端的小技巧,一些细节的处理,锻炼了一些逻辑思维，很多知识点掌握得更加的牢固，对 vue vuex 的理解又更深了一些。
最后
欢迎有兴趣的小伙伴一起学习，也欢迎各位大佬指出项目的缺点与不足。
打个广告 18届前端软件实习生跪求一份工作😂😂😂😂我的简历
图片均来自链家官网,若有侵权,请联系我删除。
转载请注明出处,谢谢
