【Flask框架】模板

概述:模板就是按照特定规则书写的负责展示效果的HTML文件,模板引擎就是特定规则的解释和替换的工具jinja2;flask的模板引擎使用的就是jinja2的模板引擎,它是由flask核心开发组成员开发。

一、模板

1、工作目录

project/
    manage.py/  项目启动控制文件
    templates/  模板文件的目录

2、渲染模板

方法1:render_template

视图文件

# 视图文件
@app.route('/')
def index():
    return render_template('index.html')

模板文件




    
    首页


hello world!

方法2:render_template_string

# 视图文件
@app.route('/')
def index():
    render_template_string('

你好,世界!

')

使用变量

# 视图函数
@app.route('/')
def index():
    return render_template('index.html', name='marry', age=25)

# 模板渲染



    
    首页


 {{ name}}--{{ age}}

注意:如果传入的变量不存在,则在模板中插入空白字符。

二、标签

1、作用

  • 在输出中创建文本;
  • 控制逻辑与循环

2、流程控制

(1)if语句

主体结构:

{% if 条件 %}
    pass
{% elif 条件 %}
    pass
{% else %}
    pass
{% endif %}

实例:

{% if age<=18 %}
    {{ name }}用户为儿童用户
{% elif age<=30 %}
    {{ name }}用户为青年用户
{% elif age<=60 %}
    {{ name }}用户为中年用户
{% else%}
    {{ name }}用户为老年用户
{% endif %}

(2)for循环

实例1:迭代列表

{% for i in myRange %}
    第{{ i }}次迭代
{% else %} 没有找到该变量
{% endfor %}

实例2:迭代字典

{% for key,value in myInfo.items() %}
    我的{{ key }}是{{ value }},
{% else %}
    没有找到该变量
{% endfor %}

变量:for循环中还包含了一些变量,用来获取当前变量状态。

变量 描述
loop.index 当前迭代的索引从1开始
loop.index0 当前迭代的索引从0开始
loop.first 是否为第一次迭代,如果是则返回True
loop.last 是否为最后一次迭代,如果是则返回True
loop.length 迭代的长度

实例:

{% for item in myRange %}
    {{ loop.index }}--
    {{ loop.index0 }}--
    {{ loop.first }}--
    {{ loop.last }}--
    {{ loop.length }}
{% endfor %}

注意:

  1. for循环搭配else,只有当迭代的变量不存在的时候才会执行else;
  2. 循环不可以使用continue和break来控制循环的执行;

三、注释标签

1、作用

  • 代码调试
  • 说明代码内容

格式:

{# 注释内容  #}

注意:注释的代码不会在浏览器中的html中显示出来

四、文件包含include

1、概述:

include语句可以把一个模板引入到另外一个模板,类似于把一个不安的代码copy到另外一个模板的指定位置中实现模板代码的复用;

2、实例

header.html

我是头部

footer.html

我是尾部

test_include.html




    
    test_include
    


{% include 'common/header.html' %}
我是中间主体部分
{% include 'common/footer.html' %}

五、宏macro

1、概述

类似于python中的函数,可以封装一段特殊功能的html代码。

2、使用实例


{% macro test(name='关羽',age=25) %}

我的名字叫{{ name }},我今年{{ age }}岁了!

{% endmacro %} {{ test(name='张飞',age=27) }} # 传参 {{ test() }} # 使用默认参数

3、导入宏

宏的导入

{% macro test(name='关羽',age=25) %}
    

我的名字叫{{ name }},我今年{{ age }}岁了!

{% endmacro %}

宏的调用

{% from 'common/pubilc_macro.html' import test %}
{{ test() }}

{% from 'common/pubilc_macro.html' import test as t1 %}
{{ t1() }}

{% import 'common/pubilc_macro.html' as t1 %}
{{ t1.test()}}  

六、模板继承

flask中的模板可以继承,通过继承可以把模板中许多重复出现的元素抽取出来,放在父亲模板中,并且父亲模板通过定义block给自模板开一口,自末班根据需要再实现block

关键标签

  • extends:继承
  • block:替换

实例:

视图函数:

@app.route('/')
def hello():
    return render_template('hello.html')

父模板:base.html




    
    {% block title %}父模板{% endblock %}


{% block context %}

我是父模板中的内容

{% endblock %}

子模板:hello.html

{% extends 'common/base.html' %}
{% block title %}子模板{% endblock %}
{% block context %}
{{ super() }}
我是子模板
{% endblock %}

注意:

  1. 父模板中添加了block,但是在子模板中没有被替换,则正常显示,无任何影响;
  2. 在子模板进行block替换的位置以外的地方添加任何代码都不会被显示出来;
  3. 如果在子模板中进行了父模板中某个block内容的替换,如果想将替换的内容显示出来,则调用变量super()方法;{{  super()  }};
  4. 父模板中如果存在的block越多,那么就证明父模板越灵活。

七、flask-bootstrap扩展库

1、概述

安装

pip install flask-bootstrap

实例化bootstrap对象:

from flask import Flask,redirect,url_for,render_template,render_template_string,request
from flask_script import Manager
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app=app)  # 实例化bootstrap对象
manager=Manager(app)

查看flask-bootstrap扩展库的base.html

{% block doc -%}


{%- block html %}
  
    {%- block head %}
    {% block title %}{{title|default}}{% endblock title %}

    {%- block metas %}
    
    {%- endblock metas %}

    {%- block styles %}
    
    
    {%- endblock styles %}
    {%- endblock head %}
  
  
    {% block body -%}
    {% block navbar %}
    {%- endblock navbar %}
    {% block content -%}
    {%- endblock content %}

    {% block scripts %}
    
    
    {%- endblock scripts %}
    {%- endblock body %}
  
{%- endblock html %}

{% endblock doc -%}

继承bootstrap库中的base.html,并替换部分内容

{% extends 'bootstrap/base.html' %}
{% block title %}我是bootstrap替换后的标题{% endblock %}
{% block content %}我是bootstrap替换后的导航栏{% endblock %}

bootstrap库中所有block的作用

block

说明
doc 整个HTML文档
html HTML内部所有代码
head head标签
title title标签
style 引入css样式
metas 一组meta标签
body body标签
navbar 用户自定义导航条
content 用户自定义内容
scripts 用户自定义js脚本

路由和视图函数

@app.route('/')
def hello():
    return render_template('common/bootstrap_base.html')

你可能感兴趣的:(后端教程,flask,python,后端)