Flask+Vue前后端分离疫情可视化系统

一、引言

在2020年初爆发的新型冠状病毒，是一种传染力极强的病毒。患者在感染了新型冠状病毒后，即使在潜伏期也很容易传染其他人，该病毒会导致人呼吸困难，严重的可能会导致死亡。时至今日，疫情仍未完全褪去，新冠疫情仍是全世界人民最关注的话题之一，特别是有些国家仍处于爆发期。因此，疫情的实时数据以及相关新闻报导受到了极大的关注。本系统利用数据爬虫技术，完成疫情数据以及疫苗接种数据的爬取经数据处理后形成数据集。利用数据可视化技术，对数据集进行可视化，实现疫情情况与疫苗接种情况的实时更新。帮助民众充分了解最新疫情数据、近期疫情发展趋势以及疫苗接种情况。

---

Flask 框架是一个轻量级的、便捷的、Python 所提供的 Web 框架，它更加的灵活、轻便、安全且容易上手，是目前主流的服务器框架，非常适合全队的分工 协作式开发，对一个小型团队而言，大大提升了开发的效率。利用 Flask框架，实现前后端的数据交互，其对应的前端 JinJa2的模板引擎，也极大地方便了前端的数据调用。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。   与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

 本系统则采用后端Flask+前端Vue的开发模型进行开发。

---

二、现有技术研究

目前，比较成熟的疫情数据可视化平台有：网易可视化平台、腾讯疫情数据可视化平台、 百度疫情数据可视化平台。这三家数据可视化平台内容分析，如图1所示。

 现有技术的实现均是通过对大量的疫情数据进行 爬取、数据处理，利用可视化技术进行数据的可视化。 本系统集全国疫情数据于一个页面中，让用户可以更直观的观察到疫情信息。并且，本系统在疫情分布图上做出创新，在全国疫情分布图中点击各省份，直接可查看当前省份的疫情数据。用户可以由全国疫情分布图直接进入各省份疫情分布图，了解各省份的疫情分布。

---

三、系统架构和实现流程

 四、系统运行流程

 五、数据爬取与处理（网易接口）

键	说明
ChinaTotal	中国疫情总数据
Today	今日疫情数据
Total	总计疫情数据
Confirm	确证人数
Suspect	疑似病例
Heal	康复人数
Dead	死亡人数
Input	境外输入人数
NoSymptom	无症状感染者人数
IncrNosymptom	无症状感染者较昨日增加人数
curedCount	治愈总人数
curedIncr	较昨日治愈增长人数

---

六、部分代码展示

• 后端（三个接口）：

from flask import Flask,jsonify
import requests,json,time
app=Flask(__name__)
@app.route('/overall')
def get_data_overall():
    now = time.localtime()
    nowt = time.strftime("%Y-%m-%d %H:%M:%S", now)
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36',
        'referer': 'https://news.qq.com/',
    }
    url='https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=329222187209'
    res=requests.get(url=url,headers=headers).json()
    if res:
        json_overall={
            "success":True,
            "code": 200,
            "message": "操作成功",
            "data":{
                "confirmedCount": res.get('data').get('chinaTotal').get('total').get('confirm'),
                "confirmedIncr": res.get('data').get('chinaTotal').get('today').get('confirm'),
                "curedCount": res.get('data').get('chinaTotal').get('total').get('heal'),
                "curedIncr": res.get('data').get('chinaTotal').get('today').get('heal'),
                "currentConfirmedCount": res.get('data').get('chinaTotal').get('total').get('confirm')- res.get('data').get('chinaTotal').get('total').get('dead')-res.get('data').get('chinaTotal').get('total').get('heal'),
                "currentConfirmedIncr": res.get('data').get('chinaTotal').get('today').get('storeConfirm'),
                "deadCount": res.get('data').get('chinaTotal').get('total').get('dead'),
                "deadIncr": 0,
                "importedCount": res.get('data').get('chinaTotal').get('total').get('input'),
                "importedIncr": res.get('data').get('chinaTotal').get('today').get('input'),
                "noInFectCount": res.get('data').get('chinaTotal').get('extData').get('noSymptom'),
                "noInFectIncr": res.get('data').get('chinaTotal').get('extData').get('incrNoSymptom'),
                "suspectIncr": 0,
                "suspectCount": res.get('data').get('chinaTotal').get('total').get('suspect'),
                "updateTime": nowt,
                "curedRate": 92.7,
                "deadRate": 4.69
            }
        }
        with open('data/covid19-overall.json','w') as f:
            json.dump(json_overall,f)
            print("json_overall文件加载完成！")
    return json_overall
@app.route('/daily')
def get_daily():
    now = time.localtime()
    nowt = time.strftime("%Y-%m-%d %H:%M:%S", now)
    today=time.strftime("%Y-%m-%d")

    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36',
        'referer': 'https://news.qq.com/',
    }
    url = 'https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=329222187209'
    res = requests.get(url=url, headers=headers).json()
    importedIncrList=[]
    curedCountList=[]
    confirmedCountList=[]
    importedCountList=[]
    currentConfirmedIncrList=[]
    noInFectCountList=[]
    currentConfirmedCountList=[]
    for i in res.get('data').get('chinaDayList'):
        importedIncrList.append([i.get('date'),i.get('today').get('input')])
        curedCountList.append([i.get('date'),i.get('today').get('confirm')])
        confirmedCountList.append([i.get('date'),i.get('total').get('confirm')])
        importedCountList.append([i.get('date'),i.get('total').get('input')])
        currentConfirmedIncrList.append([i.get('date'),i.get('total').get('heal')])
    # 无症状
    noInFectCountList.append([today,res.get('data').get('chinaTotal').get('extData').get('noSymptom')])
    if res:
        json_daily={
            "success":True,
            "code": 200,
            "message": "操作成功",
            "data": {
                # 境外输入
                "importedIncrList": importedIncrList,
                # 现有确诊
                "curedCountList": curedCountList,

                "confirmedCountList":confirmedCountList ,
                "currentConfirmedIncrList": currentConfirmedIncrList,
                "importedCountList": importedCountList,
                # 无症状
                "noInFectCountList":noInFectCountList ,
                "currentConfirmedCountList":currentConfirmedCountList
            }
        }
        with open('data/covid19-daily-list.json','w') as f:
            json.dump(json_daily,f)
            print("json_daily文件加载完成！")
    return json_daily
@app.route('/province')
def get_province():
    now = time.localtime()
    nowt = time.strftime("%Y-%m-%d %H:%M:%S", now)
    today = time.strftime("%Y-%m-%d")
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36',
        'referer': 'https://news.qq.com/',
    }
    url = 'https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=329222187209'
    res = requests.get(url=url, headers=headers).json()
    data=[]
    province=res.get('data').get('areaTree')[2].get('children')
    for i in province:
        if i.get('total').get('dead')==0:
            province_dict = {
                "confirmedCount": i.get('total').get('confirm'),
                "countryLabel": "中国",
                "countryName": "China",
                "curedCount": i.get('today').get('heal'),
                "curedRate": i.get('today').get('heal') / i.get('total').get('heal'),
                "currentConfirmedCount": i.get('today').get('confirm'),
                "deadCount": i.get('today').get('dead'),
                "deadRate": 0 ,
                "provinceLabel": i.get('name'),
                "provinceName": None,
                "suspectCount": 0,
                "todayConfirmedCount": 0,
                "updateTime": None
            }
        else:
            province_dict = {
                "confirmedCount": i.get('total').get('confirm'),
                "countryLabel": "中国",
                "countryName": "China",
                "curedCount": i.get('today').get('heal'),
                "curedRate": i.get('today').get('heal') / i.get('total').get('heal'),
                "currentConfirmedCount": i.get('today').get('confirm'),
                "deadCount": i.get('today').get('dead')/i.get('total').get('dead'),
                "deadRate": 0,
                "provinceLabel": i.get('name'),
                "provinceName": None,
                "suspectCount": 0,
                "todayConfirmedCount": 0,
                "updateTime": None
            }
        data.append(province_dict)
    if res:
        json_province={
            "success": True,
            "code": 200,
            "message": "操作成功",
            "data":data
        }
        with open('data/covid19-province.json', 'w') as f:
            json.dump(json_province, f)
            print("json_province文件加载完成！")
    return json_province
if __name__ == '__main__':
    get_daily()
    get_province()
    get_data_overall()
    app.run(port=8080)
#前后端分离 首先启动后端 爬取当日的数据 由于腾讯接口使用的人比较多 所以我们这次选取的是网易接口

#然后启动前端 npm run dev 因为采用的vue

•  前端（引用蓝伟洪先生​​​​​​​模板）

  七、成品展示

 

 

 

 

 结束语

截至到 2022年 3 月，疫情仍未完全褪去，民众最为关心的是疫苗接种情况。本系统基于疫情数据显 示的基础上，增加疫苗数据显示功能。利用数据爬虫 技术完成数据的获取与下载，经数据处理后形成数据 集，数据可视化阶段利用 Python 语言的 Flask 框架、 Vue、ECharts可视化等可视化技术，对疫情数据以及疫苗数据进行数据可视化。经过对现有技术的分析，并在可 视化内容上做出创新。集可视化内容于一个页面中， 疫情数据与疫苗数据一目了然，用户可以从多方面，多角度，全方位直观的观察到疫情数据、疫情发展 趋势，以及疫苗接种情况。本系统的开发是用来帮助 民众充分了解全国各地的疫情情况、近期的疫情发展 趋势以及疫苗接种情况。