BBS论坛（十九）

19.1.cms轮播图管理页面布局

（1）cms/cms_base.html

<li class="nav-group banner-manage"><a href="{{ url_for('cms.banners') }}">轮播图管理</a></li>

（2）views.y

@bp.route('/banners/')
@login_required
def banners():
    return render_template('cms/cms_banners.html')

（3）cms/banners.html

{% extends 'cms/cms_base.html' %}

{% block title %}
    轮播图管理
{% endblock %}

{% block head %}
    <style>
        .top-box{
            overflow: hidden;
            background: #ecedf0;
            padding: 10px 5px;
        }
        .top-box button{
            float: right;
        }

    </style>
{% endblock %}

{% block page_title %}
    {{ self.title() }}
{% endblock %}

{% block main_content %}
    <div class="top-box">
        <button class="btn btn-warning">添加轮播图</button>
    </div>

    <table class="table table-bordered">
        <thead>
        <tr>
            <td>名称</td>
            <td>图片链接</td>
            <td>优先级</td>
            <td>跳转链接</td>
            <td>创建日期</td>
            <td>操作</td>
        </tr>
        </thead>

        <tbody>
            <tr>

            </tr>
        </tbody>

    </table>
{% endblock %}

19.2.添加轮播图模态对话框的制作

cms_banners.html

{% block main_content %}
    <div class="top-box">
        <button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加轮播图</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">轮播图</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" placeholder="轮播图名称">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="img_url" placeholder="轮播图图片">
                            </div>
                            <button class="col-sm-2 btn btn-info">添加图片</button>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">跳转</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="link_url" placeholder="跳转链接">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">权重</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" name="priority" placeholder="权重">
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>

        </div>
    </div>
{% endblock %}

{% extends 'cms/cms_base.html' %}

{% block title %}
    轮播图管理
{% endblock %}

{% block head %}
    <style>
        .top-box {
            overflow: hidden;
            background: #ecedf0;
            padding: 10px 5px;
        }

        .top-box button {
            float: right;
        }

    </style>
{% endblock %}

{% block page_title %}
    {{ self.title() }}
{% endblock %}

{% block main_content %}
    <div class="top-box">
        <button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加轮播图</button>
    </div>

    <table class="table table-bordered">
        <thead>
        <tr>
            <td>名称</td>
            <td>图片链接</td>
            <td>优先级</td>
            <td>跳转链接</td>
            <td>创建日期</td>
            <td>操作</td>
        </tr>
        </thead>

        <tbody>
        <tr>

        </tr>
        </tbody>
    </table>

    <!-- Modal -->
    <div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">轮播图</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" placeholder="轮播图名称">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="img_url" placeholder="轮播图图片">
                            </div>
                            <button class="col-sm-2 btn btn-info">添加图片</button>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">跳转</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="link_url" placeholder="跳转链接">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">权重</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" name="priority" placeholder="权重">
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>

        </div>
    </div>
{% endblock %}