Spring Boot+Vue前后端分离开发10-----删除功能（完结）

标签 ： Java Vue Sring JPA ELementUI
作者 ： Maxchen
版本 ： V1.0.0
日期 ： 2020/3/11

---

删除功能开发

第一步：我们展开JpaRepository的方法，可以到找到一个方法deleteById，此方法了一通过id删除数据。

第二步：测试deleteById方法，运行之后发现数据已删除。

    /**
     * @Title: deleteBookById
     * @Description: 通过图书id删除图书
     * @Author Maxchen

     * @return void
     * @throws
     * @Date 2020/3/12 17:06
     */
    @Test
    void deleteBookById(){
        bookRepository.deleteById(1);
    }

第三步：Controller层增加如下代码。

    //通过id删除图书
    @PostMapping("deleteBookById/{id}")
    public String deleteBookById(@PathVariable("id") Integer id){
        try {
            bookRepository.deleteById(id);
            return "success";
        } catch (Exception e) {
            e.printStackTrace();
            return "fail";
        }
    }

第四步：测试接口是否正常，如果能成功返回success，则说明接口开发成功。

第五步：表格增加一个删除按钮并提前把删除方法定义出来。

<el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>

deleteBook(row) {
	const _this = this
	_this.$alert(row.id)
}

第六步：进入图书管理页面，点击删除测试一下，如果弹窗显示图书编号说明程序正常。

第七步：前后端进行联调，前端调用删除数据的接口，修改如图所示的代码。

axios.post('http://localhost:8181/book/deleteBookById/'+row.id).then(function(resp){
    if(resp.data == 'success'){
        _this.$alert('《'+row.name+'》删除成功！', '消息', {
            confirmButtonText: '确定',
            callback: action => {
                window.location.reload()
            }
        })
    }
})

第八步：测试页面的删除功能，点击删除之后可看到此行的数据已消失。

---