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

一直潜心学习后端知识的我，在得到学校最后的可视化实验竟然是用前端做可视化网页，我当场就是黑人问号，于是不得暂时放弃期末复习而去学习html，css，js的知识。学习视频来源于b站上的视频（点击跳转视频），老师讲基础讲的很好，把前端知识，mysql，django分为3个部分讲解，在我1天8小时的肝度下，3天后终于学会了基础的前端知识和django的运转原理。实验所用到数据是2020年2月的疫情数据，

陆伯言0

5689人浏览 · 2022-06-22 16:26:26

陆伯言0 · 2022-06-22 16:26:26 发布

一直潜心学习后端知识的我，在得到学校最后的可视化项目竟然是用前端做可视化网页（大学期间没有一门课是教前端相关知识），于是不得暂时放弃期末复习而去学习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而不是get
        user_db = models.UserInfo.objects.filter(username=user_login)
        # 先对比用户名再对比密码，同样也是使用filter
        pwd_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而不是get
        user_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>