Django操作接口集编辑（十二）

昨天完成了接口集的新增，今天继续完成它的编辑和删除功能。
首先是先写前端的Javascript代码
我们点击编辑之后应该要能跳出一个对话框，然后提示我们修改

弹出

因为没有实现后端代码，所以报错了。下面来看具体实现代码：

// 编辑
    let $tagEdit = $(".btn-edit");  // 1. 获取编辑按钮
    $tagEdit.click(function () {    // 2. 点击触发事件
        let _this = this;
        let sTagId = $(this).parents('tr').data('id');
        let sTagName = $(this).parents('tr').data('name');
        fAlert.alertOneInput({
            title: "编辑接口集名称",
            text: "你正在编辑 " + sTagName + " 标签",
            placeholder: "请输入接口集名称",
            value: sTagName,
            confirmCallback: function confirmCallback(inputVal) {
                console.log(inputVal);
                if (inputVal === sTagName) {
                    swal.showInputError('接口集名称未变化');
                    return false;
                }
                let sDataParams = {
                    "name": inputVal
                };

                $.ajax({
                    // 请求地址
                    url: "/callections/" + sTagId + "/",  // url尾部需要添加/
                    // 请求方式
                    type: "PUT",
                    data: JSON.stringify(sDataParams),
                    // 请求内容的数据类型（前端发给后端的格式）
                    contentType: "application/json; charset=utf-8",
                    // 响应数据的格式（后端返回给前端的格式）
                    dataType: "json",
                })
                    .done(function (res) {
                        if (res.errno === "0") {
                            // 更新标签成功
                            $(_this).parents('tr').find('td:nth-child(1)').text(inputVal);
                            swal.close();
                            message.showSuccess("接口集名称修改成功");
                        } else {
                            swal.showInputError(res.errmsg);
                        }
                    })
                    .fail(function () {
                        message.showError('服务器超时，请重试！');
                    });

            }
        });
    });

$.ajax上面部分和新增类似，都是弹出的对话框中的一些内容
其中666是通过sTagName动态加载的

弹框

下面来看一下ajax中写了啥
type: "PUT",表示我们的接口的函数需要发起PUT请求。
url: "/callections/" + sTagId + "/"表明我们发送的PUT请求的url必须是由callections和一个ID拼接而成了。
然后就是成功和失败的对应返回内容了
成功就是.done(function (res)
失败就是.fail(function ()
基本上由简单的英语能力就可以理解了。毕竟代码都是人写的。
下面来写后台的代码了
老办法，打断点，查看前台到底传了什么过来

断点.gif 断点

然后我们需要将它从byte类型转换成字典格式
dict_data = json.loads(json_data.decode('utf8'))
然后再拿到字典里面的东西：tag_name = dict_data.get('name')
然后再从数据库里面取出id对应的内容
models.Callections.objects.only('id').filter(id=callections_id).first()

数据库

然后我们判断一下，如果和数据库里面那个id存的内容一样的话，那就提示已经存在了，如果不是那就更新上去。

        if tag:
            if tag_name and tag_name.strip():
                if not models.Callections.objects.only('id').filter(name=tag_name).exists():
                    tag.name = tag_name
                    tag.save(update_fields=['name'])
                    return to_json_data(errmsg="接口集更新成功")
                else:
                    return to_json_data(errno=Code.DATAEXIST, errmsg="接口集已存在")
            else:
                return to_json_data(errno=Code.PARAMERR, errmsg="接口集为空")

        else:
            return to_json_data(errno=Code.PARAMERR, errmsg="需要更新的接口集不存在")

放开断点后测试一遍就可以看到接口集名称修改成功～～

测试

欢迎关注我的公众号：zx94_11

公众号