06. Springboot3+vue3实现增删改查、分页查询、批量删除（下）

1612 字约 4 分钟读完7760 次阅读更新于 2026/5/3

路由警告

roter/index.js

新增数据

流程

  1. 在新增的按钮上面加上点击事件
  2. 定义弹窗和表单的页面代码
  3. 点击触发弹窗打开（清空form 对象）
  4. 表单做一下数据绑定以及表单验证
  5. 后台要有对应的新增的接口来接受数据
  6. 新增的接口负责把数据插入到数据库里面
  7. 表单输入数据后点击确认按钮，把表单的数据传给后台接口
  8. 在新增成功之后再次加载表格的数据，关闭弹窗

Dialog 弹窗

<el-dialog title="管理员信息" v-model="data.formVisible" width="500">
     
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="data.formVisible = false">取 消</el-button>
      <el-button type="primary" @click="add">保 存</el-button>
    </div>
  </template>
</el-dialog>

Form 表单

<el-form :model="data.form" label-width="80px" style="padding: 20px 30px 10px 0">
  <el-form-item label="账号">
    <el-input v-model="data.form.username" autocomplete="off" />
  </el-form-item>
  <el-form-item label="名称">
    <el-input v-model="data.form.name" autocomplete="off" />
  </el-form-item>
  <el-form-item label="电话">
    <el-input v-model="data.form.phone" autocomplete="off" />
  </el-form-item>
  <el-form-item label="邮箱">
    <el-input v-model="data.form.email" autocomplete="off" />
  </el-form-item>
</el-form>

出现“系统异常”怎么办？

看控制台的错误

针对这个错误解决问题

表单验证

  1. 在表单 el-form 上有三个必须的属性

ref="formRef" :model="data.form" :rules="data.rules"

  1. 在 el-form-item 上 写上表单项的 prop

el-form-item prop="username"

  1. 在 rules 里面定义验证的规则
  2. 定义 formRef 对象，作为表单的引用
  3. 通过 formRef 对象进行表单验证
formRef.value.validate((valid) => {
    if (valid) {  
     // 验证通过的情况下
    }
})

destroy-on-close 属性可以重置 dialog

引入 Java 工具栏 Hutool

<!-- Java的工具类 -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.25</version>
</dependency>

admin 的新增流程

public void add(Admin admin) {
    // 根据新的账号查询数据库  是否存在同样账号的数据
    Admin dbAdmin = adminMapper.selectByUsername(admin.getUsername());
    if (dbAdmin != null) {
        throw new CustomerException("账号重复");
    }
    // 默认密码
    if (StrUtil.isBlank(admin.getPassword())) {
        admin.setPassword("admin");
    }
    adminMapper.insert(admin);
}

编辑数据

流程

  1. 在编辑的按钮上面加上点击事件
  2. 定义弹窗和表单的页面代码
  3. 点击触发弹窗打开（将行对象的数据 row 深度拷贝给 form 对象）
  4. 表单做一下数据绑定以及表单验证
  5. 后台要有对应的修改的接口来接受数据
  6. 修改的接口负责把数据更新到数据库里面
  7. 表单输入数据后点击确认按钮，把表单的数据传给后台接口
  8. 在修改成功之后再次加载表格的数据，关闭弹窗

报了 405 错误

405 错误表示你请求的方法类型跟后端定义的方法类型不一致，比如前端是 put 请求，后台是 post 接口

兼容 新增和修改

const save = () => {
  data.form.id ? update() : add()
}

删除数据

单个删除

const del = (id) => {
  ElMessageBox.confirm('删除后无法恢复，您确认删除吗？', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/admin/delete/' + id).then(res => {
      if (res.code === '200') {
        ElMessage.success('删除成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

批量删除

table 的多选事件 @selection-change="handleSelectionChange"

const handleSelectionChange = (rows) => {  // rows 就是实际选择的数组
  data.rows = rows
}

const deleteBatch = () => {
  if (data.rows.length === 0) {
    ElMessage.warning('请选择数据')
    return
  }
  ElMessageBox.confirm('删除后无法恢复，您确认删除吗？', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/admin/deleteBatch', { data: data.rows }).then(res => {
      if (res.code === '200') {
        ElMessage.success('批量删除成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

本节课的代码案例

Admin.vue

AdminController

AdminService

AdminMapper

package com.example.mapper;

import com.example.entity.Admin;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface AdminMapper {

    List<Admin> selectAll(Admin admin);

    void insert(Admin admin);

    @Select("select * from `admin` where username = #{username}")
    Admin selectByUsername(String username);

    void updateById(Admin admin);

    @Delete("delete from `admin` where id = #{id}")
    void deleteById(Integer id);

}

AdminMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.AdminMapper">

    <select id="selectAll" resultType="com.example.entity.Admin">
        select * from `admin`
        <where>
            <if test="username != null">username like concat('%', #{username}, '%')</if>
            <if test="name != null">and name like concat('%', #{name}, '%')</if>  <!-- 相当于 name like '%1%' -->
        </where>
        order by id desc
    </select>

    <insert id="insert">
        insert into `admin` (username, password, name, phone, email)
        values(#{username}, #{password}, #{name}, #{phone}, #{email})
    </insert>

    <update id="updateById">
        update `admin` set username = #{username}, password = #{password}, name = #{name}, phone = #{phone}, email = #{email}
        where id = #{id}
    </update>

</mapper>