springboot vue專案管理前後端怎麼實現編輯功能

基於springboot vue 的測試平台開發

一、開啟編輯頁面顯示資料

#1. 編輯按鈕

之前複製的table 元件，裡面有2 個鈕，修改其中一個為【編輯】按鈕。

綁定一個點擊事件handleUpdate(scope.row)，這個row就是目前這條記錄的對象，可以加個console列印一下。

2. 編寫handleUpdate 方法處理資料外顯

需要查詢目前記錄的項目名稱和描述並將其賦值給表單才能將資料外顯。這裡需要根據項目id(唯一性)來查詢。

修改一下後端專案清單的接口，使其支援根據專案id查詢資料：

在handleUpdate 呼叫介面：

this.dialogFormVisible = true，先開啟對話方塊在data 的projectQuery 物件中，新增一個id，用於傳參給介面。再把row.id把每行裡的id 賦值給this.projectQuery.id最後請求接口，返回的list中只有一個元素，把這個結果的projectName 和description，再賦值給form 表單即可。

測試一下：

二、儲存編輯頁面的內容

1. 後端增加update 介面

編輯頁表單與新增頁面一致，沒必要再寫一個。因此，需要對表單進行一些修改，以便在建立和編輯時分別呼叫對應的API。

新增接口已有，現在增加一個更新的接口，繼續在 ProjectService 裡寫。

還有對應外面的 controller 處理器：

#自測更新接口，功能正常。

2. 前端頁面修改

為了可以區分這是新增表單還是編輯表單，需要在data 裡增加一個欄位來識別：dialogStatus。

修改表單裡的【儲存按鈕】，點擊的時候透過dialogStatus的值，來決定呼叫新增還是更新的方法：

當dialogStatus等於"create"，就是新增，否則就是修改更。

那麼處理編輯頁資料外顯的方法handleUpdate也修改修改，給dialogStatus賦值為update:

#新增updateData方法，來呼叫後端的update 介面。但別忘記在 js 檔案中加入好介面的請求，然後匯入到 vue 頁面檔案中去。

然後繼續完成的updateData方法的程式碼：

##這裡也設計到【新增項目】按鈕的改動，因為點選了【編輯】按鈕，

dialogStatus等於update，那自然點選新增的時候要賦值為create才可以呼叫到add()方法。

但由於之前的【新增項目】按鈕已經綁定了一個

this.dialogFormVisible = true，所以把這2個抽出來，寫到一個方法handleAdd中：

然後新增按鈕綁定這個新方法即可。

最後，測試一下功能。

以上是springboot vue專案管理前後端怎麼實現編輯功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！