功能实现03

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

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

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

5.1需求分析

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

5.2思路分析

完成后端代码从dao-service-controller，并对每层代码进行测试
完成前端代码，回显家居信息，再使用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

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

注意：

测试成功：

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

6.1需求分析

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

6.2思路分析

完成后端代码从dao-service-controller，并对每层代码进行测试
完成前端代码，使用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();
  })
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net

day04-功能实现03