首页 > 代码库 > Flask学习之二 模板
Flask学习之二 模板
继续学习flask
本部分mega教程的翻译地址：http://www.pythondoc.com/flask-mega-tutorial/templates.html
一、为什么使用模板？
以下做一个小小的扩展：输出一个大标题。
一个容易的选择就是改变我们的视图功能，输出 HTML。
修改app/views.py
1 from app import app 2 3 @app.route(‘/‘) 4 @app.route(‘/index‘) 5 def index(): 6 user = { ‘nickname‘: ‘Miguel‘} # fake user 7 return ‘‘‘ 8 <html> 9 <head>10 <title>Home Page</title>11 </head>12 <body>13 <h1>hello,‘‘‘ + user[‘nickname‘] + ‘‘‘</h1>14 </body>15 </html>16 ‘‘‘
网页浏览器上的显示情况：
以下是教程原话：
我们暂时还不支持用户，所以暂时使用占位符的用户对象，有时也被称为假冒或模仿的对象。这样让我们可以集中关注应用程序的某一方面，而不用花心思在暂未完成的部分上。
我希望你同意我的说法，上面的解决方案是非常难看！如果我们需要返回一个含有大量动态内容的大型以及复杂的 HTML 页面的话，代码将会有多么复杂啊！如果你需要改变你的网站布局，在一个大的应用程序，该应用程序有几十个视图，每一个直接返回HTML？这显然??不是一 个可扩展的选择。
二、初步使用模板
就是把前端和后端的分离。
文件 app/templates/index.html：
1 <html>2 <head>3 <title>{{title}} - microblog</title>4 </head>5 <body>6 <h1>Hello, {{user.nickname}}!</h1>7 </body>8 </html>
注意一下index.html的位置
我们只是写了一个大部分标准的HTML页面，唯一的区别是有一些动态内容的在 {{ ... }} 中。
然后在视图函数(文件 app/views.py)中使用这些模板，修改 app/views.py 内容：
1 from app import app 2 from flask import render_template 3 4 @app.route(‘/‘) 5 @app.route(‘/index‘) 6 def index(): 7 user = { ‘nickname‘: ‘Miguel‘} # fake user 8 return render_template("index.html", 9 title = ‘Home‘,10 user = user)
为了渲染模板，我们必须从 Flask 框架中导入一个名为 render_template 的新函数。此函数需要传入模板名以及一些模板变量列表，返回一个所有变量被替换的渲染的模板。
在内部，render_template 调用了 Jinja2 模板引擎，Jinja2 模板引擎是 Flask 框架的一部分。Jinja2 会把模板参数提供的相应的值替换了 {{...}} 块。
运行后的浏览器页面可以看到是和之前一样的。
关于模板中的控制和循环语句和其他语言没什么差别，很容易理解。
三、模板继承
我们知道多数网站都有导航栏，而同一个网站的导航栏都是一样的。在每个模板中复制粘贴同样的代码是很浪费时间，而且修改起来也很麻烦（修改一个部分就要把它的拷贝全部修改）。
教程原话：我们可以利用 Jinja2 的模板继承的特点，这允许我们把所有模板公共的部分移除出页面的布局，接着把它们放在一个基础模板中，所有使用它的模板可以导入该基础模板。
定义一个基础模板，该模板包含导航栏以及上面谈论的标题(文件 app/templates/base.html)：
<html> <head> {% if title %} <title>{{title}} - microblog</title> {% else %} <title>microblog</title> {% endif %} </head> <body> <div>Microblog: <a href="/index">Home</a></div> <hr> {% block content %}{% endblock %} </body></html>
在这个模板中，我们使用 block 控制语句来定义派生模板可以插入的地方。块被赋予唯一的名字content。
然后修改我们的 index.html 模板继承自 base.html (文件 app/templates/index.html):
{% extends "base.html" %}{% block content %} <h1>Hi, {{user.nickname}}!</h1> {% for post in posts %} <div><p>{{post.author.nickname}} says: <b>{{post.body}}</b></p></div> {% endfor %}{% endblock %}
这样的话，之后如果要修改导航栏只需要修改一个地方就可以了。
Flask学习之二 模板