Flask 入门系列教程02-模板

上一章介绍了

如何使用Flask 写一个最简单的web应用hello world

，也使用了模板的功能做base.html。下面我们详细介绍Flask 的模板。

Flask的模板是是一个包含响应文本的文件(通常是 HTML)。它包含很多占位变量，等收到具体的请求后，通过上下文才能解析出具体的值，模板中最主要的是前端技术，HTLM、CSS、JS 等。而解析这个模板变量的就是模板引擎，Flask的模板引擎是Jinja2，它将表现逻辑封装，使得业务逻辑和表现逻辑分离。

模板调用

Jinja2模板引擎把模板的调用集成到render_template方法中，在python代码中可以直接调用。例如：

return render_template('schedule_list.html',schedules=schedules)

该方法第一个参数是模板的文件名（index.html，user.html），随后的参数都是键值对（name=name），表示模板中变量的真实值。在html文件中可以对这个键值对做处理进行占位展示。

模板语法

模板文件包含很多的占位符，这些占位符有普通内容，变量，表达式，标签和注释等。

普通内容就是没有占位符的内容，模板对其不做解释。

变量，表达式就是{{}}之间的内容，在渲染模板时会解析成对应的值。支持普通变量，列表、字典和对象，例如：

{}

{{ mydict['key'] }}

{{ mylist[3] }}

{{ mylist[myintvar] }}

{{ myobj.somemethod() }}

逻辑标签就是{%%}之间的内容，类似其他语言的if，else，for等语句，渲染时根据表达式的结果进行渲染。例如：

{% if var %}***{% endif %}

{% for var in vars %}****{% endfor %}

注释是{##}之间的内容，渲染时不做输出。

模板变量的内置过滤器

过滤器用来修改变量，使用一个竖线和变量相隔，在实际开发中经常需要过滤器来修饰一个变量。常用的内置过滤器：

safe 渲染时不转义

capitalize 首字母大写

lower 小写

upper 大写

title 每个单词的首字母都转换成大写

trim 去掉首尾空格

striptags 去掉值里的HTML标签

default 设置一个默认值，如果变量未定义，就用这个默认值替换

更多内置过滤器见http://jinja.pocoo.org/docs/dev/templates/#builtin-filters

模板继承

类似于函数，需要多次在文件中使用的代码片段可以写入单独的文件，避免重复。例如上一章中的base.html，包含了导航条，页脚，flask消息，js和css文件等，又方式了一个空块来放置其他子模板的内容。

其他模板文件使用{% extends "base.html" %}来继承这个模板，再把模板自己的内容放置在page_content块中。

Jinja2模板还定义了一些其他的块，可以直接使用。如下：

完善上一章的例子

这次在上一章的例子中，我们建立了一个简单的hello world应用。

从这章开始，我们把它改造成一个简单的行程备忘录，可以查看每天的行程，也可以编辑和删除。

1、首先，修改python 接口，使返回行程列表页面，并传递具体行程的列表类型变量：

2、然后从模板中获取行程对象，并填充到table中。为了方便表格的操作，这里使用dataTables插件进行表格样式展示。这里就涉及到{%if%}，{%for%}的使用。核心的代码如下：

页面展示如下：

3、点击新建/编辑图标会进入编辑页面

进入编辑页面后，判断从前端传入的对象是否存在，存在则显示对象的值，不存在则显示为空。

对应的模板中核心代码如下：

点击保存时，会获取页面输入的值，通过ajax调用后台的方法，核心代码如下：

4、点击删除会删除该行。

删除时调用api方法，删除一行记录，并刷新页面

编辑页面展示如下：

结尾

本章主要介绍了使用模板方面的构建web页面，里面的数据都是在代码中定义好的，下一章我们继续介绍使用数据库插件Sqlchemary来存储数据，使用真实的数据进行操作。

Qtest是360旗下的专业测试团队！

是WEB平台部测试技术平台化、效率化的先锋力量！