Flask簡易入門教程二、templates模版速速入門

Flask教程(二)、templates模版速速入門
童鞋們,如果你做了上面一章的內容。儂現在的文件結構應該是下面着個樣子的you see
    flaskstudy\
      app\
        static\
        templates\
        __init__.py
        views.py
      tmp\
      run.py
上節咱也測試過了,都是work的。
這節的內容是模版,爲啥要模版呢?
答案是必須的!業務分離,這樣前端搞前端,後臺搞後臺,全部把頁面寫在代碼裏面像什麼回事兒啊。
來瞧瞧下面的一個例子:
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = {'nickname': '馬暈'}  # fake user
    return '''
<html>
  <head>
    <title>Home Page</title>
  </head>
  <body>
    <h1>Hello, ''' + user['nickname'] + '''</h1>
  </body>
</html>
'''
啷哩個浪,一大堆,這個還算是少的了,要是幾千行的UI規模,程序員估計要直接噴血。沒有模版是不可想象的,估計也沒啥人用python開發網站了。
關鍵時刻,templates來救火。重寫上面的爲如下形式:
新建模版文件:app/templates/index.html
內容如下:
<html>
  <head>
    <title>{{ title }} - wetucao</title>
  </head>
  <body>
      <h1>Hello, {{ user.nickname }}!</h1>
  </body>
</html>
和上面有些區別的是,用了兩對括號{{}}來存放數據內容,本質應該是一種替換。
當然,views也要做相應的修改的,變化如下:

from flask import render_template
from app import app

@app.route('/')
@app.route('/index')
def index():
    user = {'nickname': '大爺'}  # fake user
    return render_template('index.html',
                           title='Home',
                           user=user)
同時爲了渲染模版,咱們也得引入一個Flask的新模塊,render_template.用來替換參數。
render_template會召喚神龍 Jinja2 模版渲染引擎來替換{{}}
Jinja2官網: http://jinja.pocoo.org/
Jinja2是Python下一個被廣泛應用的模版引擎,他的設計思想來源於Django的模板引擎,並擴展了其語法和一系列強大的功能。其中最顯著的一個是增加了沙箱執行功能和可選的自動轉義功能,這對大多應用的安全性來說是非常重要的。
他基於unicode並能在python2.4之後的版本運行,包括python3。
與此同時jinja2同學還能夠支持判斷語句,客官且看:
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html;     charset=gb2312">
{% if title %}
 <title>{{ title }} - wetucao</title>
    {% else %}
    <title>Welcome to wetucao</title>
    {% endif %}
  </head>
  <body>
      <h1>Hello, {{ user.nickname }}!</h1>
  </body>
</html>

   
現在樓上的小夥子,變得有點聰明瞭,能夠判斷不同情況進行顯示了。但是多人情況呢?
模版中的循環:
可能會有很多個小盆友需要被顯示出來。咋辦呢?如下如下:
其中author是作者,body字段是提交的吐槽
def index():
    user = {'nickname': '大表哥'}  # fake user
    posts = [  # fake array of posts
        { 
            'author': {'nickname': '大姨夫'}, 
            'body': 'Beautiful day in Portland!' 
        },
        { 
            'author': {'nickname': '大保健'}, 
            'body': 'The Avengers movie was so cool!' 
        }
    ]
    return render_template("index.html",
                           title='Home',
                           user=user,
                           posts=posts)
當然, 模版文件也要有相應的修改,主要是添加了 for post in posts:
<html>
  <head>
    {% if title %}
    <title>{{ title }} - microblog</title>
    {% else %}
    <title>Welcome to microblog</title>
    {% endif %}
  </head>
  <body>
    <h1>Hi, {{ user.nickname }}!</h1>
    {% for post in posts %}
    <div><p>{{ post.author.nickname }} says: <b>{{ post.body }}</b></p></div>
    {% endfor %}
  </body>
</html>
簡單吧?so easy!媽媽再也不用擔心你不吃藥
其實上面就是已經把控制的三種流程,順序,分支,循環,都包含了,不是平白無故的寫的。

模版的繼承
一般的網站都需要有一些公共的模塊,例如導航,foot模塊等等。
這個時候,如果每個模版都重複的粘貼複製,會很低效,也不利於維護(一改,則都要重複的改)
故繼承是非常有用的,模版也是可以繼承的。
道理大家都懂,我就不在這裏扯淡了,直接說flask裏面是咋搞的吧。
首先我們新建一個base文件夾:
<html>
  <head>
    {% if title %}
    <title>{{ title }} - wetucao</title>
    {% else %}
    <title>Welcome to mwetucao/title>
    {% endif %}
  </head>
  <body>
    <div>我們吐槽: <a href="/index">主頁</a></div>
    <hr>
    {% block content %}{% endblock %}
  </body>
</html>
這個和之前有什麼區別呢?
主要是block控制模塊,用來放我們的模塊內容。
然後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 %}
那是相當相當的方便啊!

大表哥,親測如下:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章