前言
大家好，我是yma16，本文分享django_vue3(vite+vue3)展示贵州省的疫情
初始化vue3-vite项目
以下是初始化 Vue3-Vite 项目的步骤：
- 确保已安装 Node.js 和 npm。
- 打开终端，进入要创建项目的目录，运行以下命令：
npm init vite-app <project-name>
- 其中，
<project-name>是你的项目名称。 - 在命令行中，选择要使用的模板。这里选择
vue-ts，即使用 TypeScript 的 Vue 模板。 - 选择完成之后，继续输入命令：
cd <project-name> npm install
- 这将进入项目目录并安装依赖项。
- 最后，运行以下命令启动 Vue3-Vite 项目：
npm run dev
- 这将启动开发服务器，可以在浏览器中访问
http://localhost:3000/来查看应用。
背景
2022/09贵州疫情规模比较大，可以用django和vue实现一个可视化的看板
展示
地址：
https://yongma16.xyz/fund-web/#/
地图展示地区疫情的确诊病例，卡片展示标签数据，折线图展示趋势，列表展示具体区域明细
思路
后端：python爬虫获取疫情数据，返回json给前端
前端：使用echarts展示数据
后端
框架：django requests
抓取数据来源：
腾讯数据
https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
关键实现
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
接口：
https://yongma16.xyz/common-api/mapApp/outBreak/
前端主要代码块：
<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
