day02-功能实现02

功能实现02

6.功能05-显示家居信息

6.1需求分析

进入后台系统，可以在页面进行所有家居信息的展示
6.2思路分析

• 完成从后端代码从mapper（dao层）-->Service层-->Controller层，并对代码进行测试
  
• 完成前端代码，使用axios发送http请求，返回所有家居信息，将数据绑定显示
  

6.3代码实现

之前已经完成了相关业务的entity、mapper、Service层的编码，mapper、Service层使用的是MyBatisPlus提供的默认方法，所以这次不用写这三层的代码。
6.3.1Controller层

修改 FurnController.java，增加获取家居信息的方法（分页功能之后再写）

1. package com.li.furn.controller;
3. import ...
5. /**
6. * @author 李
7. * @version 1.0
8. */
9. @RestController
10. @Slf4j
11. public class FurnController {
12.     @Resource
13.     private FurnService furnService;
15.     ...
17.     @RequestMapping("/furns")
18.     public Result listFunrs(){
19.         List<Furn> furns = furnService.list();
20.         return Result.success(furns);
21.     }
23. }

复制代码

使用postman进行测试：测试成功
6.3.2前端代码

（1）修改src/utils/request.js，增加 response 拦截器，统一处理响应后的结果，再将处理的结果给回调函数

1. //response拦截器的处理
2. //可以在调用相应的接口后，统一地处理返回的结果
3. request.interceptors.response.use(response => {
4.     //response 即后端返回的数据，将response的data属性赋给了res,
5.     // 那么在请求方法中得到的结果res,就是response.data
6.     let res = response.data;
7.     //如果返回的是文件，就不处理，直接返回
8.     if (response.config.responseType === 'blob') {
9.         return res;
10.     }
11.     //如果返回的是string，就转为json对象
12.     if (typeof res === 'string') {
13.         //如果res不为null，就进行转成json对象
14.         res = res ? JSON.parse(res) : res;
15.     }
16.     return res;
17. })

复制代码

（2）修改HomeView.vue，编写list()方法，该方法要向后端发送ajax请求，请求实际应该在vue生命周期的created阶段发送。部分代码：

1. ...
2. created() {//生命周期函数
3.   this.list();
4. },
5. methods: {
6.   list() {//显示所有家居信息,后面再进行分页和考虑检索条件
7.     request.get("/api/furns").then(res => {
8.       //将返回的数据和tableData绑定
9.       this.tableData = res.data.data;
10.     })
11.   }
12. }
13. ...

复制代码

重新启动前端项目，页面显示结果：
7.功能06-修改家居信息

7.1需求分析

点击页面右边的“编辑”按钮，可以弹出窗口，输入新的信息点击确定，可以更新家居信息。如果更新成功，就弹出“更新成功”的按钮，否则显示“更新失败”。
7.2思路分析

• 完成从后端代码从mapper（dao层）-->Service层-->Controller层，并对代码进行测试
  
• 完成前端代码，回显家居信息，再使用axios发送http请求，返回所有家居信息，将数据绑定显示。
  其中回显家居信息指的是修改家居信息时，可以在编辑框中显示未更改前的数据，有两种方案：
  
  
  
  • 其一是直接使用当前页面的数据，将点击的表格当前行的数据进行回显（不推荐，因为不是实时的）
    
  • 其二是根据当前行的id，向后端请求查询数据，进行回显，这里使用这种方法
    
  
  

7.3代码实现

mapper、Service层使用的是MyBatisPlus提供的默认方法，不必编写。
7.3.1Controller层

修改FurnController.java

1. /**
2. * 修改家居信息
3. *
4. * 使用rest风格，使用put方式请求
5. *
6. * @param furn 客户端发送的数据也是以json格式
7. * @return
8. */
9. @PutMapping("/update")
10. @ResponseBody
11. public Result update(@RequestBody Furn furn) {
12.     furnService.updateById(furn);
13.     return Result.success();
14. }
16. /**
17. * 通过id查询家居信息
18. *
19. * @param id
20. * @return
21. */
22. @GetMapping("/furn/{id}")
23. @ResponseBody
24. public Result getById(@PathVariable("id") Integer id) {
25.     Furn furn = furnService.getById(id);
26.     if (furn == null) {
27.         return Result.error("400", "查询不到该id！");
28.     }
29.     return Result.success(furn);
30. }

复制代码

使用postman进行测试：
测试update方法：
数据库相应的记录也成功修改了：
测试getById方法：
7.3.2前端代码

（1）修改HomeView.vue，部分代码：

1. save() {//(1)添加 (2)修改
2.   //当修改家居时，弹出窗口的表单id是有值的
3.   //发送修改家居的请求
4.   if (this.form.id) {
5.     request.put("/api/update", this.form).then(res => {
6.       //弹出提示
7.       if (res.code === "200") {
8.         this.$message({
9.           type: "success",
10.           message: "修改成功！"
11.         })
12.       } else {
13.         this.$message({
14.           type: "error",
15.           message: "修改失败！"
16.         })
17.       }
18.       //刷新页面数据
19.       this.list();
20.       //关闭窗口
21.       this.dialogVisible = false;
22.     })
23.   } else {
24.     //当添加家居时，弹出窗口的表单id是空的
25.     //发送添加家居请求
26.     request.post("/api/save", this.form)
27.         .then(res => {//res为后端返回的结果
28.           console.log("res=", res)
29.           this.dialogVisible = false;//发送请求后隐藏表单
30.           this.list();
31.         })
32.   }
33. },
34. handleEdit(row) {
35.   // console.log("row=",row)
36.   // console.log("row2=",JSON.stringify(row))
37.   // console.log("row3=", JSON.parse(JSON.stringify(row)))
38.   let parse = JSON.parse(JSON.stringify(row));
39.   // 向后端发送ajax，回显数据，若能查询到对应id的数据，说明可以修改，否则无法修改
40.   request.get("/api/furn/" + parse.id).then(res => {
41.     if (res.code === "200"){
42.       //将数据赋给窗口
43.       this.form = res.data;
44.       //弹出窗口
45.       this.dialogVisible = true;
46.     }else{
47.       this.$message({
48.         type:"error",
49.         message:"不存在该数据"
50.       })
51.       //刷新页面
52.       this.list();
53.     }
54.   })
55. }

复制代码

页面显示如下：

8.功能07-删除家居信息

8.1需求分析

点击删除按钮，弹出确认框，点击确定即可删除信息，删除成功将会弹出提示框。
8.2代码实现

mapper、Service层使用的是MyBatisPlus提供的默认方法，不必编写。
8.2.1Controller层

修改FurnController.java

1. /**
2. * 通过id删除家居信息
3. *
4. * @param id
5. * @return
6. */
7. @DeleteMapping("/del/{id}")
8. @ResponseBody
9. public Result delById(@PathVariable("id") Integer id) {
10.     boolean b = furnService.removeById(id);
11.     if (b) {
12.         return Result.success();
13.     } else {
14.         return Result.error("400", "删除失败");
15.     }
16. }

复制代码

使用postman测试：
8.2.2前端代码

修改HomeView.vue，部分代码：

1. ...
2.   
3.   <el-popconfirm title="确认要删除吗？" @confirm="handDel(scope.row.id)">
4.     <template #reference>
5.       <el-button type="text">删除</el-button>
6.     </template>
7.   </el-popconfirm>
8. ...

复制代码

1. handDel(id) {//处理删除
2.   // alert(id)
3.   request.delete("/api/del/" + id).then(res => {
4.     if (res.code === "200") {
5.       this.$message({
6.         type: "success",
7.         message: "删除成功"
8.       })
9.     } else {
10.       this.$message({
11.         type: "error",
12.         message: res.msg
13.       })
14.     }
15.     //刷新页面
16.     this.list();
17.   })
18. }

复制代码

页面测试：

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