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平台部测试技术平台化、效率化的先锋力量!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180817B1MX1500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券