Flask学习之二 模板

继续学习flask

本部分Miguel Grinberg教程的翻译地址:http://www.pythondoc.com/flask-mega-tutorial/templates.html

英文原文地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates

 

一、为什么使用模板?

以下做一个小小的扩展:输出一个大标题。

一个容易的选择就是改变我们的视图功能,输出 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 %}

这样的话,之后如果要修改导航栏只需要修改一个地方就可以了。

 

posted @ 2015-01-30 14:26  AminHuang  Views(642)  Comments(0Edit  收藏  举报