网上房屋租赁平台的设计与实现-毕业论文编程频道|福州电脑网

2024年3月8日发(作者：)

---文档均为word文档，下载后可直接编辑使用亦可打印---

摘要

随着中国市场经济的发展，城市现代化建设步伐不断加快，城市规模不断扩大，人口流动不断增加，房屋租赁也渐渐成为社会生活的重要组成部分。近年来，随着互联网技术的迅猛发展，房屋租赁管理也逐渐发展为互联网信息平台。

本文将以房屋租赁平台为对象，针对我国现在的房屋租赁行业的发展趋势，建立一个界面友好，操作简便，实时快捷的房屋租赁平台，让房东可以在平台上发布自己想出租的房屋信息，提供给需求者选择，同时又能随时管理房屋的信息，及时更新；租客既可以不用特地经过房屋中介这个中间人，也可以随时浏览各个地方各个价格区间的闲置空房，挑选自己中意的房屋。

本平台使用h5为开发语言，使用vue框架，并且使用了依赖于Vue的Element-UI，同时使用mysql作为数据库。

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

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.

This article will rent the platform take the house as an object, rents the profession in

view of our country present house the trend of development, will establish a contact surface to

be friendly, the operation will be simple, the real-time quick house will rent the platform, will

enable the landlord to be possible in the platform to issue oneself will find out the house

information which will rent, will provide for the demand choice, simultaneously will be able

to manage the house as necessary the information, prompt renewal; The lessee already may

not need to pass through especially the house intermediary this intermediate, also may glance

over each place each price sector as necessary the idle vacant room, chooses the oneself

pleasing house.

This platform uses h5 is the development language, uses the vue frame, and used has

relied on Vue Element-UI, simultaneously used mysql to take the database.

Key word: The house rents, the house rents the information management, the information

platform

第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

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

谢辞 .................................................................... 41

附录 .................................................................... 42

第1第第第

1.1 系统开发的背景和目标

1.1.1 第第第第第第第

近年来，中国的住房价格高涨，而且还在保持着继续上涨的势头，这成为政府需要解决的主要问题，人们对此非常关注。国务院相继出台了一系列宏观调控政策，建设部和其他部委已开始对房地产市场进行针对性的治理，但房价在过去几年中还是持续上涨，不但深圳，广州这些较为发达的沿海城市的住房价格增长趋势迅猛，就连一些中小城市的住房价格也在水涨船高。如此高的住房价格也导致了租房租赁成为了一块肥肉，从而也带动了房屋中介的蓬勃发展。

根据有关部门的统计数据，大多数房地产交易都是通过中介机构进行的，但是由于社会上的房产经纪公司太多，在要顾及中介公司可信度的同时，还要从大量复杂的房产信息中做出选择，这使得人们难以快速准确地找到自己适合的房租信息。另外，在出租求租过程当中，都要通过中介公司，一方面过程较为繁琐，一方面还要支付一定的中介费用，这一定程度上较重了客户的负担。因此，房屋租赁平台的设计与开发是适应时代发展的项目。

1.1.2 第第第第第第第

开发一个实时便捷，高效安全，操作页面简洁的房屋租赁平台，房东可以在平台上发布自己想出租的房屋信息，提供给需求者选择，同时又能随时管理房屋的信息，及时更新；租客既可以不用特地经过房屋中介这个中间人，也可以随时浏览各个地方各个价格区间的闲置空房，挑选自己中意的房屋。既简化了信息的收集，节省一定的中介费用，又方便了租客了解房屋情况，提高效率。

1.2 系统的主要功能和特点

房屋租赁平台的主要功能有：

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

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

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

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

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

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

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

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

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

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

本租赁平台采用了结构化开发方法，自顶向下地对租赁平台进行阶段分解。在租赁平台规划阶段，将使用现场调查和文献调查的方法来收集和处理用户的需求；在租赁平台分析阶段，根据用户需求执行业务流程分析，并创建系统分析文档。在平台设计阶段，将进行总体设计、数据库设计、代码设计、各模块功能设计。在平台实施阶段，根据租赁平台设计规划结果进行编程，数据输入和调试。在平台运行阶段，执行系统的日常管理，监视和维护等工作。

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

1.3.1 第第html5

Html5(Web前端技术)是由html,css,js三大框架所组成。它是web的未来，Html不仅仅在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所示。

图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的启

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

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 相关代码

1.3.8 Axios

Axios是基于promise用于浏览器和的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平台功能表

编号

功能名称

筛选出租屋

修改排序

查看出租屋

出租房屋

管理房屋

描述

登录注销账号

注册新用户

根据个人需求快速查找房屋

修改房屋的显示顺序

查看房屋详细信息

上传信息出租房屋

管理个人所出租的房屋

参与者

租户，房东

租户

房东

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房东的数据项

属性

房东账号

类型

varchar

类型长度

255

约束

主键

备注

房东密码

房东姓名

房东邮箱

房东电话

varchar

255

非空

表3-2租客的数据项

属性

租客账号

租客密码

租客姓名

租客邮箱

租客电话

类型

varchar

类型长度

255

约束

主键

非空

备注

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

属性

房间编号

详细位置

租金

标题

图片

房型

城市

省份

地区

房东邮箱

房东电话

房东姓名

楼层

起租时长

类型

varchar

decimal

varchar

类型长度

255

约束

主键

非空

备注

实名认证

房间实景图片

房屋的室，厅，卫

便于租客与房东取得联系

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-1 landlord用户表

序号

字段

User

Passoword

name

phone

名称

账号

密码

姓名

邮箱

电话号码

数据类型

varchar

备注

主键

非空

描述

房东账号

对应密码

房东称呼

房东邮箱

房东号码

表4-2 renter用户表

序号

字段

User

Passoword

name

名称

账号

密码

姓名

邮箱

数据类型

varchar

备注

主键

非空

描述

租客账号

对应密码

租客称呼

租客邮箱

5 phone 电话号码 varchar

非空租客号码

表4-3 house房屋表

序号

字段

location

price

tittle

img

room

city

provinces

area

phone

lanlord

floor

timeLimit

名称数据类型

id varchar

地址 varchar

价格 decimal

标题 varchar

图片 varchar

房间 varchar

城市 varchar

省份 varchar

区县 varchar

邮箱 varchar

电话号码 varchar

房东 varchar

楼层 varchar

时间限制 varchar

长度

255

备注

主键

非空

描述

房屋id

房屋详细地址

月租

出租信息标题

图片

房间类型

房屋所在城市

房屋所在省份

房屋所在区县

房东邮箱

房东电话号码

房东

房屋所在楼层

房屋起租期限

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文件，通过中的内容是对于用户输入的信息进行合法性判断，不合法的会有提示。代码如图4-13至图4-14所示。

图4-13

图4-14

之后向服务器发送请求再把用户填写的信息进行包装发送，然后等待服务端返回响应，代码如图4-15所示。

图4-15

注册完成后用户就可以进行登录了，在这个部分是通过设置cookie将登陆的账户信息存储到cookie中让浏览器记住当前登录账号防止刷新丢失，代码如图4-16所示。

图4-16

5.1.2第第第第第第第第第第

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

该部分代码是先获取了数据库中该用户的基本信息，通过用户修改后把修改后信息传至数据库存储，并返回响应，代码如图4-17所示。

图4-17

5.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-22

5.2.2第第第第第第

租客登录进入系统后，可通过自己想要查找的对应房屋条件进行检索，目前平台只能实现租金，户型，关键词等条件进行房屋检索。

该部分代码是通过向父组件传值，通过点击搜索按钮调改变房屋列表和监听用户筛选的户型，租金来直接改变显示的房屋列表，代码如图4-23所示。

图4-23

租客身份进入系统后是无法进入“我要出租”和“房屋管理”板块的，这主要是通过中的方法进行判定的，浏览器存储的信息中有“房东”，“我要出租”和“房屋管理”板块才可以点击，代码如图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] 基于的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

第第

在此，衷心感谢我的毕业论文指导老师高集荣老师，在老师的耐心指导下以及这几个月来的努力奋战，终于完成了本次的毕业设计。高老师为人随和热情，热心为我们解答各种难题，给我们带来专业知识的指导。同时他态度严谨求实，工作作风精益求精，也深深的感染和激励着我。这次毕业设计也是在高集荣老师的悉心指导和严格要求下完成的。从课题选取到具体的写作过程，无不凝聚着高老师的心血和汗水。没有这样的关怀和指导，我也不会这么顺利的完成毕业设计，在此向高老师表示深深的感谢和崇高的敬意！

另外，还要特别感谢我的家人，你们时刻关心我，是你们给了我学习的机会,是你们时时刻刻为我鼓劲、为我加油，进而促使我不断成长。同时也要感谢寝室的室友以及所有关心我的朋友，跟你们走过了很多美好的时光，在我遇到困难时你们关心我、帮助我，在此次毕业设计中很多朋友也给我解决了当中出现的一些问题，再次感谢国信管一班这个大集体，相识是一种缘分，和你们一起度过了愉快的校园生活。在写论文的过程中大家互相讨论，给予建议，让设计的过程也变得顺利很多。感谢我所认识的师弟师妹，在很多时候正是因为你们的帮助，使在外实习的我也能顺利提交各种资料，同时也是因为你们在百忙中抽时间帮我下载参考文献，才使我的论文有如此充实的理论依据。衷心地感谢你们在学习上和生活中给予我的鼓励和帮助，愿友谊长青!

感谢我的家人，感谢你们在这段时间对与我的支持与关爱。

另外，在论文的撰写过程中对我所借鉴文献的专家学者表示感谢与敬意。

最后，我也想对在百忙之中评审这篇论文的各位老师表示诚挚的谢意!

第第

附录1 程序源代码

Vuex/代码：

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

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 = _;

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 &&

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) || _list[i].es(val) || _list[i].es(val) || _list[i].es(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)

}

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;

}

网上房屋租赁平台的设计与实现-毕业论文

发布评论取消回复

最近发表

相关推荐

标签列表

网上房屋租赁平台的设计与实现-毕业论文

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复