1.显示全部家居

1.需求分析

2.思路分析

3.编写Service层

1.FurnService.java 添加方法

        //返回所有家居信息
        public List<Furn> findAll();

2.FurnServiceImpl.java 实现方法

    @Override
    public List<Furn> findAll() {
        //传入的是null就代表返回所有信息
        return furnMapper.selectByExample(null);
    }

3.单元测试

    @Test
    public void findAll() {
        List<Furn> all = furnService.findAll();
        for (Furn furn : all) {
            System.out.println(furn);
        }
    }

4.编写Controller层

1.FurnController.java 添加方法

    @ResponseBody
    @RequestMapping("/furns")
    public Msg listFurns() {
        //从后端获取所有信息
        List<Furn> all = furnService.findAll();
        //封装成功的Msg并返回
        return Msg.success().add("furList", all);
    }

2.postman完成测试

5.前端展示家居

1.HomeView.vue 修改el-table使其prop跟Furn的属性名对应

    <el-table :data="tableData" stripe style="width: 90%">
      <el-table-column
          prop="id"
          label="ID" sortable
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="家居名" >
      </el-table-column>
      <el-table-column
          prop="maker"
          label="厂家">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="sales"
          label="销量">
      </el-table-column>
      <el-table-column
          prop="stock"
          label="库存">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

2.HomeView.vue 添加方法获取所有家居信息

    //请求返回所有家居
    list() {
      request.get("/api/furns").then(
          res => {
            console.log(res)
            this.tableData = res.data.extend.furnList
          }
      )
    }

3.使用vue生命周期函数created，当model加载完毕之后调用list()设置model

4.结果展示

2.新增家居

1.HomeView.vue 修改save方法，调用list刷新家居

2.结果展示

3.拦截response并做统一处理

1.修改request.js，编写response拦截器

//response拦截器，统一处理返回结果，总之这样前端得到的数据就是response.data了
request.interceptors.response.use(
    response => {
        let res = response.data
        //如果response是文件类型的就直接返回
        if (response.config.responseType === 'blob') {
            return res
        }
        //如果data是string类型的就转换成json
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res
    }
)

2.修改 HomeView.vue

4.修改家居

1.需求分析

2.思路分析

3.编写Service层

1.FurnService.java 添加方法

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

2.FurnServiceImpl.java 实现方法

    @Override
    public void update(Furn furn) {
        furnMapper.updateByPrimaryKeySelective(furn);
    }

3.单元测试

    @Test
    public void update() {
        Furn furn = new Furn();
        furn.setId(1);
        furn.setName("修改家居");
        furnService.update(furn);
    }

4.没有设置img_path的值但是确更新了

5.问题分析

• 由于在Furn中有默认值，则生成的img_path就有默认值
• 解决方法，在调用update方法之前将Furn对象的img_path置空

4.编写Controller层

1.FurnController.java 添加方法

    @ResponseBody
    @RequestMapping("/update")
    public Msg update(@RequestBody  Furn furn) {
        //更新数据
        furnService.update(furn);
        //如果没有异常则返回成功信息
        return Msg.success();
    }

2.postman测试

3.数据库

4.前端信息

5.回显表单数据

1.HomeView.vue 为编辑按钮绑定点击事件，传入当前行的数据

2.HomeView.vue 添加方法，进行表单回显

    //将这行的数据绑定到提示框并回显
    handleEdit(row) {
      //绑定到提示框
      //将这个row对象（是一个代理对象）转换成JSON格式然后直接绑定到提示框
      this.form = JSON.parse(JSON.stringify(row));
      //显示提示框
      this.dialogVisible = true;
    }

3.结果展示

6.点击确定,更新数据，弹出提示框

1.HomeView.vue 点击确定按钮仍然执行save方法

2.HomeView.vue 编写save方法，并与新增的逻辑区分

    //当用户输入完要添加的信息之后会点击确定，此时会触发这个save方法
    save() {
      //如果form有id则说明这个提示框是修改的提示框
      if (this.form.id) {
        //向后端发送请求，进行修改家居
        request.post("/api/update", this.form).then(
            res => {
              //code是200则表示修改成功
              if (res.code === 200) {
                //弹出更新成功的消息框
                this.$message(
                    {
                      type: "success",
                      message: "更新成功！"
                    }
                )
              } else {
                //修改失败
                //弹出更新失败的消息框
                this.$message(
                    {
                      type: "error",
                      message: "更新失败！"
                    }
                )
              }
              //刷新数据
              this.list()
              //关闭提示框
              this.dialogVisible = false
            }
        )
      }
      else {
        //如果form没有id则说明这个提示框是新增的提示框
        //发送post请求并携带form这个js对象的数据，会以json格式进行发送
        request.post("/api/save", this.form).then(
            res => {
              console.log("res=", res);
              this.dialogVisible = false;
              //调用list方法，刷新家居信息
              this.list();
            }
        )
      }

    }

3.结果展示