springboot?vue項目管理前后端怎么實現編輯功能

這篇文章主要介紹了springboot vue項目管理前后端怎么實現編輯功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇springboot vue項目管理前后端怎么實現編輯功能文章都會有所收獲，下面我們一起來看看吧。

基于springboot+vue 的測試平臺開發

一、打開編輯頁面顯示數據

1. 編輯按鈕

之前復制的 table 組件，里面帶有 2 個按鈕，修改其中一個為【編輯】按鈕。

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

2. 編寫 handleUpdate 方法處理數據外顯

數據外顯其實還是要查詢出當前記錄的項目名稱和描述，再賦值給 form 表單即可。這里需要根據項目id(唯一性)來查詢。

修改一下后端項目列表的接口，使其支持根據項目id查詢數據：

在 handleUpdate 中調用接口：

this.dialogFormVisible = true，首先打開對話框在 data 的 projectQuery 對象中，新增一個 id，用于傳參給接口。再把row.id把每行里的 id 賦值給this.projectQuery.id最后請求接口，返回的list中只有一個元素，把這個結果的projectName和description，再賦值給 form 表單即可。

測試一下：

二、保存編輯頁面的內容

1. 后端增加 update 接口

編輯頁表單與新增頁面一致，沒必要再寫一個。所以要稍作一些改動，讓這個表單分別在新增和編輯的時候可以調用對應的接口。

新增接口已有，現在增加一個更新的接口，繼續在 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項目管理前后端怎么實現編輯功能”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“springboot vue項目管理前后端怎么實現編輯功能”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。