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

路由警告

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 = false">保 存</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 上有三个必须属性

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

3.在 rules 里面定义验证的规则
4.定义 formRef 对象，作为表单的引用
5.通过 formRef 对象进行表单验证
destroy-on-close 属性可以重置 dialog

引入 Java 工具类 Hutool

  <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("账号重复");
      }
        //默认密码 admin
        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 => {})
}