flask模板

简介: 做为python web开发领域的一员,flask跟Django在很多地方用法以都是相似的,比如flask的模板模板就是服务器端的页面,在模板中可以使用服务端的语法进行输出控制1.模板的工作原理在视图函数中,通过render_template方法返回一个页面,然后通过Jinja2语法来进行渲染...

做为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页面,前端页面渲染后效果为:

img_bc2810cbedcbf89c781f052ebc3b1195.png

那么此时,如果后台返回给前端的变量为一段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)

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

img_a8fd45a297cabbe745dd8ec98826fa4a.png

可以看到,返回的变量中包含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>

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

img_ad84d3f9749c351ad08c5a661d47c186.png

方法二,调用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>

刷新浏览器,查看效果

img_f7c13e625848d1f56e0d1c4c713ba757.png

在实际开发中,后台向模板中传递的不只有变量和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>

刷新浏览器,查看效果

img_314bba5554a68422ba3c83eb9e47dffa.png

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

目录
相关文章
|
9天前
|
Python
Flask中的模板的使用
Flask中的模板的使用
12 0
|
4月前
|
存储 移动开发 前端开发
Flask狼书笔记 | 03_模板
3 模板 模板(template):包含固定内容和动态部分的可重用文件。Jinja2模板引擎可用于任何纯文本文件。 3.1 模板基本使用
31 0
|
4月前
|
开发框架 Python
Web 框架 Flask 快速入门(一)flask基础与模板
🌴 Flask基础和模板 1、web框架的作用 避免重复造轮子,app程序不必关心于服务器的沟通方式,而专注于核心的业务逻辑实现。 稳定,可扩展性强
43 0
|
5月前
|
JavaScript 前端开发 知识图谱
flask-模板用法
flask-模板用法
28 0
|
8月前
|
数据可视化 定位技术 Python
可视化 | 分享一套Flask+Pyecharts可视化模板
可视化 | 分享一套Flask+Pyecharts可视化模板
|
9月前
|
前端开发 JavaScript Python
Flask之jinja2模板(三)
Flask之jinja2模板(三)
|
9月前
|
索引 Python
Flask之jinja2模板(二)
Flask之jinja2模板(二)
|
9月前
|
前端开发 JavaScript 数据处理
Flask之jinja2模板(一)
Flask之jinja2模板(一)
|
前端开发 JavaScript Python
Flask热更新html模板文件和静态文件
Flask热更新html模板文件和静态文件
173 0
|
前端开发 JavaScript Python
Flask学习与项目实战3:简单入手模板及高阶使用
声明:本学习系列笔记是来源B站 知了传课 up主的教学视频的个人学习笔记,原up主教学视频地址:https://www.bilibili.com/video/BV17r4y1y7jJ?p=10。
Flask学习与项目实战3:简单入手模板及高阶使用