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

zx钟

发布于 2019-07-19 14:25:09

4710

发布于 2019-07-19 14:25:09

昨天完成了接口集的新增，今天继续完成它的编辑和删除功能。首先是先写前端的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 () 基本上由简单的英语能力就可以理解了。毕竟代码都是人写的。下面来写后台的代码了老办法，打断点，查看前台到底传了什么过来

断点然后我们需要将它从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="需要更新的接口集不存在")

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