接着上一回分享的继续，上一篇文章已经实现了作者信息的添加和列表功能。接下来我们继续来完成剩余的编辑和删除作者信息的功能。这两个功能中，除了更新功能略微复杂一些，删除功能是非常简单的。
编辑作者信息
编辑作者信息的大体流程是这样的，点击‘编辑’按钮，在编辑窗口中，编辑需要修改的信息后，点击‘保存’按钮。按照这个思路，我们就来编写一下‘编辑’按钮的点击事件。
代码语言：javascript复制 handleEdit(index, row) {
this.centerDialogVisible = true;
this.title = "编辑作者信息";
this.form = row;
},上述程序，是编辑按钮事件，点击后打开弹窗，可以编辑需要变更的信息。完成编辑按钮事件后，我们就可以编辑‘保存’按钮点击事件了。
代码语言：javascript复制save() {
if (this.title === "添加作者信息") {
this.handleCreate();
} else {
this.handleUpdate();
}
this.centerDialogVisible = false;
}这里我对上一次编写的save函数做了一些调整，其中通过title来判断是添加还是编辑作者信息。因此这里我们需要编写编辑信息后的更新函数。具体程序如下：
代码语言：javascript复制 handleUpdate() {
UpdateAuthorInfoById(this.form)
.then(res => {
if (res.code === "success") {
this.$message.success("更新成功");
} else {
this.$message.error("更新失败");
}
})
.catch(err => {
this.$message.error("服务端异常，更新失败。");
});
}以上程序中我们调用了后端的更新接口，完成作者信息的更新。是不是非常简单，你可以顺着这个思路，去开发更多的功能。接下来，我们继续开发删除作者信息功能吧。
删除作者信息
删除作者信息流程非常简单，只需要点击‘删除’按钮，就可以了。最重要的问题就说获取的作者信息ID，然后调用删除接口，来完成删除。具体实现程序如下：
代码语言：javascript复制handleDelete(index, row) {
const auhtorId = row.id;
DeleteAuthorInfoById(auhtorId)
.then(res => {
if (res.code === "success") {
this.$message.success("删除成功");
this.getAuthorList();
} else {
this.$message.error("删除失败");
}
})
.catch(err => {
this.$message.error("删除失败");
});
}这个程序还不够完美，在删除时，没有确认是否。感兴趣的读者朋友，可以试着把它开发出来。完成这些功能后，你可以试着测试一下。
大屏看更爽
为了提升阅读体验，最近开通TalkPython的博客平台，该系列更新过的文章，都同步在这里（[http://talkpythons.com/]）。读者朋友通过大屏幕阅读体验更好，学习效率也更高。欢迎推荐分享给更多朋友。
关于项目源码
后台诸多留言中，有很多读者要求项目源码，也为了让大家更好的学习，我把项目源码托管到Github上了。项目地址（[https://github.com/talkpythons/vue-flask-in-action）]，欢迎Star。若你们有更多要求或更好的建议，欢迎留言给我。
