功能實作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，增加獲取家居資訊的方法（分頁功能之后再寫）

package com.li.furn.controller;

import ...

/**
 * @author 李
 * @version 1.0
 */
@RestController
@Slf4j
public class FurnController {
    @Resource
    private FurnService furnService;

    ...

    @RequestMapping("/furns")
    public Result listFunrs(){
        List<Furn> furns = furnService.list();
        return Result.success(furns);
    }

}

使用postman進行測驗：測驗成功

6.3.2前端代碼

（1）修改src/utils/request.js，增加 response 攔截器，統一處理回應后的結果，再將處理的結果給回呼函式

//response攔截器的處理
//可以在呼叫相應的介面后，統一地處理回傳的結果
request.interceptors.response.use(response => {
    //response 即后端回傳的資料，將response的data屬性賦給了res,
    // 那么在請求方法中得到的結果res,就是response.data
    let res = response.data;
    //如果回傳的是檔案，就不處理，直接回傳
    if (response.config.responseType === 'blob') {
        return res;
    }
    //如果回傳的是string，就轉為json物件
    if (typeof res === 'string') {
        //如果res不為null，就進行轉成json物件
        res = res ? JSON.parse(res) : res;
    }
    return res;
})

（2）修改HomeView.vue，撰寫list()方法，該方法要向后端發送ajax請求，請求實際應該在vue生命周期的created階段發送，部分代碼：

...
created() {//生命周期函式
  this.list();
},
methods: {
  list() {//顯示所有家居資訊,后面再進行分頁和考慮檢索條件
    request.get("/api/furns").then(res => {
      //將回傳的資料和tableData系結
      this.tableData = https://www.cnblogs.com/liyuelian/p/res.data.data;
    })
  }
}
...

重新啟動前端專案，頁面顯示結果：

7.功能06-修改家居資訊

7.1需求分析

點擊頁面右邊的“編輯”按鈕，可以彈出視窗，輸入新的資訊點擊確定，可以更新家居資訊，如果更新成功，就彈出“更新成功”的按鈕，否則顯示“更新失敗”，

7.2思路分析

完成從后端代碼從mapper（dao層）-->Service層-->Controller層，并對代碼進行測驗
完成前端代碼，回顯家居資訊，再使用axios發送http請求，回傳所有家居資訊，將資料系結顯示，

其中回顯家居資訊指的是修改家居資訊時，可以在編輯框中顯示未更改前的資料，有兩種方案：
- 其一是直接使用當前頁面的資料，將點擊的表格當前行的資料進行回顯（不推薦，因為不是實時的）
- 其二是根據當前行的id，向后端請求查詢資料，進行回顯，這里使用這種方法

7.3代碼實作

mapper、Service層使用的是MyBatisPlus提供的默認方法，不必撰寫，

7.3.1Controller層

修改FurnController.java

/**
 * 修改家居資訊
 * 
 * 使用rest風格，使用put方式請求
 *
 * @param furn 客戶端發送的資料也是以json格式
 * @return
 */
@PutMapping("/update")
@ResponseBody
public Result update(@RequestBody Furn furn) {
    furnService.updateById(furn);
    return Result.success();
}

/**
 * 通過id查詢家居資訊
 *
 * @param id
 * @return
 */
@GetMapping("/furn/{id}")
@ResponseBody
public Result getById(@PathVariable("id") Integer id) {
    Furn furn = furnService.getById(id);
    if (furn == null) {
        return Result.error("400", "查詢不到該id！");
    }
    return Result.success(furn);
}

使用postman進行測驗：

測驗update方法：

資料庫相應的記錄也成功修改了：

測驗getById方法：

7.3.2前端代碼

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

save() {//(1)添加 (2)修改
  //當修改家居時，彈出視窗的表單id是有值的
  //發送修改家居的請求
  if (this.form.id) {
    request.put("/api/update", this.form).then(res => {
      //彈出提示
      if (res.code === "200") {
        this.$message({
          type: "success",
          message: "修改成功！"
        })
      } else {
        this.$message({
          type: "error",
          message: "修改失敗！"
        })
      }
      //重繪頁面資料
      this.list();
      //關閉視窗
      this.dialogVisible = false;
    })
  } else {
    //當添加家居時，彈出視窗的表單id是空的
    //發送添加家居請求
    request.post("/api/save", this.form)
        .then(res => {//res為后端回傳的結果
          console.log("res=", res)
          this.dialogVisible = false;//發送請求后隱藏表單
          this.list();
        })
  }
},
handleEdit(row) {
  // console.log("row=",row)
  // console.log("row2=",JSON.stringify(row))
  // console.log("row3=", JSON.parse(JSON.stringify(row)))
  let parse = JSON.parse(JSON.stringify(row));
  // 向后端發送ajax，回顯資料，若能查詢到對應id的資料，說明可以修改，否則無法修改
  request.get("/api/furn/" + parse.id).then(res => {
    if (res.code === "200"){
      //將資料賦給視窗
      this.form = res.data;
      //彈出視窗
      this.dialogVisible = true;
    }else{
      this.$message({
        type:"error",
        message:"不存在該資料"
      })
      //重繪頁面
      this.list();
    }
  })
}

頁面顯示如下：

8.功能07-洗掉家居資訊

8.1需求分析

點擊洗掉按鈕，彈出確認框，點擊確定即可洗掉資訊，洗掉成功將會彈出提示框，

8.2代碼實作

mapper、Service層使用的是MyBatisPlus提供的默認方法，不必撰寫，

8.2.1Controller層

修改FurnController.java

/**
 * 通過id洗掉家居資訊
 *
 * @param id
 * @return
 */
@DeleteMapping("/del/{id}")
@ResponseBody
public Result delById(@PathVariable("id") Integer id) {
    boolean b = furnService.removeById(id);
    if (b) {
        return Result.success();
    } else {
        return Result.error("400", "洗掉失敗");
    }
}

使用postman測驗：

8.2.2前端代碼

修改HomeView.vue，部分代碼：

...
  <!--引入一個確認框-->
  <el-popconfirm title="確認要洗掉嗎？" @confirm="handDel(scope.row.id)">
    <template #reference>
      <el-button type="text">洗掉</el-button>
    </template>
  </el-popconfirm>
...

handDel(id) {//處理洗掉
  // alert(id)
  request.delete("/api/del/" + id).then(res => {
    if (res.code === "200") {
      this.$message({
        type: "success",
        message: "洗掉成功"
      })
    } else {
      this.$message({
        type: "error",
        message: res.msg
      })
    }
    //重繪頁面
    this.list();
  })
}

頁面測驗：

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/548566.html

標籤：Java

上一篇：Java入門4

下一篇：什么是JWT

day02-功能實作02