基于vue-element的租房房源信息管理系统设计与开发毕业论文
2021-11-03 22:43:51
摘 要
随着互联网技术的飞速发展,人们有多种租房途径。传统方式有通过熟人介绍,自己去实地查看,以及查看一些墙上租房广告,互联网方式有通过网上各个渠道去收集租房的相关信息。然而,有大量租房信息的网站,大部分都是中介公司的平台,需要一定的手续费,并且可能会保留一些租房的信息未说明,而其他的租房信息太过零散,没有一个统一个平台收集租房的信息,无论是从时间成本,还是金钱成本来说,都给我们带来极大的不便。
本此课题旨在设计并实现租房房源信息管理系统,使用该系统的用户可以查看全国各地的租房信息,能够将喜欢的房子收藏起来,可以发帖寻求其他用户的帮助,同时还可以查看他们的租房帖子。系统的服务器端以node为开发语言,采用Eggjs(基于Koa开发)框架,Mysql为数据库,来开发Web应用程序。系统前端运用Ajax技术,UI库采用element-UI,以Vue.js为主要框架完成前端页面的开发。本系统最终实现了用户身份验证,用户信息管理,用户权限控制,房源列表,房源信息展示,房源筛选,收藏房源,发帖,帖子列表,帖子管理,以及用户管理以及个人信息修改等功能。本此课题的主要工作如下:
(1)结合实际,分析现有租房信息平台的功能以及其他收集租房信息的方式弊端,并依据软件工程的开发流程,对系统进行需求分析和可行性分析,明确系统应该实现的基本功能。
(2)针对待实现的功能需求,提出实现方案和技术选型。从系统架构,技术选型,用户体验等角度,对系统进行详细设计,包括前后端分离开发后,前端的模块划分,后端总体的模块划分和数据库设计,以及最后的前后端联调手段。
(3)根据已经提出的系统设计方案,运用nodejs和web前端等相关技术,编码实现每一个功能需求,并对主要的功能模块进行系统测试,对核心算法进行单元测试。
关键词:element;node;Eggjs;信息系统;Vue;租房
Abstract
With the rapid development of Internet technology, people's rental approach in addition to the traditional through acquaintances and their own to the field to view the rental ads in each place, but also added through the Internet through various channels to collect rental information. However, most of the sites with centralized rental information, most of them are intermediary company platform, need a certain fee, and may retain some rental information is not explained, while other rental information is too fragmented, there is no unified platform to collect rental information, whether from the cost of time, or money costs, have brought us great inconvenience.
This paper designs and implements a rental housing information management system, the use of the system users can view from all over the country to rent, and can also be their favorite house collection, at the same time we can also post for help, or view their rental posts. The server side of the system uses node as the development language, using the Eggjs (Koa-based development) framework, Mysql as the database, to develop Web applications. The front end of the system uses Ajax technology, the UI library uses element-UI, Vue.js as the main framework to complete the development of front-end pages. The system finally realized user authentication, user information management, user rights control, listing list, detail information display, housing source multi-condition screening, collection of housing, posting, post list, post management, as well as user management and personal information modification and other functions. The main work of this paper is as follows:
- Combined with the actual situation, analyze the function of the existing rental information platform and other shortcomings of collecting rental information, and according to the development process of software engineering, the system needs analysis and feasibility analysis, clear the system should achieve the basic functions.
- According to the functional requirements, the implementation scheme and technical selection are proposed. From the system architecture, technology selection, user experience and other aspects, the system is designed in detail, including front-end module division, back-end overall module division and database design, as well as the final front-end and back-end joint debugging means.
- According to the proposed system design scheme, nodejs and web front-end and other related technologies are used to realize the coding of various functional requirements, test the main functional modules, and unit test the core algorithm.
Key Words:element;nodejs;Eggjs;information system;Vue;Renting
目 录
摘 要 I
abstract II
第1章 绪论 1
1.1 研究背景与意义 1
1.2 国内研究现状 1
1.3 主要工作内容 2
1.4 论文组织结构 2
第2章 系统分析 4
2.1 技术选型 4
2.1.1 MVC 架构 4
2.1.2 Eggjs框架 5
2.1.3 Vue及相关生态 6
2.1.4 Webpack 7
2.2 系统概述 7
2.3 功能需求 7
2.4 开发环境 8
第3章 系统设计 9
3.1 系统总体设计 9
3.1.1 功能模块设计 9
3.1.2 系统架构设计 11
3.2 数据库设计 13
3.2.1 数据库概念设计 13
3.2.2 数据库表的设计 16
第4章 系统实现与测试 20
4.1 身份验证模块 20
4.1.1 界面设计 20
4.1.2 具体实现 22
4.1.3 功能测试 24
4.2 用户信息管理模块 25
4.2.1 界面设计 25
4.2.2 具体实现 27
4.2.3 功能测试 28
4.3 帖子模块 28
4.3.1 界面设计 28
4.3.2 具体实现 31
4.3.3 功能测试 34
4.4 数据分析模块 33
4.4.1 界面设计 33
4.4.2 具体实现 33
4.4.3 单元测试 33
4.4.4 功能测试 34
4.5 房源模块 34
4.5.1 界面设计 34
4.5.2 具体实现 36
4.5.3 功能测试 36
第5章 总结和展望 38
5.1 总结 38
5.2 展望 38
参考文献 40
致 谢 41
第1章 绪论
1.1 研究背景与意义
随着整个社会经济的进步,城市现代化的范围也越来越广,租房和出租自己的房子已变成生活的一个基本需求。所以无论是房屋出租或者是房屋求租,现在都面临着巨大的需求。以前,人们获取租房信息的途径就是通过当地随处贴的广告,以及熟人的推荐,这种情况下找到满意的房子是十分困难的,因为没有一个平台可以获取到房子的信息,人们找到满意的房子效率太低,浪费了大量的时间。后来随着信息技术和互联网的发展,人们可以在网上浏览相关的租房信息,虽然信息传播变快了,人们获取租房信息的成本也变低了,但是找到的信息并不是十分完整,并且需要通过各个渠道去获取租房的信息,信息太广且杂,让人无从下手。虽然也有中介可以帮忙解决,但是通过中介来解决会让租房的交易过程更加繁琐,并且会收取一定的中介费,给人们带来一定的经济负担。
因此,为了让用户快速地找到完整且详细的租房信息,并且不用承担费用,本课题尝试设计一个基于Nodejs网站[1]。本系统提供登录后查看租房列表或者发帖、看帖等功能通过多种渠道满足用户出租或者租房需求,用户可以在系统中根据各种筛选条件筛选出想要的房源,并且可以收藏自己比较满意的房源信息方便查看,同时还通过发帖出租房源或者找到满意的房源。
1.2 国内研究现状
国内有很多租房中介平台,如链家,贝壳,蛋壳和自如等等,虽然做了很多功能来解决用户租房的痛点,但仍然存在很多不足的地方:
- UI界面存在太多中介相关信息,很多信息都是一些中介的广告,关于房源的信息只占了大约一半。
- 功能过于简单或者过于复杂。有的平台的功能太复杂,以至于不知道如何使用,有的平台又过于简单,除了联系方式,什么功能都没有实现。
- 大部分中介平台没有与发帖评论类似的功能,用户无法通过他人的评论和描述来间接的获取房源的真实情况。
除了中介平台,当然也存在很多其他零散的信息渠道,比如:QQ群,豆瓣,微博,58同城这样的信息渠道。但是也会存在以下问题:
- 信息来源不一定真实,因为发布信息的人只是发布了一个帖子,还有很多信息或者你想了解的信息被隐藏了。
- 信息零散,没有一个可以统一收集想要信息的平台,并且帮助你保存。
- 找到想要的信息十分困难,不易筛选。
1.3 主要工作内容
本课题实现的系统采取前后端分离开发的模式,两者通过API联系,前端主要采用Vue-cli对前端的项目进行搭建,并且使用Element-UI组件库对界面进行优化,后端采用基于Koa2js的Eggjs进行后端项目的搭建,数据库采用Mysql。其中主要的工作内容如下:
- 掌握对软件进行开发的整个流程。包括: UML相关理论的学习,需求分析,系统设计,架构设计等。
- 熟悉web开发相关的技术,例如:前端的Vue,Vuex和Vue-router等Vue相关插件,Element UI库,学习Egg.js框架以及Egg.js的相关生态,学习可视化图表在Web端的应用,同时掌握前后端联调和调试手段。
- 根据所学的知识,开发一个完整的系统,并且对系统进行相应的单元测试和系统测试,最后实现系统的相关部署。
1.4 论文组织结构
本论文一共有五章,每章细节如下: