zoukankan      html  css  js  c++  java
  • 【简说Python WEB】Jinja2模板

    系统环境:Ubuntu 18.04.1 LTS

    Python使用的是虚拟环境:virutalenv

    Python的版本:Python 3.6.9

    【简说Python WEB】Jinja2模板

    早期的开发,前端代码和后端代码都是混合在一起的。例如:在早期的java web时期,htmlcss的一些前端元素,和后端的jsp代码都混在一起。使得代码难以维护。

    现在,提倡前后端代码的分离,而Flask中的Jinja2模板用于代码分离,其中的变量通过真实值替换。

    目前环境的代码树

    (zsdpy1) zsd@zsd-virtual-machine:~/Zflask/chapter3/app$ tree
    .
    ├── hello.py
    └── templates
       └── index.html
    

    抽离出来的Html模板

    其中templates/index.html是我抽离出来的html。如下:

    <html>
        <head>
            <title>{{ title }}-zsdblog</title>
        </head>
        <body>
            <h1>您好, {{ user.username }},欢迎来到我的博客!</h1>
        </body>
    </html>
    

    其中titleuser.username是要传入的变量。

    渲染模板

    from flask import render_template
    from flask import Flask
    
    app = Flask(__name__)
    
    @app.route('/')
    @app.route('/index')
    def index():
        user = {'username': '东瑜'}
        return render_template('index.html', title='Home', user=user)
    
    if __name__ == '__main__':
            app.run(host='0.0.0.0', port=9000)
    

    执行语句:

    (zsdpy1) zsd@zsd-virtual-machine:~/Zflask/chapter3/app$ python hello.py 
     * Serving Flask app "hello" (lazy loading)
     * Environment: production
       WARNING: This is a development server. Do not use it in a production deployment.
       Use a production WSGI server instead.
     * Debug mode: off
     * Running on http://0.0.0.0:9000/ (Press CTRL+C to quit)
    

    渲染效果:

    条件语句

    Jinja2也提供条件判断,和if语句类似。

    templates/index_condition.html模板如下:

    <html>
        <head>
            <title>{{ title }}-zsdblog</title>
        </head>
        <body>
            {% if user %}
            <h1>您好, {{ user.username }},欢迎来到我的博客!</h1>
            {% else %}
            <h1>您好, 游客,欢迎来到我的博客!</h1>
            {% endif %}
        </body>
    </html>
    

    其中,程序的含义:

    代表如果有user,就告知谁来了我的博客。如果没有user,就代表游客。

    hello_condition.py代码如下:

    from flask import render_template
    from flask import Flask
    
    app = Flask(__name__)
    
    @app.route('/')
    @app.route('/index')
    def index():
    #    user = {'username': '东瑜'}
        return render_template('index_condition.html', title='Home')
    
    if __name__ == '__main__':
            app.run(host='0.0.0.0', port=9000)
    

    可以看到,我注释了user对象,并且render_template参数的时候,也没有传user的变量。所以演示效果如下:

    循环语句

    相对于基础语法的for循环。

    templates/index_loop.html模板语句如下:

    <html>
        <head>
            <title>{{ title }}-zsdblog</title>
        </head>
        <body>
            {% if user %}
            <h1>您好, {{ user.username }},欢迎来到我的博客!</h1>
            {% else %}
            <h1>您好, 游客,欢迎来到我的博客!</h1>
            {% endif %}
                    {% for post in posts %}
            <div><p>{{ post.author.username }} 说: <b>{{ post.body }}</b></p></div>
            {% endfor %}
        </body>
    </html>
    

    web应用的代码如下:

    from flask import render_template
    from flask import Flask
    
    app = Flask(__name__)
    
    @app.route('/')
    @app.route('/index')
    def index():
        user = {'username': '东瑜'}
        posts = [
            {
                'author': {'username': '小明'},
                'body': '北京的天气好好呀'
            },
            {
                'author': {'username': '小黄'},
                'body': '我今天很开心!'
            }
        ]
        return render_template('index_loop.html', title='Home', user=user, posts=posts)
    
    if __name__ == '__main__':
            app.run(host='0.0.0.0', port=9000)
    

    演示效果如下:

  • 相关阅读:
    ABP 数据库 -- ABP&EF中的多表、关联查询
    C# List集合基础操作
    C# ABP 允许跨域请求
    异或运算、与运算、或运算 运用在 多项选择题
    C# ABP 配置连接数据库&创建表
    C# ABP WebApi与Swagger UI的集成
    C# 深入了解泛型
    8、SpringBoot+Mybatis整合------参数取值方式
    7、SpringBoot+Mybatis整合------PageHelper简单分页
    6、SpringBoot+Mybatis整合------参数传递
  • 原文地址:https://www.cnblogs.com/zhangshengdong/p/12524870.html
Copyright © 2011-2022 走看看