前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BBS论坛(二十一)

BBS论坛(二十一)

作者头像
zhang_derek
发布2019-02-13 16:01:38
3920
发布2019-02-13 16:01:38
举报
文章被收录于专栏:有趣的django有趣的django

21.1.编辑轮播图功能完成

(1)cms_banners.html

把属性绑定到<tr>上面,方便找到各属性的值

代码语言:javascript
复制
   <tbody>
        {% for banner in banners %}
            <tr data-name="{{ banner.name }}" data-id="{{ banner.id }}" data-img="{{ banner.img_url }}"
                data-link="{{ banner.link_url }}" data-priority="{{ banner.priority }}">

                <td>{{ banner.name }}</td>
                <td><a href="{{ banner.img_url }}" target="_blank">{{ banner.img_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>

(2)banner.js

代码语言:javascript
复制
$(function () {
    $('#save_banner_btn').click(function (event) {
        event.preventDefault();
        var self = $(this);
        var dialog = $('#modal-dialog');
        var nameInput = $("input[name='name']");
        var imgInput = $("input[name='img_url']");
        var linkInput = $("input[name='link_url']");
        var priorityInput = $("input[name='priority']");

        var name = nameInput.val();
        var img_url = imgInput.val();
        var link_url = linkInput.val();
        var priority = priorityInput.val();
        var submitType = self.attr('data-type');
        var bannerId = self.attr('data-id');


        if (!name || !img_url || !link_url || !priority) {
            zlalert.alertInfo('请输入所有数据');
            return;
        }

        var url = '';
        if (submitType == 'update') {
            url = '/cms/ubanner/';
        } else {
            url = '/cms/abanner/'
        }
        zlajax.post({
            'url': url,
            'data': {
                'name': name,
                'img_url': img_url,
                'link_url': link_url,
                'priority': priority,
                'banner_id': bannerId
            },
            'success': function (data) {
                if (data['code'] == 200) {
                    dialog.modal('hide');
                    window.location.reload()
                } else {
                    zlalert.alertInfo(data['message']);
                }
            },
            'fail': function (error) {
                zlalert.alertNetworkError()
            }
        });
    });

});

$(function () {
    $('.edit-banner-btn').on('click', function (event) {
        var $this = $(this);
        var dialog = $('#banner-dialog');
        dialog.modal('show');

        var tr = $this.parent().parent();
        var name = tr.attr('data-name');
        var img = tr.attr('data-img');
        var link = tr.attr('data-link');
        var priority = tr.attr('data-priority');
        var nameInput = dialog.find('input[name=name]');
        var imgInput = dialog.find('input[name=img_url]');
        var linkInput = dialog.find('input[name=link_url]');
        var priorityInput = dialog.find('input[name=priority]');
        var saveBtn = dialog.find('#save_banner_btn');

        nameInput.val(name);
        imgInput.val(img);
        linkInput.val(link);
        priorityInput.val(priority);
        saveBtn.attr('data-type', 'update');
        saveBtn.attr('data-id', tr.attr('data-id'));

    });
});

(3)cms/forms.py

代码语言:javascript
复制
class AddBannerForm(BaseForm):
    name=StringField(validators=[InputRequired(message='请输入轮播图名称')])
    img_url=StringField(validators=[InputRequired(message='请输入轮播图链接')])
    link_url=StringField(validators=[InputRequired(message='请输入轮播图跳转链接')])
    priority=IntegerField(validators=[InputRequired(message='请输入轮播图优先级')])

(4)cms/views.py

代码语言:javascript
复制
@bp.route('/ubanner/',methods=['POST'])
def ubanner():
    form=UpdateBannerForm(request.form)
    if form.validate():
        banner_id=form.banner_id.data
        name=form.name.data
        img_url=form.img_url.data
        link_url=form.link_url.data
        priority=form.priority.data
        banner=BannerModel.query.get(banner_id)
        if banner:
            banner.name=name
            banner.img_url=img_url
            banner.link_url=link_url
            banner.priority=priority
            db.session.commit()
            return restful.success()
        else:
            return restful.params_error(message='没有这个轮播图')
    else:
        return restful.params_error(message=form.get_error())

21.2.删除轮播图功能完成

(1)cms/forms.py

代码语言:javascript
复制
class UpdateBannerForm(AddBannerForm):
    banner_id=IntegerField(validators=[InputRequired(message='请输入轮播图ID')])

(2)banner.js

代码语言:javascript
复制
$(function () {
    $('.delete-banner-btn').on('click', function () {
        var banner_id = $(this).parent().parent().attr('data-id');
        zlalert.alertConfirm({
            'msg': '确定要删除这张图片吗?',
            'confirmCallback': function () {
                zlajax.post({
                    'url': '/cms/dbanner/',
                    'data': {
                        'banner_id': banner_id
                    },
                    'success': function (data) {
                        if (data['code'] == 200) {
                            window.location.reload();
                        } else {
                            zlalert.alertInfo(data['message'])
                        }
                    }

                })
            }
        });
    });
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-06-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 21.1.编辑轮播图功能完成
  • 21.2.删除轮播图功能完成
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档