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 {
@Resource
private 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 {
@Resource
private 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 {
@TableId
private int uid; //自带很多sql语句， 所以：告诉mybatisPlus，这个成员变量是主键
private String uname;
private String upwd;
private int uage;
构造函数
get set
toString
略
}
二、前端
使用了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和uage
this.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('删除成功');
})
})
}
三、总结
在data里面定义了很多全局变量
窗口显示 窗口不显示 是false true
表格里面 点击: 新增 修改 删除 按钮的作用是：显示某某窗口(false or true)
因为是全局变量，所以添加按钮方法里面还清空了数据： uname:"" 给了一个空值
在窗口里面操作：
数据传递 和登陆的时候 语法一样。都是在form表单里面赋值
form里面的数据用:model=“全局变量”
这个全局变量 有数据之后 给axios传递到后台。
axios成功就是.then()
.then()里面：调用表格显示的方法，关闭窗口，显示文字
总结
说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有核心图文重点操作步骤来实现这个目标(基本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)
其他扩展细节知识点，本系列省略了(或者有链接)如：
还有一些案例，但是现在案例基本满足大部分情况，毕竟当前我们的目的是：快速手搓一个前后分离的全栈。
很多文章都有链接，除了实现前后分离步骤之外，还可以查看链接详细分享的文章，后面根据需求自行添加内容到项目里面
（会陆续更新非常多的IT技术知识及泛IT的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）
