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模板
