day02-功能實現02

来源:https://www.cnblogs.com/liyuelian/archive/2023/03/29/17270588.html
-Advertisement-
Play Games

功能實現02 6.功能05-顯示家居信息 6.1需求分析 進入後臺系統,可以在頁面進行所有家居信息的展示 6.2思路分析 完成從後端代碼從mapper(dao層)-->Service層-->Controller層,並對代碼進行測試 完成前端代碼,使用axios發送http請求,返回所有家居信息,將數 ...


功能實現02

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

6.1需求分析

進入後臺系統,可以在頁面進行所有家居信息的展示

6.2思路分析

  1. 完成從後端代碼從mapper(dao層)-->Service層-->Controller層,並對代碼進行測試
  2. 完成前端代碼,使用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進行測試:測試成功

image-20230329190206480

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 = res.data.data;
    })
  }
}
...

重新啟動前端項目,頁面顯示結果:

image-20230329193440362

7.功能06-修改家居信息

7.1需求分析

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

7.2思路分析

  1. 完成從後端代碼從mapper(dao層)-->Service層-->Controller層,並對代碼進行測試

  2. 完成前端代碼,回顯家居信息,再使用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方法:

image-20230329195844365

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

image-20230329200010524

測試getById方法:

image-20230329201120813

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

頁面顯示如下:

image-20230329211317598image-20230329211328686

image-20230329211545378

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

8.1需求分析

點擊刪除按鈕,彈出確認框,點擊確定即可刪除信息,刪除成功將會彈出提示框。

image-20230329212053425

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測試:

image-20230329212717616

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

頁面測試:

image-20230329215434123 image-20230329215452851
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 文章目錄 限流基本概念 QPS和連接數控制 傳輸速率 黑白名單 分散式環境 限流方案常用演算法 令牌桶演算法 漏桶演算法 滑動視窗 常用的限流方案 Nginx限流 中間件限流 限流組件 合法性驗證限流 Guava限流 網關層限流 從架構維度考慮限流設計 具體的實現限流的手段: Tomcat限流 限流基本概 ...
  • 1.魔法函數 python中常見的內置類型 什麼是魔法函數? python的魔法函數總被雙下劃線包圍,它們可以給你的類增加特殊的方法。如果你的對象實現了這些方法中的一個,那麼這個方法就會在特殊情況下被調用,你可以定義想要 的行為,而這一切都是自動發生的。 魔法函數一覽 魔法函數舉例 1.1.__ge ...
  • 使用 VLD 記憶體泄漏檢測工具輔助開發時整理的學習筆記。本篇介紹 VLD 配置文件中配置項 TraceInternalFrames 的使用方法。 ...
  • 分數 20 本題要求你從任意給定的兩個 1 位數字 a1​ 和 a2​ 開始,用乘法口訣生成一個數列 {an​},規則為從 a1​ 開始順次進行,每次將當前數字與後面一個數字相乘,將結果貼在數列末尾。如果結果不是 1 位數,則其每一位都應成為數列的一項。 輸入格式: 輸入在一行中給出 3 個整數,依 ...
  • 點右上角加星標,江湖要事早知道 前幾天在脈脈上看到一個熱議話題“23年找工作的心酸歷程” 大家都知道近幾年互聯網大環境不好,找工作變得越來越捲了、 就算是BAT這種大廠出來的,也不見得就有多好找工作,可想而知,如果你的背景和能力不是特別強,很有可能練簡歷關都過不了。 特別是工作時間久的老程式員,總包 ...
  • 對象樹管理 個人經驗總結,如有錯誤或遺漏,歡迎各位大佬指正 :) @ 設置父對象的作用 眾所周知,Qt中,有為對象設置父對象的方法——setParent。 而設置父對象的作用主要有,在父對象析構的時候,會自動去析構其子對象。如果是一個視窗對象,如果其父對象設置了樣式表(Style Sheet),子對 ...
  • 終於在2023/3/29日,黑馬程式員旗下的ssm框架視頻看完了,也是總結了1萬多字的筆記,把黑馬的和自己的整合了一下 完結撒花,接下來開始學習SpringBoot和軟考中級設計師。 總的來說,我還是比較喜歡.NET,SSM配置實在是太麻煩了,基本沒怎麼寫代碼,時間都花到配置文件上面去了。 筆記部分 ...
  • JSON Web Token(縮寫 JWT)是目前最流行的跨域認證解決方案。 傳統的session認證 http協議本身是一種無狀態的協議,而這就意味著如果用戶向我們的應用提供了用戶名和密碼來進行用戶認證,那麼下一次請求時,用戶還要再一次進行用戶認證才行,因為根據http協議,我們並不能知道是哪個用 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...