Flask實踐Step by Step -- 模板

模板

在上節中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模板

發佈了43 篇原創文章 · 獲贊 7 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章