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

陆伯言0

已于 2023-03-07 15:33:43 修改

阅读量6.7k

点赞数 29

分类专栏：前端+后端文章标签：数据分析 html 前端 django python

于 2022-06-22 16:26:26 首次发布

本文链接：https://blog.csdn.net/qq_53500716/article/details/125403586

版权

一直潜心学习后端知识的我，在得到学校最后的可视化项目竟然是用前端做可视化网页（大学期间没有一门课是教前端相关知识），于是不得暂时放弃期末复习而去学习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' %}">

最低0.47元/天解锁文章