首頁 > 後端開發 > Python教學 > 教你使用模板引擎和表單外掛的實例詳解(python)

教你使用模板引擎和表單外掛的實例詳解(python)

Y2J
發布: 2017-04-26 10:12:36
原創
1848 人瀏覽過

經過了第一章的內容,已經可以做出一些簡單的頁面,先用這種方式做一個登入頁面,首先要建立一個login的路由方法:

@app.route("/login",methods=["GET"])
def login():
 html="<form method=&#39;post&#39;>" \
 "<table>" \
 "<tr><td>请输入用户名</td><td><input type=&#39;text&#39; name=&#39;username&#39;/></td></tr>" \
 "<tr><td>请输入密码</td><td><input type=&#39;password&#39; name=&#39;password&#39;/></td></tr>" \
 "<tr><td><input type=&#39;submit&#39; value=&#39;登录&#39;/></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=&#39;post&#39;>
 <table>
 <tr><td>请输入用户名</td><td><input type=&#39;text&#39; name=&#39;username&#39;/></td></tr>
 <tr><td>请输入密码</td><td><input type=&#39;password&#39; name=&#39;password&#39;/></td></tr>
 <tr><td><input type=&#39;submit&#39; value=&#39;登录&#39;/></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=&#39;myblog&#39;)
登入後複製

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==&#39;test&#39; %}
 这是测试
{% else %}
 {{name}},你好
{% endif %}

//循环
<ul>
 {% for blog in blogs%}
 {{ blog.title }}
 {% endfor%}
</ul>
登入後複製

除了這些基本用法,模板也為一些程式碼的重複使用提供了巨集的功能,如將如下程式碼寫入macros.html檔案中

{% macro render_title(blog)%}
 <li>{{blog.title}}</li>
{% endmacro%}
登入後複製

然後在先前的範本中:

{% import &#39;macros.html&#39; 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框架進行整合。

以上是教你使用模板引擎和表單外掛的實例詳解(python)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板