Flask实战第52天：cms添加轮播图前端代码逻辑完成

首页我们在模态框中的保存按钮加一个id，这样方便我们选取这个按钮

<button type="button" class="btn btn-primary" id="save-banner-btn">保存</button>

在static/cms/js/下新建banners.js

$(function () {

    $("#save-banner-btn").click(function (event) {

        event.preventDefault();

        var dialog = $("#banner-dialog");

        var nameInput = dialog.find("input[name='name']");

        var imageInput = dialog.find("input[name='image_url']");

        var linkInput = dialog.find("input[name='link_url']");

        var priorityInput = dialog.find("input[name='priority']");

        var name = nameInput.val();

        var image_url = imageInput.val();

        var link_url = linkInput.val();

        var priority = priorityInput.val();

        if(!name || !image_url || !link_url || !priority){

            zlalert.alertInfoToast('请输入完整的轮播图数据！');

            return;

        }

        bbsajax.post({

            "url": '/cms/abanner/',

            "data": {

                'name':name,

                'image_url': image_url,

                'link_url': link_url,

                'priority':priority,

            },

            'success': function (data) {

                dialog.modal("hide");

                if(data['code'] == 200){

                    // 重新加载这个页面

                    window.location.reload();

                }else{

                    zlalert.alertInfo(data['message']);

                }

            },

            'fail': function () {

                zlalert.alertNetworkError();

            }

        });

    });

});

编辑cms.view.py中的banners视图， 获取数据库数据

@bp.route('/banners/')

@login_required

def banners():

    banners = BannerModel.query.order_by(BannerModel.priority.desc()).all()

    return render_template('cms/cms_banners.html', banners=banners)

编辑cms_banners.html, <tbody>中的内容动态展示

        <tbody>

            {% for banner in banners %}

                <tr>

                    <td>{{ banner.name }}</td>

                    <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>

                    <td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>

                    <td>{{ banner.priority }}</td>

                    <td>{{ banner.create_time }}</td>

                    <td>

                        <button class="btn btn-default btn-xs edit-banner-btn">编辑</button>

                        <button class="btn btn-danger btn-xs delete-banner-btn">删除</button>

                    </td>

                </tr>

            {% endfor %}

        </tbody>

然后在cms_banners.html中引入banners.js

{% block head %}

    <script src="{{ url_for('static', filename='cms/js/banners.js')}}"></script>

    ...

{% endblock %}

这样，我们添加轮播图的功能就完成了，现在可以加轮播图试试