zoukankan      html  css  js  c++  java
  • 03-jinja2模板引擎

    Flask内置的模板语言,它的设计思想来源于 Django 的模板引擎,并扩展了其语法和一系列强大的功能。

    渲染模版函数

    • Flask提供的 render_template 函数封装了该模板引擎

    • render_template 函数的第一个参数是模板的文件名,后面的参数都是键值对,表示模板中变量对应的真实值。

    一、模板引擎的基本使用

    1、加载模板并传递数据到模板中

    from flask import Flask,render_template
    
    app = Flask(__name__,template_folder="templates")
    
    @app.route("/")
    def index():
        data = {}
        data["title"] = "我的第一个flask网页"
        data["num"] = 100
        return render_template( "index1.html", **data )
    
    if __name__ == '__main__':
        app.run(debug=True)

    template_folder指定模板在哪个位置

    新建一个templates文件夹

    index.html为

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>{{title}}</h1>
        <p>num={{num}}</p>
    </body>
    </html>

    2、模板语句

    from flask import Flask,render_template
    
    app = Flask(__name__,template_folder="templates")
    
    @app.route("/")
    def index():
        data = {}
        data["info"] = {
            "name":"xiaoming",
            "age":19,
            "sex":True,
            "class": "1009"
        }
        data["student_list"] = ["xiaoming","xiaobai","xiaohei","xiaoan"]
    
        data["goods_list"] = [
            {"id":10,"name":"Python7天入门到放弃","price":99.9,"num":100},
            {"id":11,"name":"Python3天入门到放弃","price":99.9,"num":100},
            {"id":12,"name":"Python5天入门到放弃","price":99.9,"num":100},
            {"id":13,"name":"Go7天入门到放弃","price":99.9,"num":100},
            {"id":14,"name":"Go5天入门到放弃","price":99.9,"num":100},
            {"id":15,"name":"Linux7天入门到放弃","price":99.9,"num":100},
        ]
    
        return render_template( "index2.html", **data )
    
    if __name__ == '__main__':
        app.run(debug=True)

    index2.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p>访问字典数据中的成员</p>
        <p>{{ info["name"] }}</p>
        <p>{{ info.name }}</p>
    
        <p>访问列表数中的成员,点语法不支持负数下标</p>
        <p>{{ student_list.0 }}</p>
        <p>{{ student_list.2 }}</p>
        <p>{{ student_list[-1] }}</p>
        <p>{{ student_list[2] }}</p>
    
        <p>if判断</p>
        {% if info.age < 18 %}
            <p>小明请出去</p>
        {% endif %}
    
        {% if info.age > 10 %}
            <p>小明同学</p>
        {% else %}
            <p>小明小朋友</p>
        {% endif %}
    
        {% if info.age < 10 %}
            <p>小明小朋友</p>
        {% elif info.age < 18 %}
            <p>小明同学</p>
        {% else %}
            <p>大明同学</p>
        {% endif %}
    
        <p>for循环</p>
    
        <ul>
            {% for student in student_list %}
                {% if loop.last %}
                <li style="background-color:#000;color:#fff;">{{ student }}</li>
                {% else %}
                <li>{{ student }}</li>
                {% endif %}
            {% endfor %}
        </ul>
    
        <table border="1" align="center" width="680px">
            <tr>
                <td>序号</td>
                <td>ID</td>
                <td>名称</td>
                <td>价格</td>
                <td>库存</td>
            </tr>
            {# flask的注释 #}
            {# loop 是jinja模板引擎提供给开发者获取循环中的信息对象 #}
            {# loop.index  显示本次循环的次数,从1开始 #}
            {# loop.index0 显示本次循环的次数,从0开始 #}
            {# loop.first  显示本次是否属于循环的第一次,是则为真 #}
            {% for goods in goods_list %}
                {% if loop.index % 2 %}
                <tr bgcolor="#00bfff">
                {% else %}
                <tr>
                {% endif %}
                    <td>{{ loop.index0 }}</td>
                    <td>{{ goods.id }}</td>
                    <td>{{ goods.name }}</td>
                    <td>{{ goods.price }}</td>
                    <td>{{ goods.num }}</td>
                </tr>
            {% endfor %}
        </table>
    
    </body>
    </html>

    3、模板中显示内置变量或函数

    你可以在自己的模板中访问一些 Flask 默认内置的函数和对象

    config

    你可以从模板中直接访问Flask当前的config对象:

    {{config.SQLALCHEMY_DATABASE_URI}}
    sqlite:///database.db

    request

    就是flask中代表当前请求的request对象:

    {{request.url}}
    http://127.0.0.1

    session

    为Flask的session对象,显示session数据

    {{session.new}}
    True

    g变量

    在视图函数中设置g变量的 name 属性的值,然后在模板中直接可以取出

    {{ g.name }}

    url_for()

    url_for会根据传入的路由器函数名,返回该路由对应的URL,在模板中始终使用url_for()就可以安全的修改路由绑定的URL,则不比担心模板中渲染出错的链接:

    {{url_for('home')}}

    如果我们定义的路由URL是带有参数的,则可以把它们作为关键字参数传入url_for(),Flask会把他们填充进最终生成的URL中:

    {{ url_for('index', post_id=1)}}
    /1

    代码:

    from flask import Flask, render_template
    # 初始化
    app = Flask(import_name=__name__,template_folder='templates')
    
    # 配置终端脚本运行项目
    from flask_script import Manager
    manager = Manager(app)
    
    # 声明和加载配置
    class Config():
        DEBUG = True
        SECRET_KEY = "abc"
    app.config.from_object(Config)
    
    # 编写路由视图
    @app.route(rule='/')
    def index():
        data={}
        data["title"] = "我的项目"
        data["list"] = ["a","b","c"]
        data["dict"] = {
            "name":"xiaoming",
            "id":100,
        }
        return render_template("index.html",**data)
    
    from flask import session
    @app.route("/session/set")
    def set_session():
        session["name"] = "root"
        return "ok"
    
    if __name__ == '__main__':
        # 运行flask
        manager.run()

    模板 templates/index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{{title}}</title>
    </head>
    <body>
        <div>{{title}}</div>
        <div>{{list}}</div>
        <div>{{list[0]}}</div>
        <div>{{list.0}}</div>
        <div>{{list[-1]}}</div>
        <div>{{dict}}</div>
        <div>{{dict['name']}}</div>
        {# flask模板引擎的注释 #}
        {# <div>{{dict.name}}</div> #}
        <div>{{config}}</div>
        <div>{{config.DEBUG}}</div>
        <div>name={{request.args.name}}</div>
        <div>session.name={{session.name}}</div>
        <div>{{config.PREFERRED_URL_SCHEME}}://{{request.headers.Host}}{{url_for("set_session")}}</div>
    </body>
    </html>

    示例2:

    from flask import Flask,render_template,session
    
    app = Flask(__name__,template_folder="templates")
    
    app.config["SECRET_KEY"] = "1234asda"
    
    @app.route("/")
    def index():
        data = {}
        session["name"]="xiaohuihui"
        return render_template( "index3.html", **data )
    
    if __name__ == '__main__':
        app.run(debug=True)

    index3.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        {# 获取上下文对象 #}
        <p>{{ request.url }}</p>
        <p>{{ request.method }}</p>
    
        <p>{{ session }}</p>
        <p>{{ session.name }}</p>
    
        <p>{{ config.DEBUG }}</p>
    
        <p>{{ url_for("index") }}</p>
    
    </body>
    </html>

    二、过滤器

    过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用 Python 中的某些方法,那么这就用到了过滤器。

    • 过滤器的使用方式为:变量名 | 过滤器。

    {{variable | filter_name(args1,args2,....)}}
    • 如果没有任何参数传给过滤器,则可以把括号省略掉

    {{variable | filter_name }}
    • 如:``,这个过滤器的作用:把变量variable 的值的首字母转换为大写,其他字母转换为小写

    在 jinja2 中,过滤器是可以支持链式调用的,示例如下:

    {{ "hello world" | reverse | upper }}

    1、内建过滤器

    字符串操作

    • safe:禁用转义

    <p>{{ '<em>hello</em>' | safe }}</p>
    • capitalize:把变量值的首字母转成大写,其余字母转小写

    <p>{{ 'hello' | capitalize }}</p>
    • lower:把值转成小写

    <p>{{ 'HELLO' | lower }}</p>
    • upper:把值转成大写

    <p>{{ 'hello' | upper }}</p>
    • title:把值中的每个单词的首字母都转成大写

    <p>{{ 'hello' | title }}</p>
    • reverse:字符串反转

    <p>{{ 'olleh' | reverse }}</p>
    • format:格式化输出

    <p>{{ '%s is %d' | format('name',17) }}</p>
    • striptags:渲染之前把值中所有的HTML标签都删掉

      如果内容中,存在大小于号的情况,则不要使用这个过滤器,容易五山内容。

    <p>{{ '<em>hello</em>' | striptags }}</p>
    <p>{{ "如果x<y,z>x,那么x和z之间是否相等?" | striptags }}</p>
    • truncate: 字符串截断

    <p>{{ 'hello every one' | truncate(9)}}</p>

    列表操作

    • first:取第一个元素

    <p>{{ [1,2,3,4,5,6] | first }}</p>
    • last:取最后一个元素

    <p>{{ [1,2,3,4,5,6] | last }}</p>
    • length:获取列表长度

    <p>{{ [1,2,3,4,5,6] | length }}</p>
    • sum:列表求和

    <p>{{ [1,2,3,4,5,6] | sum }}</p>
    • sort:列表排序

    <p>{{ [6,2,3,1,5,4] | sort }}</p>

    语句块过滤

    {% filter upper %}
        #一大堆文字#
    {% endfilter %}

     示例:

    from flask import Flask,render_template,session
    
    app = Flask(__name__,  # 当前flask应用运行的模块
                static_folder="static", # 当前flask应用保存静态资源[css/js/img/音视频]
                static_url_path="/lib", # 当前flask应用提供给外界访问的路径前缀,必须以/开头
                template_folder="templates"
        )
    
    app.config["SECRET_KEY"] = "1234asda"
    
    @app.route("/")
    def index():
        data = {}
        data["message"] = "hello,python, after 7 day, byebye"
        data["image"] = "<img src='/lib/images/1.jpg'>"
        return render_template( "index4.html", **data )
    
    if __name__ == '__main__':
        app.run(debug=True)

    index4.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        img{
            width: 100px;
        }
        </style>
    </head>
    <body>
        <p>{{ message | upper }}</p>
        <p>{{ image | safe }}</p>
        <p>{{ message | reverse | upper }}</p>
        <p>{{ '<em>hello</em>' | striptags }}</p>
        <p>{{ "如果x<y,z>x,那么x和z之间是否相等?" | striptags }}</p>
    
        <p>{{ '床前明月光,疑是地上霜。' | truncate(5,False,'...', 0)}}</p>
    
        <p>{{ [1,1,2,3,4,5,1,2,2,3,4] | unique | list }}</p>
    </body>
    </html>

    2、自定义过滤器

    from flask import Flask,render_template
    
    app = Flask(__name__,  # 当前flask应用运行的模块
                static_folder="static", # 当前flask应用保存静态资源[css/js/img/音视频]
                static_url_path="/lib", # 当前flask应用提供给外界访问的路径前缀,必须以/开头
                template_folder="templates"
        )
    
    app.config["SECRET_KEY"] = "1234asda"
    
    # 自定义过滤器函数
    def do_mobile(content):
    
        return content[:3]+"*****"+content[-3:]
    app.add_template_filter(do_mobile,"mobile")
    
    @app.route("/")
    def index():
        data = {}
        data["mobile_list"] = [
            "13513241123",
            "13513241123",
            "13513241123",
            "13513241123",
            "13513241123",
        ]
        return render_template( "index5.html", **data )
    
    if __name__ == '__main__':
        app.run(debug=True)

    index5.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        {% for mobile in mobile_list %}
        <p>{{ mobile | mobile }}</p>
        {% endfor %}
    </body>
    </html>

    三、模板继承

    在模板中,可能会遇到以下情况:

    • 多个模板具有完全相同的顶部和底部内容

    • 多个模板中具有相同的模板代码内容,但是内容中部分值不一样

    • 多个模板中具有完全相同的 html 代码块内容

    像遇到这种情况,可以使用 JinJa2 模板中的 继承 来进行实现

    模板继承是为了重用模板中的公共内容。一般Web开发中,继承主要使用在网站的顶部菜单、底部。这些内容可以定义在父模板中,子模板直接继承,而不需要重复书写。

    • 标签定义的内容

    {% block top %} {% endblock %}
    • 相当于在父模板中挖个坑,当子模板继承父模板时,可以进行填充。

    • 子模板使用 extends 指令声明这个模板继承自哪个模板

    • 父模板中定义的块在子模板中被重新定义,在子模板中调用父模板的内容可以使用super()

    from flask import Flask,render_template
    
    app = Flask(__name__,  # 当前flask应用运行的模块
                template_folder="templates"
        )
    
    @app.route("/")
    def index():
        data = {}
        return render_template( "index6.html", **data )
    
    if __name__ == '__main__':
        app.run(debug=True)

    base.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}父级模板的内容{% endblock %}</title>
        {% block hander %}{% endblock hander %}
    </head>
    <body>
        {% block content %}
            <p>父级模板的content</p>
        {% endblock content %}
    </body>
    </html>

    index6.html

    {% extends "base.html" %}
    {% block title %}来自子模板的标题{% endblock title %}
    {% block hander %}
        <script>
        alert(1)
        </script>
    {% endblock hander %}
    
    {% block content %}
        {{ super() }}
        <p>子模板的内容</p>
        {{ super() }}
    {% endblock %}

    模板继承使用时注意点:

    1. 不支持多继承

    2. 为了便于阅读,在子模板中使用extends时,尽量写在模板的第一行。

    3. 不能在一个模板文件中定义多个相同名字的block标签。

    4. 当在页面中使用多个block标签时,建议给结束标签起个名字,当多个block嵌套时,阅读性更好。

    四、在 Flask 项目中解决 CSRF 攻击

    pip install flask_wtf

    在 Flask 中, Flask-wtf 扩展有一套完善的 csrf 防护体系,对于我们开发者来说,使用起来非常简单

    1. 设置应用程序的 secret_key,用于加密生成的 csrf_token 的值

    # 1. session加密的时候已经配置过了.如果没有在配置项中设置,则如下:
    app.secret_key = "#此处可以写随机字符串#"# 2. 也可以写在配置类中。
    class Config(object):
        DEBUG = True
        SECRET_KEY = "dsad32DASSLD*13%^32"
        
    """加载配置"""
    app.config.from_object(Config)
    1. 导入 flask_wtf.csrf 中的 CSRFProtect 类,进行初始化,并在初始化的时候关联 app

    from flask.ext.wtf import CSRFProtect
    CSRFProtect(app)
    1. 在表单中使用 CSRF 令牌:

    <form method="post" action="/">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    </form>

    示例:

    from flask import Flask,render_template,request
    from flask_wtf import CSRFProtect
    app = Flask(__name__,  # 当前flask应用运行的模块
                template_folder="templates"
        )
    
    csrf = CSRFProtect(app)
    
    app.config["SECRET_KEY"] = "1234asda"
    
    @app.route("/")
    def index():
        data = {}
        return render_template( "index7.html", **data )
    
    @app.route("/login",methods=["POST"])
    def login():
        print(request.form)
        return "ok"
    
    if __name__ == '__main__':
        app.run(debug=True)

    index7.html

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <form action="{{ url_for('login') }}" method="post">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" >
            账号: <input type="text" name="username" value=""><br><br>
            密码: <input type="password" name="password" value=""><br><br>
            <input type="submit" value="登录">
        </form>
    </body>
    </html>

     

     

     

     

     

     

  • 相关阅读:
    内存映射文件点滴
    [Buzz.Today]“估摸”手机:Google收购摩托罗拉
    QT程序中的事件处理
    又是一个开始
    HTTP 协议基础
    深入理解HTTP消息头
    HTTP请求模型和头信息
    十个让你变成糟糕的程序员的行为
    获取上层调用函数地址的代码
    MIME类型大全
  • 原文地址:https://www.cnblogs.com/kongxiangqun/p/14015461.html
Copyright © 2011-2022 走看看