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

繼續(xù)更新

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

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

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

1. 編輯按鈕

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

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

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

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

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

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

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

測試一下：

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

1. 后端增加 update 接口

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

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

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

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

2. 前端頁面修改

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

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

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

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

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

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

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

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

然后新增按鈕綁定這個(gè)新方法即可。

最后，測試一下功能。

功能完成。     

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

最新評論