功能實作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不為空，則進行修改業務，

<script>
...
    save() {//將填寫的表單資料發送給后端
      //修改和添加走的同一個方法
      if (this.form.id) {//如果為修改業務，當前的id存在，表示真
        request.put("/api/update", this.form).then(res => {
          //注意這里的res已經經過攔截處理，它已經是原生的res的data資料
          if (res.code === "200") {//修改成功
            //提示成功的訊息框
            this.$message({
              type: "success",
              message: "更新成功"
            })
          } else {
            //提示錯誤的訊息框
            this.$message({
              type: "error",
              message: "更新失敗"
            })
          }
          //關閉當前的修改對話框
          this.dialogVisible = false;
          //同時更新資料
          this.list();
        })
      } else {//添加業務
        //第一個引數為url，第二個引數是請求攜帶的資料
        request.post("/api/save", this.form).then(res => {
          console.log("res-", res)
          this.dialogVisible = false;//隱藏表單
          //呼叫list方法，重繪頁面顯示的資料
          this.list();
        })
      }
    },
    list() {//list方法，請求回傳家居資訊,當我們打開頁面的時候，該方法就應該自動觸發
      request.get("/api/furns").then(res => {
        //根據res的結構來獲取資料
        this.tableData = https://www.cnblogs.com/liyuelian/archive/2023/03/09/res.extend.furnList;
      })
    },
    handleEdit(row) {
      //將當前行的家居資訊系結到彈出的對話框表單上
      //方式1：通過row.id到后端DB去獲取對應的家居資訊，放回后將其系結到this.form

      //方式2：將當前獲取的row資料通過處理系結到this.form進行顯示
      //將row轉成json字串，再轉成json物件
      this.form = JSON.parse(JSON.stringify(row));
      //將資料賦給對話框后，顯示對話框
      this.dialogVisible = true;
    }
...
</script>

注意：

測驗成功：

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();
  })
}