一個基于flask的web應用誕生 使用模板引擎和表單插件(2)
經(jīng)過了第一章的內容,已經(jīng)可以做出一些簡單的頁面,首先用這種方式做一個登錄頁面,首先要創(chuàng)建一個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后,顯示登錄成功
功能上當然是實現(xiàn)了,但是從其他方面來說,卻很難說它是一個能夠實際應用的程序,即使不考慮js腳本和css樣式表,就從簡簡單單的維護來說,就是一場噩夢,比如說像增加一個驗證碼框,我想不會有人認為這是一件愉快的工作。
所以,首先來說,我們要把頁面html部分立出來,這點,flask提供了jinja2模板引擎來實現(xiàn)。
jinja2模板引擎同樣符合flask最基礎的約定,即眾多配置中都有一個基礎的默認值,相對jinja2來說,有一個最重要的默認值,即模板文件放在templates文件夾,這個文件夾雖然可以自定義,但目前來說,使用默認值已經(jīng)足夠了。
好,首先在PyCharm的項目根目錄創(chuàng)建templates文件夾,然后在文件夾內創(chuàng)建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 #頁頭,導入渲染函數(shù)
@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函數(shù)支持多參數(shù),其中函數(shù)的第一個參數(shù)為模板名,之后可以提供若干參數(shù),均為鍵值對,為模板中的變量提供數(shù)據(jù)。如此例子中,為site_name提供了myblog的值,而模板內使用{{參數(shù)名}}來表示一個變量
此時瀏覽器輸入地址輸出結果為:
<!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 %}
//循環(huán)
<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>
執(zhí)行結果與之前的完全相同
Jinja2還提供了一個更為強大的功能,即模板繼承,這個個人感覺有點像java的sitemesh框架,它首先需要創(chuàng)建一個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 %}
此時執(zhí)行結果仍為:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>blog</title> </head> <body> <h1>這個站點的名字為 myblog </h1> </body> </html>
現(xiàn)在有了模板引擎,不管怎么說,僅僅就頁面層來說,已經(jīng)可以很輕松的做出一些不錯的功能了,但很明顯,現(xiàn)在的界面還不是很美觀,下一章將把現(xiàn)在主流的前端框架bootstrap與flask框架進行整合。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Python 圖形界面框架TkInter之在源碼中找pack方法
這篇文章主要介紹了Python 圖形界面框架TkInter之在源碼中找pack方法,根據(jù)不同的需求,選擇對應的布局方式,每個控件都可以使用pack作為布局管理,下面我們就來看看從源碼中找pack()在哪里,需要的朋友可以參考下2022-03-03
python爬蟲實戰(zhàn)之最簡單的網(wǎng)頁爬蟲教程
在我們日常上網(wǎng)瀏覽網(wǎng)頁的時候,經(jīng)常會看到一些好看的圖片,我們就希望把這些圖片保存下載,或者用戶用來做桌面壁紙,或者用來做設計的素材。下面這篇文章就來給大家介紹了關于利用python實現(xiàn)最簡單的網(wǎng)頁爬蟲的相關資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08
python實現(xiàn)精準搜索并提取網(wǎng)頁核心內容
這篇文章主要為大家介紹了python實現(xiàn)精準搜索并提取網(wǎng)頁核心內容的實現(xiàn),有需要的的朋友可以借鑒參考下,希望能有所幫助祝大家多多進步2021-11-11

