【简说Python WEB】Jinja2模板

公告

【简说Python WEB】Jinja2模板

系统环境:Ubuntu 18.04.1 LTS

Python使用的是虚拟环境:virutalenv

Python的版本:Python 3.6.9

早期的开发，前端代码和后端代码都是混合在一起的。例如:在早期的java web时期，html和css的一些前端元素，和后端的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>

其中title和user.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)

演示效果如下:

posted on 2020-03-19 15:58 东瑜阅读(606) 评论(0) 收藏举报

刷新页面返回顶部