【Youtobe trydjango】Django2.2教程和React实战系列七【模板templates和Django模板引擎】

最新推荐文章于 2022-12-11 19:53:10 发布

disabled_csdN

最新推荐文章于 2022-12-11 19:53:10 发布

阅读量155

点赞数

分类专栏： # 3.2. django

0.0

本文链接：https://blog.csdn.net/qq_33997198/article/details/107632568

版权

3.2. django 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

【Youtobe trydjango】Django2.2教程和React实战系列七【模板templates和Django模板引擎】

1. 修改视图函数

pages/views.py
home_view函数的返回值改成render渲染html后的对象：

def home_view(request, *args, **kwargs):         # *args, **kwargs
    print(args, kwargs)
    print(request.user)
    # return HttpResponse("<h1>Hello World!</h1>")      # string of HTML code
    return render(request, "home.html", {})

2. 新建模板文件夹和html文件

templates文件夹与项目主文件夹trydjango和其他应用products和pages同级，并在里面新建主页模板文件home.html
templates\home.html

<h1>Hello World!</h1>
<p>This is a template!</p>

在这里插入图片描述

3. 项目配置文件模板路径添加

settings.py
我们先随便写一个字符串进去看一下错误的报什么错：

在这里插入图片描述
报错如下，从而得知拼接路径的规律：

因此应该拼接产生一个绝对的静态文件路径进去

'DIRS': [os.path.join(BASE_DIR, 'templates')],

在这里插入图片描述

效果
在这里插入图片描述

4. 模板触类旁通

将pages\views.py里面视图函数对应的模板全部复写一遍：

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.


def home_view(request, *args, **kwargs):         # *args, **kwargs
    print(args, kwargs)
    print(request.user)
    # return HttpResponse("<h1>Hello World!</h1>")      # string of HTML code
    return render(request, "home.html", {})


def contact_view(request, *args, **kwargs):
    print(args, kwargs)
    return render(request, "contact.html", {})


def about_view(request, *args, **kwargs):
    return render(request, "about.html", {})


def social_view(request, *args, **kwargs):
    return render(request, "social.html", {})

然后每个页面对应的模板都创出来：
在这里插入图片描述
保存重启开发服务器测试：

在这里插入图片描述

5. 模板引擎

5.1. 模板引擎探究

先来看下Django的模板引擎长什么样子：
templates\home.html

<h1>Hello World!</h1>
{{ request.user.is_authenticated }}
<p>This is a template!</p>

修改静态文件无需重启即可查看前端效果：
在这里插入图片描述
无痕页面：

5.2. 增加基础页

templates\base.html

<!doctype html>
<html>
<head>
    <title>Coding for learning Django and React</title>
</head>
<body>
    {% block content %}
        replace me
    {% endblock %}
</body>
</html>

templates\home.html
主页命名为content的block块中的内容将替换base.html页面的content块：

{% extends 'base.html' %}

{% block content %}
<h1>Hello World!</h1>
{{ request.user.is_authenticated }}
<p>This is a template!</p>
{% endblock %}

效果
在这里插入图片描述
如果about.html不复写这个content块(将content块注释掉)，则有如下效果：

{% extends 'base.html' %}

{% comment %} {% block content %} {% endcomment %}
<h1>Hello World!</h1>
<p>This is a About Page!</p>
{% comment %} {% endblock %} {% endcomment %}

在这里插入图片描述
同样，其他页面都一样引入base.html，并复写content块

5.3. 引入模板标签

首先创建一个templates\navbar.html

<nav>
    <ul>
        <li>Brand</li>
        <li>Contact</li>
        <li>About</li>
    </ul>
</nav>

然后在templates\base.html中引入
{% include 'navbar.html' %}
在这里插入图片描述

效果
在这里插入图片描述
这样如果需要对导航栏navbar作修改，只需要修改templates\navbar.html这一个地方

5.4. 模板上下文context渲染

templates\about.html

{% extends 'base.html' %}

{% block content %}
<h1>Hello World!</h1>
<p>This is a About Page!</p>

<p>
    {{ my_text }}, my age is {{ my_age }}, 
    {{ my_list }}
</p>

{% endblock %}

pages\views.py

def about_view(request, *args, **kwargs):
    my_context = {
        'my_text': "This is about me",
        'my_age': 23,
        'my_list': [177, 61, 23]
    }
    return render(request, "about.html", my_context)

效果
在这里插入图片描述

5.5. 模板标签语言的循环结构

templates\about.html添加如下代码：

<ul>
{% for my_sub_item in my_list %}
    <li>{{ forloop.counter }} - {{ my_sub_item }}</li>
{% endfor %}
</ul>

传过来的字典(json)是context，包含键my_list，因此，在前端可以直接取用，并用for循环将元素取到，还可以在循环体内部用{{ forloop.counter }}取到循环次数
在这里插入图片描述
效果

5.6. 模板标签语言的条件判断

templates\about.html

<ul>
{% if my_list %}
{% for my_sub_item in my_list reversed %}
    {% if my_sub_item == 61 %}
        <li>{{ forloop.counter }}. 我的体重是{{ my_sub_item | add:my_sub_item }}KG</li>
    {% elif my_sub_item == 177 %}
        <li>{{ forloop.counter }}. 我的身高是{{ my_sub_item }}CM</li>
    {% else %}
        <li>{{ forloop.counter }}. 我的腰围是{{ my_sub_item }}CM</li>
    {% endif %}
{% endfor %}
{% else %}
    暂无数据！
{% endif %}
</ul>