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接口

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

复制代码

FurnServiceImpl.java实现类

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

复制代码

（2）Controller层，修改FurnController.java

1. @PutMapping("/update")
2. @ResponseBody
3. public Msg update(@RequestBody Furn furn) {
4.     furnService.update(furn);
5.     return Msg.success();
6. }

复制代码

5.3.2前端代码

（1）修改HomeView.vue

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

1. [/code]注意：
2. 测试成功：
3. [img]https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230309205657123.png[/img][size=5]6.功能06-删除家居信息[/size]
5. [size=4]6.1需求分析[/size]
7. 点击删除按钮，弹出确认对话框，选择确定，则进行删除，删除成功则弹出成功的对话框。
8. [size=4]6.2思路分析[/size]
10. [list=1]
11. [*]完成后端代码从dao-service-controller，并对每层代码进行测试
12. [*]完成前端代码，使用axios发送ajax请求，删除数据，将数据绑定显示。
13. [/list][size=4]6.3代码实现[/size]
15. [size=3]6.3.1后端代码[/size]
17. （1）修改FurnService.java接口，声明删除方法
18. [code]//删除家居信息
19. public void del(Integer id);

复制代码

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

1. @Override
2. public void del(Integer id) {
3.     furnMapper.deleteByPrimaryKey(id);
4. }

复制代码

（3）修改FurnController.java

1. @DeleteMapping("/del/{id}")
2. @ResponseBody
3. public Msg del(@PathVariable Integer id) {
4.     furnService.del(id);
5.     return Msg.success();
6. }

复制代码

6.3.2前端代码

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

1. handleDel(id) {
2.   request.delete("/api/del/" + id).then(res => {
3.     //提示一个成功的消息框
4.     if (res.code === 200) {//删除成功
5.       //提示成功的消息框
6.       this.$message({
7.         type: "success",
8.         message: res.msg
9.       })
10.     } else {
11.       //提示错误的消息框
12.       this.$message({
13.         type: "error",
14.         message: res.msg
15.       })
16.     }
17.     //刷新页面数据
18.     this.list();
19.   })
20. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！