Flask基礎-(模板)

概念:包含變量和運算邏輯的HTML，執行這些變量替換和邏輯計算工做的過程稱爲渲染

1.基本語法

a.{{ 。。。}}用來標記變量
b.{%    %}用來標記語句
c.{{ 變量|過濾器 }}
d.{# #}註釋

複製代碼

2.過濾器

safe：禁用轉義；
 <p>{{ '<em>hello</em>' | safe }}</p>
capitalize：把變量值的首字母轉成大寫，其他字母轉小寫；
<p>{{ 'hello' | capitalize }}</p>
lower：把值轉成小寫；
<p>{{ 'HELLO' | lower }}</p>
upper：把值轉成大寫；
<p>{{ 'hello' | upper }}</p>
trim：把值的首尾空格去掉；
<p>{{ ' hello world ' | trim }}</p>
reverse:字符串反轉；
<p>{{ 'olleh' | reverse }}</p>
複製代碼

自定義過濾器:過濾器的本質是函數
待總結.......




複製代碼

3.模板中控制語句

{% if user %}
    {{ user }}
{% else %}
    hello!
<ul>
    {% for index in indexs %}
    <li> {{ index }} </li>
    {% endfor %}
</ul>

{% for index in fruit %}
            <li>{{ index }}</li>
{% endfor %}
複製代碼

4.宏

相似於python中的函數，宏的做用就是在模板中重複利用代碼，避免代碼冗餘

定義宏：
{% macro input() %}
  <input type="text"
         name="username"
         value=""
         size="30"/>
{% endmacro %}

調用宏:
{{ input() }}

把宏單獨抽取出來，封裝成html文件，其它模板中導入使用
複製代碼

5.模板繼承

父模板(base.html):
  {% block top %}
    頂部菜單
  {% endblock top %}

  {% block content %}
  {% endblock content %}

  {% block bottom %}
    底部
  {% endblock bottom %}
 
 子模板:
  {% extends 'base.html' %}
  {% block content %}
   須要填充的內容
  {% endblock content %}
複製代碼

6.Flask中特殊變量在模板中的使用

a.get_flashed_messages方法：
返回以前在Flask中經過 flash() 傳入的信息列表。把字符串對象表示的消息加入到一個消息隊列中，而後經過調用 get_flashed_messages() 方法取出。
{% for message in get_flashed_messages() %}
    {{ message }}
{% endfor %}

request對象：
就是 Flask 中表示當前請求的 request 對象，request對象中保存了一次HTTP請求的一切信息
複製代碼

####7.模板中的樣式定義

參考網址
https://v3.bootcss.com/getting-started/
http://www.bootcss.com/
複製代碼

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可選的 Bootstrap 主題文件（通常不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

複製代碼