首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue + Flask 实战开发系列(九)

Vue + Flask 实战开发系列(九)

作者头像
TalkPython
发布2020-07-23 11:59:31
1.6K0
发布2020-07-23 11:59:31
举报
文章被收录于专栏:TalkPythonTalkPython

接着上一回分享的继续,上一篇文章已经实现了作者信息的添加和列表功能。接下来我们继续来完成剩余的编辑和删除作者信息的功能。这两个功能中,除了更新功能略微复杂一些,删除功能是非常简单的。

编辑作者信息

编辑作者信息的大体流程是这样的,点击‘编辑’按钮,在编辑窗口中,编辑需要修改的信息后,点击‘保存’按钮。按照这个思路,我们就来编写一下‘编辑’按钮的点击事件。

 handleEdit(index, row) {
      this.centerDialogVisible = true;
      this.title = "编辑作者信息";
      this.form = row;
},

上述程序,是编辑按钮事件,点击后打开弹窗,可以编辑需要变更的信息。完成编辑按钮事件后,我们就可以编辑‘保存’按钮点击事件了。

save() {
      if (this.title === "添加作者信息") {
        this.handleCreate();
      } else {
        this.handleUpdate();
      }
      this.centerDialogVisible = false;
}

这里我对上一次编写的save函数做了一些调整,其中通过title来判断是添加还是编辑作者信息。因此这里我们需要编写编辑信息后的更新函数。具体程序如下:

 handleUpdate() {
      UpdateAuthorInfoById(this.form)
        .then(res => {
          if (res.code === "success") {
            this.$message.success("更新成功");
          } else {
            this.$message.error("更新失败");
          }
        })
        .catch(err => {
          this.$message.error("服务端异常,更新失败。");
        });
}

以上程序中我们调用了后端的更新接口,完成作者信息的更新。是不是非常简单,你可以顺着这个思路,去开发更多的功能。接下来,我们继续开发删除作者信息功能吧。

删除作者信息

删除作者信息流程非常简单,只需要点击‘删除’按钮,就可以了。最重要的问题就说获取的作者信息ID,然后调用删除接口,来完成删除。具体实现程序如下:

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。若你们有更多要求或更好的建议,欢迎留言给我。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-07-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 TalkPython 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 编辑作者信息
  • 删除作者信息
  • 大屏看更爽
  • 关于项目源码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档