Flask框架教程汇总(2)---其中有模板+过滤器+ 宏等

本文链接：https://blog.csdn.net/wylycool/article/details/80758506

本节目录:
1 模板使用
2 过滤器
3 模板标签
4 模板的注释
5 模板的包含—>include
6 宏的使用—>macro
7 模板的继承
8 flask-bootstrap
9 错误页面定制—> 404 500
10 视图传递多个参数
11 url_for—>通过函数获取对应的url
12 加载静态资源

本教程的flask环境都是在ubuntu 16.04下 —python3.5—IDE为pycharm 如果有任何问题可以留言哦 !

模板引擎
说明：按照一定的规则,负责展示并渲染一个html页面给用户, 模板提供了替换的规则
模板引擎： jinja2 是由flask的核心开发组成员开发的

一、模板的使用

(1) 创建模板目录

 project/
        templates/
            模板文件

(2) 跳转模板的方法

from flask import render_template,render_template_string

render_template
       return render_template('index.html') #将index.html页面的内容读取出来并进行响应
render_template_string
       return render_template_string('<h1>index</h1>')

(3) 模板中的语法
1. 变量
视图传递过来的数据
{{ 变量名称 }}
2. 标签
就是python中的循环\分支结构…
{% 标签名称 %}

二、过滤器

过滤器使用管道符 |

var|abs 绝对值
var|default(‘默认值’)
注意：
默认只有var变量不存在才走default
default(boolean=True) 此刻undefined和Flase都会执行默认值
var|first 取出var值中的第一个值
vat|last 取出var值中的最后一个值
format() 格式化值
format格式化{{ ‘我叫%s 我今年%d岁了我的存款为%.2f’|format(‘xx’,38,1.00002) }}
var|length 计算var值的长度
var|join
{{ [‘a’,’b’]|join(‘x’) }}
var|safe 解析视图传递过来的html 不再进行转义
var|int 将var值转换为整形
var|string 将var值转换为字符串类型
var|float 将var值转换为浮点形
var|list 将var值转换为列表
var|lower 将var值转换为小写
var|upper 将var值转换为大小写
var|replace 替换
{{ data.html|replace(‘h’,’x’) }}
var|striptags 删除html中的所有标签
var|trim 去除两侧的空白字符

三、模板标签

语法：{% tag %}

(1) if elif else

主体结构

    {% if data.bool %}
        {{ data.bool }}为真
    {% elif data.none %}
        {{ data.none }}为真
    {% else %}
        以上都为假
    {% endif %}

(2) for in 循环

遍历字典

 {% for k,v in data.items() %}
          <li>{{ foo }}</li>
           <li>{{ data.abcd }}</li>
            <li>{{ k }}==>{{ v }}</li>
    {% endfor %}

和else搭配

    {% for in %}
        ...
    {% else %}
        ...
    {% endfor %}

注意:
当进行迭代的对象不存在时则执行else

获取当前迭代的状态

变量描述
loop.index 获取当期迭代的索引从1开始
loop.index0 获取当期迭代的索引从0开始
loop.first 是否为第一次迭代返回True或者False
loop.last 是否为最后一次迭代返回True或者False
loop.length 迭代的长度

四、模板中的注释

{# 注释的内容 #}

五、模板的包含 —> include

主体结构

{% include(‘模板名称’) %}
{% include(‘目录/模板名称’) %}

使用

 project/
        templates/
            common/
                header.html
                footer.html
            index.html
        manage.py

实例 : 在index.html中代码如下

    {% include('common/header.html') %}
    {#{% include('test.html') %}#}
    <h1>我是中间的内容部分</h1>
    {% include('common/footer.html') %}

六、宏的使用 macro

概念：模板中的宏其实就是python中的函数

(1) 宏的定义

主体结构

{% macro 宏的名称([参数...s]) %}  #宏的主体

{% endmacro %}

(2) 宏的调用

{{ 宏的名称([参数...]) }}

(3) 实例

在templates/common/formmacro.html

    {% macro input(type='text',name='',value='') %}
        <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
    {% endmacro %}

使用

    {% import 'common/formmacro.html' as formmacro %}
    <form action="">
        <p>用户名：{{ formmacro.input(name='username') }}</p>
        <p>密码：{{ formmacro.input('password','userpass') }}</p>
        <p>性别：
            {{ formmacro.input('radio','sex',1) }}男
            {{ formmacro.input('radio','sex',0) }}女
        </p>
        <p>{{ formmacro.input('submit',value='submit') }}</p>
    </form>

(4) 导入

import … as …
{% import ‘common/formmacro.html’ as formmacro %}
如果index.html和formmacro同级可以直接导入
{% import ‘formmacro.html’ as formmacro %}
from import as
{% from ‘common/formmacro.html’ import input %}
{% from ‘common/formmacro.html’ import input as form %}

注意：

不能在宏定义的上方去调用
宏如果存在形参如果不传实参则行参的值为空也不会报错
在给形参默认值的时候必须遵循默认值的规则幽默认值的放在后面和 python的函数一样

七、模板的继承

使用extends标签来进行模板的继承使用block将模板中的公共部分的位置开一个口子在继承的时候去填充

使用到的标签

{% extends ‘继承的模板名称’ %}

{% block 替换的名称 %}

{% endblock %}

自定义一个基础模板base.html

    <!DOCTYPE html>
    <html lang="en">
    {% block head %}
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>
        {% block meta %}{% endblock %}
        <style>
            {% block style %}
                *{color:red;}
            {% endblock %}
        </style>
        {% block link %}{% endblock %}
    </head>
    {% endblock %}
    <body>
    {% include 'common/header.html' %}
    {% block con %}

    {% endblock %}
    {% include 'common/footer.html' %}
    </body>
    </html>

使用 index.html

    #这儿的common是一个文件夹, 里边有一个基础base.html,可以自己在网上找,然后开始做block去填充
    {% extends 'common/base.html' %}
    {% block title %}首页{% endblock %}
    {% block style %}
        {# 调用基础模板内的样式  如果不调用则全部被覆盖 #}
        {{ super() }}
        p{font-size:20px;}
    {% endblock %}
    {% block con %}
        我是中间的内容部分
    {% endblock %}

注意：

在替换的外部的填写的内容不会被显示出来
如果在替换某一个block的时候替换以后所有的样式消失则去查看是否有调用super()

八、flask-bootstrap

(1) 安装这里用的是系统是 ubuntu 16.04版本

    sudo pip3 install flask-bootstrap

(2) 使用

在manage.py中

    from flask_bootstrap import Bootstrap

    app = Flask(__name__)
    bootstrap = Bootstrap(app) #实例化bootstrap

在模板中继承bootstrap/base.html 改变成自己的基础模板

    {% extends 'bootstrap/base.html' %}
    {% block title %}
        使用bootsrap
    {% endblock %}
    {% block navbar %}
        <nav class="navbar navbar-inverse" style="border-radius: 0px;">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <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="#"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">发帖子</a></li>

                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">注册</a></li>
                        <li><a href="#">登录</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                               aria-expanded="false">个人中心 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">个人信息</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">修改密码</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                </div><!-- /.navbar-collapse -->
            </div>
        </nav>

    {% endblock %}
    {% block content -%}
        <div class="container">
            {% block page_content %}
            {% endblock %}
        </div>
    {%- endblock content %}

在index.html中使用

    {% extends 'common/boot_base.html' %}
    {% block title %}首页{% endblock %}
    {% block page_content %}
        <h2>我是首页</h2>
    {% endblock %}

九、错误页面的定制

在manage.py中写入捕获的代码

    #制定捕获404和500的错误页面
    @app.errorhandler(404)
    def page_not_found(e):
        return render_template('error.html',error=e,code=404)

    @app.errorhandler(500)
    def page_not_found(e):
        return render_template('error.html',error=e,code=500)

制定显示错误的页面

    {% extends 'common/boot_base.html' %}
    {% block title %}
    {{ code }}
    {% endblock %}
    {% block page_content %}
        <div class="alert alert-danger" role="alert">{{ error }}
    </div>
    {% endblock %}

十、视图传递多个参数

(1) 普通传参

 return render_template('模板名称.html',arg1=val1,arg2=val2...)

(2) 字典传参

 return render_template('模板名称.html',arg={arg1:val1....})

(3) 全局变量g

    @app.route('/test')
    def test():
        g.name = '张三'
        g.sex = '男'
        return render_template('test.html')

模板中

     <h2>{{ g.name }}</h2>
        <h2>{{ g.sex }}</h2>

(4) **locals()

 @app.route('/test')
    def test():
        name = '张三'
        sex = '男'
        print(locals())
        return render_template('test.html',**locals())

index.html模板中的写法

 <h2>{{ name }}</h2>
    <h2>{{ sex }}</h2>

十一、url_for 回顾

  url_for('index',_external=True) #构造绝对的url
    http:127.0.0.1:5000/

十二、加载静态资源

   {{ url_for('static',filename='img/mei.jpg') }}

static 视图函数是flask给提供的并不是自定义的视图函数

技术交流可以留言评论哦 ! 虚心学习, 不忘初心, 共同奋进 !

Flask框架教程汇总(2)---其中有模板+过滤器+ 宏 等

Flask框架教程汇总(2)---其中有模板+过滤器+ 宏等