首页 > 其他分享> > 第三课 Flask模板、flask-bootstrap

第三课 Flask模板、flask-bootstrap

2020-01-29 18:38:40 作者：互联网

Flask 第三课Flask模板、flask-bootstrap

tags:

Flask
2019千锋教育

categories:

flask
template
flask-bootstrap

文章目录

Flask 第三课Flask模板、flask-bootstrap

第一节 flask的模板

1. JInja2
2.模板语法

第二节 flask-bootstrap拓展库

第一节 flask的模板

模板是呈现给用户的界面
在MVT中充当T的角色，实现了VT的解耦，开发中VT有这N:M的关系，一个V可以调用任意T，一个T可以被任意V调用
模板处理分为两个过程
1.加载
2.渲染
模板代码包含两个部分
1.静态HTML
2.动态插入的代码段

1. JInja2

Flask中使用Jinja2模板引擎
Jinja2由Flask作者开发一个现代化设计和友好的Python模板语言,模仿Django的模板引擎
优点
速度快，被广泛使用
HTML设计和后端Python分离
减少Python复杂度
非常灵活，快速和安全
提供了控制，继承等高级功能

2.模板语法

模板语法主要分为两种:变量和标签

模板中的变量{{ var }}
- 视图传递给模板的数据
- 前面定义出来的数据
- 变量不存在，默认忽略
模板中的标签{% tag %}
- 控制逻辑
- 使用外部表达式
- 创建变量
- 宏定义
for循环：可以使用和Python一样的for…else
{% for item in cols %}
AA
{% else %}
BB
{% endfor %}
也可以获取循环信息loop
loop.first loop.last
loop.index loop.index0
loop.revindex loop.revindex0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StudentsList</title>
</head>
<body>
<ul>
    <!--Student.html-->
    <!--for循环-->
    {% for student in student_list %}
        <li> {{ student }} </li>
    {% endfor %}
    
     <!--loop获取循环信息-->
    {% for student in student_list %}
        {% if loop.first %}
            <li style="color: red"> {{ loop.index }}:{{ loop.index0 }}:{{ student }} </li>
        {% elif loop.last %}
            <li style="color: green"> {{ loop.index }}:{{ loop.index0 }}:{{ student }} </li>
        {% else %}
            <li style="color: grey"> {{ loop.index }}:{{ loop.index0 }}:{{ student }} </li>
        {% endif %}
    {% endfor %}
</ul>
<hr>
    <!--if判断-->
    {% if a == 5 %}
        这是A
    {% endif %}
</body>
</html>

@blue.route('/students/')
def students():
    student_list = [i for i in range(10)]
    return render_template('Students.html', student_list=student_list, a=5, b=5)

结构标签
block
{% block xxx %}
{% endblock %}
块操作：父模板挖坑，子模板填坑
extends 挖坑继承体现的是化整为零的操作
{% extends xxx %} 继承后保留块中的内容
{{ super() }} 不覆盖前一个页面的内容
include
{% include ‘xx’ %}
包含，将其他html包含进来，体现的是由零到一的概念
marco 宏定义，可以在模板中定义函数（可以帮我们生产html），在其它地方调用
宏定义可导入:{% from ‘xx’ import xxx %}
{% macro hello(name) %}
{{ name }}
{% endmacro %}

<!DOCTYPE html>
<html lang="en">
<head>
    <!--user/base_user.html模板页面-->
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    {% block ext_css %}
    {% endblock %}
</head>
<body>
<div>
    {% block header %}
    {% endblock %}
    {% block content %}
    {% endblock %}
    {% block footer %}
    {% endblock %}
</div>
{% block ext_js %}
{% endblock %}
</body>
</html>

{% extends 'user/base_user.html' %}
<!--user/user_register.html-->
{% block header %}
    <!--include使用-->
    {% include 'banner.html' %}
{% endblock %}
{% block content %}
    <h2>这是用户注册的内容</h2>
    <!--宏定义函数hello-->
    {% macro hello(name) %}
        <h2>这是一个hello函数</h2>
    {% endmacro %}

    <!--调用宏定义函数hello-->
    {{ hello() }}
    {{ hello() }}
    {{ hello() }}

    <!--导入函数并调用-->
    {% from 'html_func.html' import hehe, goods %}
    {{ hehe('小李') }}
    {{ goods('水杯') }}
{% endblock %}

{% extends 'user/user_register.html' %}
<!--user/user_register2.html页面-->
{% block content %}
    <!--不覆盖前一个页面的内容-->
    {{ super() }}
    <h2>二次填坑</h2>
{% endblock %}

<!--banner.html页面-->
<div>
    <h1>大字轮播</h1>
</div>

<!--用来专门定义html_func.html函数-->
{% macro hehe(name) %}
	<h1>哈哈: {{ name }}</h1>
{% endmacro %}

{% macro goods(name) %}
	<h1>这有一个商品: {{ name }}</h1>
{% endmacro %}

@blue.route('/user_register')
def user_register():
    return render_template('user/user_register.html', title='用户注册')


@blue.route('/user_register2')
def user_register2():
    return render_template('user/user_register2.html', title='用户注册2')

过滤器
过滤器语法： {{ 变量|过滤器|过滤器… }}
过滤器种类较多有兴趣可以自己看官网的API。常用如下
capitalize 首字母大写
lower 小写
upper 大写
title 标题
trim 去空格
reverse 反向
format 格式化
striptags渲染之前，将值中标签去掉

第二节 flask-bootstrap拓展库

安装flask-bootstrap：pip install flask-bootstrap -i https://pypi.douban.com/simple
这个库不支持bootstrap4
初始化（ext.py）：
from flask_bootstrap import Bootstrap
Bootstrap(app)
bootstrap/base.html 内容如下：
- html_attribs 给整个html添加属性
- html
  - head
    - title
    - metas
    - styles
  - body. attribs
  - body
    - navbar
    - content
    - scripts
一些组件直接从bootstrap上找案例：导航和巨幕

<!--base.html-->
{% extends 'bootstrap/base.html' %}
{% block navbar %}
<nav class="navbar navbar-inverse">
    <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="#">标题</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>
                <li><a href="#">电影院</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="密码">
                </div>
                <button type="submit" class="btn btn-default">登录</button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{% endblock %}
{% block content %}
    {% block header %}

    {% endblock %}
    {% block container %}

    {% endblock %}
    {% block footer %}

    {% endblock %}
{% endblock %}

<!--index.html-->
{% extends 'base.html' %}
{% block header %}
<div class="container">
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>
{% endblock %}

@blue.route('/index')
def index1():
    return render_template('index.html')

道教儒佛电磁波发布了43 篇原创文章 · 获赞 5 · 访问量 632 私信关注

标签：Flask,flask,html,模板,loop,endblock,第三课,block
来源： https://blog.csdn.net/aa18855953229/article/details/104108931