12.vue整合springboot首页显示数据库表-实现按钮：【添加修改删除查询】

vue整合springboot首页显示数据库表：【添加修改删除查询】

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

---

---

本文章是系列文章，技术栈内容为：【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的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）