文章目錄
- 添加用戶功能的實作
- 需求
- 給添加用戶按鈕系結單擊事件
- 添加用戶的對話框的效果和代碼
- 添加用戶對話框需要用到的UserList.vue組件中的資料
- UserList.vue組件中的addUser方法
- getUserList方法
- UserList.vue組件中的分頁資料
- SpringBoot后端控制器中接收pageuser請求的方法getUserList
- 動態代理介面UserDao中的getAllUser方法
- UserDao.xml映射檔案中的sql陳述句
- addUser方法中執行完getUserList方法之后，會把查詢到的分頁資料重新渲染到UserList.vue組件顯示用戶資訊的表格中
- 測驗
添加用戶功能的實作
需求
單擊添加按鈕之后，會彈出一個添加用戶的對話框，然后在這個對話框里輸入添加用戶的資訊，點擊添加，用戶資訊會在最后一頁展示出來，
給添加用戶按鈕系結單擊事件
給添加用戶按鈕系結一個單擊事件，點擊添加用戶按鈕之后，會彈出一個添加用戶的對話框，系結的單擊事件如下圖：
添加用戶的對話框的效果和代碼
效果如下圖：
代碼如下圖：
添加用戶對話框需要用到的UserList.vue組件中的資料
在添加表單中輸入添加用戶的資訊之后，因為是雙向系結，所以用戶資訊會被存盤到名字為addForm的json物件的屬性中，addForm資料物件如下圖：
UserList.vue組件中的addUser方法
addUser方法中的內容如下圖：
addUser方法執行成功之后，資料庫中的easyUser表中已經新增了一條用戶資料，需要在UserList.vue組件的顯示用戶的表格中，顯示這條新增的資料，怎樣顯示呢？就是把當前頁碼改為一個很大的值，大過總頁碼，因為在SpringBoot的組態檔中已經設定了分頁引數合理化引數reasonabled的值為ture，所以這個很大的頁碼其實就相當于是最后一頁的頁碼，設定完當前頁碼后，在addUser方法中呼叫getUserList方法重新加載最后一頁的用戶集合資料即可，
getUserList方法
getUserList方法，用來為userList和total資料賦值，如下圖：
UserList.vue組件中的分頁資料
如下圖：
SpringBoot后端控制器中接收pageuser請求的方法getUserList
因為后端需要接收前端傳遞來的Page這個json物件，所以要在后端寫一個與之對應的Page物體類，這樣方便接收前端傳遞來的引數，Page物體類如下圖：
SpringBoot后端中的getUserList方法，如下圖：
動態代理介面UserDao中的getAllUser方法
如下圖：
UserDao.xml映射檔案中的sql陳述句
如下圖：
addUser方法中執行完getUserList方法之后，會把查詢到的分頁資料重新渲染到UserList.vue組件顯示用戶資訊的表格中
存盤用戶資訊的表格，如下圖：
getUserList方法執行之后，當前頁面的資料，都會存盤到userList集合中，如下圖：
使用elment ui中的表格顯示userList集合中的用戶資料，如下圖：
測驗
首選進入首頁點擊添加用戶按鈕如下圖：
然后在彈出的對話框中填寫要添加的用戶資訊，如下圖：
點擊添加按鈕如下圖：
查看資料庫中的easyUser表，如下圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/283083.html
標籤：java
上一篇：【面試專用】JAVA快速通關