python?flask之模板繼承方式

更新時(shí)間：2023年03月02日 10:39:58 作者：現(xiàn)在叫阿湯哥

這篇文章主要介紹了python?flask之模板繼承方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

flask之模板繼承

為什么要用模板繼承？

原因很簡(jiǎn)單，因?yàn)槟０謇^承能讓我們?cè)趯?shí)現(xiàn)效果的前提下少些很多代碼！

咱廢話(huà)不多說(shuō)，先來(lái)看個(gè)小例子，看完我講的這個(gè)例子，相信你能更加明白模板繼承的好處、優(yōu)點(diǎn)?。榱俗尨蠹夷軌蚋用靼啄０謇^承的優(yōu)點(diǎn)，在這里我先以傳統(tǒng)方式來(lái)做）

首先、在static目錄下新建一個(gè)style目錄（用于存放所有的css文件），然后新建一個(gè)style文件（style.css），其代碼如下：

*{margin: 0; padding: 0;}
ul{list-style: none;}
li{width:100px; float: left;}
.cl_btoh{clear: both;}
 
#head{width:800px; height:50px; line-height: 50px; margin:0 auto; background-color: #303641;}
#head a{color:#ECEFF1;}
#head ul{line-height: 50px;}
#head li{text-align: center;}
 
#main{height:400px; width:800px; background-color: yellowgreen; margin: 0 auto; color:#FFFFFF;
text-align: center; line-height: 400px;}
 
#footer{height:40px; width:800px; margin: 0 auto; background-color: #3B666B; color:#FFFFFF;
text-align: center; line-height: 40px;}

在templates模板目錄下新建一個(gè)index.html文件（首頁(yè)）和一個(gè)list.html（列表頁(yè)）

index.html文件代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}">
	</head>
	<body>
        {# head start#}
        <div id="head">
            <ul>
                <li><a href="#">首頁(yè)</a></li>
                <li><a href="#">養(yǎng)生新聞</a></li>
                <li><a href="#">人群養(yǎng)生</a></li>
                <li><a href="#">兩性養(yǎng)生</a></li>
                <li><a href="#">生活養(yǎng)生</a></li>
                <li><a href="#">飲食養(yǎng)生</a></li>
                <li><a href="#">中醫(yī)養(yǎng)生</a></li>
            </ul>
        </div>
        <div class="cl_btoh"></div>
 
        {#  main start  #}
        <div id="main">
            <h4>這是index頁(yè)面主體部分</h4>
        </div>
 
        {#  footer start  #}
        <div id="footer">
            <h4>網(wǎng)站底部?jī)?nèi)容</h4>
        </div>
	</body>
</html>

list.html文件代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}">
	</head>
	<body>
        {# head start#}
        <div id="head">
            <ul>
                <li><a href="#">首頁(yè)</a></li>
                <li><a href="#">養(yǎng)生新聞</a></li>
                <li><a href="#">人群養(yǎng)生</a></li>
                <li><a href="#">兩性養(yǎng)生</a></li>
                <li><a href="#">生活養(yǎng)生</a></li>
                <li><a href="#">飲食養(yǎng)生</a></li>
                <li><a href="#">中醫(yī)養(yǎng)生</a></li>
            </ul>
        </div>
        <div class="cl_btoh"></div>
 
        {#  main start  #}
        <div id="main">
            <h4>這是list頁(yè)面主體部分</h4>
        </div>
 
        {#  footer start  #}
        <div id="footer">
            <h4>網(wǎng)站底部?jī)?nèi)容</h4>
        </div>
	</body>
</html>

然后我們?cè)賱?chuàng)建一個(gè)test.py文件，其代碼如下：

from flask import Flask,render_template
 
app = Flask(__name__)
 
@app.route("/")
def index():
    return render_template("index.html")
 
@app.route("/list/")
def my_list():
    return render_template("list.html")
 
if __name__ == "__main__":
    app.run(debug=True)

運(yùn)行test.py文件，打開(kāi)瀏覽器，看看運(yùn)行效果，結(jié)果如下。

這兩個(gè)運(yùn)行結(jié)果，除了中間部分不一樣，頭部、底部都一樣，是吧？？我可以坦白告訴大家，基本上每個(gè)網(wǎng)站頭部、尾部都一樣，不信你可以打開(kāi)新浪，網(wǎng)易、豆瓣網(wǎng)站瞅瞅.....有點(diǎn)跑題了哈?。≡垩詺w正傳。

既然我們知道網(wǎng)站頭部、底部都一樣，哪我們是不是可以把網(wǎng)站頭部、底部代碼抽取出來(lái)，放到公共頁(yè)面中，下次需要我們?cè)诶^承或者調(diào)用就OK了，是吧？說(shuō)干就干??！

我們?cè)趖emplates目錄下新建一個(gè)base.html文件，這個(gè)文件（base.html）可以稱(chēng)為父模板或基模板，其代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='style/css.css') }}">
</head>
<body>
    {% block head %}
         <div id="head">
            <ul>
                <li><a href="#">首頁(yè)</a></li>
                <li><a href="#">養(yǎng)生新聞</a></li>
                <li><a href="#">人群養(yǎng)生</a></li>
                <li><a href="#">兩性養(yǎng)生</a></li>
                <li><a href="#">生活養(yǎng)生</a></li>
                <li><a href="#">飲食養(yǎng)生</a></li>
                <li><a href="#">中醫(yī)養(yǎng)生</a></li>
            </ul>
        </div>
        <div class="cl_btoh"></div>
    {% endblock %}
 
 
    {% block main %}
         <div id="main">
            <h4>這是index頁(yè)面主體部分</h4>
        </div>
    {% endblock %}
 
    {% block footer %}
         <div id="footer">
            <h4>網(wǎng)站底部?jī)?nèi)容</h4>
        </div>
    {% endblock %}
</body>
</html>

我們?cè)诟改０逯卸x好了接口后，子模板（index.html 跟 list.html）的代碼可以刪除了。刪除了不能就這樣走人完事了，我們還得實(shí)現(xiàn)我們之前的效果對(duì)吧！

在index.html文件中，我們通過(guò)extends語(yǔ)句來(lái)導(dǎo)入父模板，然后就能在子模板中衍生父模板定義的接口。

index.html代碼如下：

{% extends "base.html" %}

咦，咋就一行代碼嘞，阿湯鍋，你在逗我呢？嗯，沒(méi)錯(cuò)，就一行代碼！夠精簡(jiǎn)吧?。⊙镜?，不信是吧？不信我們運(yùn)行看看效果，結(jié)果如下：

結(jié)果是不是和之前一模一樣，是吧？現(xiàn)在有個(gè)需求，啥需求呢？比如我想將index.html頁(yè)面“網(wǎng)站底部?jī)?nèi)容“這幾個(gè)字改成footer，哪怎么做呢？

做法：

在index.html頁(yè)面中，重寫(xiě)父模板定義的footer接口，如果沒(méi)有定義，就得在父模板先定義再重寫(xiě)。（由于我們?cè)诟改０逯卸x了，哪我們就無(wú)需定義），index.html其代碼如下：

{% extends "base.html" %}
 
{% block footer %}
     <div id="footer">
            <h4>footer</h4>
     </div>
{% endblock %}

運(yùn)行，試試，看是不是實(shí)現(xiàn)了我們得需求！

嗯，底部文字確實(shí)變成了footer，不過(guò)呢，現(xiàn)在又有一個(gè)新需求。我想要在這是index頁(yè)面主體部分加一行內(nèi)容，咋辦呢？有朋友可能會(huì)說(shuō)：哪還不簡(jiǎn)單，直接在index.html block main中定義就ok了唄。嗯，我們來(lái)試試這法子，在index.html增加如下代碼：

{% block main %}
    <div id="main">
        <p>test</p>
    </div>
{% endblock %}

運(yùn)行結(jié)果如下：

阿湯哥、咋回事？不是說(shuō)好的在這是index頁(yè)面主體部分下面加一行內(nèi)容？？之前的內(nèi)容跑哪去了？為什么會(huì)出現(xiàn)這樣的情況呢？？原因很簡(jiǎn)單，因?yàn)槲覀冊(cè)谧幽０宥x的內(nèi)容將父模板接口定義的內(nèi)容覆蓋了，哪有啥解決辦法呢？要想實(shí)現(xiàn)功能，只需增加一個(gè)super變量即可，代碼如下：

{% block main %}
    {{ super() }}
    <div style="height:auto;width: 800px;background-color:yellowgreen;margin:0 auto;"><b>ee</b></div>
{% endblock %}

再運(yùn)行試試，結(jié)果實(shí)現(xiàn)了我們想要的結(jié)果。