基于flask+vue的二手房数据可视化系统

源码站~

已于 2024-06-15 19:56:10 修改

阅读量1k

点赞数 30

分类专栏：毕业设计文章标签： flask vue.js 信息可视化

于 2024-04-12 16:18:42 首次发布

本文链接：https://blog.csdn.net/zhao_xiaoyao/article/details/137684150

版权

毕业设计专栏收录该内容

18 篇文章 17 订阅

订阅专栏

基于flask+vue的二手房数据可视化系统

一、介绍

本项目利用 python 网络爬虫抓取某网站的二手房信息，完成数据清洗和结构化，存储到数据库中，搭建web系统对各个市区的房价、房源信息进行展示，根据各种条件对房价进行预测。

二、软件架构

总体概述：

在这里插入图片描述

这是一个基于Flask和Vue.js构建的Web系统，用户在前端界面进行操作，产生HTTP请求发送至服务器。Flask框架接收到这些请求并创建对应的请求对象。然后，Flask根据路由配置找到匹配的视图函数，执行该函数以处理请求。
在视图函数中，与MySQL数据库进行交互，执行数据的查询、插入、更新或删除等操作，以完成用户的请求。处理完成后，视图函数会构造一个响应对象，这个响应对象包含了要返回给用户的数据。
接着，Flask将响应对象转换为HTTP响应，通过客户端的浏览器呈现结果。在这个过程中，前端使用Vue.js框架来提升用户界面的交互性和动态内容展示，可能还会用ECharts图表库来呈现数据可视化。
整个流程如下：

用户在前端界面（由Vue.js构建）上进行操作。
前端界面发送HTTP请求至服务器。
Flask框架接收请求并创建请求对象。
根据路由，Flask查找并调用对应的视图函数。
视图函数与MySQL数据库进行交互（假如需要）。
视图函数处理完请求后，创建一个响应对象。
Flask将响应对象转换为HTTP响应并返回给客户端。
客户端浏览器接收响应，并由Vue.js动态渲染页面内容和ECharts图表。

技术栈：

后端：python、flask ；前端：vue、iview、echarts; 数据库:MySql

功能架构：

ER图

在这里插入图片描述

三、系统功能

数据概览

将爬取到的数据进行展示，实时展示详细的房屋数据，支持根据市级筛选数据，点击详情按钮可跳转到原始网站房屋详情页面。
在这里插入图片描述

平均房价分析

用户可以查看所有城市或者选择自己感兴趣的城市，查看到各个城市或者具体城市具体区域的不同房价分析，用户只需要在特定的条框里，点击选择城市，再点击搜索，就会展示出所选地区平均房价数据分析的可视化界面，进行直观的数据浏览
在这里插入图片描述

面积房价散点图

通过散点图直观的呈现用户所选择城市不同的面积房价分布散点图，在面积租金散点图上可以直观的看出热门面积的房价
在这里插入图片描述

词云分析

分析各个房源的(卖点、小区介绍)、周边配套，用词云图进行展示。通过这个界面，用户能够直观地把握一个地区内二手房市场的关键卖点、小区概况以及周边配套设施。
在这里插入图片描述

房价范围分析

将房价区间细分为多个阶段，具体为：‘4000元及以下’，‘4000元至7000元’，‘7000元至10000元’，‘10000元至20000元’，‘20000元至30000元’以及’超过30000元’。这一分类旨在为用户提供灵活的房价查看选项。用户可以轻松查看所有城市的房价在不同阶段的分布情况，或者可以指定特定城市来获取该市的房价分布详情。
在这里插入图片描述

房源数量

在此功能模块中，可以查看各个城市的房源总量，获取宏观的房地产市场概览。更进一步，还可以选择特定城市，深入查看该城市不同区县的房源数量分布情况。
在这里插入图片描述

房价预测

在此功能模块中，选择特定城市、所需的房屋面积范围以及偏好的房屋朝向来精细化自己的搜索条件。系统随后会基于这些参数，运用中位数计算方法来确定符合条件的房屋价格区间。
在这里插入图片描述

apriori算法

apriori算法是一种用于挖掘关联规则的算法，它通过分析数据集中项之间的共现频率来发现频繁项集。在房屋价格区间确定的应用中，apriori算法可以帮助发现哪些城市、面积区间和朝向的组合倾向于与特定的价格区间相关联。这些信息可以用于精细化搜索条件，为用户提供更符合其预期的房屋选择。
在这里插入图片描述

个人信息

用户查看个人信息，输入新的信息点击提交，可更新个人信息
在这里插入图片描述

修改密码

输入原密码与新密码，可修改密码
在这里插入图片描述

用户管理

该功能是管理员功能，管理用户信息

新增：点击新增按钮，输入用户信息，可添加新用户

搜索：输入用户名字和手机号码，点击搜索即可查询用户信息

编辑：编辑用户信息

重置密码：点击重置密码，可重置该用户密码

启用/停用：对用户账号状态进行修改，被停用的用户无法登录系统

删除：删除该账号
在这里插入图片描述

数据爬取

管理员选择爬取的城市名称（城市维护在一张表中，可以及添加或删除城市）和和爬取页数进行数据爬取。
在这里插入图片描述

爬取日志

展示数据获取日志，管理员有此功能权限，普通用户则无
在这里插入图片描述

登录注册

用户登录注册
在这里插入图片描述

四、安装教程

安装MySql5.7+，导入数据库脚本，修改项目中mysql配置（u_mysqlHelper.py）
安装python3.8（或附近版本均可）
安装下面所有python库

# 升级pip库，如果已升级可忽略
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
python -m pip install --upgrade pip
# flask库
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple Flask
pip install fake_useragent==1.2.1
# pymysql
pip install pymysql
#requests
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple requests
#xlwt
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple xlwt
#jieba
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple jieba
#wordcloud
pip --default-timeout=100 install wordcloud
#lxml
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple lxml
#BeautifulSoup4
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple BeautifulSoup4
# pandas
pip install pandas
# 日志打印
pip install coloredlogs

启动flask

# 启动flask命令
python app.py

安装node.js 14.x
安装cnpm
启动vue

# nodeJs安装教程：https://blog.csdn.net/qq_38497192/article/details/118212090?spm=1001.2014.3001.5501
# 安装vue库
cnpm i
# 启动vue
npm run serve

访问

# 访问前端启动成功后显示的地址
http://localhost:8099/

五、工程目录结构

|house-second
    |-- house-server 后端目录
        |-- app.py Flask主程序
        |-- app_business.py 接口-业务相关
        |-- app_user.py 接口-系统管理
        |-- getCloud.py 词云图生成工具类
        |-- getData.py 爬虫-房屋详情
        |-- mysqlHelper.py 数据库工具类
        |-- u_saveLog.py 保存日志工具类
        |-- u_cloud.py 工具类-生成词云
        |-- u_zhongweishu.py 获取中位数工具类 
        |-- u_timeHelper 时间工具
    |-- house-web
        |-- node_modules node包
        |-- public 结构文件
        |-- src
            |--api 接口
            |--assets 静态文件
            |--components 系统组件
            |--router 路由
            |--store 路由
            |--utils 工具类
            |--views 页面
            |-- tests 测试类
        |-- vue.config.js vue配置类