共計 1380 個字符，預計需要花費 4 分鐘才能閱讀完成。

自動寫代碼機器人，免費開通

這篇文章給大家分享的是有關 vue.js 和 sql 怎么實現添加用戶功能的內容。丸趣 TV 小編覺得挺實用的，因此分享給大家做個參考，一起跟隨丸趣 TV 小編過來看看吧。

Vue 的優點

Vue 具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬 DOM、運行速度快等優勢，Vue 中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和 dom，可以大大提升訪問速度和用戶體驗。

添加用戶功能的實現需求

單擊添加按鈕之后，會彈出一個添加用戶的對話框，然后在這個對話框里輸入添加用戶的信息，點擊添加，用戶信息會在最后一頁展示出來。

給添加用戶按鈕綁定單擊事件

給添加用戶按鈕綁定一個單擊事件，點擊添加用戶按鈕之后，會彈出一個添加用戶的對話框，綁定的單擊事件如下圖：

添加用戶的對話框的效果和代碼

效果如下圖：

代碼如下圖：

添加用戶對話框需要用到的 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 表，如下圖：

感謝各位的閱讀！關于“vue.js 和 sql 怎么實現添加用戶功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！