接下来是css得代码
#title{ position: absolute; width:40%; height:10%; top:0; left : 30%; background-color: #47c6e9; font-size: 30px; display:flex; align-items:center; justify-content:center; } #time{ position: absolute; height:10%; width: 30%; top:0%; right:0%; font-size:20px; background-color: #47c6e9; } #ls{ position: absolute; height:10%; width: 30%; top:0%; left:0%; font-size:30px; background-color: #47c6e9; } #z1{ position: absolute; width:40%; height:30%; top:10%; left : 30%; background-color: #47c6e9; /* background:#black; */ } #z2{ position: absolute; width:40%; height:70%; top:30%; left : 30%; /* background:white; */ } #zuo1{ position: absolute; width:30%; height:45%; top:10%; left : 0; background:#666666; } #zuo2{ position: absolute; width:30%; height:45%; top:55%; left : 0; background:#666666; } #y1{ position: absolute; width:30%; height:45%; top:10%; right : 0%; background-color: #47c6e9; } #y2{ position: absolute; width:30%; height:45%; top:55%; right : 0%; background-color: #47c6e9; } .num{ width:25%; float:left; display:flex; align-items:center; justify-content:center; color:gold; font-size:10px; } .num1{ width:25%; float:left; display:flex; align-items:center; justify-content:center; color:green; font-size:10px; } .num2{ width:25%; float:left; display:flex; align-items:center; justify-content:center; color:red; font-size:10px; } .num3{ width:25%; float: right; display: ; align-items:center; justify-content:center; color:wh:;; font-size:10px; } .txt{ width:25%; float:left; font-family:'幼圆'; display:flex; align-items:center; justify-content:center; color:white; } .txt h2{ margin:0; }
前端基本都布置好了，我们可以来写后端程序了
三.
flask的应用！！
首先我们得下载flask
下载方法就是pip得方法，我就不多说了。
就是flask得环境配置我说一下，我们先看图。
社区版我们需要自己创建这flask得文件夹，然后在里面创建这些文件夹。
我们剩下的直接看flask的代码。
from flask import Flask from flask import render_template ,request,redirect,jsonify import dr app = Flask(__name__) @app.route('/') def hello_world(): return render_template('lianxi.html',data=dr.get_data2(),data2 = dr.get_data3(),data3 = dr.get_data4()) @app.route('/time') def get_time(): return dr.get_time() @app.route('/data') def get_data(): data = dr.get_data() return jsonify({'confirm':data[0],'heal':data[1],'dead':data[2],'shuru':data[3]})
import time import csv def get_time(): time_str = time.strftime('%Y{}%m{}%d{} %X') return time_str.format('年','月','日') def get_data(): with open(r'C:\Users\admin\PycharmProjects\untitled\实战案例\yqin.csv','r')as f: list1=[] list3=[] f1=csv.reader(f) for i in f1: list1.append(i) list2 = list1[1] list3.append(list2[1]) list3.append(list2[3]) list3.append(list2[4]) list3.append(list2[6]) return tuple(list3) def get_data1(): with open(r'C:\Users\admin\PycharmProjects\untitled\yq1.csv', 'r', newline='')as f: f1 = csv.reader(f) lit2 = [] dict1 = [] for i in f1: lit1 = [] if i[0] == '省份': continue else: # lit1.append({"name":i[0],"value":int(i[1])}) lit1.append(i[0]) lit1.append(int(i[1])) lit2.append(lit1) # return {'data':lit1} return lit2 def get_data2(): lit= [] f = get_data1() for i in f: lit.append({"name":i[0],"value":int(i[1])}) # return jsonify({"data":lit}) return lit def get_data3(): f = get_data1() list1 = [] list2 = [] for i in f: list1.append(i[0]) list2.append(i[1]) return list1,list2 def get_data4(): with open(r'C:\Users\admin\PycharmProjects\untitled\实战案例\yimiao.csv','r',encoding='utf-8',newline='')as f: f1= csv.reader(f) list1 = list(f1) # for i in f1: # print(i) return list1[0],list1[1],list1[2]
第二个是dr代码，负责后端数据的读取，就是最开始爬虫的数据传到前端数据中。
总结：
这差不多就是疫情实时追踪得全部步骤，还有那个前端的图形模块都是在echarts中可以下载的，大家直接下载就可以了，如果还有什么疑问可以直接找我讨论就可以哦，如果觉得写的可以的大家给我点点赞哦。
