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('删除成功');})})}