基于springboot+vue 的測試平臺開發(fā)

繼續(xù)更新

今天實現(xiàn)項目列表的編輯功能：

點擊【編輯】按鈕，打開對話框，顯示此條記錄的信息修改對話框表單內(nèi)容，點擊對話框【保存】按鈕，更新此條記錄

一、打開編輯頁面顯示數(shù)據(jù)

1. 編輯按鈕

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

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

2. 編寫 handleUpdate 方法處理數(shù)據(jù)外顯

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

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

在 handleUpdate 中調(diào)用接口：

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

測試一下：

二、保存編輯頁面的內(nèi)容

1. 后端增加 update 接口

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

新增接口已有，現(xiàn)在增加一個更新的接口，繼續(xù)在 ProjectService 里編寫。

還有對應(yīng)外面的 controller 處理器：

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

2. 前端頁面修改

為了可以區(qū)分這是新增表單還是編輯表單，需要在 data 里增加一個字段來標(biāo)識：dialogStatus。

修改表單里的【保存按鈕】，點擊的時候通過dialogStatus的值，來決定調(diào)用新增還是更新的方法：

當(dāng)dialogStatus等于"create"，就是新增，否則就是修改更。

那么處理編輯頁數(shù)據(jù)外顯的方法handleUpdate也修改修改，給dialogStatus賦值為update:

新增updateData方法，來調(diào)用后端的 update 接口。但是別忘記在 js 文件里添加好接口的請求，然后導(dǎo)入到 vue 頁面文件中去。

然后繼續(xù)完成的updateData方法的代碼：

這里還設(shè)計到【新增項目】按鈕的改動，因為點擊了【編輯】按鈕，dialogStatus等于update，那自然點擊新增的時候要賦值為create才可以調(diào)用到add()方法。

但由于之前的【新增項目】按鈕已經(jīng)綁定了一個this.dialogFormVisible = true，所以把這2個抽出來，寫到一個方法handleAdd中：

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

最后，測試一下功能。

功能完成。     

以上就是springboot vue項目管理前后端實現(xiàn)編輯功能的詳細(xì)內(nèi)容，更多關(guān)于springboot vue前后端項目管理的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論