SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--功能实现【四】

SSM–功能实现

实现功能06-修改家居信息

需求分析/图解

思路分析

1. 完成后台代码从dao -> serivce -> controller , 并对每层代码进行测试
2. 完成前台代码, 回显家居信息，再使用axios 发送http / ajax 请求，更新数据, 将数据绑定显示

代码实现

1. 修改FurnService.java 和FurnServiceImpl.java, 增加update 方法

修改FurnService.java

public void update(Furn furn);

修改FurnServiceImpl.java,

@Override
public void update(Furn furn) {
//因为传入的furn 的字段不一定是完整的，所以使用updateByPrimaryKeySelective
	furnMapper.updateByPrimaryKeySelective(furn);
}

2. 修改FurnServiceTest.java ，测试update

 @Test
    public void update() {
 
        Furn furn = new Furn();
        furn.setId(1);
        furn.setName("北欧风格小桌子~~");
        furn.setMaker("小猪家居");
        //因为imgPath属性有一个默认值,
        //所以如果我们不希望生成update 语句有对imgPath 字段修改，就显式的设置null
 
        furn.setImgPath(null);
        furnService.update(furn);
 
        System.out.println("修改OK");
 
    }

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

   @PutMapping("/update")
    @ResponseBody
    public Msg update(@RequestBody Furn furn) {
 
        furnService.update(furn);
        return Msg.success();
 
    }

4. 修改HomeView.vue , 编写handleEdit 方法, 回显数据并测试

handleEdit(row) {
    //说明
    //1. JSON.stringify(row) 将row 转成json 字符串
    //2. JSON.parse(xx) 将字符串转成json 对象
    //3. 为什么这样做? 其实JSON.parse(JSON.stringify(row)) 就是对row 进行了深拷贝
    //4. 这样表格中的行数据和弹出框的数据就是独立的了
        this.form = JSON.parse(JSON.stringify(row))
        this.dialogVisible = true
    }
    //触发handleEdit 方法
    编辑

可以测试一下, 点击编辑, 回显数据

5. 修改HomeView.vue , 修改save 方法, 处理修改请求, 说明更新成功的消息框, 不需要做额外处理, 直接使用this.$message 即可.

save() {
    //增加处理修改逻辑
    if (this.form.id) {
        request.put("/api/update", this.form).then(res => {
            if (res.code === 200) {//如果code 为200
                this.$message({ //弹出更新成功的消息框
                    type: "success",
                    message: "更新成功"
                })
            } else {
                this.$message({//弹出更新失败信息
                    type: "error",
                    message: res.msg
                })
            }
            this.list() //刷新列表
            this.dialogVisible = false
        })
    } else {//添加
        //=======说明======
        //1. 将form 表单提交给/api/save 的接口
        //2. /api/save 等价http://localhost:10001/save
        //3. 如果成功，就进入then 方法
        //4. res 就是返回的信息
        //5. 查看Mysql 看看数据是否保存
        request.post("/api/save", this.form).then(res => {
            this.dialogVisible = false
            this.list()
        })
    }
}

6. 完成测试, 浏览器http://localhost:10000/

注意事项和细节

1.使用 //增加分页初始化数据 data() { return { currentPage: 1, pageSize: 5, total: 10, //修改list(), 换成分页请求数据 list() { //请求显示家居列表-不带检索 request.get("/api/furnsByPage", { params: { pageNum: this.currentPage, pageSize: this.pageSize } }).then(res => { //绑定tableData, 显示在表格 this.tableData = res.extend.pageInfo.list this.total = res.extend.pageInfo.total }) } //增加方法, 处理记录的变化, 这两个方法是和分页控件绑定的. //处理每页显示多少条记录变化 handlePageSizeChange(pageSize) { this.pageSize = pageSize this.list() } , //处理当前页变化, 比如点击分页连接,或者go to 第几页 handleCurrentChange(pageNum) { this.currentPage = pageNum this.list() }

完成测试

启动项目后台服务furns_ssm
启动项目前台ssm_vue

分页显示效果

测试分页显示效果, 浏览器: http://localhost:9875/