Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

前言
本篇博文是关于Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】，希望你能够喜欢

个人主页：晨犀主页
个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力
欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看
如果文章有什么需要改进的地方还请大佬不吝赐教 先在此感谢啦

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

实现功能07-删除家居信息

需求分析/图解

思路分析

1. 完成后台代码从mapper -> service -> controller , 并对代码进行测试
2. 完成前台代码，使用axios 发送http 请求，删除数据, 将数据绑定显示

代码实现

1. 修改FurnController.java , 处理删除请求, 并使用Postman 完成测试

    //增加方法[接口],根据id,返回对应的家居信息
    //如何设计? 依然使用url占位符+@PathVariable
    @GetMapping("/find/{id}")
    public Result findById(@PathVariable Integer id) {
        Furn furn = furnService.getById(id);
        log.info("furn={}", furn);
        return Result.success(furn);//返回成功的信息-携带查询到furn信息
    }

2. 修改HomeView.vue , 编写handleDel 方法, 完成删除并测试

//处理删除方法
handleDel(id) {
    request.delete("/api/del/" + id).then(res => {
        if (res.code === 200) {
            this.$message({
                type: "success",
                message: "删除成功"
            })
        } else {
            this.$message({
                type: "error",
                message: res.msg
            })
        }
        this.list() // 刷新列表
    })
}
    //响应删除点击