前面的两篇博客介绍了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