做为python web开发领域的一员,flask跟Django在很多地方用法以都是相似的,比如flask的模板

模板就是服务器端的页面,在模板中可以使用服务端的语法进行输出控制

1.模板的工作原理

在视图函数中,通过render_template方法返回一个页面,然后通过Jinja2语法来进行渲染

简单来说,就是把服务器端的html页面解释成用户看到的页面,而视图函数是通过上下文对象来进行变量的传递

在项目开发中,视图函数经常会把一些服务器处理完成的变量传递给前端页面进行渲染,

比如在下面的例子中,由render_template返回html页面时,携带一些变量数据给Jinja2语法进行渲染

from flask import Flask, render_template

app = Flask(__name__)
app.debug = True @app.route('/')
def hello_world():
return 'Hello World!' @app.route('/detail')
def detail():
message = {
'name':'jack',
'text':'杰克'
}
return render_template('detail.html',info=message) if __name__ == '__main__':
app.run(debug=True)

前端页面detail.html内容为:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>{{ info.name }}详细信息</h1>
<div>
我的名字叫:{{ info.text }}
</div>
</body>
</html>

启动项目,浏览器打开http://127.0.0.1:5000/detail页面,前端页面渲染后效果为:

那么此时,如果后台返回给前端的变量为一段html代码,返回给前端经过Jinja2语法渲染后,效果会是怎么样的呢??

2.Jinja2语法安全机制

修改message变量,然后由render_template返回

@app.route('/detail')
def detail():
message = {
'name':'jack',
'text':'<h2>杰克</h2>'
}
return render_template('detail.html',info=message)

前端页面不变,刷新浏览器,效果如下

可以看到,返回的变量中包含html代码,但是Jinja2语法并没有对这一小段代码进行渲染,而是直接显示了出来

实际上这是为了安全,因为如果后台返回的html代码中包含恶意的js代码,如果直接就渲染了,会造成站点被攻击。

那如果我就是想渲染后台返回给前端的HTML代码,那应该怎么办呢

在flask中,如果确认后台返回给前端进行渲染的变量中包含的HTML代码是安全的,则可以使用一些方法来对这段HTML代码也进行渲染

方法一:autoescape 关闭安全机制

这种方法与Django的模板语法相同

后台代码不变,修改前端detail.html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% autoescape false %}
<h1>{{ info.name }}详细信息</h1>
<div>
我的名字叫:{{ info.text }}
</div>
{% endautoescape %}
</body>
</html>

此时,再次刷新页面,查看效果

方法二,调用Jinja2的safe过滤器

如果觉得第一种方法有点麻烦,可以使用第二种方法

后台代码不变,同样修改detail.html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>{{ info.name }}详细信息</h1>
<div>
我的名字叫:{{ info.text | safe }}
</div>
</body>
</html>

此时,再次刷新页面,效果跟第一种方法一样

在flask中,Jinja2语法提供了很多过滤器,可以在下面的地址进行查找

http://jinja.pocoo.org/docs/dev/templates/

3.自定义过滤器

在写文章或博客的时候,很多时候都会用到Markdown语法

在flask的Jinja2语法中,并没有标准的Markdown语法过滤器,此时可以使用扩展来自定义Markdown语法过滤器

修改flask项目文件

from flask import Flask, render_template

app = Flask(__name__)
app.debug = True @app.route('/')
def hello_world():
return 'Hello World!' @app.route('/detail')
def detail():
message = {
'name':'jack',
'text':'<h2>杰克</h2>'
}
return render_template('detail.html',info=message,markdown='## Markdown编辑器<br>`注释`') @app.template_filter('md')
def markdown_html(txt):
from markdown import markdown
return markdown(txt) if __name__ == '__main__':
app.run(debug=True)

修改detail.html前端页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>{{ info.name }}详细信息</h1>
<div>
我的名字叫:{{ info.text | safe }}
{{ markdown | md | safe }}
</div>
</body>
</html>

刷新浏览器,查看效果

在实际开发中,后台向模板中传递的不只有变量和filter,还可能会向前端传递一个方法,此时可以使用flask的上下文来实现

修改flask项目文件

#-*- coding: utf-8 -*-

from flask import Flask, render_template

app = Flask(__name__)
app.debug = True @app.route('/')
def hello_world():
return 'Hello World!' def read_md(filename):
from functools import reduce
with open(filename,encoding='utf-8') as md_file:
content = reduce(lambda x,y:x + y, md_file.readlines())
return content @app.context_processor
def methods():
return dict(read_md=read_md) @app.route('/detail')
def detail():
message = {
'name':'jack',
'text':'<h2>杰克</h2>'
}
return render_template('detail.html',info=message,markdown='## Markdown') @app.template_filter('md')
def markdown_html(txt):
from markdown import markdown
return markdown(txt) if __name__ == '__main__':
app.run(debug=True)

如果想在Jinja2语法中调用后台定义的某个函数时,比如在这个例子中,前端页面中调用后台定义的read_md方法来处理某个Markdown格式的文件时,可以使用context_processor上下文处理器

在项目中应用了context_processor时,flask会把context_processor装饰的方法注册到Jinja2模板语法中来,这样就可以在Jinja2语法中调用后台的方法了

用context_processor装饰的后台方法可以在前端所有的Jinja2语法中调用

修改前端页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>{{ info.name }}详细信息</h1>
<div>
我的名字叫:{{ info.text | safe }}
{{ markdown | md | safe }}
{{ read_md('editor.md') |md| safe}}
</div>
</body>
</html>

刷新浏览器,查看效果

使用过滤器和context_processor配置一起使用时,可以很灵活的进行页面的渲染

flask模板的更多相关文章

  1. flask模板的基本用法(定界符、模板语法、渲染模板),模板辅助工具(上下文、全局对象、过滤器、测试器、模板环境对象)

    flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTM ...

  2. flask模板,路由,消息提示,异常处理

    1.flask的路由与反向路由 from flask import Flask, request, url_for app = Flask(__name__) @app.route('/') def ...

  3. Flask - 模板语言jinja2 和render_template高级用法

    目录 Flask - 模板语言jinja2 和render_template高级用法 一. 字典传递至前端 二. 列表传入前端Jinja2 模板的操作: 三. 大字典传入前端 Jinja2 模板 四. ...

  4. Flask模板渲染

    目录 Flask模板渲染 Jinja2模板引擎简介 模板 Jinja2 模板变量 变量 控制结构 宏,类似Python代码中的函数 模板继承 包含(Include) 过滤器 链式调用 常见内建过滤器 ...

  5. Flask模板注入

    Flask模板注入 Flask模板注入漏洞属于经典的SSTI(服务器模板注入漏洞). Flask案例 一个简单的Flask应用案例: from flask import Flask,render_te ...

  6. 实验2、Flask模板、表单、视图和重定向示例

    实验内容 1. 实验内容 表单功能与页面跳转功 能是Web应用程序的基础功能,学习并使用他们能够更好的完善应用程序的功能.Flask使用了名为Jinja2的模板引擎,该引擎根据用户的交互级别显示应用程 ...

  7. Flask 模板语言

    Flask使用的是Jinja2模板引擎 举个例子: from flask import Flask, render_template app = Flask(__name__) @app.route( ...

  8. Flask模板_学习笔记

    代码尽在我的github上面:https://github.com/521xueweihan 概述:    在Flask中,Jinja2默认配置如下:        A.扩展名为.html,.htm, ...

  9. ThinkPhp模板转Flask模板

    Template Converter 网上的PHP资源很多,项目要用Python,所以想起做一个模板转换器,从ThinkPhp转成Flask的Jinja模板. 直接指定两个目录,将目录下的模板文件转换 ...

随机推荐

  1. (三十一)PickerView自定义视图

    例如选择国家,左边是名称右边是国家,不应该使用两列,而是自定义PickerView的一列,可以通过xib来实现. 注意,虽然PickerView也是一列,但是数据源方法是@required,所以必须实 ...

  2. 更新Cocos2D支持Xcode 7

    原文链接(有节选简写) Apple已经释放出Xcode7,给我们带来了Swift2和每个平台的最新版本支持.Cocos2D却还在等待更新去兼容Apple的改变.不幸的是,SpriteBuilder还未 ...

  3. Git版本控制:Git分支处理

    http://blog.csdn.net/pipisorry/article/details/46958699分支的意义创建分支可以避免提交代码后对主分支的影响,同时也使你有了相对独立的开发环境. 假 ...

  4. 网站开发进阶(二十一)Angular项目信息错位显示问题解决

    Angular项目信息错位显示问题解决 绪 最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后,点击选择某一个订单,查询出的结果是上一次查询所得的结果.而且会出现点击两次才可以显示订单详 ...

  5. LIRe 源代码分析 7:算法类[以颜色布局为例]

    ===================================================== LIRe源代码分析系列文章列表: LIRe 源代码分析 1:整体结构 LIRe 源代码分析 ...

  6. Android监听电池状态

    监听电池状态只需要接收Intent.ACTION_BATTERY_CHANGED的广播即可,当电池状态发生变化时会发出广播. 1.运行状态如下图: (1)连接USB时的状态 (2)断开USB时的状态 ...

  7. Gibbs sampling

    In statistics and in statistical physics, Gibbs sampling or a Gibbs sampler is aMarkov chain Monte C ...

  8. ExtJS:Grid数据导出至excel实例

    导出函数ExportExcel() var config={ store: alldataStore, title: '测试标题' }; var tab=tabPanel.getActiveTab() ...

  9. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  10. Android高级控件(一)——ListView绑定CheckBox实现全选,增加和删除等功能

    Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 这个控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adap ...