前后端分离项目(十一):实现"删"功能(前后端)

好家伙，本篇介绍如何实现"删"功能

 

来看效果，

 数据库

 

（自然是没什么毛病）

 

"增"搞定了,其实"删"非常简单

(我不会告诉你我是为了水一篇博客才把他们两个分开写,嘿嘿)

 

逻辑简洁明了:

首先,看见你要删除的数据,点"删除",

随后,①拿到当前这条数据的Id,向后台发请求网络,

然后,②后端删除该字段对应信息,

最后,③前端更新视图

(重新进入用户管理页面,向后端发起请求,拿到新的数据)

 

 

本次前端所以操作都在同一个组件中完成

MyUsers.vue代码如下

 

①拿到当前这条数据的Id,向后台发请求网络

 "Bookdelete(scope.row)" type="text" size="small">删除

scope.row指向当前这条数据

然后发请求

axios.delete('http://localhost:8011/book/deleteById/' + row.id)

②后端删除该字段对应信息

(后端的完整代码可以看前后端分离项目(五):数据分页查询（后端接口） - 养肥胖虎 - 博客园 (cnblogs.com)这一篇)
这里主要列出关键代码

@DeleteMapping("/deleteById/{id}")
    public void deleteById(@PathVariable("id") Integer id){
        bookRepository.deleteById(id);
    }
}

 

③前端更新视图

    Bookdelete(row) {
      const _this = this
      axios.delete('http://localhost:8011/book/deleteById/' + row.id).then(() => {
        _this.$alert('《' + row.name + '》删除成功！', '消息', {
          confirmButtonText: '确定',
          callback: action => {
            window.location.reload()
          }
        })
      })
    },

刷新有很多种方法,这么我们直接用一个最简单的BOM方法,

location.reload()方法用于刷新当前文档。

 

至此,"删"搞定