《Flask web開發》筆記2:模板---繼承、bootstrap


前言:今天重新梳理了一下前端方面的知識,發現學習東西還是要用,不然忘得快,廢話不多說,開始!!

一.模板繼承

    1.概念:   書上說,模板繼承,類似Python上的繼承; 其實個人覺得和所有繼承都一樣。   

    2.應用場景:當我們寫一系列類似的jinja模板的時候發現,我們總是在重復做些無用的操作,{%%}這東西敲得也蠻累的,這時候就需要引入模板繼承;

    3.例子:

        步驟1. 先建立一個模板,作為 ‘基類’;

 

jilei.html:

<html>
<head>
{% block head %}
<title>{% block title %}{% endblock %} - My Application</title>
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>

   

 

 

   步驟2.定義另一個子模板,繼承“基類“;

 

jicheng.html:

{% extends "jilei.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style>
</style>
{% endblock %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}

這里要強調的是{%block title%}/ {%block head%}/ {%block body%} 在子模板里想寫那個就寫哪個,不寫也可以,到時候render_template(‘jicheng.html’)就行;一個簡單的模板繼承就完了~~~

 

 

分割線

————————————————————————————————————————————————————————————————————————————

 

二.bootstrap

   1.應用場景:bootstrap目前非常的流行,可能在很多項目上都會碰到,自己也做過bootstrap的網頁,很方便,效果也不錯

   2.例子:

      步驟1:pip install flask-bootstrap裝環境咯;

      步驟2:裝完環境后,你可以認為我們已經有了父模板(如何用詳見.py源碼)

      步驟3:有了父模板后,需要建立子模板繼承;

   

子模板:moban.html

{% extends "bootstrap/base.html" %}    //這里就是裝完環境后的bootstrap的自帶模板
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
</div>
{% endblock %}

 

      步驟4:編寫Python來調用

from flask import Flask,render_template,url_for
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
@app.route('/')#定義路由

def index():#視圖函數
    
    return render_template('index.html')#讀Jinja2模板的tempdata文件夾里尋找上一個這個.py文件運行的結果;
    pass

@app.route('/user/<name>')#動態路由

def user(name):
    
    return render_template('extend.html',name=name)
    pass

if __name__ == '__main__':  #啟動服務器
    app.run(debug = True)   #debug = true 調試模式
   

就這么簡單~~~

 效果圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM