Flask的Composite（一）：flask-bootstrap、前端页面、flask-debugtoolbar

一.flask-bootstrap

1.安装

pip install flask-bootstrap

2.初始化

在ext中初始化：Bootstrap（app=app）

3.bootstrap模板

flask-bootstrap给我们提供bootstrap的模板
模板位置 bootstrap–>base.html

根据提供的bootstrap模板，我们可以自己修改，这里可以在bootstrap官网中找到全局CSS样式和组件，创建自己喜欢的页面。

二.前端页面

在templates包中添加testBootstrap.html文件：

#继承bootstrap/base.html页面
{% extends 'bootstrap/base.html' %}

{% block navbar %}
    {{ super() }} #防覆盖
    #导航条
    <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="#">影视演员</a></li>
                    <li><a href="#">热门电影</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入你喜欢的电影">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">注册</a></li>
                    <li><a href="#">登陆</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
{% endblock %}

{% block content %}
    {{ super() }}
    <div class="container">
        #巨幕设置
        <div class="jumbotron">
            <h1>源影基地欢迎您</h1>
            <p>这里只有你想不到的，没有我们做不到的</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">快乐旅程</a></p>
        </div>
        <div align="center">
        #设置表格
        <table class="table" width="400" height="200">
            <tr align="center">
                <td class="active">电影名称</td>
                <td class="success">导演</td>
                <td class="warning">领衔主演</td>
                <td class="danger">上映日期</td>
                <td class="info">制片人</td>
            </tr>
            #获取数据
            {% for p in pagination.items %}
                <tr align="center">
                    <td class="active">{{ p.name }}</td>
                    <td class="success">{{ p.director }}</td>
                    <td class="warning">{{ p.actor }}</td>
                    <td class="danger">{{ p.date }}</td>
                    <td class="info">{{ p.producer }}</td>
                </tr>
            {% endfor %}

        </table>
        #上一页的设置
        {% if pagination.has_prev %}
                    <a href="{{ url_for('blue.testBootStrap') }}?page={{ pagination.prev_num }}">上一页</a>
                    {% else %}
                    <a href="#">上一页</a>

        {% endif %}
         #设置页数显示以及点击页数时，变色
        {% for p1 in pagination.iter_pages() %}
            {% if p1 == page %}
                            <a style="color: red" href="{{ url_for('blue.testBootStrap') }}?page={{ p1 }}">{{ p1 }}</a>
                    {% else %}
                            <a href="{{ url_for('blue.testBootStrap') }}?page={{ p1 }}">{{ p1 }}</a>
            {% endif %}
        {% endfor %}

         #下一页的设置
        {% if pagination.has_next %}
                    <a href="{{ url_for('blue.testBootStrap') }}?page={{ pagination.next_num }}">下一页</a>
                    {% else %}
                    <a href="#">下一页</a>
        {% endif %}
        </div>
    </div>
{% endblock %}

在models文件中创建模型：

class Movie(db.Model):
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    name = db.Column(db.String(32))
    director = db.Column(db.String(32))
    actor = db.Column(db.String(32))
    date = db.Column(db.String(32))
    producer = db.Column(db.String(32))

在views文件中添加：

@blue.route('/testBootStrap/')
def testBootStrap():
    # page是前端页面传过来的page，也就是当前页
    # 在视图函数中接收当前页
    page = int(request.args.get('page',1))
    per_page = int(request.args.get('per_page',5))

    # paginate的方法返回的是pagination对象，该对象部可以被迭代
    pagination = Movie.query.paginate(page,per_page)
    # page=page是将前台页面穿过来的page 再次给传回去
    return render_template('testBootStrap.html',pagination=pagination,page=page)

Movie表：

运行结果：

三.flask-debugtoolbar（辅助调试插件）

1.安装

pip install flask-debugtoolbar

2.初始化

在ext文件中进行初始化：
　　　　　app.debug = True
　　 　　　debugtoolbar = DebugToolbarExtension()
　　　　　 debugtoolbar.init_app(app=app)

3.测试

可直接运行测试