django_vue3(vite+vue3)展示贵州省的疫情

疫情展示

• • 前言
  • 背景
  • 展示
  • 思路
  • 后端
  • 前端
  • 结束

前言

大家好，我是yma16，本文分享django_vue3(vite+vue3)展示贵州省的疫情
初始化vue3-vite项目
以下是初始化 Vue3-Vite 项目的步骤：

1. 确保已安装 Node.js 和 npm。

2. 打开终端，进入要创建项目的目录，运行以下命令：

   npm init vite-app <project-name>
   

   其中，<project-name>是你的项目名称。

3. 在命令行中，选择要使用的模板。这里选择 vue-ts，即使用 TypeScript 的 Vue 模板。

4. 选择完成之后，继续输入命令：

   cd <project-name>
   npm install
   

   这将进入项目目录并安装依赖项。

5. 最后，运行以下命令启动 Vue3-Vite 项目：

   npm run dev
   

   这将启动开发服务器，可以在浏览器中访问 http://localhost:3000/ 来查看应用。

背景

2022/09贵州疫情规模比较大，可以用django和vue实现一个可视化的看板

展示

地址：
yongma16.xyz/fund-web/#/
地图展示地区疫情的确诊病例，卡片展示标签数据，折线图展示趋势，列表展示具体区域明细

思路

后端：python爬虫获取疫情数据，返回json给前端
前端：使用echarts展示数据

后端

框架：django requests
抓取数据来源：
腾讯数据
view.inews.qq.com/g2/getOnsIn…
关键实现

def outBreakData(request):
    data={
   
        'data':[],
        'code':0,
        'msg':'request method not allowed!'
    }
    if request.method == 'GET':
        data={
   }
        msg='success'
        try:
            data=getOutBreak()
        except Exception as e:
            msg=str(e)
        return JsonResponse({
   
            'data':data,
            'msg':msg,
            'code':1
        })
    return JsonResponse(data)

def getOutBreak():
    try:
        url = 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
        headers = {
   
            "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36",
        }
        res = requests.get(url, headers=headers)
        jsonData = res.json()
        data=jsonData['data']
        jsonRes=jsonDetail(data,'day')
        if jsonRes is False:
            jsonRes = jsonDetail(data, 'night')
        return jsonRes
    except Exception as e:
        return str(e)

def jsonDetail(jsonStr,key):
    addTion = '"}]}]}]}'
    if key is 'night':
        addTion = 'test":0}}]}]}]}'
    try:
        mapStr = jsonStr + addTion
        jsonRes = json.loads(mapStr)
    except Exception as e:
        print(e)
        jsonRes=False
    return jsonRes

接口：
yongma16.xyz/common-api/…

前端主要代码块：

<template>
    <div class="visual-container">
        <div class="visual-container-flex">
<div>
    <div>
        实时数据：{
   {
   realTimeData}}
    </div>
    <div>
        day
    </div>
    <div ref="CHART_REF" class="chart-class" id="day-chart-id" style="width: 300px;">

    </div>
</div>
<div>
    <div>
        month
    </div>
    <div ref="CHART_REF" class="chart-class" id="month-chart-id" style="width: 900px;">

    </div>
</div>
        </div>
<div class="visual-container-flex">
    <div>
        year
    </div>
    <div ref="CHART_REF" class="chart-class" id="year-chart-id" style="width: 1200px;">

    </div>
</div>
    </div>
</template>
<script lang="ts" setup>
    import {
   ref,onMounted,defineProps,watch } from 'vue'