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>

复制代码