Django快速入门笔记（5）——模板（html）二三事

Loss Dragon

脾气很不好的喵喵喵

写在前面：满打满算，使用Django两个月了。为了赶项目，更多的功能没有时间研究，多少有点小沮丧。编程2年，前端基础0，最近在写一大堆html，一些入门级的小技巧还是可以和大家一起学习和分享的。

我尽量用最简单的示例，把功能展现出来。示例里出现的Python语句，仅仅是可以实现其功能，如有更简洁的代码，跪求指出！！

在学习本章之前，默认大家对 html 文件有了一些最基本的认识。（什么！！你还不知道？手动鼠标右键单击，查看网页源代码）

上图简单展示了Django 模板获取数据的信息流程。

在最初设置的时候，我们已经将所有的模板文件（html）保存在了templates文件夹里，并按照不同的app下设了单独的文件夹。

（如果你的文件结构还不是这样的，可以参考 Django 快速入门笔记（1））

本篇文章主要对Django自带的 templates 模板语言做一些简单的介绍。正式内容之前，给大家的建议是，能在后端解决的数据处理，尽量不要放在前端！！ 有些内容在前面的文章中可能已经提及，这里将它们汇总在一起，方便大家学习和交流。

参考资料： The Django template language（官网）

一、变量

1. 变量传递

{{ various }}  //变量

Django模板中约定用 {{ }} 来传递一个变量。

例如，在views.py中，

def index1(request):
    ans={}  # 创建字典
    ans['jian']='hello world'
    return render(request,'app001/firstpage.html',ans)

我们定义了一个字典 ans，创建了一个 键 'jian' ，对应值 'hello world'。并用 render 方法，将整个字典 ans 输出给 firstpage.html

当我们想在firstpage.html中显示 'hello world' 时，只需要使用 {{ 键 }} ，就可以了

{{ jian }}

2.变量赋值

可以结合 javascript 重新定义变量。

<script>
    var data={{ various }}
</script>

这样简单的赋值，可以将 various 的值传递给新定义的变量 data

3.变量过滤器 filters

我们可以利用过滤器，对获取到的数据进行二次加工。

{{ various|length }}

例如，我们利用Django自带的 "length" 过滤器计算变量的长度。如果 various 为列表 [0,1,2]，则返回列表长度3

除此之外，Django自带的过滤器还包括，

{{ various|default:"1234" }}  // 变量错误或为空时，返回规定的值"1234"

{{ various|add:"2" }}   // 如果变量值为4，返回6

更多的自带过滤器可以查询 templates-builtins-filters （官网）

你也可以自定义过滤器（相当于写一个函数）来满足特定的需求，这里就不展开。

建议，能在后端完成的处理过程，尽量放在后端。 如，同样是计算变量长度，可以直接利用查询集QuerySet的 len() 方法来完成。

更多对查询集方法的介绍 querysets（官网）

二、逻辑

Django自带的Tags已经为我们提供了基本的逻辑语言，if，for 等等，用 {% %} 表示调用。

基本的格式是 {% tag %} ... contents ... {% endtag %}

1. if……else if ……else 条件判断

{% if condition1 %}
    expression1
{% elif condition2 %}
    expression2
{% else %}
    expression3
{% endif %}

2. for 循环

{% for items in list1 %}
     expression
{% endfor %}

三、杂七杂八的tags

1、动态url

格式形如 {% url 'url_name' %}

举例，

<a href="{% url 'welcome' %}">首页</a>

这里，我们将超链接地址指定到 name 为 'welcome' 的 url 上。

在url.py文件中

urlpatterns =[
    url(r'^$',views.test1,name='welcome')]  # name定义为welcome

这样写的好处是，html 和 url_name 绑定，url的地址以及对应的 views 可以任意修改。

2、引入头文件 static

js，css类的文件，我们统一保存在了static文件夹中，如果想要在头文件中引入。

首先应该 {% load static %}

<head>
    {% load static %}
    <!--css文件-->
    <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
    <!--js文件-->
    <script src="{% static 'bootstrap.min.js' %}"></script>
</head>

上面例子以bootstrap为例，首先引入css类文件，再引入js文件。

引入格式， {% static 'bootstrap.min.css' %}，引号'' 中为引入文件在static文件夹中路径。

如果，bootstrap.min.css 文件保存在了“static/app001/bootstrap.min.css”位置，则引入格式为{% static 'app001\bootstrap.min.css' %}

3、跨站点保护请求

使用格式， {% csrf_token %}，配合 post 使用

<form action="/app001" method="post">
 {% csrf_token %}
  <p>姓名：<input type="text" name="name1"></p>
  <input type="submit" value="确定">
</form>

四、模板继承

1、block

一个多功能网站一般会有统一的风格，例如统一的导航栏，相似的页面布局等等，这些在html文件中都是重复的代码，会造成代码冗长。我们无须在每一个html中重复编写这些代码，只需将统一的部分提出来，单独遍写出一个base模板，在需要套用模板的html中调用这个base就可以了。

首先在base.html中编写固定不变的部分， 将变动的部分用以下代码代替，

{% block XX %}{% endblock %}

或者

{% block XX %}中间的部分是可以替换的，也可以设定默认值{% endblock %}

例如，每个页面的 title 是变动的，在编写模板base.html的时候，

<title>{% block title %}默认{% endblock %}</title>

这段代码表示，ttitle是可以变化的，在没有指定的情况下，title为默认。

接下来，我们在app001.html中调用这个base.html

{% extends "base.html" %}  
{% block title %}首页{% endblock %}

首先用extends引入我们需要用到的模板，引号“”中为模板在templates文件夹下的地址，如果我们将base.html保存在了“templates/app001/base.html”中时，{% extends "app001/base.html" %}

接下来，替换模板中的block title，这里是将“默认”，替换成了“首页”。

通过模板的这种继承方式，我们可以省去许多冗长重复的代码部分，特别是需要统一修改网站的风格布局，或者导航栏的时候，只需要修改base文件，那么引入了base模板的所有网页都修改完成了，无须一个一个更改。

2、include

另外，我们可以使用include, 将每一个网页的小功能打包成html ，然后include该html

{% include "app001/tets1.html" %}

这里表示，将test1.html 文件包含进来。

使用include的好处是，可以方便得更改网站布局。由于每个小功能的代码都被分开打包了，我们在重新排版的时候，只需要在适当的地方include每个功能就好， 而不需要将大段大段的代码剪切下来再粘贴到新的地方。

这里，贴一个示例，给大家感受一下，block 和 include 结合使用后，html 的整洁程度

{% extends "firstpage/base.html" %}  <!--引入base模板-->
{% block title %}示例{% endblock %}  <!--替换 title 部分-->
{% block content %}  <!--替换 content 部分-->