网上房屋租赁平台的设计与实现

北京理工大学珠海学院2020届本科生毕业设计网上房屋租赁平台的设计与实现网上房屋租赁平台的分析与设计摘要随着中国市场经济的发展，城市现代化建设步伐不断加快，城市规模不断扩大，人口流动不断增加，房屋租赁也渐渐成为社会生活的重要组成部分。近年来，随着互联网技术的迅猛发展，房屋租赁管理也逐渐发展为互联网信息平台。本文将以房屋租赁平台为对象，针对我国现在的房屋租赁行业的发展趋势，建立一个界面友好，操作简便，实时快捷的房屋租赁平台，让房东可以在平台上发布自己想出租的房屋信息，提供给需求者选择，同时又能随时管理房屋的信息，及时更新；租客既可以不用特地经过房屋中介这个中间人，也可以随时浏览各个地方各个价格区间的闲置空房，挑选自己中意的房屋。本平台使用h5为开发语言，使用vue框架，并且使用了依赖于Vue的Element-UI，同时使用mysql作为数据库。关键词：房屋租赁，房屋租赁信息管理，信息平台DesignandimplementationofonlinehousingrentalplatformAbstractAlongwiththeChinamarketeconomydevelopment,thecitymodernizationstepspeedsupunceasingly,thecityscaleexpandsunceasingly,thepopulationflowingincreasesunceasingly,thehouserentsalsograduallybecomesthesociallifetheimportantconstituent.Inrecentyears,alongwiththeInternettechnologyswiftandviolentdevelopment,thehouserentedthemanagementalsograduallytodevelopfortheInternetinformationplatform.Thisarticlewillrenttheplatformtakethehouseasanobject,rentstheprofessioninviewofourcountrypresenthousethetrendofdevelopment,willestablishacontactsurfacetobefriendly,theoperationwillbesimple,thereal-timequickhousewillrenttheplatform,willenablethelandlordtobepossibleintheplatformtoissueoneselfwillfindoutthehouseinformationwhichwillrent,willprovideforthedemandchoice,simultaneouslywillbeabletomanagethehouseasnecessarytheinformation,promptrenewal;Thelesseealreadymaynotneedtopassthroughespeciallythehouseintermediarythisintermediate,alsomayglanceovereachplaceeachpricesectorasnecessarytheidlevacantroom,choosestheoneselfpleasinghouse.Thisplatformusesh5isthedevelopmentlanguage,usesthevueframe,andusedhasreliedonVueElement-UI,simultaneouslyusedmysqltotakethedatabase.Keyword:Thehouserents,thehouserentstheinformationmanagement,theinformationplatform目录TOC\o"1-3"\h\u第1章绪论 11.1系统开发的背景和目标 11.1.1系统开发的背景 11.1.2系统开发的目标 11.2系统的主要功能和特点 11.3设计开发的方法和工具的选择 21.3.1前端html5 21.3.2Vue框架 31.3.3服务端Node 41.3.4mysql数据库 41.3.5Vscode 41.3.6Navicate 51.4论文的内容和结构安排 5第2章系统规划 62.1初步需求分析 62.2总体结构 62.3可行性研究 6第3章系统分析 73.1业务流程分析 73.2数据流程分析 133.3数据字典 143.3.1数据项 143.3.2数据流 153.3.3数据存储 153.3.4外部实体 15第4章系统设计 154.1总体设计 154.2数据库设计 174.2.1概念模型 174.2.2逻辑模型 184.2.3物理模型 194.3页面设计 20第5章系统实现 235.1系统基础模块实现 235.1.1用户注册登录注销实现 235.1.2用户修改个人信息实现 245.2系统业务模块实现 255.2.1房东功能模块 255.2.2租客功能模块 27总结 29参考文献 29谢辞 30附录 31PAGE48第1章绪论1.1系统开发的背景和目标1.1.1系统开发的背景近年来，中国的住房价格高涨，而且还在保持着继续上涨的势头，这成为政府需要解决的主要问题，人们对此非常关注。国务院相继出台了一系列宏观调控政策，建设部和其他部委已开始对房地产市场进行针对性的治理，但房价在过去几年中还是持续上涨，不但深圳，广州这些较为发达的沿海城市的住房价格增长趋势迅猛，就连一些中小城市的住房价格也在水涨船高。如此高的住房价格也导致了租房租赁成为了一块肥肉，从而也带动了房屋中介的蓬勃发展。根据有关部门的统计数据，大多数房地产交易都是通过中介机构进行的，但是由于社会上的房产经纪公司太多，在要顾及中介公司可信度的同时，还要从大量复杂的房产信息中做出选择，这使得人们难以快速准确地找到自己适合的房租信息。另外，在出租求租过程当中，都要通过中介公司，一方面过程较为繁琐，一方面还要支付一定的中介费用，这一定程度上较重了客户的负担。因此，房屋租赁平台的设计与开发是适应时代发展的项目。1.1.2系统开发的目标开发一个实时便捷，高效安全，操作页面简洁的房屋租赁平台，房东可以在平台上发布自己想出租的房屋信息，提供给需求者选择，同时又能随时管理房屋的信息，及时更新；租客既可以不用特地经过房屋中介这个中间人，也可以随时浏览各个地方各个价格区间的闲置空房，挑选自己中意的房屋。既简化了信息的收集，节省一定的中介费用，又方便了租客了解房屋情况，提高效率。1.2系统的主要功能和特点房屋租赁平台的主要功能有：（1）用户的注册登陆：用户在本平台上进行注册登陆，不然无法进行相关的一些后续操作。（2）房东发布房屋信息：房东在本平台上发布其出租房屋的详细信息。（3）用户检索出租房屋信息：此功能为用户提供了房屋检索，可以设置价格区间，限定房屋户型，同时也价格排序功能，可以有效的减少用户寻找合适房屋的工作量。（4）房屋信息管理功能：房东对于出租房屋信息的管理，确保出租房屋信息的实时更新。（5）用户个人信息的修改：用户对于个人信息的修改，可以一定程度上保证个人信息的安全。此平台在实现上述功能模块的同时，还具有几个显著的特点：（1）操作简便，页面简洁提供了良好的用户体验。（2）使用Web技术，用户可以随时在各种设备上使用该平台。1.3设计开发的方法和工具的选择本租赁平台采用了结构化开发方法，自顶向下地对租赁平台进行阶段分解。在租赁平台规划阶段，将使用现场调查和文献调查的方法来收集和处理用户的需求；在租赁平台分析阶段，根据用户需求执行业务流程分析，并创建系统分析文档。在平台设计阶段，将进行总体设计、数据库设计、代码设计、各模块功能设计。在平台实施阶段，根据租赁平台设计规划结果进行编程，数据输入和调试。在平台运行阶段，执行系统的日常管理，监视和维护等工作。以下是开发时选用的工具和插件：1.3.1前端html5Html5(Web前端技术)是由html,css,js三大框架所组成。它是web的未来，Html不仅仅在pc端，更是在移动端也被广泛使用。1.3.2Vue框架1.简介Vue是用于构建用户界面的增量框架，与其他框架不同，它设计为从下到上逐层应用。Vue的核心库仅集中在视图层，该层易于使用并且可以轻松地与第三方库或项目集成。为了实现各个前端和后端的开发概念，开发了前端单页Web应用程序（SPA）项目，以实现用于一系列任务的技术框架，例如数据绑定，路由配置，项目编译和打包。安装首先，您需要安装node.js，然后使用node.js安装相关的依赖项，使用淘宝npm映像（在命令提示符中输入:npminstall-gcnpm-registry=）。然后安装全局vue-cli脚手架，该脚手架用于提供构造所需的模板框架。到这里就可以开始创建项目了。可通过cmd命令创建(vueinitwebpack项目名称)。创建好项目后进入项目目录通过cmd命令装依赖(npminstall)。成功安装后，该目录中就有一个node_modules文件夹。最后可以通过运行刚创建的项目测试是否搭建成功。方法1:在cmd通过命令运行(npmrundev)方法2:在浏览器中输入localhost:8080（默认端口号为8080）运行成功并且环境搭配成功会出现下面界面，如图1-1所示。图1-1配置成功界面1.3.3服务端NodeNode就是在服务器上运行的JavaScript。它是一个机遇谷歌，是使用JavaScipt运行时编写的平台。是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎运行Javascript的速度非常快，并且具有非常好的性能。1.3.4mysql数据库Mysql是由瑞典mysqlAB公司开发的关系数据库管理系统，目前属于Oracle产品。mysql是运用最广泛的关系数据库管理系统之一，在Web应用程序中mysql是最好的应用程序软件之一。1.3.5VscodeVscode是一款较为出事的开发工具，拥有比较丰富的插件，同时也是一款跨平台的开发工具，同时支持windows,Linux,OSX系统。在界面中，Vscode的编辑界面仍然是Microsoft的经典VS风格，并且与那些异常接触它的人相对较近。集成了现代编辑器的所有功能，包括热键绑定，括号匹配和语法突出显示以及一系列代码片段。编程语言支持C++，玉器，PHP，Python，Java，Luna，VisualBasic，Markdown，JavaScript，JSON，HTML，CSS，LESS，SASS，C＃，TypeScript等。经过实际测试后，Vscode的启动速度和打开大型项目的速度非常平稳，从而使某些需要效率的开发人员更加高效。1.3.6NavicateNavicat是一套快速可靠的数据库管理工具，旨在简化数据库并降低系统管理成本，旨在更好地满足数据库管理员和开发人员的需求。基于直观的图形用户界面，用户可以安全，简单的方式创建，使用和修改。Navicat为客户提供七种语言的选择，这是世界上使用最广泛的数据库前端用户界面工具。它可以用于管理和开发本地或远程MySQL，SQLServer，SQLite，Oracle和PostgreSQL数据库。它也是一个跨平台工具，也适用于Windows，Linux和OSX系统。它允许用户连接到本地或远程服务器，并提供一些工具来帮助管理数据库。1.3.7Element-uiElement-ui是饿了么前端团队推出的一款基于Vue.js2.0的桌面前端框架，设计过程中所运用的相关代码如图1-2至图1-3所示。图1-2相关代码图1-3相关代码1.3.8AxiosAxios是基于promise用于浏览器和node.js的http客户端，设计过程中所运用的相关代码如图1-4所示。图1-4相关代码1.4论文的内容和结构安排本课题研究的主要内容是使用h5为开发语言，使用vue框架，node作为后端，以及使用mysql作为数据库，设计并实现一个网上房屋租赁平台。根据所研究的内容，本篇毕业设计论文一共分为五个章节，大致框架如下：第1章“绪论”。主要介绍了房屋租赁平台的设计背景、目的和主要的功能特点，以及开发过程中做使用到的开发工具进行简要阐述。第2章“系统规划”。主要介绍了平台的需求分析和总体结构方案，并分析了该平台开发的可行性。第3章“系统分析”。主要通过业务流程、数据流程以及数据字典的分析，对平台的功能进行相应的建模。第4章“系统设计”。主要进行平台数据库的的设计。第5章“系统实现”。主要进行平台界面的设计、编程开发以及后续的测试。第2章系统规划2.1需求分析根据网上调查数据显示，目前人们进行的房屋租赁活动绝大多数是通过中介机构进行的，但是由于市场上的中介机构和租赁网站都存在着各种各样的问题，加之房屋信息量过于庞大，这使得用户难以快速准确地找到自己适合的房租信息。所以要从根本上解决以上的问题，首先需要在房东和租客之间建立直接的沟通，让他们能够直接地完成房屋的租赁；其次需要简化用户的操作界面，使得房东和租客之间的房屋信息交流更方便快捷，以最短时间、最快速度、最少的人力高效地完成房屋租赁过程中的各项工作。在现实生活的房屋租赁过程中，主要的参与者有房东和租客，该设计的核心需求就是为房东提供一个闲置房屋信息发布的服务，为租客提供检索查看房屋信息的服务；该设计需要实现房东的闲置房屋信息的发布与展示，发布房屋的管理，租客的房屋信息的检索等主要功能模块。2.2总体结构该设计从总体上是由基础模块和业务模块构成。平台基础模块主要实现了租赁平台的一些基础功能，例如用户的注册、登录、注销等；业务模块则是房屋租赁业务，业务模块的用户分为房东和租客，房东在本平台上发布其出租房屋的详细信息，同时对于出租房屋信息的管理，确保出租房屋信息的实时更新。租客通过检索功能，设置价格区间，限定房屋户型，找到自己想要的房屋，如表2-1所示。表2-1平台功能表编号功能名称描述参与者1登录、注销登录注销账号租户，房东2注册注册新用户租户，房东3筛选出租屋根据个人需求快速查找房屋租户4修改排序修改房屋的显示顺序租户5查看出租屋查看房屋详细信息租户6出租房屋上传信息出租房屋房东7管理房屋管理个人所出租的房屋房东8修改个人信息修改个人相关信息租户，房东2.3可行性研究1.经济可行性该平台所需的硬件（计算机和相关硬件）和软件环境可以在市场上轻松获得，也可以从相关网站下载。该平台的成本主要集中在开发和维护上，尽管开发过程需要一定的费用，但是实施之后将大大提高工作的效率，减少人力，从长远的眼光来看，效益的回报是不断增加的。

2.技术可行性本系统基于h5作为客户端开发，以nodejs作为服务端开发，用mysql作为数据库存储数据，这些工具的技术都相对比较成熟，开发系统可靠稳定，和Windows以及当前各种系统很好的兼容搭配。3.操作可行性当今时代人们离不开互联网，网页浏览是每个人都能掌握的技能，由此通过web端实现系统的开发可以更好地被人们所接触。同时用户可以随时随地地使用该系统，对信息进行浏览，而不一定要到指定地点了解信息。同时，该平台的操作简单，用户只需要了解计算机的基本操作即可使用该平台。通过阅读信息获取到自己所需的房屋便可以通过信息主动联系房东。4.结论综上所述，各项可行性上完全满足需求，可以开始下一步的工作。

第3章系统分析3.1业务流程分析该平台的整体业务流程如图3-1所示，主要描述了房东，租客的主要业务之间的关系。图3-1系统业务流程图该平台的主要业务有房东注册登陆，房东修改个人信息，房东发布房屋信息，房东管理房屋信息，租客注册登陆，租客修改个人信息，租客检索房屋信息。接下来将对这些主要业务展开分析。1.房东注册登录房东在使用平台前需要进行注册登记，填写房东的账号，密码，姓名，电话号码，邮箱，在填写的信息符合系统填写格式后就能成功注册，之后就能通过该平台发布房屋信息了；如果填写的信息不符合格式则需要重新填写，否则无法成功注册，房东注册登录流程如图3-2所示。图3-2房东注册登录流程2.房东发布房屋信息房东可以在“我要出租”页面进行发布出租房屋信息的操作，出租房屋的信息包括了位置（省份，城市，区县，详细位置）、房型（室，厅，卫）、楼层、月租（租金，起租时长）、标题、房屋的实景图片，房东发布房屋信息流程如图3-3所示。出租房屋的所有信息填写都是必填项，填写完整后房东就能成功发布该信息；如果没有填写完整，平台会提示“出租失败，请完整填写信息”。租客在进行房屋检索时可以通过租金，户型设置检索条件，所以需要房东进行准确，完整的填写才能被租客有效的检索到。图3-3房东发布房屋信息流程3.房东管理房屋信息房东可以在该平台上管理自己发布的房屋信息，并根据房屋的状态进行对应的操作，例如房屋已经租出去了，房东可以删除该房屋的信息，房东管理房屋信息流程如图3-4所示。图3-4房东管理房屋信息流程4.房东修改个人信息房东在注册后可以在“个人信息”页进行信息的修改，例如更换手机号码后及时更新新的号码，确保租客能够及时的联系沟通，但是账号一旦成功注册后是无法修改的，房东修改个人信息流程如图3-5所示。图3-5房东修改个人信息流程5.租客注册登陆租客在使用平台前需要进行注册登记，填写自己的账号，密码，姓名，电话号码，邮箱，在填写的信息符合系统填写格式后就能成功注册，之后就能通过该平台检索房屋信息了；如果填写的信息不符合格式则需要重新填写，否则无法成功注册，租客注册登陆流程如图3-6所示。图3-6租客注册登录流程6.租客修改个人信息租客在注册后可以在“个人信息”页进行信息的修改，例如通过修改密码确保账号的安全性，但是账号一旦成功注册后是无法修改的，租客修改个人信息流程如图3-7所示。图3-7租客修改个人信息流程7.租客检索房屋信息租客可以在该平台上通过检索房屋的功能进行搜索，从而找到自己满意的房子。租客可以通过输入关键词，设置租金，户型的条件快速有效的找到对应的房屋。检索结果出来后，还能设置租金高低的排序，提高效率，租客检索房屋信息流程如图3-8所示。图3-8租客检索房屋信息流程3.2数据流程分析数据流分析是当前系统中数据流的抽象，舍弃诸如特定组织，信息提供者和处理之类的物理组织，而只是在数据流过程中检查实际业务的数据处理模式。该平台的顶层数据流如图3-9所示。图3-9顶层数据流图该平台的核心业务：房东发布出租房屋的详细信息以及租客检索房屋的数据流如图3-10所示。图3-10房东发布出租房屋的详细信息以及租客检索房屋的数据流图3.3数据字典3.3.1数据项该平台的数据项如表3-1至表3-3所示。表3-1房东的数据项属性类型类型长度约束备注房东账号varchar255主键房东密码varchar255非空房东姓名varchar255非空房东邮箱varchar255非空房东电话varchar255非空表3-2租客的数据项属性类型类型长度约束备注租客账号varchar255主键租客密码varchar255非空租客姓名varchar255非空租客邮箱varchar255非空租客电话varchar255非空表3-3房屋信息的数据项属性类型类型长度约束备注房间编号varchar255主键详细位置varchar255非空租金decimal10非空标题varchar255非空实名认证图片varchar255非空房间实景图片房型varchar255非空房屋的室，厅，卫城市varchar255非空省份varchar255非空地区varchar255非空房东邮箱varchar255非空房东电话varchar255非空便于租客与房东取得联系房东姓名varchar255非空楼层varchar255非空起租时长varchar255非空3.3.2数据流该平台的数据流如表3-4所示。表3-4平台的数据流名称来源去向组成备注房东信息房东系统后台账号，姓名等基本信息租客信息租客系统后台账号，姓名等基本信息待出租房屋信息房东房屋信息房东发布的要出租的房屋房屋信息待出租房屋信息租客系统中的房屋信息3.3.3数据存储该平台的数据存储如表3-5所示。表3-5平台的数据存储名称权限来源备注房东个人信息房东房东租客个人信息租客租客房屋信息房东房东3.3.4外部实体该平台的外部实体如表3-6所示。表3-6平台的外部实体外部实体数据结构备注房东房东账号，房东密码，房东姓名，房东电话，房东邮箱租客租客账号，租客密码，租客姓名，租客电话，租客邮箱房屋编号，位置，租金，标题，图片，房型，城市，省份，地区，房东邮箱，房东电话，房东姓名，楼层，起租时长第4章系统设计4.1总体设计该平台大体上可以分为两大模块，一是基础模块，二是业务模块。大体上的设计架构如图4-1所示；而该平台业务模块的总体设计如图4-2所示。图4-1总体架构设计图4-2业务模块总体设计4.2数据库设计4.2.1概念模型在数据库设计中，ER图用于说明系统的概念模型。该平台的核心业务ER图如图4-3所示。图4-3核心业务ER图核心业务的实体属性，如图4-4至4-6所示图4-4房东实体属性图4-5房屋实体属性图4-6租客实体属性4.2.2逻辑模型该平台的核心业务模块的数据库逻辑模型如图4-7所示。图4-7核心业务逻辑模型4.2.3物理模型介绍基于数据库模型的主数据表的物理结构如下表4-1至表4-3所示：表4-1landlord用户表序号字段名称数据类型备注描述1User账号varchar主键房东账号2Passoword密码varchar非空对应密码3name姓名varchar非空房东称呼4email邮箱varchar非空房东邮箱5phone电话号码varchar非空房东号码表4-2renter用户表序号字段名称数据类型备注描述1User账号varchar主键租客账号2Passoword密码varchar非空对应密码3name姓名varchar非空租客称呼4email邮箱varchar非空租客邮箱5phone电话号码varchar非空租客号码表4-3house房屋表序号字段名称数据类型长度备注描述1ididvarchar255主键房屋id2location地址varchar255非空房屋详细地址3price价格decimal10非空月租4tittle标题varchar255非空出租信息标题5img图片varchar255非空图片6room房间varchar255非空房间类型7city城市varchar255非空房屋所在城市8provinces省份varchar255非空房屋所在省份9area区县varchar255非空房屋所在区县10email邮箱varchar255非空房东邮箱11phone电话号码varchar255非空房东电话号码12lanlord房东varchar255非空房东13floor楼层varchar255非空房屋所在楼层14timeLimit时间限制varchar255非空房屋起租期限4.3页面设计该平台的顶部是一个贯穿所有页面的导航，为用户提供了登录，注册，房屋出租等业务模块的入口；中间就是房屋列表。如图4-8所示。图4-8首页用户是必须进行注册、登录之后才能使用平台相应的功能。在注册的过程中，用户有两种角色可以选择，分别是房东和租客，其对应可使用的功能是不一样的。如图4-9所示。图4-9登录框房东在导航上点击“我要出租”按钮后便进入了出租房屋的编辑页面，这个页面可以对房屋的详情信息进行填写。如图4-10所示。图4-10出租房屋编辑页房东在导航上点击“房屋管理”按钮后便进入了出租房屋的管理页面，这个页面可以对房屋出租情况进行管理。如图4-11所示。图4-11出租房屋管理页用户在导航上点击“个人信息”按钮后便进入了个人信息的编辑修改页面，这个页面可以对用户的个人信息进行修改。如图4-12所示。图4-12个人信息修改页第5章系统实现5.1系统基础模块实现在这个部分中，我将每个模块对应的重要代码列出并作出注释，把其余非重点的代码放附件里。5.1.1用户注册登录注销实现在注册的过程中，用户有两种角色可以选择，分别是房东和租客，在使用平台时其对应可使用的功能是不一样的。该部分代码是通过引入reg文件，通过reg.js中的内容是对于用户输入的信息进行合法性判断，不合法的会有提示。代码如图4-13至图4-14所示。图4-13图4-14之后向服务器发送请求再把用户填写的信息进行包装发送，然后等待服务端返回响应，代码如图4-15所示。图4-15注册完成后用户就可以进行登录了，在这个部分是通过设置cookie将登陆的账户信息存储到cookie中让浏览器记住当前登录账号防止刷新丢失，代码如图4-16所示。图4-165.1.2用户修改个人信息实现用户在登录进入系统后可修改个人基本信息，但是账号是唯一的，不能再进行修改。该部分代码是先获取了数据库中该用户的基本信息，通过用户修改后把修改后信息传至数据库存储，并返回响应，代码如图4-17所示。图4-175.2系统业务模块实现5.2.1房东功能模块用户使用房东账号等进入系统后，可进行想要出租房屋的进行编辑出租，出租成功后会给出对应的提示，假如填写不完整，系统也会进行提示。在这个部分，我运用了Vue的Element-UI当中的现成框架，包括了下拉列表，轮播图等，代码如图4-18所示。图4-18用户使用房东账号等进入系统后，可进行已经的出租房屋进行管理。在这个过程中最重要的就是图片的上传，首先需要通过调用第三方接口进行图上传保存，上传之后会返回一个图片的地址，之后会存入数据库，代码如图4-19所示。图4-19其中还会用到handleBeforeUplaod，handleExcead，handleRemove，handlePictureCardPreview，handelAvatarSuccess这几个方法，作用分别是图片上传数量限制，移除图片，点击上传图片，图片上传返回地址保存，代码如图4-20至图4-21所示。图4-20图4-21房东在出租房屋后可对于房屋进行管理。这个部分代码是通过数据库请求从而获得该房东的已出租的房屋列表，然后通过rankout进行删除，之后再存储至数据库，代码如图4-22所示。图4-225.2.2租客功能模块租客登录进入系统后，可通过自己想要查找的对应房屋条件进行检索，目前平台只能实现租金，户型，关键词等条件进行房屋检索。该部分代码是通过向父组件传值，通过点击搜索按钮调改变房屋列表和监听用户筛选的户型，租金来直接改变显示的房屋列表，代码如图4-23所示。图4-23租客身份进入系统后是无法进入“我要出租”和“房屋管理”板块的，这主要是通过cookie.js中的方法进行判定的，浏览器存储的信息中有“房东”，“我要出租”和“房屋管理”板块才可以点击，代码如图4-24至图4-25所示。图4-24图4-25租客可以点击房屋图片进入房屋的详情页，在该页面可以看到房屋详细的信息以及房东的联系方式，如果房屋合适可以与房东取得联系。这部分代码是将点击的房屋的id通过vuex中的set_targetHouse方法保存在浏览器中，以此让浏览器记住当租客查看的是哪个房屋，防止刷新后丢失，代码如图4-26至图4-27所示。图4-26图4-27总结本次设计使用H5进行开发，并且选择了在国内比较热门的Vue框架。选择了H5进行网站开发是因为网页对大多数人来说都比较方便使用，并且无需下载任何软件便可以使用。国内前端框架比较热门的除了Vue还有React，但个人觉得Vue比较适合这种规模较小的项目所以偏向了选择Vue，并且使用了依赖于Vue的Element-UI。服务端使用Node，一方面是因为它是使用了JavaScript的语法，开发的过程中会比较方便，思维上比较统一。H5的强大以及深度远远不止于该项目，希望在今后的日子可以继续学习，提高相关技能水平，不断发掘它的能量。

参考文献[1]前后端解耦模式及开发[J].吴贺.

计算机系统应用.

2017(02)[2]Web工程前端性能优化[J].李晓峰.

电子科技.

2015(05)[3]基于VueJs的WEB前端开发研究[J].徐頔,朱广华,贾瑶.

科技风.

2017(14)[4]基于Vue.js的WebGIS云管理与服务平台[D].黄俊勇.武汉纺织大学

2018[5]基于MVVM模式的WEB前端框架的研究[J].易剑波.

信息与电脑(理论版).

2016(19)[6]基于MVVM模式的Vue.js框架在物流软件自动化测试系统中的应用研究[D].柴青山.北京邮电大学

2019[7]基于Vue.js的移动应用可视化平台的研究[J].冯传波,彭章友,张钟浩.

工业控制计算机.

2019(05)[8]武海龙,李国平著基于SpringBoot的房屋租赁系统设计[J].电脑与信息技术,2019,27(03):76-78.[9]基于Vue.js的Web前端应用研究[J].朱二华.

科技与创新.

2017(20)[10]基于Node.js中间层Web开发的研究与实现——以微信图书借阅平台为例[J].仇晶,黄岩,柴瑜晗.

河北工业科技.

2017(02)[11]基于HTML5进行响应式Web应用的技巧[J].刘于沛.

中国新通信.

2017(02)[12]Web前端开发技术以及优化研究[J].吴睿.

中国新通信.

2016(17)[13]MVVM设计模式及其应用研究[J].陈涛.

计算机与数字工程.

2016(10)[14]Vue.js权威指南[M].电子工业出版社,张耀春,2016

附录1程序源代码Vuex/store.js代码：const

state

=

{

data:

null,

house_list:

[],

_house_list:

[],

targetHouse:

null,

page_data:

[],

location:

'aaa'

}const

getters

=

{

get_house_list(state)

{

return

state.house_list

}}const

mutations

=

{

reset_house_list(state)

{

state.house_list

=

state._house_list

},

set_house_list(state,

data)

{

state.house_list

=

data

},

set__house_list(state)

{

state._house_list

=

state.house_list

},

set_page_data(state,

data)

{

state.page_data

=

data

},

set_targetHouse(state,

str)

{

state.targetHouse

=

str;

var

length

=

state.house_list.length;

for

(let

i

=

0;

i

<

length;

i++)

{

if

(state.house_list[i].id

==

str)

{

state.targetHouse

=

state.house_list[i]

}

}

},

set_location(state,

str)

{

state.location

=

str;

},const

actions

=

{

request_house_list({

commit

})

{

axios({

methods:

"get",

url:

"/house_list"

}).then(results

=>

{

commit('set_house_list',

results.data)

commit("set__house_list")

commit("set_page_data",

results.data.slice(0,

10))

});

},

filterMsg({

state,

commit

},

{

minPrice,

maxPrice,

minRoom,

maxRoom

})

{

commit("reset_house_list")

var

data

=

[];

var

length

=

state.house_list.length;

for

(let

i

=

0;

i

<

length;

i++)

{

if

(

minPrice

<

state.house_list[i].price

&&

state.house_list[i].price

<=

maxPrice

&&

minRoom

<

state.house_list[i].room.split("/")[0]

&&

state.house_list[i].room.split("/")[0]

<=

maxRoom

)

{

data.push(state.house_list[i]);

}

}

commit("set_house_list",

data)

commit("set_page_data",

data.slice(0,

10))

},

keyword({

state,

commit

},

val)

{

commit("reset_house_list")

let

length

=

state.house_list.length;

var

data

=

[];

for

(let

i

=

0;

i

<

length;

i++)

{

if

(state.house_list[i].tittle.includes(val)

||

state.house_list[i].area.includes(val)

||

state.house_list[i].location.includes(val)

||

state.house_list[i].provinces.includes(val)

||

state.house_list[i].city.includes(val))

{

data.push(state.house_list[i]);

}

}

commit("set_house_list",

data)

commit("set_page_data",

data.slice(0,

10))

},

turn_page({

state,

commit

},

currentPage)

{

commit("set_page_data",

state.house_list.slice(10

*

(currentPage

-

1),

10

*

currentPage))

},

change_location({

state,

commit

},

newlocation)

{

commit("set_location",

newlocation)}Vuex/reg.js代码：const

price

=

function

(price)

{

var

myreg

=

/^[0-9]*$/;

if

(!myreg.test(price))

{

this.is_price

=

false;

retu