记录自己三天速成django+html制作国内疫情可视化平台的过程（二）

3.可视化页面

3.1设计

经过（一）中的操作，我们已经将登录/注册的功能基本实现。下面就是设计可视化页面了，一共会画8张图，我初步的设计是这样的：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}"><style>body{margin: 0;padding: 0;background: url("{% static 'img/4.png'%}") fixed center center;background-size: cover;}.box{padding-left: 20px;padding-right: 20px;}.header h1{color: white;text-align: center;font-family: 华文彩云,sans-serif;font-size: 40px;}.c1{height: 900px;{#margin-right: 10px;#}}.area1{padding: 20px;}.area1 div{position: relative;height: 32.5%;margin-bottom: 15px;border: 1px solid red;}.area2{padding: 20px;}.area2 .map2{margin-top: 26px;margin-bottom: 0;}.area2 div{position: relative;height: 49%;margin-bottom: 15px;border: 1px solid red;}</style>
</head>
<body><div class="box"><div class="header"><h1>国内疫情可视化平台</h1>></div><div class="area1 col-sm-3 c1"><div class="line" id="line"></div><div class="mypanel" id="mypanel"></div><div class="scatter" id="scatter"></div></div><div class="area2 col-sm-6 c1"><div class="map1" id="map1"></div><div class="map2" id="map2"></div></div><div class="area1 col-sm-3 c1"><div class="TR" id="TP"></div><div class="Pie" id="Pie"></div><div class="wordc" id="wordc"></div></div></div><script src="{% static 'js/jquery-3.6.0.js' %}"></script><script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script><script src="{% static 'js/echarts.js' %}"></script>
</body>
</html>

分成8个区域，每个区域放一张图

3.2后端逻辑

这里同样也会用到我们之前提到的后端给前端传数据功能，由于摆烂不想写sql语句，所以借鉴了
大佬（点击跳转原帖）的sql语句思路。

在utils下建立一个sqldata.py，学过一点pymysql的人应该都看的懂

from pymysql import Connect
from jieba.analyse import extract_tags
import re
import jiebaclass SqlData:def __init__(self):self.conn = Connect(host="127.0.0.1",port=3306,user="root",password="123456",database="data",charset="utf8")def get_data(self, sql):cur = self.conn.cursor()cur.execute(sql)self.conn.commit()data = cur.fetchall()cur.close()return datadef line_data(self):"""折线图数据"""sql = """SELECT cast(SUM(confirmed_add) as char),day(update_time) FROM covid_data WHERE day(update_time) <> 13 GROUP BY update_time ORDER BY update_time ASC"""data = self.get_data(sql)# 得到的data是一个“二维元组”data_x = []data_y = []j = 0for i in data:# 将每一天的人数装入x，每一天装入ydata_y.append(int(i[0]))data_x.append(i[1])j = j + 1return data_x, data_ydef scatter_data(self):"""散点图数据"""sql = """SELECT `人口占比`,`累计确诊` FROM (SELECT province_name,SUM( covid_data.confirmed_count ) AS '累计确诊' FROM covid_data WHERE covid_data.update_time = "2020-02-29" AND covid_data.province_name <> "湖北省" GROUP BY covid_data.province_name ) AS a2 LEFT JOIN ( SELECT target_province_name, `value` AS `人口占比` FROM migrate_data WHERE source_province_name = "湖北省" ) AS a1 ON province_name = target_province_name ORDER BY a1.`人口占比`"""# 同样也是一个二维数组data = self.get_data(sql)scatter_data = []for i in data:scatter_data.append([i[0], int(i[1])])return scatter_datadef panel_data(self):"""仪表盘数据"""sql = """SELECT cast(SUM( dead_count )/( SELECT SUM( confirmed_count ) FROM covid_data WHERE update_time = '2020-2-29' )as char) AS 死亡率 FROM covid_data WHERE update_time = '2020-2-29'"""data = self.get_data(sql)panel_data = round(float(data[0][0]) * 100, 2)return panel_datadef geoLines_data(self):"""迁徙图数据"""sql = """SELECT source_province_name,target_province_name,value,longitude,latitude FROM `migrate_data`,area_china where source_province_name = '湖北省' and migrate_data.target_province_code = area_china.`code`"""data = self.get_data(sql)target = [114.341861, 30.546498]series1 = []for i in data:dic = {"fromName": i[0], "toName": i[1], "value": i[2], "coords": [target, [i[3], i[4]]]}series1.append(dic)series2 = []for i in data:dic = {"name": i[1], "value": i[2]}series2.append(dic)seriseAll = [series1, series2]seriseAll01 = seriseAll[0]seriseAll02 = seriseAll[1]return seriseAll01, seriseAll02def map_data(self):"""地图数据"""sql = """SELECT province_name,SUM(confirmed_count) FROM `covid_data` where update_time = '2020-02-29' GROUP BY province_name"""data = self.get_data(sql)mapSeries = []# 去除掉不需要的字符串，只需要省的名称即可for i in data:dic = {"name": i[0].strip("省市自治区回族壮族维吾尔族"), "value": int(i[1])}mapSeries.append(dic)return mapSeriesdef pie_data(self):"""饼图数据"""sql = """SELECT news_source ,COUNT(*) FROM news_info GROUP BY news_source"""data = self.get_data(sql)pie_data = []for i in data:dic = {"value": i[1], "name": i[0]}pie_data.append(dic)return pie_datadef river_data(self):"""河流图数据"""sql = """SELECT DATE_FORMAT(publish_time,'%Y-%m-%d'),count(*),news_source FROM `news_info`where DATE_FORMAT(publish_time,'%Y-%m')='2020-02' group by DATE_FORMAT(publish_time,'%Y-%m-%d'),news_source"""data = self.get_data(sql)river = list(data)for i, j in enumerate(river):river[i] = list(j)return riverdef word_data(self):"""词云图数据"""sql = """SELECT news_summary FROM news_info"""data = self.get_data(sql)numlist = []for row in data:numlist.append(row[0])numlist = list(map(str, numlist))numlist = ''.join(numlist)cut_words = []for line in numlist:line.strip('\n')line = re.sub("[A-Za-z0-9\：\·\—\，\。\“ \”]", "", line)seg_list = jieba.cut(line, cut_all=False)cut_words.append(" ".join(seg_list))# 列表转为字符串cut_words = ''.join(cut_words)tf_idf_w = extract_tags(cut_words, topK=100, withWeight=True)key = []value = []for i, j in tf_idf_w:key.append(i)value.append(j)return key, value

然后将这个类在views中调用from web.utils.sqldata import SqlData
写上可视化页面对应的函数，将这些死数据都丢给前端（同样也别忘记在urls中添加）

def canvas(request):"""可视化界面"""sql_data = SqlData()line_x, line_y = sql_data.line_data()scatter_data = sql_data.scatter_data()panel_data = sql_data.panel_data()geolines_data, geoscatter_data = sql_data.geoLines_data()data_map = sql_data.map_data()pie_data = sql_data.pie_data()river_data = sql_data.river_data()key, value = sql_data.word_data()return render(request, "canvas.html", {"line_x": line_x, "line_y": line_y,"scatter_data": scatter_data,"panel_data": panel_data,"geolines_data": geolines_data,"geoscatter_data": geoscatter_data,"data_map": data_map,"pie_data": pie_data,"river_data": river_data,"key": key, "value": value})

3.3 echarts

可视化使用到了echarts，这个我就不多介绍了因为我也是不是太会，我只学过pyecharts，echarts看完官网的初级教程就可以画出图了，好看的模板就去点击跳转echarts社区中看看大佬的作品就行。

3.4最终实现

在html中额外引入

这些插件

每一个图写一个script标签来装

下面是html源码，画图的代码也借鉴了很多大佬的思路

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}"><style>body{margin: 0;padding: 0;{#/* 行高是字体的1.15倍 */#}line-height: 1.15;{#background-color: #161523;#}background: url("{% static 'img/5.png'%}") fixed center center;{#    设置一个渐变背景色#}{#    background-image: linear-gradient(to bottom right , #1a2683, #5c5c83, #1a257a);#}{#    background-image: linear-gradient(315deg , #24245b, #1e1c1c);#}background-size: cover;}.box{padding-left: 20px;padding-right: 20px;}.header h1{color: white;text-align: center;font-family: 华文彩云,sans-serif;font-size: 40px;}.header h1{display: flex;color: transparent;font-weight: 600;padding-left: 730px;}{#下面是给标题加上发光特效，实际是利用了阴影#}.header h1 span{animation: animate 3s linear infinite;animation-delay: calc(0.1s * var(--i));padding-right: 10px;}@keyframes animate {0%{color: #fff;filter: blur(2px) hue-rotate(0deg);text-shadow: 0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff,0 0 300px #00b3ff,0 0 400px #00b3ff;}30%, 70%{color: #fff;filter: blur(2px) hue-rotate(360deg);text-shadow: 0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff,0 0 300px #00b3ff,0 0 400px #00b3ff;}100%{color: transparent;box-shadow: none;filter: blur(2px) hue-rotate(0deg);}}.c1{height: 900px;{#margin-right: 10px;#}}.area1{padding: 10px;}.area1 .split{position: relative;height: 32.5%;margin-bottom: 15px;{#border: 1px solid red;#}{#    border: 2px solid #323279;#}box-shadow:0 0 7px rgb(0,153,184) inset,0 0 7px rgb(0,153,184);background: rgba(255, 255, 255, 0.01);{#background: rgba(0, 0, 0, 0.07);#}padding: 25px 0 0 10px;}.area2{padding: 10px;}.area2 .map2{margin-top: 26px;margin-bottom: 0;}.area2 .split{position: relative;height: 49%;margin-bottom: 15px;padding-top: 15px;box-shadow:0 0 7px rgb(0,153,184) inset,0 0 7px rgb(0,153,184);background: rgba(255, 255, 255, 0.01);{#border: 1px solid red;#}}</style>
</head>
<body>
<div class="box"><div class="header"><h1><span style="--i: 1">国</span><span style="--i: 2">内</span><span style="--i: 3">疫</span><span style="--i: 4">情</span><span style="--i: 5">可</span><span style="--i: 6">视</span><span style="--i: 7">化</span><span style="--i: 8">平</span><span style="--i: 9">台</span></h1>></div><div class="area1 col-sm-3 c1"><div class="line split" id="line"></div><div class="mypanel split" id="mypanel"></div><div class="scatter split" id="scatter"></div></div><div class="area2 col-sm-6 c1"><div class="map1 split" id="map1"></div><div class="map2 split" id="map2"></div></div><div class="area1 col-sm-3 c1"><div class="TR split" id="TP"></div><div class="Pie split" id="Pie"></div><div class="wordc split" id="wordc"></div></div>
</div><script src="{% static 'js/jquery-3.6.0.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
<script src="{% static 'js/echarts.js' %}"></script>
<script src="{% static 'js/china.js' %}"></script>
<script src="{% static 'js/china-contour.js' %}"></script>
<script src="{% static 'js/echarts-wordcloud.js' %}"></script>
{#折线图#}
<script type="text/javascript">var Line=echarts.init(document.getElementById('line'));var option={"title": [{"text": "全国每日新增的确诊人数（二月份）","left": "center","top": "auto","textStyle": {"fontSize": 18,color: "#fff",{#textBorderColor: "rgba(255,0,0,1)"#}},"subtextStyle": {"fontSize": 12,color: "#fff",}}],xAxis: {data: {{line_x}},axisLine: {lineStyle: {// 设置x轴颜色color: "rgba(255,0,0,1)"}},},yAxis: {show: true,type: 'value',axisLine: {lineStyle: {// 设置y轴颜色color: "rgba(255,0,0,1)"}},},series: [{name:"确诊人数",data: {{line_y}},type: 'line',itemStyle: {color: "#fff",normal: {color: 'red',lineStyle: {color: 'red'}}},}],tooltip : {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'},}}};Line.setOption(option);
</script>
{#仪表盘#}
<script type="text/javascript">var mypanel=echarts.init(document.getElementById('mypanel'));var color1 = [[0.2, "rgba(255,0,0,1)"], [0.8, "rgba(0,255,255,1)"], [1, "rgba(0,255,0,1)"]];var option = {title: [{text: "国内新冠疫情死亡率","left": "center",textStyle: {fontSize: 18,color: "#eeeded",{#textBorderColor: "rgba(12,217,217,0.7)",#}},}],series: [{type: "gauge",color: "#fff",detail: {fontSize: 20,formatter: "{value}%",color: "rgba(0,255,255,1)",},axisLine: {  //设置仪表盘轴线(轮廓线)相关配置show: true,  //设置是否显示仪表盘轴线(轮廓线)，默认truelineStyle: {  //设置仪表盘轴线样式color: color1,  //设置仪表盘的轴线可以被分成不同颜色的多段opacity: 1,  //设置图形透明度，支持从0到1的数字，为0时不绘制该图形width: 30,  //设置轴线宽度，默认30shadowBlur: 10,  //设置(发光效果)图形阴影的模糊大小shadowColor: "#fff",  //设置阴影颜色，支持的格式同color}},data: [{value: {{panel_data}},name: "死亡率",detail: {color:"#fff",fontSize: 25,}}],max: 10,splitLine: {show: true,distance: 15}}]};mypanel.setOption(option,true);
</script>
{#散点图#}
<script type="text/javascript">var Scatter=echarts.init(document.getElementById('scatter'));var option={title: {text: "湖北省迁入的人口比例与累计确诊人数关系",left: "center",textStyle: {fontSize: 18,color: "#fff",{#textBorderColor: "rgba(0,255,255,0.6)"#}}},tooltip: {trigger: 'item',},yAxis: {show: true,axisLine: {lineStyle: {// 设置x轴颜色color: {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#EEBD89" // 0% 处的颜色}, {offset:1,color: "#D13ABD" // 100% 处的颜色}],globalCoord: "white" // 缺省为 false},}},},xAxis: {type: "value",axisLine: {lineStyle: {// 设置y轴颜色color: {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#0C7BB3" // 0% 处的颜色}, {offset:1,color: "#F2BAEB" // 100% 处的颜色}],globalCoord: false // 缺省为 false}}},},series: [{type: "scatter",color: {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#0C7BB3" // 0% 处的颜色}, {offset:1,color: "#F2BAEB" // 100% 处的颜色}],globalCoord: false // 缺省为 false},name: "",data: {{scatter_data | safe}}},]};Scatter.setOption(option);
</script>
{#地图——迁徙图#}
<script type="text/javascript">var map1 = echarts.init(document.getElementById("map1"));var option = {<!--   设置地图模式    -->"geo": {"map": "china",<!--      控制地图不缩放-->"roam": false,"label": {"emphasis": {"show": true,"textStyle": {"color": "rgba(255,0,0)"}}},itemStyle: {normal: {borderColor: 'rgba(147, 235, 248, 1)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色}, {offset: 1,color: 'rgba(114,212,224,0.2)' // 100% 处的颜色}],globalCoord: false // 缺省为 false},shadowColor: 'rgb(77,129,150)',{# shadowColor: 'rgba(255, 255, 255, 1)',#}shadowOffsetX: -2,shadowOffsetY: 2,shadowBlur: 10},emphasis: {areaColor: "rgba(0,255,255,0.4)",borderWidth: 5}}},title: [{text: "人口迁徙图",left: "center",top: "auto",textStyle: {fontSize: 18,color: "#fff",},subtextStyle: {fontSize: 18}}],tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (迁徙人数占比)'},<!--   迁徙图中的飞线    -->series: [{type: "lines",zlevel: 3,effect: {"show": true,"period": 6,                            <!--  值越大，箭头飞速的速度越快    -->"trailLength": 0.4,{#"color": "rgba(0,255,255,1)",#}"symbol": "arrow","symbolSize": 6},symbol: ["none","arrow"],symbolSize: 6,data: {{geolines_data | safe}},lineStyle: {normal: {width: 1,opacity: 0.2,curveness: 0.3,type: "dotted",color: {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "rgba(0,255,255,1)" // 0% 处的颜色}, {offset:1,color: "rgba(0,255,0,1)" // 100% 处的颜色}],globalCoord: false // 缺省为 false},}}},<!--   迁徙图中的散点    -->{type: "scatter",<!--        "zlevel": 2,-->coordinateSystem: "geo",symbolSize: 5,color: "red",name:"人数:",data: {{geoscatter_data | safe}},label: {"normal": {"show": true,"position": "top","textStyle": {"fontSize": 12}},"emphasis": {"show": true,"textStyle": {"fontSize": 12}}},<!--        "tooltip": {--><!--          "formatter": "{b}"--><!--        }-->}],};console.log({{ geoLine_lines }})map1.setOption(option);
</script>
{#地图——热力图#}
<script type="text/javascript">var myChart = echarts.init(document.getElementById("map2"));var option = {title: {text: "各个省市累计确诊人数",left: "center",textStyle: {fontSize: 18,color:"#fff"}},tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (确诊人数)'},"series": [{name:"确诊人数","type": "map","symbol": "circle","label": {"normal": {"show": false,"position": "top","textStyle": {"fontSize": 18,color: "#fff",}},"emphasis": {"show": true,"textStyle": {"fontSize": 12}}},itemStyle:{normal:{areaColor: '#323c48',borderColor: '#111'}},mapType: "china",data: {{data_map|safe}},roam: false,}],"visualMap": {"type": "piecewise","min": 0,"max": 100,"text": ["",""],"textStyle": {color:"#fff"},"inRange": {"color": ['#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF',"rgba(0,255,255,1)"]},<!--      "calculable": true,-->"splitNumber": 5,                       <!--  划分等级 -->"orient": "horizontal","left": "center","top": "bottom","showLabel": true,pieces: [{max: 100,min: 0,label: "<100"},{max: 500,min: 101,label: "100-500"},{max: 800,min: 501,label: "500-800"},{                             <!--  划分等级 -->"max": 1000,"min": 801,"label": "800-1000"},{                         <!--  划分等级 -->"max": 1500,"min": 1001,"label": "1000-1500"},{                       <!--  划分等级 -->"max": 9999999,"min": 1501,"label": ">1500"}]}};myChart.setOption(option);
</script>
{#洋流图#}
<script type="text/javascript">var myChart = echarts.init(document.getElementById("TP"));option = {title: {text: '各媒体每一天的新闻数量',left: 'center',textStyle: {color: '#fff',fontSize: 18,}},tooltip: {trigger: 'axis',axisPointer: {type: 'line',lineStyle: {color: '#fff',width: 1,type: 'solid'}}},legend: {data: ['国家卫健委', '央视网', '人民日报', '新华社'],top: '8%',right: 'center',textStyle: {fontSize: 10,color: '#fff',}},singleAxis: {top: 50,bottom: 50,axisTick: {},axisLabel: {},type: 'time',axisPointer: {animation: true,label: {show: false}},axisLine: {lineStyle: {color: "#FFF"}},splitLine: {show: true,lineStyle: {type: 'dashed',opacity: 0.2}}},series: [{type: 'themeRiver',color: [ {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#9FA5D5" // 0% 处的颜色}, {offset:1,color: "#E8F5C8" // 100% 处的颜色}],globalCoord: false // 缺省为 false},  {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#EAE5C9" // 0% 处的颜色}, {offset:1,color: "#6CC6CB" // 100% 处的颜色}],globalCoord: false // 缺省为 false},  {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#EAD6EE" // 0% 处的颜色}, {offset:1,color: "#A0F1EA" // 100% 处的颜色}],globalCoord: false // 缺省为 false}, {type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#CCFBFF" // 0% 处的颜色}, {offset:1,color: "#EF96C5" // 100% 处的颜色}],globalCoord: false // 缺省为 false}],emphasis: {itemStyle: {shadowBlur: 20,shadowColor: '#fff'}},data: {{river_data|safe}},}]};myChart.setOption(option);
</script>
{#饼图#}
<script type="text/javascript">var myChart = echarts.init(document.getElementById("Pie"));option = {title: {text: '各媒体发布的新闻占比情况',left: 'center',textStyle: {color: '#fff',fontSize: 18,}},tooltip: {trigger: 'item'},legend: {top: '5%',right: '2%',orient: 'vertical',textStyle: {color: '#fff',}},series: [{name: '访问来源',type: 'pie',radius: ['40%', '70%'],center: ['50%', '45%'],color: [{type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#9FA5D5" // 0% 处的颜色}, {offset:1,color: "#E8F5C8" // 100% 处的颜色}],globalCoord: false // 缺省为 false},{type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#EAD6EE" // 0% 处的颜色}, {offset:1,color: "#A0F1EA" // 100% 处的颜色}],globalCoord: false // 缺省为 false},{type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#CCFBFF" // 0% 处的颜色}, {offset:1,color: "#EF96C5" // 100% 处的颜色}],globalCoord: false // 缺省为 false},{type: 'linear',x: 0,y: 0,x1: 0,y1: 1,colorStops: [{offset:0,color: "#EAE5C9" // 0% 处的颜色}, {offset:1,color: "#6CC6CB" // 100% 处的颜色}],globalCoord: false // 缺省为 false}],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: true,position: 'inside',formatter: '{d}%',},emphasis: {label: {show: true,fontSize: '10',fontWeight: 'bold'}},labelLine: {show: false},data: {{pie_data|safe}}}]};myChart.setOption(option);
</script>
{#词云图#}
<script type="text/javascript">var myChart1 = echarts.init(document.getElementById('wordc'));key = {{key|safe}};value = {{value|safe}};var data = [];for (var i=0;i<value.length;i++){data.push({ value:value[i],name:key[i]})}var option1 ={//设置标题，居中显示title:{text: '所有新闻的关键字',left:'center',textStyle: {color: '#fff',fontSize: 18,}},//数据可以点击tooltip:{show:true},series:[{//词的类型type: 'wordCloud',//设置字符大小范围gridSize:4,sizeRange:[10,70],<!--                    shape:'star',-->rotationRange:[-45,90],textStyle: {normal:{//生成随机的字体颜色color:function () {return 'rgba(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160),1].join(',')+')';}}},//不要忘记调用数据data:data}]};myChart1.setOption(option1);
</script>
</body>
</html>

最终呈现出的效果（其实有点难看）：

4.总结

经过几天的学习，我的收益也良多，从一点不通的小白，到了现在能自己设计布局，设计简单的动态效果以及在后端对前端发回的请求表单等等进行逻辑处理。看到GitHub上大佬的各种炫酷网页动态效果，我还是差的很多很多，本次实验中我最大的困难就在设计登录成功和注册成功显示的弹窗，我的想法是从后端根据if传入一个标志数给html，但是html好像是先解析页面，再读我的参数，逼的我最后不得不加了个过渡的html，而放弃了弹窗，这大概也是因为我来不及学seesion，ajax的原因有关。还有页面的布局设计，动态效果设计，花掉了我大量的时间，最终sql语句不得不借鉴了别人的开源项目来实现，本来是想搞一个爬虫的实时数据。当然，简单一点的数据库操作我们直接用from或者modelfrom就能ko。最后，这次的学习确实是让我彻底理解了django框架的运行。