《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 調試模式
就這麽簡單~~~
效果圖：
《Flask web開發》筆記2：模板---繼承、bootstrap