本文章轉載于【SpringBoot+Vue】全網最簡單但實用的前后端分離項目實戰筆記 - 前端_大菜007的博客-CSDN博客

僅用于學習和討論，如有侵權請聯系

源碼：https://gitee.com/green_vegetables/x-admin-project.git
素材：https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取碼：up4c
項目概述筆記：https://blog.csdn.net/m0_37613503/article/details/128961102
數據庫筆記：https://blog.csdn.net/m0_37613503/article/details/128961401
前端筆記：https://blog.csdn.net/m0_37613503/article/details/128961447
后端筆記：https://blog.csdn.net/m0_37613503/article/details/128961569

1、新增一個修改操作功能?

2、我們找到后端的控制器里面

3、修改的請求是put請求，給他改一下方法名：updateUser

4、注意修改的情況我是不需要修改密碼的，你可以在個人信息界面這里給他弄一個密碼修改的內容

5、這里給他寫一個null

5.1 這個方法給他改過來，把user給他傳過來

6、修改接口就寫好了

7、來到前端我們要怎么辦呢！一個是修改，一個是刪除，加兩個按鈕

8、點擊修改按鈕后可以彈出一個對話框

9、實際上我們就是重用這個新增的對話框

10、這里要改成修改按鈕?

10.1

11、修改的核心在于能夠根據id，將這里面數據給查到?

12、我們通過get請求，帶個（“/{id}”）過來，通過id可以查到單個的用戶數據

13 里面放user就好了

13.1 我們需要拿到那個id,通過PathVariable注解去拿到id?

14、我們那個id? ?Integer id

15、userService里面有個getById方法

16、把User返回給他，我們后端接口就返回給他了，這樣后端接口就寫好了

17、現在我們返回前端，寫兩個按鈕

18、回到框架官網，直接拿來用就行

19、找到修改按鈕，給他復制一下

20、找到我們user.vue里，來到我們的操作類里?

21、注意你在使用框架的時候，你不能直接寫到哪里，復制框架代碼之前先寫一個template

22 再寫一個作用域插槽

22.1 再添加一個刪除的作用域插槽

23、我們目前的效果

24、如果你覺得這里的icon圖標太大，那么你可以讓他變的大一點，添加size,可以使icon圖標變小

25、點編輯按鈕，能夠出來對話框?

26、我們后端的接口已經定義好了，所以我們現在要來到

userManger.js中把后端給定義好?

26.1

27 寫一個新的方法，傳一個id,拼接一個id

28、路徑的一種更好的寫法，用左上角的波浪符號，這里可以用美元符號，引用id

29、遇到復雜拼接，就不會顯得那么凌亂

29.1 這里不需要攜帶什么數據，因此將數據給刪掉

30 再添加一個修改，這里方式改成put

31、弄好之后，回到我們Vue文件

32、我們之前綁定了一個方法，但是如果綁定了這個方法，那么點擊修改的按鈕和+的按鈕沒有什么區別，我們想要他有區別，因此我想傳入一個id

33、我們怎么取這個id，就取當前行這個id

34、上面新增我們也給他傳入一個值，這樣比較容易做判斷

35、現在回到我們之前寫的方法，我們可以做改動

36、我們要做個判斷，新增

37 根據id查詢用戶

37.1 剛才前面已經寫好了，工作，這里用getUserById方法查詢id

38、這里把數據扔給他就行

38.1 他要返回我們的數據

39 現在數據修改看一下效果，修改已經能夠全部展示了

40、因為我不想修改密碼，這里我將密碼注釋掉?

41、userForm.id 這里我們要做一個判斷，滿足這些條件就意味著我們在做新增

42、回到我們接口，這里接口意味著我們的字段是不會更新

43、默認你傳入的字段為空，是不會更新的

44、修改沒密碼了

45、但現在仍然暴露了一個問題，新增按鈕，如果提交，數據庫里還會多一條數據，因為目前方法是共享，會調用這個方法，此時這里應該加一個判斷

46、我這里想在userManger.js中新增一個方法，后期在Vue中調方法就行

47、在這里寫一個方法就行

48、如果判斷為null我就做新增的處理

49、代碼寫到這個地方，代碼顯得更加精簡

50、其他方法不用動，這里改成save就好了

51、看一下修改結果，修改模塊成功

，?