Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

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

作者：Gausst松鼠会 | 2024-02-29 09:48:51

踩

基于dgango的可视化项目

一直潜心学习后端知识的我，在得到学校最后的可视化项目竟然是用前端做可视化网页（大学期间没有一门课是教前端相关知识），于是不得暂时放弃期末复习而去学习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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在这里插入图片描述
接下来我们直接使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

在这里插入图片描述
现在我们回到后端，首先认识一下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')
1
2
3
4
5
6
7
8

你可以试试在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})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

传参数的效果，输入错误后，这里写的比较简单，所以不会再把之前用户填的数据放上去
在这里插入图片描述

那个数字验证码就不说了，大佬们写的开源的一堆。

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})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

2.3过渡界面

最后是一个用于确认登录，注册成功的界面
views中函数（别忘记添加到路由中）

def interim(request):
    """过渡网页"""
    return render(request, "interim.html")
1
2
3

网页代码

{% 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/164905