前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >Flask学习笔记之模板(一)

Flask学习笔记之模板(一)

作者头像
罗罗攀
发布2018-11-21 18:07:31
发布2018-11-21 18:07:31
44500
代码可运行
举报
运行总次数:0
代码可运行

大纲

之前的视图函数返回的都是字符串,这样是很不利于网站建设,大家都知道,我们都网页构造三大元素(html,css,js),那这些数据如何通过视图函数返回了?答案就是templates文件。

  • 模板基本使用
  • 变量
  • 过滤器

基本使用

这里,首先我们在templates文件夹下,创建一个html文件。

代码语言:javascript
代码运行次数:0
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>罗罗攀</title>
</head>
<body>
    <h1>Hello</h1>
    <p>这个是模板基本使用</p>
</body>
</html>

然后通过视图函数进行映射:

代码语言:javascript
代码运行次数:0
复制
from flask import Flask,render_template

app = Flask(__name__)


@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/index/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

这样我们就完成了一个渲染模板的功能。

变量

当然,我们也可以传入变量到模板中,讲上面的代码进行简单修改:

代码语言:javascript
代码运行次数:0
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>罗罗攀</title>
</head>
<body>
    <h1>Hello {{ name }}</h1>
    <p>这个是模板基本使用</p>
</body>
</html>
代码语言:javascript
代码运行次数:0
复制
@app.route('/index/')
def index():
    return render_template('index.html',name='罗罗攀')

当然,除了基本变量外,列表,字典等数据类型都是可以传入的。我们也可以在模板中定义变量:

代码语言:javascript
代码运行次数:0
复制
{% set username = 'luopan' %}  #全局变量
{% with username = 'luopan'  %}
        在里面用
{% endwith %}

过滤器

过滤器其实就是对变量的修改,具体的变量过滤器可以去Jinja2文档查看,这里简单介绍下safe,这个的作用为渲染是不转义。这里我们再传入一个变量,为<h1>world</h1>,默认情况会对h1标签转义,然后把h1当做字符串,如图。

代码语言:javascript
代码运行次数:0
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>罗罗攀</title>
</head>
<body>
    <h1>Hello {{ name }}</h1>
    {{ test }}
    <p>这个是模板基本使用</p>
</body>
</html>

我们加上safe过滤器,就会当做为h1标签。

代码语言:javascript
代码运行次数:0
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>罗罗攀</title>
</head>
<body>
    <h1>Hello {{ name }}</h1>
    {{ test|safe }}
    <p>这个是模板基本使用</p>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.11.20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 大纲
  • 基本使用
  • 变量
  • 过滤器
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档