Django学习Day4——模版的使用（一）

Django中模版的使用

前面的两篇博客介绍了Django中的视图和路由，接下来介绍Django中模版（Template）的使用方法。

模版的基础知识

模版是Django的MVT模式中一个重要的模块，主要是用于前端的渲染部分，模版可以动态生成html网页，它包括部分html代码和一些特殊的语法。下面通过简单的代码展示模版的用法。

首先我们创建本次学习的项目three，以及该项目下的应用app，下面的介绍基于已创建的项目进行说明。

模版的配置

（1）一般模版存放在"templates"目录下，其中"templates"位于项目的根目录下，如下图所示：

（2）在项目的配置文件中设置模版的路径（three/settings.py文件中）

模版和视图的绑定

在视图函数中，通过Django中自带的render方法将模版和视图函数进行绑定：即视图函数中将数据传到模版中，然后模版进行前台的渲染和展示。实现过程如下：

（1）在templates目录下，创建html文件。

（2）视图函数中进行模版和视图的绑定（app/views.py文件）

（3）路由和视图函数的绑定

（4）启动服务，浏览器中进行查看

模版展示渲染的数据

上面的示例展示了视图函数和一个静态的HTML页面的绑定，在实际开发过程中，我们的HTML页面是动态的，会根据用户的请求进行对应的生成，即数据的展示。这里介绍如何在视图函数中，将数据传入到模版文件。其实，传入数据十分简单，在之前的示例中主要进行两方面的改动。

（1）修改模版（HTML文件）

         在html中变量以双大括号（{{}}）为标示，在双大括号中传入视图中传入的数据，我们修改后的index.html文件如下：

（2）在视图函数中进行数据的传入

         正如上面的示例中所述，render方法中的第三个参数即传入的数据，是字典的形式，因此我们修改代码如下：

（3）启动服务，浏览器中进行访问：

模版内置标签和静态文件配置

内置标签

上面的部分我们有提到模版的变量，是通过{{}}进行表示的，比如{{name}}，之后在视图函数中就可以将数据传入到模版。此外，在Django模版中也存在内置标签，内置标签的表示方式是：{% %}，下面介绍一些常见的内置标签：

标签	介绍
{%  for  %} {%  endfor  %}	遍历输出的内容
{%  if %} {%  elif %} {%  endif  %}	对变量进行条件判断
{%  url url_name args %}	引用路由配置名
{%  load %}                 {% load static %}	加载django的标签库
{% static static_path %}	读取静态资源
{% extends base_template %}	模版继承
{% block data %} {% endblock %}	重写父模版的代码
{% csrf_token %}	跨域的秘钥

以及在for内置标签中，一些可能会用到的变量如下：

变量	介绍
forloop.counter	从1开始计算获取当前索引
forloop.counter0	从0开始计算获取当前索引
forloop.revcounter	索引从最大数递减到1
forloop.revcounter0	索引从最大数递减到0
forloop.first	当前元素是否为第一个
forloop.last	当前元素是否为最后一个
empty	为空的情况

下面结合具体的代码，展示每个内置标签是如何使用的：

（1）{% for %} {% endfor %}以及{% if %} {% elif %} {% endif %}的使用方式如下：（在index.html文件中实现）

在视图函数中，我们传入的数据如下：

启动服务，在浏览器中进行访问，得到如下显示：

如果我们修改传入的数据，将data['array'] = []进行这样的设置，会激活模版中empty的判断条件，再次访问如下：

（2）{% url url_name args %}的使用如下：

在之前介绍路由和视图的时候，我们有提到过，可以给路由一个别名，如下图所示：

在模版中，我们就可以根据路由的别名进行使用。这里为了演示根据路由别名调用路由时候的传参过程，需要对之前的视图函数进行一定的修改，传参的方式需要改写为通过/分隔符进行，通过？传参的方式不能成功。

视图函数修改如下：

应用内的路由文件修改如下（app/urls.py）：

之后，在模版文件（index.html）中，就可以通过路由的别名进行调用，并且传递参数：

启动服务，在浏览器中进行访问如下：

点击return可以进行跳转，跳转得到的URL如下图所示：

（3）{% extends base_template %}和{% block data %} {% endblock %}的用法：

这一内置标签主要实现的功能是：继承父模版，并且在子模版中可以通过{% block data %} {% endblock %}对父模版对应的内容进行重写。

例如我们创建两个模版文件：base.html 和 extends.html。

base.html文件的内容如下：

在base.html文件中，我们通过{% block data %} {% endblock %}定义了父模版中可以重写的部分，比如title, css_style等。

在子模版extends.html文件中，我们可以使用如下的方式进行继承：

启动服务，进行访问可以得到：

可以看到，在子模版中继承了来自父模版的内容，包括标题，正文的内容等等。我们可以在子模版中对对应的部分进行重写，得到子模版自己独有的展示界面。修改extends.html文件如下：

（4）{% csrf_token %}内置标签的使用在表单提交的部分再进行具体的介绍

（5）{% static static_path %}在下面静态文件部分进行介绍

 

静态文件配置

模版中的静态文件主要是指CSS样式文件、Javascript文件、图片文件等，在Django框架中，使用静态文件需要进行如下的配置：

（1）在项目的根目录下创建"static"目录，与"templates"同级。

（2）在项目的配置文件中设置静态文件的路径（three/settings.py）。

（3）通过{% load static %}和{% static static_path %}就可以在模版文件中引用静态文件

此时，启动服务，在浏览器中进行访问，可以看到我们成功加载了css样式文件：

 

参考资料

https://coding.imooc.com/class/393.html