功能实现03

后端： https://github.com/liyuelian/furniture-back-end.git 。

前端： https://github.com/liyuelian/furniture-front-end.git 。

5.功能05-添加家居信息

5.1需求分析

前端页面点击修改家居信息，弹出提示框，点击修改后提示修改成功或者失败.

5.2思路分析

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

5.3代码实现

5.3.1后端代码

由于使用了逆向工程，bean 层、dao 层以及dao层接口对应的mapper映射文件已经生成，因此暂时不必在这两层编写代码了.

（1）Service层，修改对应的接口和实现类 。

FurnService.java接口 。

                        
                          //修改家居信息
public void update(Furn furn);

                        
                      

FurnServiceImpl.java实现类 。

                        
                          @Override
public void update(Furn furn) {
    //如果furn的某个属性不为null就进行修改
    furnMapper.updateByPrimaryKeySelective(furn);
}

                        
                      

（2）Controller层，修改FurnController.java 。

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

                        
                      

5.3.2前端代码

（1）修改HomeView.vue 。

1. 增加方法handleEdit方法，回显数据并测试
2. 修改save方法，处理修改请求。因为添加和修改都是同一个弹窗，因此确定键绑定的是同一个方法save()，在该方法中进行条件判断加以区分：如果点击弹出表单时，表单中的家居id为空，则进行添加业务，如果表单的家居id不为空，则进行修改业务。

                        
                          <script>
...
    save() {//将填写的表单数据发送给后端
      //修改和添加走的同一个方法
      if (this.form.id) {//如果为修改业务，当前的id存在，表示真
        request.put("/api/update", this.form).then(res => {
          //注意这里的res已经经过拦截处理，它已经是原生的res的data数据
          if (res.code === "200") {//修改成功
            //提示成功的消息框
            this.$message({
              type: "success",
              message: "更新成功"
            })
          } else {
            //提示错误的消息框
            this.$message({
              type: "error",
              message: "更新失败"
            })
          }
          //关闭当前的修改对话框
          this.dialogVisible = false;
          //同时更新数据
          this.list();
        })
      } else {//添加业务
        //第一个参数为url，第二个参数是请求携带的数据
        request.post("/api/save", this.form).then(res => {
          console.log("res-", res)
          this.dialogVisible = false;//隐藏表单
          //调用list方法，刷新页面显示的数据
          this.list();
        })
      }
    },
    list() {//list方法，请求返回家居信息,当我们打开页面的时候，该方法就应该自动触发
      request.get("/api/furns").then(res => {
        //根据res的结构来获取数据
        this.tableData = res.extend.furnList;
      })
    },
    handleEdit(row) {
      //将当前行的家居信息绑定到弹出的对话框表单上
      //方式1：通过row.id到后端DB去获取对应的家居信息，放回后将其绑定到this.form

      //方式2：将当前获取的row数据通过处理绑定到this.form进行显示
      //将row转成json字符串，再转成json对象
      this.form = JSON.parse(JSON.stringify(row));
      //将数据赋给对话框后，显示对话框
      this.dialogVisible = true;
    }
...
</script>

                        
                      

注意:

测试成功:

6.功能06-删除家居信息

6.1需求分析

点击删除按钮，弹出确认对话框，选择确定，则进行删除，删除成功则弹出成功的对话框.

6.2思路分析

1. 完成后端代码从dao-service-controller，并对每层代码进行测试
2. 完成前端代码，使用axios发送ajax请求，删除数据，将数据绑定显示。

6.3代码实现

6.3.1后端代码

（1）修改FurnService.java接口，声明删除方法 。

                        
                          //删除家居信息
public void del(Integer id);

                        
                      

（2）FurnServiceImpl.java实现类，增加删除方法 。

                        
                          @Override
public void del(Integer id) {
    furnMapper.deleteByPrimaryKey(id);
}

                        
                      

（3）修改FurnController.java 。

                        
                          @DeleteMapping("/del/{id}")
@ResponseBody
public Msg del(@PathVariable Integer id) {
    furnService.del(id);
    return Msg.success();
}

                        
                      

6.3.2前端代码

（1）修改HomeView.vue，编写handleDel方法，完成删除 。

                        
                          handleDel(id) {
  request.delete("/api/del/" + id).then(res => {
    //提示一个成功的消息框
    if (res.code === 200) {//删除成功
      //提示成功的消息框
      this.$message({
        type: "success",
        message: res.msg
      })
    } else {
      //提示错误的消息框
      this.$message({
        type: "error",
        message: res.msg
      })
    }
    //刷新页面数据
    this.list();
  })
}

                        
                      

最后此篇关于day04-功能实现03的文章就讲到这里了,如果你想了解更多关于day04-功能实现03的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。