精彩文章免费看

Flask边学边做——2、添加jinja模板

之前我们建立已经建立了最小环境的web网站,而且浏览器页面返回Hello Guest的文本。虽然在这个页面我们可以加上html标签,如<h3>Hello Gutst</h3>丰富页面。但如果把大量的html语言写到同一个文件里,势必让文档结构混乱不堪。所以我们就可以用到Flask内置的jinja模板。

1、渲染模板文件

Flask通过渲染模板,把数据输入模板变量中。我们为index.py增加以下内容,来渲染模板文件。

from flask import Flask,render_template       #从flask模块中导入Flask对象,导入render_template函数
app=Flask(__name__)             #把Flask对象付给app变量
@app.route('/')                  #添加路由/
def index():
    user='Michael Hu'           #设定user变量
    return render_template('index.html',user=user)    #使用render_template渲染index.html模板,传递user变量
if __name__=='__main__':
    app.run(debug=True)      #启动app调试模式
  • 导入render_template函数,用于渲染模板文件。
  • 给定一个传入模板的user变量
  • 用render_template函数指定渲染模板文件,传递指定变量
  • 2、定义模板文件

    模板文件其实就是一个文本文件,通常后缀名定义成html文件,模板文件里的变量可以接收应用传递来的值,并呈现出来。

    在当前目录下的新建templates目录,并在该文件下新建index.html,代码内容如下:

    <!DOCTYPE html>
    <meta charset="utf-8">
        <title>Default</title>
    </head>
        <h3>{{user}}</h3>
    </body>
    </html>
    

    如直接用浏览器打开这个文件,页面仅显示{{user}},这个就是变量,接收来自应用的数据。

    浏览器呈现效果如下:

  • index.py文件里增加字典数据
  • scores=[{'name':'michael','age':99},{'name':'yanyan','age':98},{'name':'tim','age':100}]
    
  • index.html模板文件循环显示
  •             {%for score in scores%}
                <table border="1">
                    <th>Index</th>
                    <th>Name</th>
                    <th>Age</th>
                    <td>{{loop.index}}</td>
                    <td>{{score.name}}</td>
                    <td>{{score.age}}</td>
                </table>
                {%endfor%}
    

    loop.index可以在循环内迭代当前的索引,从1开始算

    参见以下效果图:

    basevar='base var' contentvar='content var' return render_template('child.html',title=title,basevar=basevar,contentvar=contentvar)

    参见以下效果图:浏览器访问child页面,分割符上的内容继承自base.html

    7. 补充内容

    Flask默认模板文件都位于templates目录下,也可以通过生成app对象修改默认目录app = Flask(__name__,template_folder='tpl')
    参考内容:使用Jinjia2模板(上),使用Jinjia2模板(中)