2024最新-基于 VUE + Flask全国空气质量预测数据可视化

最新推荐文章于 2024-09-30 16:19:08 发布

Nils~

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量482

点赞数 6

文章标签： vue.js flask scikit-learn echarts

本文链接：https://blog.csdn.net/m0_53095312/article/details/142359857

版权

1.1. 项目介绍

1.2. 技术栈

1.3. 数据来源

1.3.1. 设置城市和时间为爬虫程序的入口

1.1. 项目介绍

今天我们介绍一个从数据采集、数据加工、数据预测，最后集成到数据可视化展示的一个完整的项目案例。

1.2. 技术栈

前端：Vue.js
后端：Flask
数据源：全国空气质量监测数据（可从公开API获取）
可视化库：Echart.js

1.3. 数据来源

通过实时采集全国 23个省、5个自治区、4个直辖市和2个特别行政区下的293个市的每一天的空气质量数据。

通过分析网站接口，扣取JS代码，编写后端代码嗲用js，实现数据的采集。

1.3.1. 设置城市和时间为爬虫程序的入口

m0fhOhhGL = "GETDAYDATA"
oNLhNQ = {
    city: '云浮',
    month: '202309'
}

1.3.2. 爬虫程序主要代码

function poPBVxzNuafY8Yu (m0fhOhhGL, oNLhNQ) {
    var aMFs = "3c9208efcfb2f5b843eec8d96de6d48a";
    var cVWG2 = "WEB";
    var t5GECZQ = new Date().getTime();
    var pKmSFk8 = {
        appId: aMFs,
        method: m0fhOhhGL,
        timestamp: t5GECZQ,
        clienttype: cVWG2,
        object: oNLhNQ,
        secret: hex_md5(aMFs + m0fhOhhGL + t5GECZQ + cVWG2 + JSON.stringify(osZ34YC04S(oNLhNQ)))
    };
    pKmSFk8 = BASE64.encrypt(JSON.stringify(pKmSFk8));
    pKmSFk8 = AES.encrypt(pKmSFk8, acky6QolJSJi, acixHVhiNqmK);
    return pKmSFk8;
}

function dxvERkeEvHbS(data) {
    data = BASE64.decrypt(data);
    data = DES.decrypt(data, dskQCqpdBOGo, dsiqYiQHbZQp);
    data = AES.decrypt(data, ask4u6FbhGV8, asi2hhkBUJbo);
    data = BASE64.decrypt(data);
    return data;
}

1.3.3. 后端代码调用js

# -*- coding: utf-8 -*-
"""
@Time ： 2024/8/30 22:10
@Auth ： Gmq
@File ：xxx.py
@IDE ：PyCharm
@WECHAT ：debugger66
"""
import json
import time
from queue import Queue
import requests
import execjs
from pymongo import MongoClient
from lxml import etree

client = MongoClient()
collection = client['2tData']['airquality']


class GN:
    def __init__(self):
        self.url = 'https://www.aqistudy.cn/historydata/api/historyapi.php'
        self.headers = {
            "Accept": "*/*",
            "Accept-Language": "en-GB,en;q=0.9,zh-CN;q=0.8,zh;q=0.7",
            "Sec-Fetch-Dest": "document",
            "Sec-Fetch-Mode": "navigate",
            "Origin": "https://www.aqistudy.cn",
            "Sec-Fetch-Site": "none",
            "Upgrade-Insecure-Requests": "1",
            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0",
            "sec-ch-ua": "Not/A)Brand;v=8, Chromium;v=126, Microsoft Edge;v=126",
            "sec-ch-ua-mobile": "?0",
            "sec-ch-ua-platform": "Windows",
            "Referer": "https://www.aqistudy.cn/historydata/daydata.php?city=^%^E5^%^8C^%^97^%^E4^%^BA^%^AC&month=2023-11^",
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        }
        self.m0fhOhhGL = 'GETDAYDATA'
        self.oNLhNQ = {}
        self.js = execjs.compile(open('xxx.js',encoding='utf-8').read())
        # self.ip_queue = Queue()

    def request_data(self, city, month):
        self.oNLhNQ['city'] = city
        self.oNLhNQ['month'] = month
        proxy_ip = self.ip_queue.get()
        # 使用代理必须设置代理账号和密码
        username = '代理账号'
        password = '代理密码'
        
        proxies = {
             "http": "http://%(user)s:%(pwd)s@%(proxy)s/" % {"user": username, "pwd": password, "proxy": proxy_ip},
             "https": "http://%(user)s:%(pwd)s@%(proxy)s/" % {"user": username, "pwd": password, "proxy": proxy_ip}
        }

        pKmSFk8 = self.js.call('poPBVxzNuafY8Yu', self.m0fhOhhGL, self.oNLhNQ)
        print(pKmSFk8)
        res = requests.post(self.url, headers=self.headers, data={'hA4Nse2cT': pKmSFk8})

        result = self.js.call('dxvERkeEvHbS', res.text)

        return json.loads(result)

    def run(self):
        for one_city in self.get_city():
            reuslt = self.request_data(one_city, '202405')
            for i in reuslt['result']['data']['items']:
                i['city'] = one_city
                collection.insert_one(i)

    @staticmethod
    def get_city():
        citys = []
        with open('./a.html', 'r', encoding='utf-8') as f:
            text = f.read()
        xhtml = etree.HTML(text)
        lis = xhtml.xpath('//div[@class="all"]//ul[@class="unstyled"]/div/li')
        for li in lis:
            city = li.xpath('./a/text()')
            citys.append(city[0])
        return citys


if __name__ == '__main__':
    gn = GN()
    gn.run()

1.4. 后端实现

1.4.1 介绍

后端采用flask框架编写数据接口和主要逻辑处理，采用mysql数据库进行数据的增删改查。

1.4.2 项目架构

flask_project/
│
├── app/                   # 主应用目录
│   ├── __init__.py        # 应用工厂模式
│   ├── routes.py          # 路由定义
│   ├── models.py          # 数据模型
│   ├── forms.py           # 表单定义
│   ├── static/            # 静态文件（CSS、JavaScript、图片）
│   ├── templates/         # 模板文件（HTML）
│   ├── config.py          # 配置文件
│   └── extensions.py      # 扩展初始化
│
├── migrations/            # 数据库迁移文件
│
├── tests/                 # 测试代码
│   └── ...                # 测试用例
│
├── .env                   # 环境变量配置
├── .gitignore             # Git 忽略文件
├── requirements.txt       # 项目依赖
├── run.py                 # 启动脚本
└── README.md              # 项目说明文件

1.5. 前端实现

1.5.1 介绍

前端使用Vue 进行数据的交互和响应，可根据需求扩展功能，比如添加更多的 API、使用 Vuex 管理状态、添加路由等。通过前后端分离的方式，能够提高应用的可维护性和扩展性。

my-project/
│
├── backend/                # Flask 后端代码
│   ├── app.py              # Flask 主应用文件
│   ├── requirements.txt     # 后端依赖
│   └── ...                 # 其他后端文件
│
├── frontend/               # Vue 前端代码
│   ├── src/
│   │   ├── components/     # Vue 组件
│   │   ├── views/          # 页面视图
│   │   ├── router/         # 路由配置
│   │   ├── store/          # Vuex 状态管理
│   │   ├── App.vue         # 根组件
│   │   └── main.js         # 入口文件
│   ├── public/
│   └── package.json        # 前端依赖
│
└── README.md               # 项目说明文件