童鞋們,如果你做了上面一章的內容。儂現在的文件結構應該是下面着個樣子的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。
<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 %}
那是相當相當的方便啊!大表哥,親測如下: