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

北北北北北北北北北北2020届本科生毕业设计

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

网上房屋租赁平台的分析与设计

摘 要

随着中国市场经济的发展，城市现代化建设步伐不断加快，城市规模不断扩大，

人口流动不断增加，房屋租赁也渐渐成为社会生活的重要组成部分。近年来，随着互

联网技术的迅猛发展，房屋租赁管理也逐渐发展为互联网信息平台。

本文将以房屋租赁平台为对象，针对我国现在的房屋租赁行业的发展趋势，建立

一个界面友好，操作简便，实时快捷的房屋租赁平台，让房东可以在平台上发布自己

想出租的房屋信息，提供给需求者选择，同时又能随时管理房屋的信息，及时更新；

租客既可以不用特地经过房屋中介这个中间人，也可以随时浏览各个地方各个价格区

间的闲置空房，挑选自己中意的房屋。

本平台使用h5为开发语言，使用vue框架，并且使用了依赖于Vue的Element-UI，

同时使用mysql作为数据库。

北北北北北北北北北北2020届本科生毕业设计

关键词：房屋租赁，房屋租赁信息管理，信息平台

北北北北北北北北北北2020届本科生毕业设计

Design and implementation of online housing rental platform

Abstract

Along with the China market economy development, the city modernization step speeds

up unceasingly, the city scale expands unceasingly, the population flowing increases

unceasingly, the house rents also gradually becomes the social life the important

recent years, along with the Internet technology swift and violent development,

the house rented the management also gradually to develop for the Internet information

platform.

北北北北北北北北北北2020届本科生毕业设计

目录

第1章 绪论 .................................................... 1

1.1 系统开发的背景和目标 .............................................. 1

1.1.1 系统开发的背景 .............................................. 1

1.1.2 系统开发的目标 .............................................. 1

1.2 系统的主要功能和特点 .............................................. 1

1.3 设计开发的方法和工具的选择 ........................................ 2

1.3.1 前端html5 ................................................... 2

1.3.2 Vue框架 ..................................................... 3

1.3.3服务端Node .................................................. 4

1.3.4 mysql数据库 ................................................. 4

1.3.5 Vscode ...................................................... 4

1.3.6 Navicate .................................................... 5

1.4 论文的内容和结构安排 .............................................. 6

第2章 系统规划 ................................................ 7

2.1 初步需求分析 ...................................................... 7

2.2 总体结构 .......................................................... 7

2.3 可行性研究 ........................................................ 8

第3章 系统分析 ................................................ 9

3.1 业务流程分析 ...................................................... 9

3.2 数据流程分析 ..................................................... 14

3.3 数据字典 ......................................................... 15

3.3.1数据项 ...................................................... 15

3.3.2数据流 ...................................................... 16

3.3.3数据存储 .................................................... 17

3.3.4外部实体 .................................................... 17

第4章 系统设计 ............................................... 18

4.1 总体设计 ......................................................... 18

北北北北北北北北北北2020届本科生毕业设计

4.2 数据库设计 ....................................................... 19

4.2.1 概念模型 ................................................... 19

4.2.2 逻辑模型 ................................................... 21

4.2.3 物理模型 ................................................... 22

4.3 页面设计 ......................................................... 23

第5章 系统实现 ............................................... 27

5.1 系统基础模块实现 ................................................. 27

5.1.1用户注册登录注销实现 ........................................ 27

5.1.2用户修改个人信息实现 ........................................ 31

5.2 系统业务模块实现 ................................................. 32

5.2.1房东功能模块 ................................................ 32

5.2.2租客功能模块 ................................................ 35

总结 .................................................................... 39

参考文献 ................................................................ 40

谢辞 ..................................................... 错误!未定义书签。

附录 ..................................................... 错误!未定义书签。

北北北北北北北北北北2020届本科生毕业设计

第1第 第第

1.1 系统开发的背景和目标

1.1.1 第第第第第第第

近年来，中国的住房价格高涨，而且还在保持着继续上涨的势头，这成为政府需要

解决的主要问题，人们对此非常关注。国务院相继出台了一系列宏观调控政策，建设部

和其他部委已开始对房地产市场进行针对性的治理，但房价在过去几年中还是持续上

涨，不但深圳，广州这些较为发达的沿海城市的住房价格增长趋势迅猛，就连一些中小

城市的住房价格也在水涨船高。如此高的住房价格也导致了租房租赁成为了一块肥肉，

从而也带动了房屋中介的蓬勃发展。

根据有关部门的统计数据，大多数房地产交易都是通过中介机构进行的，但是由于

社会上的房产经纪公司太多，在要顾及中介公司可信度的同时，还要从大量复杂的房产

信息中做出选择，这使得人们难以快速准确地找到自己适合的房租信息。另外，在出租

求租过程当中，都要通过中介公司，一方面过程较为繁琐，一方面还要支付一定的中介

费用，这一定程度上较重了客户的负担。因此，房屋租赁平台的设计与开发是适应时代

发展的项目。

1.1.2 第第第第第第第

开发一个实时便捷，高效安全，操作页面简洁的房屋租赁平台，房东可以在平台上

北北北北北北北北北北2020届本科生毕业设计

（1）用户的注册登陆：用户在本平台上进行注册登陆，不然无法进行相关的一些

后续操作。

（2）房东发布房屋信息：房东在本平台上发布其出租房屋的详细信息。

（3）用户检索出租房屋信息：此功能为用户提供了房屋检索，可以设置价格区

间，限定房屋户型，同时也价格排序功能，可以有效的减少用户寻找合适房屋的 工

作量。

（4）房屋信息管理功能：房东对于出租房屋信息的管理，确保出租房屋信息的实

时更新。

（5）用户个人信息的修改：用户对于个人信息的修改，可以一定程度上保证个人

信息的安全。

此平台在实现上述功能模块的同时，还具有几个显著的特点：

（1）操作简便，页面简洁提供了良好的用户体验。

（2）使用Web技术，用户可以随时在各种设备上使用该平台。

1.3 设计开发的方法和工具的选择

本租赁平台采用了结构化开发方法，自顶向下地对租赁平台进行阶段分解。在租赁

平台规划阶段，将使用现场调查和文献调查的方法来收集和处理用户的需求；在租赁平

台分析阶段，根据用户需求执行业务流程分析，并创建系统分析文档。在平台设计阶段，

将进行总体设计、数据库设计、代码设计、各模块功能设计。在平台实施阶段，根据租

赁平台设计规划结果进行编程，数据输入和调试。在平台运行阶段，执行系统的日常管

理，监视和维护等工作。

以下是开发时选用的工具和插件：

1.3.1 第第html5

Html5(Web前端技术)是由html,css,js三大框架所组成。它是web的未来，Html

2

北北北北北北北北北北2020届本科生毕业设计

不仅仅在pc端，更是在移动端也被广泛使用。

1.3.2 Vue第第

1.简介

Vue是用于构建用户界面的增量框架，与其他框架不同，它设计为从下到上逐层应

用。 Vue的核心库仅集中在视图层，该层易于使用并且可以轻松地与第三方库或项目集

成。为了实现各个前端和后端的开发概念，开发了前端单页Web应用程序（SPA）项目，

以实现用于一系列任务的技术框架，例如数据绑定，路由配置，项目编译和打包。

安装

首先，您需要安装，然后使用安装相关的依赖项，使用淘宝npm

映像（在命令提示符中输入:npm install -g

cnpm-registry=）。然后安装全局vue-cli脚手架，

该脚手架用于提供构造所需的模板框架。到这里就可以开始创建项目了。可通过cmd命

令创建(vue init webpack 项目名称)。

创建好项目后进入项目目录通过cmd命令装依赖(npm install)。成功安装后，该

目录中就有一个node_modules文件夹。

最后可以通过运行刚创建的项目测试是否搭建成功。

方法1:在cmd通过命令运行(npm run dev)

方法2:在浏览器中输入localhost:8080（默认端口号为8080）

运行成功并且环境搭配成功会出现下面界面，如图1-1所示。

3

北北北北北北北北北北2020届本科生毕业设计

图1-1 配置成功界面

1.3.3第第第Node

Node就是在服务器上运行的JavaScript。它是一个机遇谷歌，是使用JavaScipt

运行时编写的平台。是一个事件驱动I/O服务端JavaScript环境，基于Google的V8

引擎，V8引擎运行Javascript的速度非常快，并且具有非常好的性能。

1.3.4 mysql第第第

Mysql是由瑞典mysql AB公司开发的关系数据库管理系统，目前属于Oracle产品。

mysql是运用最广泛的关系数据库管理系统之一，在Web应用程序中mysql是最好的应

用程序软件之一。

1.3.5 Vscode

Vscode是一款较为出事的开发工具，拥有比较丰富的插件，同时也是一款跨平台的

开发工具，同时支持windows,Linux,OS X系统。在界面中，Vscode的编辑界面仍然是

Microsoft的经典VS风格，并且与那些异常接触它的人相对较近。集成了现代编辑器的

所有功能，包括热键绑定，括号匹配和语法突出显示以及一系列代码片段。编程语言支

持C ++，玉器，PHP，Python，Java，Luna，Visual Basic，Markdown，JavaScript，

JSON，HTML，CSS，LESS，SASS，C＃，TypeScript等。经过实际测试后，Vscode的启

4

北北北北北北北北北北2020届本科生毕业设计

动速度和打开大型项目的速度非常平稳，从而使某些需要效率的开发人员更加高效。

1.3.6 Navicate

Navicat是一套快速可靠的数据库管理工具，旨在简化数据库并降低系统管理成本，

旨在更好地满足数据库管理员和开发人员的需求。基于直观的图形用户界面，用户可以

安全，简单的方式创建，使用和修改。 Navicat为客户提供七种语言的选择，这是世界

上使用最广泛的数据库前端用户界面工具。它可以用于管理和开发本地或远程MySQL，

SQL Server，SQLite，Oracle和PostgreSQL数据库。它也是一个跨平台工具，也适用

于Windows，Linux和OS X系统。它允许用户连接到本地或远程服务器，并提供一些工

具来帮助管理数据库。

1.3.7 Element-ui

Element-ui是饿了么前端团队推出的一款基于 2.0的桌面前端框架，设计

过程中所运用的相关代码如图1-2至图1-3所示。

图1-2 相关代码

图1-3 相关代码

5

北北北北北北北北北北2020届本科生毕业设计

1.3.8 Axios

Axios是基于promise用于浏览器和的http客户端，设计过程中所运用的

相关代码如图1-4所示。

图1-4 相关代码

1.4 论文的内容和结构安排

本课题研究的主要内容是使用h5为开发语言，使用vue框架，node作为后端，以

及使用mysql作为数据库，设计并实现一个网上房屋租赁平台。

根据所研究的内容，本篇毕业设计论文一共分为五个章节，大致框架如下：

第1章“绪论”。主要介绍了房屋租赁平台的设计背景、目的和主要的功能特点，

以及开发过程中做使用到的开发工具进行简要阐述。

第2章“系统规划”。主要介绍了平台的需求分析和总体结构方案，并分析了该平

台开发的可行性。

第3章“系统分析”。主要通过业务流程、数据流程以及数据字典的分析，对平台

的功能进行相应的建模。

第4章“系统设计”。主要进行平台数据库的的设计。

第5章“系统实现”。主要进行平台界面的设计、编程开发以及后续的测试。

6

北北北北北北北北北北2020届本科生毕业设计

第2第 第第第第

2.1 需求分析

根据网上调查数据显示，目前人们进行的房屋租赁活动绝大多数是通过中介机构进

行的，但是由于市场上的中介机构和租赁网站都存在着各种各样的问题，加之房屋信息

量过于庞大，这使得用户难以快速准确地找到自己适合的房租信息。所以要从根本上解

决以上的问题，首先需要在房东和租客之间建立直接的沟通，让他们能够直接地完成房

屋的租赁；其次需要简化用户的操作界面，使得房东和租客之间的房屋信息交流更方便

快捷，以最短时间、最快速度、最少的人力高效地完成房屋租赁过程中的各项工作。

在现实生活的房屋租赁过程中，主要的参与者有房东和租客，该设计的核心需求就

是为房东提供一个闲置房屋信息发布的服务，为租客提供检索查看房屋信息的服务；该

设计需要实现房东的闲置房屋信息的发布与展示，发布房屋的管理，租客的房屋信息的

检索等主要功能模块。

2.2 总体结构

该设计从总体上是由基础模块和业务模块构成。平台基础模块主要实现了租赁平台

的一些基础功能，例如用户的注册、登录、注销等；业务模块则是房屋租赁业务，业务

模块的用户分为房东和租客，房东在本平台上发布其出租房屋的详细信息，同时对于出

租房屋信息的管理，确保出租房屋信息的实时更新。租客通过检索功能，设置价格区间，

限定房屋户型，找到自己想要的房屋，如表2-1所示。

表2-1平台功能表

编号 功能名称 描述 参与者

1 登录、注销 登录注销账号 租户，房东

2 注册 注册新用户 租户，房东

3 筛选出租屋 根据个人需求快速查找房屋 租户

4 修改排序 修改房屋的显示顺序 租户

5 查看出租屋 查看房屋详细信息 租户

6 出租房屋 上传信息出租房屋 房东

7 管理房屋 管理个人所出租的房屋 房东

7

北北北北北北北北北北2020届本科生毕业设计

8 修改个人信息 修改个人相关信息 租户，房东

2.3 可行性研究

1.经济可行性

该平台所需的硬件（计算机和相关硬件）和软件环境可以在市场上轻松获得，也可

以从相关网站下载。该平台的成本主要集中在开发和维护上，尽管开发过程需要一定的

费用，但是实施之后将大大提高工作的效率，减少人力，从长远的眼光来看，效益的回

报是不断增加的。

2.技术可行性

本系统基于h5作为客户端开发，以nodejs作为服务端开发，用mysql作为数据库

存储数据，这些工具的技术都相对比较成熟，开发系统可靠稳定，和Windows以及当前

各种系统很好的兼容搭配。

3.操作可行性

当今时代人们离不开互联网，网页浏览是每个人都能掌握的技能，由此通过web端

实现系统的开发可以更好地被人们所接触。同时用户可以随时随地地使用该系统，对信

息进行浏览，而不一定要到指定地点了解信息。同时，该平台的操作简单，用户只需要

了解计算机的基本操作即可使用该平台。通过阅读信息获取到自己所需的房屋便可以通

过信息主动联系房东。

4.结论

综上所述，各项可行性上完全满足需求，可以开始下一步的工作。

8

北北北北北北北北北北2020届本科生毕业设计

第3第 第第第第

3.1 业务流程分析

该平台的整体业务流程如图3-1所示，主要描述了房东，租客的主要业务之间的关

系。

图3-1系统业务流程图

该平台的主要业务有房东注册登陆，房东修改个人信息，房东发布房屋信息，房东

管理房屋信息，租客注册登陆，租客修改个人信息，租客检索房屋信息。接下来将对这

些主要业务展开分析。

1.房东注册登录

房东在使用平台前需要进行注册登记，填写房东的账号，密码，姓名，电话号码，

9

北北北北北北北北北北2020届本科生毕业设计

邮箱，在填写的信息符合系统填写格式后就能成功注册，之后就能通过该平台发布房屋

信息了；如果填写的信息不符合格式则需要重新填写，否则无法成功注册，房东注册登

录流程如图3-2所示。

图3-2房东注册登录流程

2.房东发布房屋信息

房东可以在“我要出租”页面进行发布出租房屋信息的操作，出租房屋的信息包括

了位置（省份，城市，区县，详细位置）、房型（室，厅，卫）、楼层、月租（租金，

起租时长）、标题、房屋的实景图片，房东发布房屋信息流程如图3-3所示。

出租房屋的所有信息填写都是必填项，填写完整后房东就能成功发布该信息；如果

没有填写完整，平台会提示“出租失败，请完整填写信息”。

租客在进行房屋检索时可以通过租金，户型设置检索条件，所以需要房东进行准确，

完整的填写才能被租客有效的检索到。

10

北北北北北北北北北北2020届本科生毕业设计

图3-3房东发布房屋信息流程

3.房东管理房屋信息

房东可以在该平台上管理自己发布的房屋信息，并根据房屋的状态进行对应的操

作，例如房屋已经租出去了，房东可以删除该房屋的信息，房东管理房屋信息流程如图

3-4所示。

11

北北北北北北北北北北2020届本科生毕业设计

图3-4房东管理房屋信息流程

4.房东修改个人信息

房东在注册后可以在“个人信息”页进行信息的修改，例如更换手机号码后及时更

新新的号码，确保租客能够及时的联系沟通，但是账号一旦成功注册后是无法修改的，

房东修改个人信息流程如图3-5所示。

图3-5房东修改个人信息流程

5.租客注册登陆

租客在使用平台前需要进行注册登记，填写自己的账号，密码，姓名，电话号码，

邮箱，在填写的信息符合系统填写格式后就能成功注册，之后就能通过该平台检索房屋

信息了；如果填写的信息不符合格式则需要重新填写，否则无法成功注册，租客注册登

陆流程如图3-6所示。

12

北北北北北北北北北北2020届本科生毕业设计

图3-6租客注册登录流程

6.租客修改个人信息

租客在注册后可以在“个人信息”页进行信息的修改，例如通过修改密码确保账号

的安全性，但是账号一旦成功注册后是无法修改的，租客修改个人信息流程如图3-7所

示。

图3-7租客修改个人信息流程

7.租客检索房屋信息

13

北北北北北北北北北北2020届本科生毕业设计

租客可以在该平台上通过检索房屋的功能进行搜索，从而找到自己满意的房子。租

客可以通过输入关键词，设置租金，户型的条件快速有效的找到对应的房屋。检索结果

出来后，还能设置租金高低的排序，提高效率，租客检索房屋信息流程如图3-8所示。

图3-8租客检索房屋信息流程

3.2 数据流程分析

数据流分析是当前系统中数据流的抽象，舍弃诸如特定组织，信息提供者和处理之

类的物理组织，而只是在数据流过程中检查实际业务的数据处理模式。该平台的顶层数

据流如图3-9所示。

14

北北北北北北北北北北2020届本科生毕业设计

图3-9顶层数据流图

该平台的核心业务：房东发布出租房屋的详细信息以及租客检索房屋的数据流如图

3-10所示。

图3-10房东发布出租房屋的详细信息以及租客检索房屋的数据流图

3.3 数据字典

3.3.1第第第

该平台的数据项如表3-1至表3-3所示。

表3-1房东的数据项

属性 类型 类型长度 约束 备注

15

北北北北北北北北北北2020届本科生毕业设计

房东账号 varchar 255 主键

房东密码 varchar 255 非空

房东姓名 varchar 255 非空

房东邮箱 varchar 255 非空

房东电话 varchar 255 非空

表3-2租客的数据项

属性 类型 类型长度 约束 备注

租客账号 varchar 255 主键

租客密码 varchar 255 非空

租客姓名 varchar 255 非空

租客邮箱 varchar 255 非空

租客电话 varchar 255 非空

表3-3房屋信息的数据项

属性 类型 类型长度 约束 备注

房间编号 varchar 255 主键

详细位置 varchar 255 非空

租金 decimal 10 非空

标题 varchar 255 非空 实名认证

图片 varchar 255 非空 房间实景图片

房型 varchar 255 非空 房屋的室，厅，卫

城市 varchar 255 非空

省份 varchar 255 非空

地区 varchar 255 非空

房东邮箱 varchar 255 非空

房东电话 varchar 255 非空 便于租客与房东取得联系

房东姓名 varchar 255 非空

楼层 varchar 255 非空

起租时长 varchar 255 非空

3.3.2第第第

该平台的数据流如表3-4所示。

16

北北北北北北北北北北2020届本科生毕业设计

表3-4平台的数据流

名称 来源 去向 组成 备注

房东信息 房东 系统后台 账号，姓名等基本信息

租客信息 租客 系统后台 账号，姓名等基本信息

待出租房屋信息 房东 房东发布的要出租的房屋信息

房屋信息 待出租房系统中的房屋信息 租客

屋信息

房屋

3.3.3第第第第

该平台的数据存储如表3-5所示。

表3-5平台的数据存储

名称 权限 来源 备注

房东个人信息 房东 房东

租客个人信息 租客 租客

房屋信息 房东 房东

3.3.4第第第第

该平台的外部实体如表3-6所示。

表3-6平台的外部实体

外部实体 数据结构 备注

房东 房东账号，房东密码，房东姓名，房东电话，房东邮箱

租客 租客账号，租客密码，租客姓名，租客电话，租客邮箱

房屋 编号，位置，租金，标题，图片，房型，城市，省份，

地区，房东邮箱，房东电话，房东姓名，楼层，起租时

长

17

北北北北北北北北北北2020届本科生毕业设计

第4第 第第第第

4.1 总体设计

该平台大体上可以分为两大模块，一是基础模块，二是业务模块。大体上的设

计架构如图4-1所示；而该平台业务模块的总体设计如图4-2所示。

图4-1 总体架构设计

18

北北北北北北北北北北2020届本科生毕业设计

图4-2 业务模块总体设计

4.2 数据库设计

4.2.1 第第第第

在数据库设计中，ER图用于说明系统的概念模型。该平台的核心业务ER图如图4-3

所示。

19

北北北北北北北北北北2020届本科生毕业设计

图4-3核心业务ER图

核心业务的实体属性，如图4-4至4-6所示

图4-4房东实体属性

20

北北北北北北北北北北2020届本科生毕业设计

图4-5房屋实体属性

图4-6租客实体属性

4.2.2 第第第第

该平台的核心业务模块的数据库逻辑模型如图4-7所示。

21

北北北北北北北北北北2020届本科生毕业设计

图4-7核心业务逻辑模型

4.2.3 第第第第

介绍基于数据库模型的主数据表的物理结构如下表 4-1至表4-3 所示：

表4-1 landlord用户表

序号 字段 名称 数据类型 备注 描述

1 User 账号 varchar 主键 房东账号

2 Passoword 密码 varchar 非空 对应密码

3 name 姓名 varchar 非空 房东称呼

4 email 邮箱 varchar 非空 房东邮箱

5 phone 电话号码 varchar 非空 房东号码

表4-2 renter用户表

序号 字段 名称 数据类型 备注 描述

1 User 账号 varchar 主键 租客账号

2 Passoword 密码 varchar 非空 对应密码

3 name 姓名 varchar 非空 租客称呼

4 email 邮箱 varchar 非空 租客邮箱

22

北北北北北北北北北北2020届本科生毕业设计

5 phone 电话号码 varchar 非空 租客号码

表4-3 house房屋表

序号 字段 名称 数据类型 长度 备注 描述

1 id id varchar 255 主键 房屋id

2 location 地址 varchar 255 非空 房屋详细地址

3 price 价格 decimal 10 非空 月租

4 tittle 标题 varchar 255 非空 出租信息标题

5 img 图片 varchar 255 非空 图片

6 room 房间 varchar 255 非空 房间类型

7 city 城市 varchar 255 非空 房屋所在城市

8 provinces 省份 varchar 255 非空 房屋所在省份

9 area 区县 varchar 255 非空 房屋所在区县

10 email 邮箱 varchar 255 非空 房东邮箱

11 phone 电话号码 varchar 255 非空 房东电话号码

12 lanlord 房东 varchar 255 非空 房东

13 floor 楼层 varchar 255 非空 房屋所在楼层

14 timeLimit 时间限制 varchar 255 非空 房屋起租期限

4.3 页面设计

该平台的顶部是一个贯穿所有页面的导航，为用户提供了登录，注册，房屋出租等

业务模块的入口；中间就是房屋列表。如图4-8所示。

23

北北北北北北北北北北2020届本科生毕业设计

图4-8首页

用户是必须进行注册、登录之后才能使用平台相应的功能。在注册的过程中，用户

有两种角色可以选择，分别是房东和租客，其对应可使用的功能是不一样的。如图4-9

所示。

图4-9登录框

房东在导航上点击“我要出租”按钮后便进入了出租房屋的编辑页面，这个页面可

以对房屋的详情信息进行填写。如图4-10所示。

24

北北北北北北北北北北2020届本科生毕业设计

图4-10出租房屋编辑页

房东在导航上点击“房屋管理”按钮后便进入了出租房屋的管理页面，这个页面可

以对房屋出租情况进行管理。如图4-11所示。

图4-11出租房屋管理页

用户在导航上点击“个人信息”按钮后便进入了个人信息的编辑修改页面，这个页

面可以对用户的个人信息进行修改。如图4-12所示。

25

北北北北北北北北北北2020届本科生毕业设计

图4-12个人信息修改页

26

北北北北北北北北北北2020届本科生毕业设计

第5第 第第第第

5.1 系统基础模块实现

在这个部分中，我将每个模块对应的重要代码列出并作出注释，把其余非重点的代

码放附件里。

5.1.1第第第第第第第第第第

在注册的过程中，用户有两种角色可以选择，分别是房东和租客，在使用平台时其

对应可使用的功能是不一样的。

该部分代码是通过引入reg文件 ，通过中的内容是对于用户输入的信息进

行合法性判断，不合法的会有提示。代码如图4-13至图4-14所示。

27

北北北北北北北北北北2020届本科生毕业设计

图4-13

28

北北北北北北北北北北2020届本科生毕业设计

图4-14

之后向服务器发送请求再把用户填写的信息进行包装发送，然后等待服务端返回响

应，代码如图4-15所示。

29

北北北北北北北北北北2020届本科生毕业设计

图4-15

注册完成后用户就可以进行登录了，在这个部分是通过设置cookie将登陆的账户

信息存储到cookie中 让浏览器记住当前登录账号 防止刷新丢失，代码如图4-16所示。

30

北北北北北北北北北北2020届本科生毕业设计

图4-16

5.1.2第第第第第第第第第第

用户在登录进入系统后可修改个人基本信息，但是账号是唯一的，不能再进行修改。

该部分代码是先获取了数据库中该用户的基本信息，通过用户修改后把修改后信息

传至数据库存储，并返回响应，代码如图4-17所示。

31

北北北北北北北北北北2020届本科生毕业设计

图4-17

5.2 系统业务模块实现

5.2.1第第第第第第

用户使用房东账号等进入系统后，可进行想要出租房屋的进行编辑出租，出租成功

后会给出对应的提示，假如填写不完整，系统也会进行提示。

在这个部分，我运用了Vue的Element-UI当中的现成框架，包括了下拉列表，轮

播图等，代码如图4-18所示。

32

北北北北北北北北北北2020届本科生毕业设计

图4-18

用户使用房东账号等进入系统后，可进行已经的出租房屋进行管理。在这个过程中

最重要的就是图片的上传，首先需要通过调用第三方接口进行图上传保存，上传之后会

返回一个图片的地址，之后会存入数据库，代码如图4-19所示。

图4-19

其中还会用到handleBeforeUplaod，handleExcead，handleRemove，

handlePictureCardPreview，handelAvatarSuccess这几个方法，作用分别是图片上传

33

北北北北北北北北北北2020届本科生毕业设计

数量限制，移除图片，点击上传图片，图片上传返回地址保存，代码如图4-20至图4-21

所示。

图4-20

图4-21

房东在出租房屋后可对于房屋进行管理。

这个部分代码是通过数据库请求从而获得该房东的已出租的房屋列表，然后通

34

北北北北北北北北北北2020届本科生毕业设计

过rankout进行删除，之后再存储至数据库，代码如图4-22所示。

图4-22

5.2.2第第第第第第

租客登录进入系统后，可通过自己想要查找的对应房屋条件进行检索，目前平台只

能实现租金，户型，关键词等条件进行房屋检索。

该部分代码是通过向父组件传值，通过点击搜索按钮调改变房屋列表和监听用户筛

选的户型，租金来直接改变显示的房屋列表，代码如图4-23所示。

35

北北北北北北北北北北2020届本科生毕业设计

图4-23

租客身份进入系统后是无法进入“我要出租”和“房屋管理”板块的，这主要是通

过中的方法进行判定的，浏览器存储的信息中有“房东”，“我要出租”和

“房屋管理”板块才可以点击，代码如图4-24至图4-25所示。

图4-24

36

北北北北北北北北北北2020届本科生毕业设计

图4-25

租客可以点击房屋图片进入房屋的详情页，在该页面可以看到房屋详细的信息以及

房东的联系方式，如果房屋合适可以与房东取得联系。

这部分代码是将点击的房屋的id通过vuex中的set_targetHouse方法保存在浏览

器中，以此让浏览器记住当租客查看的是哪个房屋，防止刷新后丢失，代码如图4-26

至图4-27所示。

37

北北北北北北北北北北2020届本科生毕业设计

图4-26

图4-27

38

北北北北北北北北北北2020届本科生毕业设计

第第

本次设计使用H5进行开发，并且选择了在国内比较热门的Vue框架。选择了H5进

行网站开发是因为网页对大多数人来说都比较方便使用，并且无需下载任何软件便可以

使用。国内前端框架比较热门的除了Vue还有React，但个人觉得Vue比较适合这种规

模较小的项目所以偏向了选择Vue，并且使用了依赖于Vue的Element-UI。服务端使用

Node，一方面是因为它是使用了JavaScript的语法，开发的过程中会比较方便，思维

上比较统一。H5的强大以及深度远远不止于该项目，希望在今后的日子可以继续学习，

提高相关技能水平，不断发掘它的能量。

39

北北北北北北北北北北2020届本科生毕业设计

第第第第

[1] 前后端解耦模式及开发[J]. 吴贺. 计算机系统应用. 2017(02)

[2]Web工程前端性能优化[J]. 李晓峰. 电子科技. 2015(05)

[3] 基于VueJs的WEB前端开发研究[J]. 徐頔,朱广华,贾瑶. 科技风. 2017(14)

[4] 基于的WebGIS云管理与服务平台[D]. 黄俊勇.武汉纺织大学 2018

[5] 基于MVVM模式的WEB前端框架的研究[J]. 易剑波. 信息与电脑(理论

版). 2016(19)

[6] 基于MVVM模式的框架在物流软件自动化测试系统中的应用研究[D]. 柴青

山.北京邮电大学 2019

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

控制计算机. 2019(05)

[8]武海龙,李国平著基于SpringBoot的房屋租赁系统设计[J].电脑与信息技

术,2019,27(03):76-78.

[9] 基于的Web前端应用研究[J]. 朱二华. 科技与创新. 2017(20)

[10] 基于中间层Web开发的研究与实现——以微信图书借阅平台为例[J]. 仇

晶,黄岩,柴瑜晗. 河北工业科技. 2017(02)

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

[12]Web前端开发技术以及优化研究[J]. 吴睿. 中国新通信. 2016(17)

[13]MVVM设计模式及其应用研究[J]. 陈涛. 计算机与数字工程. 2016(10)

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

40

北北北北北北北北北北2020届本科生毕业设计

附录1 程序源代码

Vuex/代码：

const state = { data: null, house_list: [], _house_list: [], targetHouse: null, page_data: [], location: 'aa

a' }

const getters = {

get_house_list(state) {

return _list

}

}

const mutations = {

reset_house_list(state) {

_list = state._house_list

},

set_house_list(state, data) {

_list = data

},

set__house_list(state) {

state._house_list = _list

},

set_page_data(state, data) {

_data = data

},

set_targetHouse(state, str) {

House = str;

var length = _;

41

北北北北北北北北北北2020届本科生毕业设计

for (let i = 0; i < length; i++) {

if (_list[i].id == str) {

House = _list[i]

}

}

},

set_location(state, str) {

on = str;

},

const actions = {

request_house_list({ commit }) {

axios({

methods: "get",

url: "/house_list"

}).then(results => {

commit('set_house_list', )

commit("set__house_list")

commit("set_page_data", (0, 10))

});

},

filterMsg({ state, commit }, { minPrice, maxPrice, minRoom, maxRoom }) {

commit("reset_house_list")

var data = [];

var length = _;

for (let i = 0; i < length; i++) {

if (

minPrice < _list[i].price &&

_list[i].price <= maxPrice &&

42

北北北北北北北北北北2020届本科生毕业设计

minRoom < _list[i].("/")[0] &&

_list[i].("/")[0] <= maxRoom

) {

(_list[i]);

}

}

commit("set_house_list", data)

commit("set_page_data", (0, 10))

},

keyword({ state, commit }, val) {

commit("reset_house_list")

let length = _;

var data = [];

for (let i = 0; i < length; i++) {

if (_list[i].es(val) || _list[i].es(val) ||

se_list[i].es(val) || _list[i].es(val) || _list[i].e

s(val)) {

(_list[i]);

}

}

commit("set_house_list", data)

commit("set_page_data", (0, 10))

},

turn_page({ state, commit }, currentPage) {

commit("set_page_data", _(10 * (currentPage - 1), 10 * currentPage))

},

change_location({ state, commit }, newlocation) {

commit("set_location", newlocation)

}

43

北北北北北北北北北北2020届本科生毕业设计

Vuex/代码：

const price = function (price) {

var myreg = /^[0-9]*$/;

if (!(price)) {

_price = false;

return false;

} else {

_price = true;

return true;

}

}

const phone = function (phone) {

var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;

// this.$(myreg, phone);

if (phone != "") {

if (!(phone) && phone != "") {

return false;

} else {

return true;

}

}

else {

return true;

}

}

const email = function (email) {

var myreg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;

44

北北北北北北北北北北2020届本科生毕业设计

if (!(email) && email != "") {

return false;

} else {

return true;

}

}

const user = function (user) {

}

const psw = function (psw) {

var myreg = /^.{6,16}$/

var length =

if (!(psw) && psw != "") {

return false;

} else {

return true;

}

}

const re_psw = function (psw, psw0) {

if (psw != null && psw0 != null) {

if (psw === psw0) {

return true;

} else {

return false;

}

}

else {

return true;

}

45

北北北北北北北北北北2020届本科生毕业设计

}

Router/代码：

export default new Router({

routes: [

{

path: '/',

name: 'houseList',

component: house_list,

meta: {

keepAlive: true

}

}, {

path: '/regist',

name: 'regist',

component: regist

},

{

path: '/personal',

name: 'personal',

component: personal

},

{

path: '/index',

name: 'index',

component: index

},

46

北北北北北北北北北北2020届本科生毕业设计

{

path: '/house_list',

name: 'house_list',

component: house_list

},

{

path: '/detil',

name: 'detil',

component: detil

},

{

path: '/rank',

name: 'rank',

component: rank

},

{

path: '/list_out',

name: 'list_out',

component: list_out

}

]

})

47