Flask实践Step by Step -- 模板

506 查看

Flask开发环境配置
 Flask快速入门
 Flask实践Step by Step -- 'Hello World'
Flask实践Step by Step -- 模板
 Flask实践Step by Step -- Web表单

模板

在上节中Hello World的程序以及可以顺利运行，大概得目录结构如下：

  microblog/
  |-- app
  |   |-- __init__.py
  |   |-- __init__.pyc
  |   |-- static
  |   |-- templates
  |   |-- views.py
  |   `-- views.pyc
  |-- run.py
  `-- tmp

运行 python run.py 可以在浏览器中通过 http://127.0.0.1:5000访问

为什么使用模板

如果想在欢迎页面加入一些欢迎语，如果使用python来写HTML的话，需要修改一下 views.py中的
逻辑，具体的代码如下:

  from app import app

  @app.route('/')
  @app.route('/index')
  def index():
      user = {'nickname': 'Miguel'}  # fake user
      return '''
  <html>
    <head>
      <title>Home Page</title>
    </head>
    <body>
      <h1>Hello, ''' + user['nickname'] + '''</h1>
    </body>
  </html>
  '''

保存，运行可以在页面中看到效果

使用模板

可以将HTML和python代码分离，我们需要写第一个模板(file app/templates/index.html)

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>{{ title }} - microblog</title>
    </head>
    <body>
      <h1>Hello,{{ user.nickname }}</h1>
    </body>
  </html>

标准的HTML页面的内容，{{...}}是需要动态显示的内容，然后就需要修改对应的方法(file app/views.py)

  from flask import render_template
  from app import app

  @app.route('/')
  @app.route('/index')
  def index():
      user = {'nickname': 'Miguel'}  # fake user
      return render_template('index.html',title = 'Home',user = user)

然后运行看一下效果，
为了渲染模板，需要引入 render_template,这个方法第一个参数就是需要渲染的文件名，运行时会
自动到 templates文件夹中去寻找对应的文件，后面是参数的list
模板中的控制逻辑
在Jinja2模板中支持控制逻辑需要包含在 {% ... %}块中，修改一下 app/templates/index.html
加入一下控制逻辑

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      {% if title %}
      <title>{{ title }} - microblog</title>
      {% else %}
      <title>Welcome to microblog</title>
      {% endif %}
    </head>
    <body>
      <h1>Hello,{{ user.nickname }}</h1>
    </body>
  </html>

可以把 app/views.py中的title的参数去除运行看一下实际的效果

在模板中加入循环逻辑

修改一下 app/views.py，手动加入一些测试的数据信息

  from flask import render_template
  from app import app

  @app.route('/')
  @app.route('/index')
  def index():
      user = {'nickname': 'Miguel'}  # fake user
      posts = [
          {
              'author':{'nickname':'John'},
              'body':'Beautiful day in Beijing!'
          },
          {
              'author':{'nickname':'Kevin'},
              'body':'The Aveengers movie so cool!'
          }
      ]
      return render_template('index.html',title = 'Home', user = user , posts = posts)

为了渲染这个list中的数据，需要修改一下模板中的结构 (file app/templates/index.html)

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      {% if title %}
      <title>{{ title }} - microblog</title>
      {% else %}
      <title>Welcome to microblog</title>
      {% endif %}
    </head>
    <body>
      <h1>Hello,{{ user.nickname }}</h1>
      {% for post in posts %}
      <div>
        <p>
          {{ post.author.nickname}} says: <b>{{ post.body }}</b>
        </p>
      </div>
      {% endfor %}
    </body>
  </html>

模板继承

通常一个网站会有对应的导航栏和头部以及尾部信息，我们不希望在每一个页面中都要重新写一遍
这可以考虑将这些公有的信息统一放在一个公有的模板页面中其他的页面只需要继承这个页面即可
在Flask中的木耙支持继承，首先我们需要一个base模板(file app/templates/base.html)

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      {% if title %}
      <title>{{ title }} - microblog</title>
      {% else %}
      <title>Welcome to microblog</title>
      {% endif %}
    </head>
    <body>
      <div>
        Microblog : <a href="/index">Home</a>
      </div>
      <hr>
      {% block content %}{% endblock %}
    </body>
  </html>

在这个模板中，使用block是需要继承的地方，Blocks需要一个唯一的名字，不能有重复，block
的内容会被子模板替换
修改一下 index.html继承base.html

  {% extends "base.html" %}
  {% block content %}
    <h1>Hi,{{user.nickname}}</h1>
    {% for post in posts %}
    <div>
      <p>
        {{ post.author.nickname }} says: {{ post.body }}
      </p>
    </div>
    {% endfor %}
  {% endblock %}

使用关键字extends来继承base模板