基于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.
【通联编辑：代影】
转载注明来源:https://www.xzbu.com/8/view-15315262.htm
