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

1. 修改视图函数
2. 新建模板文件夹和html文件
3. 项目配置文件模板路径添加
4. 模板触类旁通
5. 模板引擎
- 5.1. 模板引擎探究
- 5.2. 增加基础页
- 5.3. 引入模板标签
- 5.4. 模板上下文context渲染
- 5.5. 模板标签语言的循环结构
- 5.6. 模板标签语言的条件判断
- 5.7. 模板标签语言的过滤器

1. 修改视图函数

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

def home_view(request, *args, **kwargs):         # *args, **kwargsprint(args, kwargs)print(request.user)# return HttpResponse("<h1>Hello World!</h1>")      # string of HTML codereturn 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, **kwargsprint(args, kwargs)print(request.user)# return HttpResponse("<h1>Hello World!</h1>")      # string of HTML codereturn 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>

这里展示了一层和多层判断结构，和模板标签过滤器add方法

先将pages\views.py的视图函数about_view传给前端的上下文my_context的键my_list注释掉，重启开发服务器：

正确的结果，

5.7. 模板标签语言的过滤器

可以带着关键词去搜索更全的过滤器，这里展示一下：
capfirst 首字母大写
{{ my_text | capfirst }}
upper 全大写
{{ my_text | upper}}

此处不作多展示