當前位置:網站首頁>Flask學習與項目實戰3:簡單入手模板及高階使用

Flask學習與項目實戰3:簡單入手模板及高階使用

2022-01-28 02:45:10 洲的學習筆記

聲明:本學習系列筆記是來源B站 知了傳課 up主的教學視頻的個人學習筆記,原up主教學視頻地址:https://www.bilibili.com/video/BV17r4y1y7jJ?p=10。

模板簡介

模板是開發web的必備模塊,渲染網頁的時候,並不是渲染一個純文本,而是渲染一個富有文本標簽的頁面。
這個時候就需要使用上模板了。在flask中,配套的模板是jinja2。跟flask一樣簡單高效。使用起來容易上手。

簡單入手

注意模板會在templates裏面去尋找這些模板的。所以html需要放在templates下進行操作。

也可以通過更改 Flask(name,template_folder)來修改模板的地址,但是一般不會這麼做。

通過render_template來渲染模板。

如果想要傳遞變量到模板之中,可以把變量定義成字典,然後再render_template中通過關鍵字參數的方式傳遞過去。

在這裏插入圖片描述

在這裏插入圖片描述

模板過濾器 Jinja2

過濾器是通過管道符號(|)進行使用的,例如:{ { name|length }},將返回name的長度。過濾器相當於是一個函數,把當前的變量傳入到過濾器中,然後過濾器根據自己的功能,再返回相應的值,之後再將結果渲染到頁面中。Jinja2中內置了許多過濾器,在這裏可以看到所有的過濾器,現對一些常用的過濾器進行講解:
在這裏插入圖片描述

html中不能使用python中的一些函數等等。過濾器就是可以使用一些來進行類似內置函數的操作。

join過濾器:將一個序列變成字符串。

在這裏插入圖片描述
使用了join過濾器的情况如下:
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

控制語句

{% %}就可以使用控制語句了。{ {}}兩個花括號是使用變量的值。

if

在這裏插入圖片描述

然後通過**context把變量傳進去。

在這裏插入圖片描述
這樣訪問about的時候,就會看道 您剛成年這四個字,因為傳進來的變量值是18。

在這裏插入圖片描述
遍曆 books裏面的每個元素。

在這裏插入圖片描述

在這裏插入圖片描述
遍曆person:
在這裏插入圖片描述
在這裏插入圖片描述

模板繼承

關鍵字:block extends

有些網頁中是有很多樣式一樣的。

所以可以使用模板繼承。

首先定義父模板。

首先title中,使用block進行預留title給子模板使用。

在這裏插入圖片描述
接下來其他的模板就可以進行繼承了。

使用 extends 進行繼承就可以了。

具體的形式如下圖所示:

在這裏插入圖片描述

靜態文件的配置

靜態文件放在static下的。

Web應用中會出現大量的靜態文件來使得網頁更加生動美觀。類似於CSS樣式文件、JavaScript脚本文件、圖片文件、字體文件等靜態資源。在Jinja中加載靜態文件非常簡單,只需要通過url_for全局函數就可以實現,看以下代碼:

在這裏插入圖片描述

版權聲明
本文為[洲的學習筆記]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201280245099634.html

隨機推薦