12.vue整合springboot首頁顯示數據庫表-實現按鈕：【添加修改刪除查詢】

vue整合springboot首頁顯示數據庫表：【添加修改刪除查詢】

提示：幫幫志會陸續更新非常多的IT技術知識，希望分享的內容對您有用。本章分享的是node.js和vue的使用。前后每一小節的內容是存在的有：學習and理解的關聯性。【幫幫志系列文章】：每個知識點，都是寫出代碼和運行結果且前后關聯上的去分析和說明（能大量節約您的時間）。

所有文章都*不會*直接把代碼放那里，讓您自己去看去理解。我希望我的內容對您有用而努力~

文章目錄

vue整合springboot首頁顯示數據庫表：【添加修改刪除查詢】
前言
一、后端
二、前端
- 查詢
- 添加
- 修改
- 刪除
三、總結
總結

本文章是系列文章，技術棧內容為：【springboot+vue】【前后分離】
【詳細圖文，實操步驟分享，節約時間版】。最終完成一個商業化項目。內容有：
springboot知識
mybatisPlus知識
vue知識
node.js知識

本小節的內容是：
vue篇章之： 12.vue3實現與springboot交互【完成登陸及頁面跳轉】

每一個文章小節都會把標題說的很清楚。前后關聯看，可以快速實現：前后分離。本質上，額外文章鏈接和文章自己標題內容關系不大。

=附01=：前面小節文章已經實現springboot的創建，springboot關聯前端數據swagger和springboot通過mybatisplus操作數據庫：
【2025年】基于電腦的jdk1.8通過idea創建springboot2.x版本(非常簡潔快速)
【上榜文章，一文搞定】現在springboot是3.x以上版本，jdk版本至少要求17.但是很多時候我們電腦是jdk1.8(求穩定性和安全性)。文本分享本機電腦1.8的jdk。idea如何非常簡潔快速的創建springboot
文章里面也有為什么只能是jdk17起和地址指定為阿里云報錯的解決辦法

=附02=：前面小節已經安裝好node.js和分享了一些vue語法，及RESTful風格及安裝配置swagger使用，和：
如何啟動vue項目和vue語法組件化不同標簽應對的作用說明
通過工具生成的vue案例(工具生成vue項目工程結構，里面有一個歡迎界面網頁)為切入點，逐步逐步修改分享講解，完成vue項目如何啟動。及自行編寫一些標簽和樣式來替換默認的內容，幫助理解包括里面的標簽，js代碼，樣式如何配合的

=附03=：這個文章是 Axios 詳細語法和實現步驟，其實整個系列干脆快速，很多上榜的
vue實現與后臺springboot傳遞數據【傳值/取值 Axios 】
在這里插入圖片描述
實現Axios的案例解決方案(代碼實例),代碼已經直接解決了跨域，當然也標注了注釋。

我為啥放鏈接。因為本文章的內容本質上是把前面很多的內容串起來了

前言

完成前端 vue.js工程結構準備
前端能啟動vue項目(vue項目的工程結構及vue語法分享在前面章節)。當前已經分享完畢的進度：vue項目里面網頁寫Axios取后臺的值和發送數據到后臺。已完成實現點擊不同鏈接顯示不同頁面內容，vue-router路由配置，把Axios和router路由整合起來
登陸驗證成功跳轉到其他頁面(登陸邏輯實現就是序號10)
完成首頁數據表顯示(序號11)

完成后臺 springboot工程結構準備
包括springboot項目（dao、service、controller、pojo實體類）。controller類里面的方法能拿實現不同提交方式(get post put delete) 去調用service/dao。 dao通過mybatisPlus操作mysql數據庫(前面章節有分享)

本小節是顯示完畢數據庫表之后，點擊不同按鈕，實現：添加修改刪除查詢
上一節
11.vue網頁開啟自動提交springboot后臺查詢-首頁顯示數據庫表
已經顯示出全部數據表里面的內容，前端后端代碼都有

從0到現在，內容拆開了。實現前后分離。
拆開：力求每一篇文章單獨把主題分享清楚：本小節是在表格基礎上：增刪改查

一、后端

數據庫
在這里插入圖片描述

controller

@RestController
@CrossOrigin //跨域問題，序號8 ，聯系前后端，使用axios的細節步驟，附：//(文章最后 分享了 非常詳細的跨域 同源策略簡單/非簡單)
public class UserController {@Resourceprivate UserService userService;@PostMapping("/login")public boolean login(User user){boolean b = userService.login(user); //序號10  實現登錄跳轉首頁用的return b;}@GetMapping("/findAll")public List<User> findAll(){List<User> list = userService.findAllUser();//查詢全部，顯示 welcome.vue之前就調用加載  //文章序號8  axios分享的vue組件生命周期自帶函數return list;}@GetMapping("/getUser")public User getUser(){User user = userDao.selectById(1);return user;}@PostMapping("/addUser") //Post 添加public int addUser(@RequestBody User user){System.out.println(user);int number = userService.insertUser(user);return number;}@PutMapping("/updateUser") //Put 修改public int updateUser(@RequestBody User user){System.out.println(user);int number = userService.updateUser(user);return number;}@DeleteMapping("/deleteUser/{uid}") //Delete 刪除public int deleteUser(@PathVariable("uid") int id){int number = userService.deleteUser(id);return number;}
}

service

@Service
public class UserService {@Resourceprivate UserDao userDao;//mybatisPlus的語法   序號4分享的mybatisPlus的詳細使用//序號4 文章最后面，分享了QueryWrapper的使用語法(拼接sql語句)private QueryWrapper<User> wrapper = new QueryWrapper<User>();public boolean login(User user){ //登陸用的User u = userDao.selectOne(wrapper.eq("uname",user.getUname()));if(u == null){return false;}else{if(u.getUpwd().equals(user.getUpwd())){return true;}else{return false;}}}public User findById(int id){return userDao.selectOne(wrapper.eq("uid",id));//eq 是 =  的意思//wrapper 有一套自己的語法，能非常方便的拼接sql語句}public User findByName(String name){return userDao.selectOne(wrapper.eq("uname",name));//uname=參數name//序號4 文章最后面(wrapper)    我把內容拆開，是保證文章簡潔  //保證  文章僅僅是標題內容}public List<User> findAllUser(){return userDao.selectList(null); }public int insertUser(User user){return userDao.insert(user);}public int updateUser(User user){return userDao.update(user,wrapper.eq("uid",user.getUid()));}public int deleteUser(int id){return userDao.deleteById(id);}
}

dao層

@Mapper
public interface UserDao extends BaseMapper<User> {  //使用的mybatisPlus//BaseMapper這里類里面  自動有很多很多 不同邏輯的增刪改查的功能  //子類繼承了父類，子類直接擁有父類的一些方法  我們不寫基本的//這個案例不用寫復雜的 ，如果非要我們自己寫，具體內容在序號4里面
}

實體類


//如果表名和實體類不一樣用：
//@TableName("數據庫表名")
public class User {@TableIdprivate int uid; //自帶很多sql語句， 所以：告訴mybatisPlus，這個成員變量是主鍵private String uname;private String upwd;private int uage;構造函數get settoString略}

二、前端

使用了axios(前后數據交互) 詳細的語法分享：序號8
使用了router(路由，指定跳轉的頁面) 序號9
使用了elementPlus(視圖標簽ui框架) 序號10

現在整合了幾乎前面全部的。如果看暈，還是建議：看一看前面的

進入這個界面，看到的是：
在這里插入圖片描述

全部代碼，配合后臺能直接運行<template><div><el-button type="primary" @click="userAdd" style="margin-bottom: 20px">新增</el-button><el-table :data="list" border style="width: 100%"><el-table-column type="index" align="center" width="60" label="序號" /> <!-- 自動的序號，不是數據庫表的內容 --><el-table-column prop="uid" align="center"  width="100" label="id" /><el-table-column prop="uname" align="center" width="60" label="名稱" /><el-table-column prop="uage" align="center" width="60" label="年齡" /><el-table-column label="操作" width="120"><template #default="scope"><el-button size="mini" @click="userToUpdate(scope.$index, scope.row)">編輯/修改</el-button><el-button size="mini" type="danger" @click="userDelete(scope.$index, scope.row)">刪除</el-button></template></el-table-column></el-table><!-- 編輯/修改對話框 --><el-dialog v-model="editDialogVisible" title="編輯/修改數據"><el-form :model="editForm"><el-form-item label="ID" label-width="80px"><el-input v-model="editForm.uid" disabled /></el-form-item><el-form-item label="名稱" label-width="80px"><el-input v-model="editForm.uname" /></el-form-item><el-form-item label="年齡" label-width="80px"><el-input v-model="editForm.uage" /></el-form-item></el-form><template #footer><el-button @click="editDialogVisible = false">取消</el-button><el-button type="primary" @click="userUpdate">確認</el-button></template></el-dialog><!-- 新增對話框 --><el-dialog v-model="addDialogVisible" title="新增數據"><el-form :model="addForm"><el-form-item label="名稱" label-width="80px"><el-input v-model="addForm.uname" /></el-form-item><el-form-item label="年齡" label-width="80px"><el-input v-model="addForm.uage" /></el-form-item></el-form><template #footer><el-button @click="addDialogVisible = false">取消</el-button><el-button type="primary" @click="confirmAdd">確認</el-button></template></el-dialog></div>
</template><script>
import {reactive, toRefs} from "vue";
import {useRouter} from "vue-router";
import axios from "axios";export default {name: 'welcome',data() {return {list: [], // 初始化為空數組，稍后填充數據editDialogVisible: false,  //窗口默認不顯示addDialogVisible: false,  //窗口默認不顯示editForm: {  //修改方法和網頁標簽共用的對象uid: '',uname: '',uage: ''},addForm: {  //添加方法和網頁標簽共用的對象uname: '',uage: ''}};},created() {this.fetchTableData(); // 組件創建時自動調用的方法},methods: {fetchTableData() { //顯示表格全部數據axios.get('http://localhost:8081/findAll').then(response => {this.list = response.data; })},userToUpdate(i,row) {  //開啟修改網頁窗口   及  row整行數據作為參數傳給窗口this.editForm = { ...row };this.editDialogVisible = true;},userUpdate() {alert(this.editForm.uname)axios.put('http://localhost:8081/updateUser', this.editForm).then(() => {this.fetchTableData(); //調用表格顯示方法this.editDialogVisible = false;  //把窗口關了this.$message.success('修改成功'); })},userDelete(i,row) { //刪除this.$confirm('確認刪除該記錄嗎？', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {axios.delete(`http://localhost:8081/deleteUser/${row.uid}`).then(() => {this.fetchTableData();this.$message.success('刪除成功');})})},userAdd() { //開啟添加網頁窗口  addForm 是全局對象，清空數據this.addForm = { uname: '', uage: '' };this.addDialogVisible = true;},    confirmAdd() { //添加方法 alert(this.addForm.uname)  //看一下 有值沒有axios.post('http://localhost:8081/addUser', this.addForm).then(() => {this.fetchTableData();this.addDialogVisible = false;this.$message.success('新增成功');})}}
}
</script><style>樣式我沒寫 ，各位可以自行編輯css樣式
</style>

查詢

這里是上面代碼的某一個部分：

<el-table :data="list" border style="width: 100%">
標簽里面：:data="引用一個 全局變量"   list會被表格遍歷，序號11詳細的表格顯示

這個變量list在data()里面聲明：

data() {return {list: [] //這里僅僅聲明 。沒有賦值  聲明了 很多地方都能用 ，前面文章：vue語法有很多分享...等等其他全局聲明} //created() 組件被創建 自動調用的函數created() {this.fetchTableData(); // 調用我們自己定義的函數fetchTableData//還可以用很多個 其他的函數   在組件被創建的時候自動調用},methods: {fetchTableData() {//提交后臺   接收數據   賦值給全局變量list （后臺返回的也是一個list）axios.get('http://localhost:8081/findAll').then(response => {this.list = response.data; })} //賦值之后，這個list就在表格里面顯示

添加

定義一個按鈕，點擊調用userAdd方法：

<el-button type="primary" @click="userAdd" style="margin-bottom: 20px">新增</el-button>

執行：

userAdd() { this.addForm = { uname: '', uage: '' };  //全局變量里面的數據清空  里面的成員變量uname和uagethis.addDialogVisible = true;  //讓模態窗口顯示出來}

點擊之后：
在這里插入圖片描述
最上面：template標簽里面：最后一段，定義了這個窗口。且表單取值
我把代碼放到一堆，這個主要看流程和點擊之后，發生了什么，對應的關系：

流程：彈出的窗口里面有一個：
<el-form :model="addForm">  
這個addForm又是一個全局變量  在data里面聲明的<el-input v-model="addForm.uage" />
uage對應成員變量   也對應后端實體類的名字因為：controller能直接賦值參數在窗口里面點擊提交：
<el-button type="primary" @click="confirmAdd">確認</el-button>執行confirmAdd方法
剛剛userAdd方法，是彈出窗口
confirmAdd方法 是提交后臺post提交confirmAdd() {alert(this.addForm.uname)axios.post('http://localhost:8081/addUser', this.addForm) //全局變量給后臺.then(() => { //成功之后this.fetchTableData(); //顯示首頁表格的方法this.addDialogVisible = false; //窗口關掉this.$message.success('新增成功'); //網頁上面中間 綠色的字 顯示3秒消失})}

修改

表格里面點擊修改的按鈕<el-button size="mini" @click="userToUpdate(scope.$index, scope.row)">編輯/修改</el-button>
兩個參數：
一個是表格的序號(我方法里沒有用，這個是分享，可以獲取到序號)
一個是row (整行的數據)userToUpdate 是開啟窗口的方案  及  給全局變量賦值 row參數數據(窗口數據回顯)
userToUpdate(i,row) {  //i可以alert看一眼 和后臺內容無關，vue給的tr的序號，也能為參數this.editForm = { ...row };  //整行的數據作為參數this.editDialogVisible = true; //顯示窗口}

在這里插入圖片描述
改一改之后，點擊確認：

執行這個方法
<el-button type="primary" @click="userUpdate">確認</el-button>userUpdate() { //put提交alert(this.editForm.uname)//可以刪掉，確認一下。全局變量是否有數據給后臺的axios.put('http://localhost:8081/updateUser', this.editForm) //this.editForm傳給給后臺.then(() => {this.fetchTableData(); //顯示表格的方法this.editDialogVisible = false; //關掉窗口this.$message.success('修改成功'); //網頁上面中間 綠色的字 顯示3秒消失})}

刪除

userDelete(i,row) {this.$confirm('確認刪除該記錄嗎？', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => { //點擊確定之后 發送delete請求 刪除axios.delete(`http://localhost:8081/deleteUser/${row.uid}`).then(() => {this.fetchTableData(); //顯示表格的方法this.$message.success('刪除成功');})})}