zoukankan      html  css  js  c++  java
  • flask框架下的jinja2模板引擎(1)(模板渲染)

    #转载请留言联系

    • 模板是什么?

    在 flask 框架中,视图函数有两个作用:处理业务逻辑和返回响应内容。在大型应用中,把业务逻辑和表现内容放在一起,会增加代码的复杂度和维护成本。模板作用即是承担视图函数的另一个作用,即返回响应内容。

    • 模板其实是一个包含响应文本的文件,其中用占位符(变量)表示动态部分,告诉模板引擎其具体的值需要从使用的数据中获取
    • 使用真实值替换变量,再返回最终得到的字符串,这个过程称为“渲染”
    • Flask是使用 Jinja2 这个模板引擎来渲染模板

    使用模板的好处:

    • 视图函数只负责业务逻辑和数据处理(业务逻辑方面)
    • 而模板则取到视图函数的数据结果进行展示(视图展示方面)
    • 代码结构清晰,耦合度低
    • Jinja2是什么?

    Jinja2 是 Python 下一个被广泛应用的模板引擎,是由Python实现的模板语言,他的设计思想来源于 Django 的模板引擎,并扩展了其语法和一系列强大的功能,其是Flask内置的模板语言。

    下面通过一个简单的示例来看下用了 Jinja2 模块引擎后,flask 框架怎么写?

    目录如下:

    项目文件夹
    ├── static
    │   ├── xxx.css
    │   └── xxx.js
    ├── templates
    │   └── example.html
    └── web.py

    其中xxx.css和xxx.js是example依赖的静态资源。

    首先,web.py 的大致写法:

    from flask import Flask
    from flask import render_template
    
    app=Flask(__name__,static_folder="static",template_folder="templates")
    
    @app.route("/")
    def index():
        return render_template("example.html",name="chichung")    #后面跟键值对,对模板的替换
    
    if __name__ == '__main__':
        app.run()

    render_templates 就是 jinja2 对模板的“渲染”。

    然后,example.html 的大致写法:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <link rel="stylesheet" type="text/css" href={{ url_for("static",filename="xxx.css") }}>
     7     <script type="text/javascript" src={{ url_for("static",filename="xxx.js") }}></script>
     8 </head>
     9 <body>
    10     <p>{{ name }}</p>
    11 </body>
    12 </html>

    重点在6、7、10行。

    第6行是导入 css 文件。

    第7行是导入 js 文件。

    第10行是把值替换到 name 里。

    • jinja2 遍历列表渲染

    web.py 如下:

    from flask import Flask,render_template
    
    app=Flask(__name__,static_folder="static",template_folder="templates")
    
    @app.route("/")
    def index():
        fruit=["苹果","芒果","香蕉","葡萄"]return render_template("005.html",fruit=fruit)
    
    if __name__ == '__main__':
        app.run()

    html 如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <ul>
            {% for item in fruit %}
            <li>{{ item }}</li>
            {% endfor %}
        </ul>
    </body>
    </html>

    拓展1:

    {{ fruit.1 }}    取 fruit 列表的第二位数

    同理可以写成{{ fruit[1] }}

    拓展2:

    • 在一个 for 循环块中你可以访问这些特殊的变量:
    变量描述
    loop.index 当前循环迭代的次数(从 1 开始)
    loop.index0 当前循环迭代的次数(从 0 开始)
    loop.revindex 到循环结束需要迭代的次数(从 1 开始)
    loop.revindex0 到循环结束需要迭代的次数(从 0 开始)
    loop.first 如果是第一次迭代,为 True 。
    loop.last 如果是最后一次迭代,为 True 。
    loop.length 序列中的项目数。
    loop.cycle 在一串序列间期取值的辅助函数。见下面示例程序。

    loop.cycle示例:

    {% for post in posts%}

    {{loop.cycle('odd','even')}} {{post.title}}

    {% endfor %}

    其中 posts=[1,2]

    输出结果为:

    odd 1

    even 2

    • jinja2遍历字典渲染

    web.py 如下:

    from flask import Flask,render_template
    
    app=Flask(__name__,static_folder="static",template_folder="templates")
    
    @app.route("/")
    def index():
        info={"name":"chichung","fav":"code,cook,sleep","height":177}
        return render_template("005.html",info=info)
    
    if __name__ == '__main__':
        app.run()

    html 如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <ul>
            {% for k,y in info.items() %}    {# 注意有.items #}
            <li>{{ k }}的值是{{ y }}</li>
            {% endfor %}
        </ul>
    </body>
    </html>

    拓展:

    {{ info.k }}    去 info 字典,k 键对用的值

    同理,可以写成 {{ info[k] }}

    • jinja2条件渲染

    web.py 如下:

    from flask import Flask,render_template
    
    app=Flask(__name__,static_folder="static",template_folder="templates")
    
    @app.route("/")
    def index():
        return render_template("006.html",num=10)
    
    if __name__ == '__main__':
        app.run()

    html 如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        {% if num == 5 %}
            <h1>后台的数据是5</h1>
        {% elif num == 1 %}
            <h1>后台的数据是1</h1>
        {% else %}
            <h1>后台的数据不是1也不是5</h1>
        {% endif %}
    </body>
    </html>
  • 相关阅读:
    前端UI框架
    Knowledge
    Microsoft SQL Server
    ASP.NET MVC
    将博客搬至CSDN
    python中的数据类型
    python基础知识
    接口和抽象类的区别
    面向对象的四大特征
    数据结构学习笔记
  • 原文地址:https://www.cnblogs.com/chichung/p/9774556.html
Copyright © 2011-2022 走看看