前后端修改

180 阅读1分钟

修改后端内容有时需要将后端部分数据输出在前端,所以修改包括读取部分内容并修改。

读取内容

后端
router.get("/content/:id", async ctx => {//动态路由
        try {
            const data = await contentModel.findOne({_id:ctx.params.id});
            return success(ctx, data);
        } catch (error) {
            return fail(ctx, error);
        }
    })
前端
$(".table").on("click", ".glyphicon-edit", function () {
                //动态
                var id = $(this).parent().attr("data-id");
                $.ajax({
                    url: `http://localhost:3000/content/${id}`,
                    type: "GET",
                    success: function (res) {
                        if (res.status === 200) {
                            const data = res.data;
                            $(".modal-title").html("修改文章");
                            $("#_id").val(id);
                            $("#title").val(data.title)
                            $("#content").val(data.content)
                            $("#top").prop("checked", data.top)
                        }
                        console.log(res);
                    }
                })
                //显示
                $("#modal-id").modal("show");
            })

后段创建动态路由,前端将ID传入后端"/content/:id"中,然后再读取对应的数据传入前端.{_id:ctx.params.id}为后端动态路由要获取的id,而前端则通过${}在原链接后添加动态的_id数据,并且将后端的数据保存在前端对应的位置。

修改内容

前端
                        $.ajax({
                            url: `http://localhost:3000/content/${id}`,
                            type: "PUT",
                            data: { title, content, top },
                            success: function (res) {
                                if (res.status === 200) {
                                    $("#modal-id").modal("hide");
                                    load();
                                } else {
                                    alert(res.msg);
                                }
                            }
                        })
                        return false;
后端
router.put("/content/:id", async (ctx) => {//修改
        try {
            const data = await contentModel.updateOne({_id:ctx.params.id}, ctx.request.body);
            return success(ctx, data);
        } catch (error) {
            return fail(ctx, error);
        }
    })

前端修改后端数据首先将要修改的后端的_id和修改到后端的数据以不同的方式传入后端,${id}_id:ctx.params.id分别是前端与后端用于确定的ID名,修改后的数据则在data内传入。