[python][Flask] 模版的使用

最新推荐文章于 2021-03-24 09:03:37 发布

AhdaiMolly

最新推荐文章于 2021-03-24 09:03:37 发布

阅读量744

点赞数

分类专栏： python 文章标签： python flask

本文链接：https://blog.csdn.net/AhdaiMolly/article/details/76210420

版权

python 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

为了渲染模版，Flask使用了一个名为Jinja2的模版引擎。

一个简单的使用模版的栗子：

首先在工程文件夹下创建templates文件夹，里面放入两个模版：mainpage.html和user.html，内容如下：

mainpage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Flask!</title>
</head>
<body>
<h1>Hello Flask!</h1>
</body>
</html>

user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>userpage</title>
</head>
<body>
<h1>Hello Flask! Username is {{name}}!</h1>
</body>
</html

在工程中修改视图函数：

# -*- coding: UTF-8 -*-

from flask import Flask,render_template
app=Flask(__name__)
#-------------------------------------------

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

@app.route('/user/<username>')
def show_username(username):
    return render_template('user.html',name=username)

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

以上是一个简单的小栗子。

在模版中使用控制结构：

以下是一个在模版中使用控制结构的栗子：

使用if else·············

#使用控制结构—— if esle
@app.route('/user/<username>')
def show_username(username):
    return render_template('user.html',name=username)

user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>userpage</title>
</head>
<body>
    {% if name=="Molly" %}
    <h1>Hello Flask! Username is {{name}}!</h1>
    {% else %}
    <h1>Hello Flask! Username is stranger!</h1>
    {% endif %}
</body>
</html>

使用for········

#使用控制结构——for循环
@app.route('/sitemap')
def show_sitemap():
    return render_template('sitemap.html',webmaplist=[1,2,3])

sitemap.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>userpage</title>
</head>
<body>
    {% for page in webmaplist %}
    <h1>Page:{{page}} </h1>
    {%endfor%}
</body>
</html>

可以将sitemap.html转化为宏的模式：

<!DOCTYPE html>

{% macro show_page(page)%}
    <h1>Page:{{page}} </h1>
{%endmacro%}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webmap</title>
</head>
<body>
    {% for page in webmaplist %}
        {{show_page(page)}}
    {%endfor%}
</body>
</html>

也可以将宏的部分保存在单独文件中，从需要的模版中导入：

<!DOCTYPE html>
{% import 'macro_test.html' as macros %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webmap</title>
</head>
<body>
    {% for page in webmaplist %}
        {{macros.show_page(page)}}
    {%endfor%}
</body>
</html>

{% macro show_page(page)%}
    <h1>Page:{{page}} </h1>
{% endmacro %}

模版可以继承，假设有一个base.html定义如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block head %}
    <title>{% block title %}{% endblock %}</title>
    {% endblock %}
    <h1>Welcome ! -----</h1>
</head>
<body>
    {% block body %}
    {% endblock %}
</body>
</html>

定义了head、title和body的块，在其他html中可以继承并改变一些参数：

{% extends "base.html"%}
{% block title %}Hello Flask!{% endblock%}
{% block head%}
    {{super()}}
{% endblock%}
{% block body%}
<h1>Hello Flask ! ! !</h1>
{% endblock%}

这里我们继承了base.html，其中head块，我们使用了super()来获取原来的内容不加以改变，其他块都重新定义。

使用bootstrap

Bootstrap是Twitter 开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代Web 浏览器。

以下是一个使用bootstrap的栗子：

# -*- coding: UTF-8 -*-

from flask import Flask,render_template
from flask_bootstrap import Bootstrap
app=Flask(__name__)
bootstrap=Bootstrap(app)
#----------------------------------------------------
@app.route('/')
def hello_falsk():
    return render_template('mainpage_bootstrap.html')


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

其中mainpage_bootstrap.html内容如下：

{% extends "bootstrap/base.html"%}
{% block title %}My Flask Application{% endblock%}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
                    data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Flasky</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}
{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello, Flask!</h1>
    </div>
</div>
{% endblock %}

这个栗子中，mainpage.html继承了bootstrap的base.html，其中定义了三个块：title、navbar和content，这些块都是base模版提供的，本例子中对其进行了改造。title会出现在网页头部，navbar表示导航条，content表示主体内容。

以下是bootstrap中base模版所有可用的块：

自定义错误界面的方法：

@app.errorhandler(404)
def error404(e):
    return render_template('error_bootstrap.html'),404
@app.errorhandler(500)
def error500(e):
    return render_template('error_bootstrap.html'),500

使用Moment

Flask-Moment库可以在浏览器中渲染日期和时间。

# -*- coding: UTF-8 -*-

from flask import Flask,render_template
from flask_bootstrap import Bootstrap
from flask_moment import Moment
from datetime import datetime
app=Flask(__name__)
moment=Moment(app)
bootstrap=Bootstrap(app)
#-----------------------------------------------------------------------------------------------------------------------

@app.route('/')
def hello_falsk():
    return render_template('mainpage_moment.html',current_time=datetime.utcnow())

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

mainpage_moment.html如下：

{% extends "base.html" %}
{% block title %}{{ super() }}{% endblock %}
{% block navbar %}{{ super() }}{% endblock %}
{% block content %}{{ super() }}{% endblock %}
{% block scripts %}
{{ super() }}
<div class="container">
    <div class="page-header">
        <h3>
            <p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
            <p>That was {{ moment(current_time).fromNow(refresh=True) }}</p>
        </h3>
    </div>
</div>

{% endblock %}

到目前为止，我们已经有了一个比较健全的base模版：

{% extends "bootstrap/base.html" %}
{% block title %}Flasky - My Application{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Welcome to Flasky! </h1>
</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

AhdaiMolly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[python][Flask] 模版的使用

一个简单的使用模版的栗子：首先在工程文件夹下创建templates文件夹，里面放入两个模版：mainpage.html和user.html，内容如下：mainpage.html Hello Flask!Hello Flask!user.html userpageHello Flask! Username is {{
复制链接

扫一扫