day04-功能实现03
功能实现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不为空，则进行修改业务。
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230309191348342.png注意：
测试成功：
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230309205657123.png6.功能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方法，完成删除
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230309213107665.pnghandleDel(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();
})
}https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230309214234372.png https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230309214245472.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]