經過了第一章的內容，已經可以做出一些簡單的頁面，首先用這種方式做一個登錄頁面，首先要創建一個login的路由方法：
@app.route("/login",methods=["GET"])def login(): html="<form method='post'>" / "<table>" / "<tr><td>請輸入用戶名</td><td><input type='text' name='username'/></td></tr>" / "<tr><td>請輸入密碼</td><td><input type='password' name='password'/></td></tr>" / "<tr><td><input type='submit' value='登錄'/></td></tr>" / "</table>" / "</post>" return html這個頁面返回后是一個簡單的登錄頁，顯示結果如下：
然后是一個登錄的post返回頁:
@app.route("/login",methods=["POST"])def loginPost(): username=request.form.get("username","") password=request.form.get("password","") if username=="test" and password=="123" : return "登錄成功" else: return "登錄失敗"輸入test和123后，顯示登錄成功
功能上當然是實現了，但是從其他方面來說，卻很難說它是一個能夠實際應用的程序，即使不考慮js腳本和css樣式表，就從簡簡單單的維護來說，就是一場噩夢，比如說像增加一個驗證碼框，我想不會有人認為這是一件愉快的工作。
所以，首先來說，我們要把頁面html部分獨立出來，這點，flask提供了jinja2模板引擎來實現。
jinja2模板引擎同樣符合flask最基礎的約定，即眾多配置中都有一個基礎的默認值，相對jinja2來說，有一個最重要的默認值，即模板文件放在templates文件夾，這個文件夾雖然可以自定義，但目前來說，使用默認值已經足夠了。
好，首先在PyCharm的項目根目錄創建templates文件夾，然后在文件夾內創建login.html文件，當然目錄結構如下：
在login.html中輸入代碼如下：
<!DOCTYPE html><html> <head> <title>歡迎您登陸--牛博客</title> </head> <body> <form method='post'> <table> <tr><td>請輸入用戶名</td><td><input type='text' name='username'/></td></tr> <tr><td>請輸入密碼</td><td><input type='password' name='password'/></td></tr> <tr><td><input type='submit' value='登錄'/></td></tr> </table> </form> </body></html>
代碼很簡單，也名沒有進行樣式方面的美化，其實目前就我來說，僅僅是因為有了智能感知，就有足夠的理由使用模板了，然后，對default.py的login方法進行修改代碼為：
from flask import render_template #頭部，引入模板渲染方法@app.route("/login",methods=["GET"])def login(): return render_template("/login.html") #渲染模板，默認找templates文件夾下的login.html文件由于html模板內的代碼和直接直接寫在py文件中的一樣，所以此時刷新頁面，顯示效果和剛剛相同，雖然顯示效果沒有明顯的改觀，但此時如果修改html中的某一元素，則會方便很多。
關于jinja2模板引擎還支持一些更強大的功能，比如使用index做一些說明：
基本用法
修改default.py中的部分代碼為：
from flask import render_template #頁頭，導入渲染函數@app.route("/")def index(): return render_template("index.html",site_name='myblog')index.html中的代碼為：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>{{site_name}}</title></head><body><h1>這個站點的名字為 {{site_name}} </h1></body></html>flask的render_template函數支持多參數，其中函數的第一個參數為模板名，之后可以提供若干參數，均為鍵值對，為模板中的變量提供數據。如此例子中，為site_name提供了myblog的值，而模板內使用{{參數名}}來表示一個變量
此時瀏覽器輸入地址輸出結果為：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>myblog</title></head><body><h1>這個站點的名字為 myblog </h1></body></html>
jinja2模板還提供了一些變量過濾器，如代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>{{site_name|upper}}</title></head><body><h1>這個站點的名字為 {{site_name}} </h1></body></html>這時輸出為：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>MYBLOG</title></head><body><h1>這個站點的名字為 myblog </h1></body></html>
常用過濾器如下
safe 不轉義
capitalize 首字母大寫
lower 轉換為小寫
upper 轉換為大寫
trim 去收尾空格
striptages 去除html標簽
除此之外，Jinja2的變量還可以是一些復雜類型，甚至可以使用一些復雜類型的常用方法，如：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>{{site_name[2:]}}</title> </head><body><h1>這個站點的名字為 {{site_name}} </h1></body></html>這時輸出為：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>blog</title></head><body><h1>這個站點的名字為 myblog </h1></body></html>
控制語句
控制語句是一個模板的基本功能，同樣的jinja2也提供了相應的功能：
//選擇{% if name=='test' %} 這是測試{% else %} {{name}}，你好{% endif %}//循環<ul> {% for blog in blogs%} {{ blog.title }} {% endfor%}</ul>除了這些基本用法，模板還為一些代碼的重復使用提供了宏的功能，如將如下代碼寫入macros.html文件中
{% macro render_title(blog)%} <li>{{blog.title}}</li>{% endmacro%}然后在之前的模板中：
{% import 'macros.html' as macros %}<ul> {% for blog in blogs %} {{ macros.render_title(blog) }} {% endfor %}</ul>執行結果與之前的完全相同
Jinja2還提供了一個更為強大的功能，即模板繼承，這個個人感覺有點像java的sitemesh框架，它首先需要創建一個base.html的基模板：
<!DOCTYPE html><html><head> {% block head %} <meta charset="UTF-8"> <title>{% block title%} {% endblock %} - 牛博客</title> <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> {% endblock %}</head><body> {% block body %} {% endblock %}</body></html>其中block標簽的意思表示在子模板中可以修改，具體到此例子，則可修改的部分為 head，title，body。下面為子模板代碼：
{% extends "base.html" %}{% block title %}{{site_name[2:]}}{% endblock %}{% block head %} {{super()}}{% endblock %}{% block body %} <h1>這個站點的名字為 {{site_name}} </h1>{% endblock %}此時執行結果仍為：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>blog</title></head><body><h1>這個站點的名字為 myblog </h1></body></html>
現在有了模板引擎，不管怎么說，僅僅就頁面層來說，已經可以很輕松的做出一些不錯的功能了，但很明顯，現在的界面還不是很美觀，下一章將把現在主流的前端框架bootstrap與flask框架進行整合。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
圖片精選
