修改后端内容有时需要将后端部分数据输出在前端,所以修改包括读取部分内容并修改。
读取内容
后端
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内传入。