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

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

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

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

1$(function () {
2    $("#save-banner-btn").click(function (event) {
3        event.preventDefault();
4        var dialog = $("#banner-dialog");
5        var nameInput = dialog.find("input[name='name']");
6        var imageInput = dialog.find("input[name='image_url']");
7        var linkInput = dialog.find("input[name='link_url']");
8        var priorityInput = dialog.find("input[name='priority']");
9
10        var name = nameInput.val();
11        var image_url = imageInput.val();
12        var link_url = linkInput.val();
13        var priority = priorityInput.val();
14
15        if(!name || !image_url || !link_url || !priority){
16            zlalert.alertInfoToast('请输入完整的轮播图数据！');
17            return;
18        }
19
20        bbsajax.post({
21            "url": '/cms/abanner/',
22            "data": {
23                'name':name,
24                'image_url': image_url,
25                'link_url': link_url,
26                'priority':priority,
27            },
28            'success': function (data) {
29                dialog.modal("hide");
30                if(data['code'] == 200){
31                    // 重新加载这个页面
32                    window.location.reload();
33                }else{
34                    zlalert.alertInfo(data['message']);
35                }
36            },
37            'fail': function () {
38                zlalert.alertNetworkError();
39            }
40            
41        });
42    });
43});

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

1@bp.route('/banners/')
2@login_required
3def banners():
4    banners = BannerModel.query.order_by(BannerModel.priority.desc()).all()
5    return render_template('cms/cms_banners.html', banners=banners)

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

1<tbody>
2            {% for banner in banners %}
3                <tr>
4                    <td>{{ banner.name }}</td>
5                    <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>
6                    <td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>
7                    <td>{{ banner.priority }}</td>
8                    <td>{{ banner.create_time }}</td>
9                    <td>
10                        <button class="btn btn-default btn-xs edit-banner-btn">编辑</button>
11                        <button class="btn btn-danger btn-xs delete-banner-btn">删除</button>
12                    </td>
13                </tr>
14            {% endfor %}
15        </tbody>

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

1{% block head %}
2    <script src="{{ url_for('static', filename='cms/js/banners.js')}}"></script>
3    ...
4{% endblock %}

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