Django大揭秘: DTL模板应用，前端技术大全

前言

欢迎来到我的博客

个人主页:北岭敲键盘的荒漠猫-优快云博客

本文主要整理Django项目中配置前端的内容

包括了DTL模板，动态前端渲染

简单渲染HTML文件

创建项目的时候会有一个templates文件夹

在这个文件夹中放上HTML文件。

我在其中放入了一个index.html的文件。

让前端页面显示的原理就是我们把HTML代码发给用户。

这里直接是最简单的方法。

利用render返回

#views文件中这么写，然后给urls文件设置一下路由即可

from django.shortcuts import render
# Create your views here.


def show_info(request):
    return render(request,"index.html")

效果图

DTL模板概念

HTML文件可以被浏览器渲染为我们观看的网站。

但是有个问题，我们要每个用户一个个人空间。

但是我们不可能每个用户给他们写一个HTML

这时候就可以用DTL模板，在某些地方使用变量，当他显示特定内容。

执行时，会被编译成真的独特的HTML文件。

模板路由配置

原因:

前端文件全部放到这个位置的话，是很杂乱的，我们想要在每个App中也能够存放前端文件的话就需要进行路由配置。

这里我们要在num文件夹中也进行路由配置，让这个index文件放到num中还能被识别。

进入settings文件中

有这样一串代码

这个是用来配置模板文件的。

BACKEND：引擎(DTL这类的引擎，可以使用别的引擎，默认是DTL)

DIRS：总的模板存放路径，就是我们默认的templates，改成别的就需要创建一个对应名称的文件夹。

APP_DIRS: 是否启动模板路由配置，默认启用，只有启用状态才能进行分模块存放前端文件。

我们在numAPP中也创建一个templates，并且放入HTML文件。

然后我们需要安装App才能使用

在settings中找安装列表

在里面添加上App名称

这样App首先会查找自己的模板，如果没有再去总的查找

模板重名问题

如果都做到了遇到了不可预见的模板重名，导致的访问混乱问题。

那么可以在存放HTML的文件夹中再添加一个跟自己App名一样，或者相应规律的文件夹。

最后把文件放到里面。这样调用的时候就需要添加用 文件夹/文件 的格式，就能避免混乱。

模板变量渲染

作用:直接让DTL模板中显示我们python中规定的变量。

这里可以用两个{}来定义变量

括号中写变量名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到漠猫实验基地</title>
</head>
<body>
    <p style="background-color: chocolate">这里是漠猫做实验的地方</p>
    <p>这里将会显示变量内容:{{ value }}</p>
</body>
</html>

之后render中有个context，传递字典进去，key是HTML中的变量名，然后后面是内容

from django.shortcuts import render
# Create your views here.


def show_info(request):
    info='我的发哈哈哈'
    return render(request,"index.html",context={'value':info})

这样就能显示内容了

如果我们传入的是字典。

from django.shortcuts import render
# Create your views here.


def show_info(request):
    info={'内容':'是我！'}
    return render(request,"index.html",context={'value':info})

我们不能在HTML中使用python中的info['内容']来提取

而是全部改成.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到漠猫实验基地</title>
</head>
<body>
    <p style="background-color: chocolate">这里是漠猫做实验的地方</p>
    <p>这里将会显示变量内容:{{ value.内容 }}</p>
</body>
</html>

效果如下:

模版逻辑标签

选择标签

if标签

逻辑标签必须用{% %}来包裹

并且要用endif结束

语法跟python的基本一样

    {% if age >= 18 %}
        <p>您已满十八岁，无时间限制</p>
    {% else %}
        <p>您未满十八岁，仅能游玩1小时</p>
    {% endif %}

他就会根据逻辑选择性的返回标签。

循环标签

for标签

正向遍历:

用法基本都跟python一样，可以遍历列表。

    {% for game in games %}
        <p>{{ game }}</p>
    {% endfor %}

可以循环打印出列表中的内容。

倒序遍历:

    {% for game in games reversed%}
        <p>{{ game }}</p>
    {% endfor %}

(顾名思义)，他会倒序从列表显示内容。

也就是先显示列表最后一个元素。

字典遍历:

这里不能用[] 和 ()，所以得用.items

{% for key,value in games.items %}
    <p>{{ key }}</p>
    <p>{{ value }}</p>
{% endfor %}

在 for 循环中， DTL 提供了一些变量可供使用。这些变量如下：
forloop.counter ：当前循环的下标。以1作为起始值。
forloop.counter0 ：当前循环的下标。以0作为起始值。
forloop.revcounter ：当前循环的反向下标值。比如列表有5个元素，那么第一次遍历这个
属性是等于5，第二次是4，以此类推。并且是以1作为最后一个元素的下标。
forloop.revcounter0 ：类似于 forloop.revcounter 。不同的是最后一个元素的下标是从
0开始。
forloop.first ：是否是第一次遍历。
forloop.last ：是否是最后一次遍历。
forloop.parentloop ：如果有多个循环嵌套，那么这个属性代表的是上一级的for循环

没有break和continue关键字！！！！！

with标签

作用:变量的定义与赋值

#views文件
context = {
"games": ["赛博朋克","西部大镖客"]
}


#html文件
{% with game=games.1 %}
    <p>{{ game }}</p>
{% endwith %}

在 with 语句中定义的变量，只能在 {%with%}{%endwith%} 中使用，不能在这个标签外面使
用。
定义变量的时候，不能在等号左右两边留有空格。比如 {% with game = games.1%} 是错
误的。
还有另外一种写法同样也是支持的：

{% with games.1 as game %}
    <p>{{ lisi }}</p>
{% endwith %}

URL标签

作用:

我们的URL都是自己配置路由的，当他要进行跳转的时候，我们可以硬性的写上跳转的本地地址。

但是如果我们更改了URL路由的话，所有的HTML都需要再次更改。

为了解决这个问题可以利用URL路由反转来实现。

# path部分

这里使用了name进行名称配置
path('detail/<book_id>/',views.book_detail,name='detail')

#ul反转, 普通调用

<a href="{% url 'App名称:视图名称' %}">图书列表页面</a>
# url反转，使用位置参数
<a href="{% url 'book:detail' 1 %}">图书详情页面</a>
# url反转，使用关键字参数
<a href="{% url 'book:detail' book_id=1 %}">图书详情页面</a>

#既有关键字又有get

<a href="{% url 'book:detail' book_id=1 %}?page=1">图书详情页面</a>

#多个get

<a href="{% url 'book:detail' book_id=1 page=2 %}">图书详情页面</a>

spaceless 标签

spaceless标签的主要作用是移除 HTML 标签之间的空白字符，包括空格、制表符和换行符等123。例如：

{% spaceless %}
    <p>
        <a href="foo/">Foo</a>
    </p>
{% endspaceless %}

主要用于优化代码，可以减小文件大小。

autoescape 标签

可以规定是否转义。

默认是自动转义的，如果不转义对方输入前端代码即可对网站实施攻击。

但有时候如果有功能需要这个，就得关闭。

# 传递的上下文信息
context = {
"info":"<a href='www.baidu.com'>百度</a>"
}
# 模板中关闭自动转义
{% autoescape off %}
{{ info }}
{% endautoescape %}

官方文档:Built-in template tags and filters | Django documentation | Django

模板过滤器

简而言之就是等价于python中给变量操作的函数。

使用参考这个形式:

{{ value|add:"2" }}

{{变量|过滤器:参数}}

太多了，我太懒了，直接给官方网站这部分内容的锚点吧。

Built-in template tags and filters | Django documentation | Django

模板结构

概念解释:

作用就类似python分模块编写程序一样。可以实现一个完整的页面分开多个文件编写。文件可以重复利用。

include结构

对标php，c的include。

能把HTML中的代码原封不动的导入到指定位置。

使用模板
{% include 'html文件' %}

案例演示:

架构如下

Head.html中有这个代码

index中是这个,这里利用include包含了Head的代码

所以就等于对应位置有了这个代码。

所以查看效果

这里就有了导航栏。

模板继承

直接理解起来就是主HTML中写一个模板，然后某些地方定义一个block 接口。

案例演示:

我们定义一个父模板:

#father.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {% block head %}{% endblock %}
    <p>备案于xxx</p>
</body>
</html>

这里设置了一个head的接口

然后我们创建一个使用文件。

{% extends 'Appnum/father.html' %}

{% block head %}
	<div style="background-color: dimgrey;text-align: center;">
    <p style="background-color: aliceblue">这个是导航栏</p>
    </div>
{% endblock %}

这里extend了指定的父文件，然后我们在head部分添加了指定内容。

所以能够看到

他用了模板，指定位置存在我们继承后添加的代码

模板静态文件加载

前提配置:

django.contrib.staticfiles 已经添加到 settings.INSTALLED_APPS 中(默认添加)

setting文件中设置有(默认添加)

STATIC_URL = 'static/'

setting中添加这个(默认未添加)
STATICFILES_DIRS = [
    BASE_DIR / "static"
]
这里的static可以换成想要存放静态文件的文件夹名称

案例演示:

我们配置了上述内容，下面创建好static的文件夹

css与js里的内容如下:

#css
body {
    background-color: burlywood;
}

#js
alert("xssssssss");

我们在HTML中需要用load导入静态文件。

{% load static %}导入静态文件

{% static "numAppStatic/css/index.css" %} 导入静态css

{% static "numAppStatic/js/index.js" %} 导入静态js

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{% static "numAppStatic/css/index.css" %}">
    <script src="{% static "numAppStatic/js/index.js" %}"></script>
</head>
<body>

</body>
</html>

效果图:

省略{% load static %}的方法:

如果每个文件调用静态文件都添加load的话可能会累，所以可以在setting文件的下面代码中添加红色代码，就可以不用每次都写一个load了

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates']
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        'builtins':['django.templatetags.static']
        },
    },
]

文件区分

我们页面很多时候不只返回我们服务器的文件，有时候我们还要返回用户上传的文件，比如头像图片之类的。这些文件显然是不可以跟我们静态文件混在一起的。这时候需要进行区分一下。

案例演示:

创建一个media的文件夹

在总urls文件夹中添加红色字体

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('num/',include("num.urls")),
    path('exper/',include("exper.urls"))
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

在setting文件中添加下面代码(代表了媒体文件存放路径与URL路径)