Flask高階應用04---jinja2和模板使用
一.模板引擎— jinja2
Flask中使用jinja2模板引擎
jinja2是由Flask作者開發，模仿Django的模板引擎
優點：
速度快，被廣泛使用
HTML設計和後端python分離
非常靈活，快速和安全
提供了控制，繼承等高階功能
二、 模板語法（挖坑、繼承）
1、 模板語法主要分為兩種：變數和標籤
模板中的變數：{{ var }}
檢視傳遞給模板的資料
前面定義出來的資料
變數不存在，預設忽略
模板中的標籤：{% tag %}
控制邏輯
使用外部表示式
建立變數
巨集定義
2、結構標籤：
一般會在base.html中設定挖坑模板，在base_main.html中填充基本內容
（1）挖坑—block
{% block xxx %}
{% endblock %}
塊操作
父模板挖坑，子模板填坑
(2)繼承-----extends
{% extends ‘xxx.html’ %}
繼承以後保留塊中的內容
{{ super() }}
挖坑繼承體現的化整為零的操作
（3）迴圈for、endfor/loop
注意：jianjia2中沒有ifequal語句
{% for item in cols %}
aa
{% else %}
bb
{% endfor %}
也可以獲取迴圈資訊loop
loop.first loop.last loop.index loop.revindex
例子:
在檢視中定義一個檢視函式：
@stu.route('/scores/') def scores(): scores_list = [21,34,32,67,89,43,22,13] content_h2 = '<h2>今天你們真帥</h2>' content_h3 = ' <h3>今天你們真帥</h3> ' return render_template('scores.html', scores=scores_list, content_h2=content_h2, content_h3=content_h3)
(該檢視函式，在下面講解的過濾器中任然使用其返回的content_h2等引數)
首先: 在頁面中進行解析scores的列表。題目要求：第一個成績展示為紅色，最後一個成績展示為綠色，其他的不變
<ul>
{% for score in scores %}
{% if loop.first %}
<li style="color:red;">{{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
{% elif loop.last %}
<li style="color:green;">{{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
{% else %}
<li> {{ loop.revindex }}:{{ loop.index }}:{{ score }}</li>
{% endif %}
{% endfor %}
</ul>
（4）巨集定義macro
就相當於是在模板中定義一個函式，用的時候實現函式呼叫
{% macro hello(name) %}
{{ name }}
{% endmacro %}
巨集定義，可以在模板中定義函式，在其他地方呼叫
1.無引數情況
<!--巨集定義（無引數情況）-->
{% macro hello() %}
<p>你好</p>
{% endmacro %}
{{ hello() }}
2.傳引數情況
<!--有引數的情況-->
{% macro say(name) %}
<p> 你好，{{ name }}</p>
{% endmacro %}
{{ say('小明')}}
3.多個引數
{% macro say(name,age) %}
<p> 你好，{{name}} {{age}}</p>
{% endmacro %}
{{ say('小明',15)}}
4.定義成共有的引入
巨集定義可匯入
{% from ‘xxx’ import xxx %}
單獨定義一個function.py檔案用來存放方法
{% macro hello() %}
<p>你好</p>
{% endmacro %}
{% macro say(name) %}
<p> 你好，{{ name}}</p>
{% endmacro %}
在頁面中引入巨集方法，可以實現效果
{% from 'functions.html' import hello,say %}
{{ hello() }}
{{ say('小明',15)}}
例1：
在index.html中定義macro標籤，定義一個方法，然後去呼叫方法，結果是展示商品的id和商品名稱
{% macro show_goods(id, name) %}
商品id：{{ id }}
商品名稱：{{ name }}
{% endmacro %}
{{ show_goods('1', '娃哈哈') }}
<br>
{{ show_goods('2', '雪碧') }}
例2：
在index.html頁面中定義一個say()方法，然後解析該方法：
{% macro say() %}
<h3>今天天氣氣溫回升</h3>
<h3>適合去游泳</h3>
<h3>適合去郊遊</h3>
{% endmacro %}
{{ say() }}
例3：
定義一個function.html中定義一個方法：
{% macro create_user(name) %}
建立了一個使用者:{{ name }}
{% endmacro %}
在index.html中引入function.html中定義的方法
{% from 'functions.html' import create_user %}
{{ create_user('小花') }}
3、過濾器
語法：
{{ 變數|過濾器|過濾器... }}
capitalize 單詞首字母大寫
lower 單詞變為小寫
upper 單詞變為大寫
title
trim 去掉字串的前後的空格
reverse 單詞反轉
format
striptags 渲染之前，將值中標籤去掉
safe 講樣式渲染到頁面中
default
last 最後一個字母
first
length
sum
sort
例子：
<ul>
<li>{{ content_h2 }}</li>
<li>{{ content_h2|safe }}</li>
<li>{{ content_h2|striptags }}</li>
<li>{{ content_h3 }}</li>
<li>{{ content_h3|length }}</li>
<li>{{ content_h3|trim|safe }}</li>
<li>{{ content_h3|trim|length }}</li>
</ul>
三、定義模板
1 、定義基礎模板base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
{% block extCSS %}
{% endblock %}
</head>
<body>
{% block header %}
{% endblock %}
{% block content%}
{% endblock %}
{% block footer%}
{% endblock %}
{% block extJS %}
{% endblock %}
</body>
</html>
2、 定義基礎模板base_main.html
{% extends 'base.html' %}
{% block extCSS %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}
四、靜態檔案資訊配置
1.flask的兩種方式
第一種方式：
<link rel="stylesheet" href="/static/css/index.css">
第二種方式：
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
2.和Django對比
django：
第一種方式：
{% load static %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
第二種方式：
<link rel="stylesheet" href="/static/css/index.css">