疫情可视化平台的过程（一）"/>
记录自己三天速成使用django+html制作国内疫情可视化平台的过程（一）
一直潜心学习后端知识的我，在得到学校最后的可视化项目竟然是用前端做可视化网页（大学期间没有一门课是教前端相关知识），于是不得暂时放弃期末复习而去学习html，css，js的知识。学习视频来源于b站上的视频（点击跳转视频），老师讲基础讲的很好，把前端知识，mysql，django分为3个部分讲解，在我1天8小时的肝度下，3天后终于学会了基础的前端知识和django的运转原理。实验所用到数据是2020年2月的疫情数据，都是死数据，而且是借鉴了大佬点击跳转的sql语句设计和echarts可视化（几个月后我已经学会了使用modelfrom和from，建议不要用pymsql），因此不会讲到太多关于sql的部分。
1.项目的搭建
使用到的Django版本为3.2.13，python版本为3.7。
首先是搭建django项目，可以使用命令，也可以在pycharm中直接创建，我使用的是后者
然后我们就会看到项目文件夹下出现了这些文件
我一般会删除自动生成的templates，然后再将setting中将templates的默认路径删除掉
再将csrf令牌服务注释掉
我个人会比较喜欢创建一个app来管理功能，由于只是一个小项目，就只创建一个app来管理：在终端中输入命令
执行完成后就能看到我们的app被创建了
创建app后就马上去下面的主体部分中的settings.py中注册app
然后在web（创建的app）文件夹下创建static，templates，utils文件夹，再在static下创建css，img，js，plugins文件夹。
下面画一个架构图说明这个运作原理：
下面可以试试最简单的运转，在urls中导入web下的views，然后添加一个ulr地址
然后去web下的views中写入对应的函数：
html的名称可以随便取，这里为了对应，我同样也写了test这个名称。然后我们取templates下创建一个test.html，随便写入一点内容
然后启动django项目，在终端中输入在这 python manage.py runserver
点击下面的超链接
这里由于我们给这个test.html的地址配置的是/test，所以还需要在网址后面加上/test，这里也是提示我们有两个地址可以选择：admin和test，admin是django自带的登录网页，后面的test就是我们设置的网页。下面我们加上/test：
可以看到也是成功的访问了这个页面，那么到此项目的基本搭建就已经完成了。
2.登录/注册功能实现
2.1登录
2.1.1布局
既然是一个系统，那登录注册功能肯定是少不掉的，和上面的步骤一样，先在urls中添加登录的地址
在views中写出函数
最后在templates中添加login.html。那我们直接开始编辑html，由于我只学了基础的知识，那些什么炫酷的动态例如反转，滑动特效我是写不出的。只能写个尽量简洁好看的界面，而且我写的代码可能也会有一些不合理导致看起来很冗余
那就是常见的这种布局了：
再实现之前，我们先引入插件bootstrap和js插件jquery
然后在html最上方写一个这个
它是django提供的语法，可以帮助我们更好的写路径，那我们就导入插件，css进来
注意导入的位置，js插件最好是放在body中的最下面，而bootstarp的js又要依赖于jquery，所以要先让jquery导入
然后先初步的画出布局，通过<style></style>中的内容来调整样式，下面div标签中对应的class名为login_box，style中就可以相应的建立一个.login_box{}来调整样式
{% 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>.login_box{{#宽度#}width: 380px;{#高度#}height: 450px;{#方框红线#}border: 1px solid red;{#上边距为230px，后面左右边距为自动可以使区域水平居中#}margin: 230px auto auto;{#添加内边距#}padding: 20px 10px 10px;}.login_box h1{text-align: center;}</style>
</head>
<body>
<div class="login_box"><h1>用户登录</h1>
</div><script src="{% static 'js/jquery-3.6.0.js'%}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css'%}"></script>
</body>
</html>
接下来我们直接使用bootstrap中提供的表单样式
放到h1下面一行就行
那么我们只用的上输入框和按钮，把不要的删除即可。到这里布局就基本完成，下面就只是美化了，美化就不是一言两语讲的清楚的了，而且每个人的审美设计也不一样。再加上这里的演示我是完全新建了一个html，我在下面贴出基于这个布局的美化完了的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 {{#选择自己想要的背景图，然后使背景图适应窗口大小并且在中心#}background: url("{% static 'img/3.jpg'%}") fixed center center;background-size: cover;}{#用于调整整个窗口#}.c1{{#给登录窗口设置大小#}width: 380px;height: 450px;{#给登录窗口加圆角样式#}border-radius: 20px;{#给登录窗口设置一个黑色背景色让透明度为0.5#}background-color: rgba(0,0,0,0.5);{#给窗口设置一个阴影立体效果#}box-shadow: 10px 10px 20px;{#设置外边距让窗口居中#}margin: 230px auto auto;{#设置内边距让里面的元素排版看起来更自然一些#}padding: 40px 25px 25px;}{#调整头部标题#}.c1 .title{{#使文本居中#}text-align: center;{#下边距#}margin-bottom: 10px;{#调大字体的粗度#}font-weight: 600;}{#调整图形验证码的输入框#}.c2{{#把图形验证码的输入框变成行内标签#}display: inline;{#调整宽度#}width:45%;{#和左边的验证码设置一个左外边距#}margin-right: 50px;}{#调整登录按钮的上边距#}.c3{margin-top: 30px;}{#给每个输入框都带上圆角样式#}.form-control{border-radius: 30px;}{#由于背景色是黑色，所以把所有的字体都变成白色#}.font_color{color: white;{#加点内边距好看#}padding-left: 5px;}{#填充登录按钮使其占满整个div#}.btn-primary{width: 100%;height: 100%;{#加个圆角样式#}border-radius: 30px;}{#用在最下面的注册样式#}.c4{margin-top: 15px;text-align: center;}{#将注册样式中的a标签的下划线抹除#}.c4 a{text-decoration: none;}{#用于提示语句的样式设置#}.hint{{#字体颜色#}color: red;{#字体粗度#}font-weight: 600;{#字体大小#}font-size: 10px;{#经典边距#}margin-top: 5px;padding-left: 5px;}</style>
</head>
<body>
{# 最外层的div，用于放整个登录窗口#}<div class="c1">
{# 标题#}<h2 class="title"><span class="font_color">用户登录</span></h2>
{# 提交表单的请求方式为post，对于之后区分登录和验证时会有帮助#}<form method="post">
{# 下面使用了bootstrap中表单模板，然后自己修改了很多格式#}<div class="form-group"><label for="exampleInputEmail1"><span class="font_color">用户名</span></label>
{# 设置不同的name方便我们在后台得到数据#}<input type="text" class="form-control" name="user" placeholder="请输入用户名">
{# 这里的msg1以及下面的msg都是用于提示错误信息#}<div class="hint">{{ msg1 }}</div></div><div class="form-group"><label for="exampleInputPassword1"><span class="font_color">密码</span></label><input type="password" class="form-control" name="pwd" placeholder="请输入密码"><div class="hint">{{ msg2 }}</div></div><div class="form-group"><label for="exampleInputPassword1"><span class="font_color">验证码</span></label><div><input type="text" class="form-control c2" name="yzm" placeholder="请输入图形验证码">
{# 下面是动态展示图片验证码，加个a可以使点击图片就刷新#}<a href="/login"><img src="/imag/code" alt=""/></a><div class="hint">{{ msg3 }}</div></div></div>
{# 同样也是应用bootstrap的按钮样式再自己改写#}<div class="c3"><button type="submit" class="btn btn-primary enter" id="form_ac">登录</button></div></form>
{# 注册#}<div class="c4">
{# 点击注册就会跳向注册的页面#}<a href="/register"><span class="font_color">没有账号？</span><span style="font-weight: 600">注册</span></a></div></div><script src="{% static 'js/jquery-3.6.0.js' %}"></script><script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
</body>
</html>
现在我们回到后端，首先认识一下get和post请求，访问这个网页的本质就是向后端发出请求，我们输入网址是不是基本是https开头的超文本链接，这就是字符串请求，后端会解析收到的字符串，请求后执行上面我画的运转图的过程，发送html（本质就是一堆字符串）给浏览器，然后浏览器会解析字符串中的内容，再将其展示给用户看。而最常见的请求就是get请求，例如这个登录界面，在你输入完账号密码后点击submit类型（提交表单中数据）的按钮后，会将其显示在这里然后传给后端。而post就是“偷偷”的传给后端。
那我们完全可以这样设计，当用户提交普通的get请求时就显示这个页面，而当用户在这个页面点击了登录按钮触发了post请求（可以找到上面html中唯一的form标签后面是否被我加了一份method=‘post’）就会经过后端的一系列验证后跳向其他的页面。基于这种思路：
def login(request):"""登录界面"""# 如果请求是get就会正常的得到登录页面if request.method == "GET":return render(request, "login.html")# 其他的请求，这里其他的请求我们基本使用的是post，也就是表单提交数据时发送的请求else:return render(request, 'test.html')
你可以试试在form后面加上method=‘post’，点击按钮后是否会解析出test.html。这样做后你可能会发现上面的url并没有变成/test，仍然还是/login，我们将render(request, 'test.html')换成redirect('/test') redirect是重定向。
2.1.2后端逻辑
下面我们来解决如何验证用户账号，密码的问题：
得到form提交上来的数据只需要使用request.POST.get("html中input的name")，看向我们的html，给他加上一个name
views函数中加上这一句
然后再次输入内容提交看看
这样在后端我们就能看见了，现在我也要做的是把它和我数据库中账号，密码作比较
对于登陆和注册我是使用了django自带的服务，先在settings中修改数据库配置：
终端中输入命令绑定你的数据库
此时会生成一个models文件
每一个类就是一张表，我只会用到userinfo这张表，就只复制这个类到web下的models中
这样再将models导入views中from web import models，在views中我们只需要这样就能操作数据库中的这张表了models.UserInfo.objects.想做的操作。比如说models.UserInfo.objects.filter(username=x)就会寻找x是否在表的username这一列中，没有就返回空。最后我们再学习一个从后端传值给前端的方法，
在html中只要{{ 键名 }}（不用带引号）这样就能得到传过来的值了，你也可以查看上面我的html代码
最后就是我写的登录函数，也是写满了注释：
def login(request):"""登录界面"""# 如果请求是get就会正常的得到登录页面if request.method == "GET":return render(request, "login.html")# 其他的请求，这里其他的请求我们基本使用的是post，也就是表单提交数据时发送的请求else:# 分别得到用户输入表达中的数据，get里面是找name的写法user_login = request.POST.get("user")pwd_login = request.POST.get("pwd")yzm_login = request.POST.get("yzm")# 对比数据库用户名，最好使用filter而不是getuser_db = models.UserInfo.objects.filter(username=user_login)# 先对比用户名再对比密码，同样也是使用filterpwd_db = models.UserInfo.objects.filter(username=user_login).filter(password=pwd_login)# 如果用户存在if user_db:# 如果密码正确if pwd_db:# 如果验证码正确，下面的验证码函数中，验证码的数值被放入了session中if request.session.get("image_code") == yzm_login:# 全部满足后重定向至过度页面return render(request, "interim.html", {"prompt1": "登录", "prompt2": "平台", "link": "/canvas"})# 下面则是各种错误不同后的设置，会将设置好的字符串传入给网页else:msg = '验证码错误'return render(request, "login.html", {"msg3": msg})else:msg = '密码错误'return render(request, "login.html", {"msg2": msg})else:msg = '用户不存在'return render(request, "login.html", {"msg1": msg})
传参数的效果，输入错误后，这里写的比较简单，所以不会再把之前用户填的数据放上去
那个数字验证码就不说了，大佬们写的开源的一堆。
2.2注册
2.2.1布局
我的注册页面也是基于登录界面，就改了一点点东西
html源码就不放出来了，和登陆的差不多。
2.2.2后端逻辑
和登录的也是差不多，看注释就能看懂
def register(request):"""注册界面"""# 如果请求是get就会正常的得到登录页面if request.method == "GET":return render(request, "register.html")# 其他的请求，这里其他的请求我们基本使用的是post，也就是表单提交数据时发送的请求else:# 分别得到用户输入表达中的数据，get里面是找name的写法user_re = request.POST.get("user_re")pwd_re = request.POST.get("pwd_re")pwd_re_se = request.POST.get("pwd_re_se")# 查找数据库中是否已存在用户名，最好使用filter而不是getuser_db = models.UserInfo.objects.filter(username=user_re)# 如果用户名存在则传入已存在的错误信息if user_db:msg = '用户名已存在'return render(request, 'register.html', {"msg1": msg})# 如果用户名不存在else:# 输入的用户名不为空if user_re:# 输入的密码不为空if pwd_re:# 确认密码一致if pwd_re == pwd_re_se:# 将数据写入至data数据库中userinfo表中models.UserInfo.objects.create(username=user_re, password=pwd_re)# 重定向至确认界面return render(request, "interim.html", {"prompt1": "注册", "prompt2": "登录", "link": "/login"})# 下面则是各种错误不同后的设置，会将设置好的字符串传入给网页else:msg = '密码输入不一致'return render(request, "register.html", {"msg3": msg})else:msg = '密码输入为空'return render(request, 'register.html', {"msg2": msg})else:msg = '用户名输入为空'return render(request, 'register.html', {"msg1": msg})2.3过渡界面
最后是一个用于确认登录，注册成功的界面
views中函数（别忘记添加到路由中）
def interim(request):"""过渡网页"""return render(request, "interim.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{background: url("{% static 'img/3.jpg'%}") fixed center center;background-size: cover;}.box{width: 900px;height: 180px;margin: 250px auto auto;background: rgb(255, 255, 255, 0.4);}.box p{text-align: center;line-height: 180px;font-size: 16px;font-weight: 600;}</style>
</head>
<body>
<div class="box"><p>{{ prompt1 }}成功！点击<a href={{ link }}>确认</a>跳转到{{ prompt2 }}界面...</p>
</div>
<script src="{% static 'js/jquery-3.6.0.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
</body>
</html>
更多推荐
记录自己三天速成使用django+html制作国内疫情可视化平台的过程（一）
发布评论