一直潜心学习后端知识的我，在得到学校最后的可视化项目竟然是用前端做可视化网页（大学期间没有一门课是教前端相关知识），于是不得暂时放弃期末复习而去学习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制作国内疫情可视化平台的过程（一）相关推荐

记录自己三天速成django+html制作国内疫情可视化平台的过程（二）
3.可视化页面 3.1设计经过(一)中的操作,我们已经将登录/注册的功能基本实现.下面就是设计可视化页面了,一共会画8张图,我初步的设计是这样的: {% load static %} <!DO ...
Django + vue 开发接口自动化可视化平台
Django + vue 开发接口自动化可视化平台界面演示接口详情环境管理变量管理定时任务定时任务结果任务结果详情 UML 图表 #体验地址: http://1.12.224.200/ ...
嘿 Siri，有没有「三天速成深度学习」的课程？
「嘿 Siri,有没有三天速成 NLP 的课程?」「很抱歉,我没有找到任何和『有没有三天速成 NLP 的课程?』有关的内容.」最近老能在朋友圈刷到「X 天学会 Python,从此大专吊打博士生,工 ...
不平等博弈问题学习记录（三）（对于超实数在博弈下左大右小以及多堆情况的扩充）
前言今天写的这一篇文章离写第一篇文章的时间可能有几天了,并且在这段时间里也有人向我提出了我错误的地方,现已做出更改今天,我们又做到了一道题目,也是不平等博弈的,听了讲题,我对不平等博弈有了更深的理 ...
【C语言进阶深度学习记录】三十八 C/C++语言中的函数声明与函数定义
文章目录 1 函数的声明和定义 1.1 代码分析 2 总结 1 函数的声明和定义声明的意义在于告诉编译器程序单元的存在.只是告诉编译器它存在但是不在声明这里定义,有可能在当前文件中的其他地方或者其他 ...
【C语言进阶深度学习记录】三十五程序中的堆、栈以及静态存储区（数据区）
学习交流加个人qq: 1126137994 个人微信: liu1126137994 学习交流资源分享qq群: 962535112 在我之前学习底层的知识的时候,也写过相关的内容.可以对比的学习:[软 ...
研究生语音识别课程作业记录（三）非特定人孤立词识别
研究生语音识别课程作业记录(三) 非特定人孤立词识别前言一. 任务要求二. 识别方法三. 语音数据库四. 特征参数提取五. 识别过程及分析六. 实验总结七. 小结前言研究生期间的语 ...
毕业论文知识点记录（三）——SPSS去相关
毕业论文知识点记录(三)--SPSS去相关 #(一)数据下载 1.草地贪夜蛾的发生记录,这个数据在前面文章中有描述.草地贪夜蛾发生记录下载 2.气候数据数据来源:worldclim 我选择的分辨率是 ...
CentOS7 初次安装记录（三）配置PHP和MYSQL
CentOS7 初次安装记录(三)配置PHP和MYSQL 配置 php 环境跌跌撞撞,终于把apache环境给弄好了.下面我们来配置PHP环境. 照旧,还是yum安装 yum -y install ...

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