Mybatis实现页面增删改查

千睢2025-08-15 12:51

一、改变路由警告

二、实现新增数据

1.UserMapper.xml

2.Controller层

注意:前端传的是json对象,所以后台也需要使用JSON

3.设置提交的表单

java 复制代码 
<el-dialog title="信息" v-model="data.formVisible" width="30%" destroy-on-close>
      <el-form ref="formRef" :model="data.form" :rules="data.rules" label-width="80px" style="padding: 20px 30px 10px 0">
        <el-form-item prop="username" label="账号">
          <el-input v-model="data.form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="birthday" label="生日">
         <el-date-picker
                v-model="data.form.birthday"
                type="datetime"
                placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select v-model="data.form.sex" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="address" label="地址">
          <el-input v-model="data.form.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </template>
</el-dialog>

4.点击新增按钮实现弹框打开

4.script数据提交（注意点） 通过在 中设置 ref 属性，将 formRef 与表单组件关联

java 复制代码 
<script setup>
import { reactive,ref } from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  name: null,
  pageNum: 1,
  pageSize: 5,
  total:0,
  tableData: [],
  formVisible: false, // 表单是否显示
  form: {}, //表单数据
  rules: {
    username: [
      { required: true, message: '请填写用户名', trigger: 'blur' }
    ],
    birthday: [
      { required: false, message: '请填写生日', trigger: 'blur' }
    ],
    sex: [
      { required: true, message: '请填写性别', trigger: 'blur' }
    ],
    address: [
      { required: true, message: '请填写地址', trigger: 'blur' }
    ]
  },
  rows: []
})

const formRef = ref() //表单实例


const load = () => {
  request.get('/user/selectPage', {
    //入参
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      username:data.username,
      address:data.address
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data.list
      data.total = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
load()

//搜索重置
const reset = () => {
  data.username = null
  data.address = null
  load()
}

//点击新增按钮触发的方法
const handleAdd = () => {
  data.formVisible = true //显示弹框
  data.form = {}  //清空表单
}

const add = () => {
  console.log(data.form);
  
  // formRef 是表单的引用
  formRef.value.validate((valid) => {
    if (valid) {   // 验证通过的情况下
      request.post('/user/add', data.form).then(res => {
        if (res.code === '200') {
          data.formVisible = false //隐藏弹框
          ElMessage.success('新增成功')
          load() //重新加载数据
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

//点击保存触发的方法
const save = () => {
  add()
}

</script>

三、实现修改数据

mapper.xml

java 复制代码 
<update id="update" parameterType="com.qcby.springboot.entity.User">
    update user
    <set>
        <if test="username!=null">
            username=#{username},
        </if>
        <if test="birthday!=null">
            birthday=#{birthday},
        </if>
        <if test="sex!=null">
            sex=#{sex},
        </if>
        <if test="address!=null">
            address=#{address},
        </if>
    </set>
    where id = #{id}
</update>

controller层

3.设置vue的修改和删除按钮

java 复制代码 
<el-table-column label="操作" width="100">
    <template #default="scope">
       <el-button type="primary" icon="Edit" circle @click="handleEdit(scope.row)"></el-button>
       <el-button type="danger" icon="Delete" circle @click="del(scope.row.id)"></el-button>
    </template>
</el-table-column>

4.设置vue的数据提交

java 复制代码 
 //打开修改的弹框
 const handleEdit = (row)=>{
  data.form = JSON.parse(JSON.stringify(row))  // 深度拷贝数据
  data.formVisible = true
}

//点击保存触发的方法
const save = () => {
  data.form.id ? update() : add()
}
//修改
const update = () => {
  // formRef 是表单的引用
  formRef.value.validate((valid) => {
    if (valid) {   // 验证通过的情况下
      request.post('/user/update', data.form).then(res => {
        if (res.code === '200') {
          data.formVisible = false
          ElMessage.success('修改成功')
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

四、删除数据

xml配置

controller层

删除数据

注意这里需要导入 ElMessageBox ElMessageBox 是 Element Plus UI 库提供的一个弹出框组件，主要用于显示各种类型的确认对话框、提示信息等。

java 复制代码 
import {ElMessage, ElMessageBox } from "element-plus";
java 复制代码 
//删除数据
const del = (id) => {
  ElMessageBox.confirm('删除后无法恢复，您确认删除吗？', '删除确认', { type: 'warning' }).then(res => {
    request.post('/user/delete/' + id).then(res => {
      if (res.code === '200') {
        ElMessage.success('删除成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}

五、批量删除

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

添加批量删除按钮

<el-button type="danger" @click="deleteBatch">批量删除</el-button>

前端实现批量删除功能

java 复制代码 
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 => {})
}

六、前端全部代码

java 复制代码 
<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input clearable @clear="load" style="width: 260px; margin-right: 5px" v-model="data.username" placeholder="请输入用户名查询" :prefix-icon="Search"></el-input>
      <el-input clearable @clear="load" style="width: 260px; margin-right: 5px" v-model="data.address" placeholder="请输入地址查询" :prefix-icon="Search"></el-input>
      <el-button type="primary" @click="load">查 询</el-button>
      <el-button @click="reset">重 置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="primary" @click="handleAdd">新 增</el-button>
      <el-button type="danger"@click="deleteBatch" >批量删除</el-button>
    </div>

   <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" style="width: 100%" 
       @selection-change="handleSelectionChange"  :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff' }">
        <!-- type="selection"：这指定该列将包含用于行选择的复选框。它允许用户在表格中选择一行或多行。 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="birthday" label="生日" width="180"  :formatter="dateFormat" />
        <el-table-column prop="sex" label="性别" width="80" />
        <el-table-column prop="address" label="地址" width="180" />
        <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="primary" icon="Edit" circle @click="handleEdit(scope.row)"></el-button>
              <el-button type="danger" icon="Delete" circle @click="del(scope.row.id)"></el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card">
      <el-pagination
          v-model:current-page="data.pageNum"
          :page-size="data.pageSize"
          layout="total, prev, pager, next"
          :total="data.total"
          @current-change="load"
          @size-change="load"
      />
    </div>
  </div>

  <el-dialog title="信息" v-model="data.formVisible" width="30%" destroy-on-close>
      <el-form ref="formRef" :model="data.form" :rules="data.rules" label-width="80px" style="padding: 20px 30px 10px 0">
        <el-form-item prop="username" label="账号">
          <el-input v-model="data.form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="birthday" label="生日">
         <el-date-picker
                v-model="data.form.birthday"
                type="date"
                placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select v-model="data.form.sex" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="address" label="地址">
          <el-input v-model="data.form.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </template>
</el-dialog>

</template>

<script setup>
import { reactive,ref } from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox } from "element-plus";

const formRef = ref() //表单实例

const data = reactive({
  name: null,
  pageNum: 1,
  pageSize: 5,
  total:0,
  tableData: [],
  rules: {
    username: [
      { required: true, message: '请填写用户名', trigger: 'blur' }
    ],
    birthday: [
      { required: true, message: '请填写生日', trigger: 'blur' }
    ],
    sex: [
      { required: true, message: '请填写性别', trigger: 'blur' }
    ],
    address: [
      { required: true, message: '请填写地址', trigger: 'blur' }
    ]
  },
  rows: []
})

const load = () => {
  request.get('/user/findAll', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      username: data.username,
      address: data.address
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data.list
      data.total = res.data.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
load()

//搜索重置
const reset = () => {
  data.username = null
  data.address = null
  load()
}

// 添加日期格式化函数
const dateFormat = (row, column, cellValue) => {
  if (!cellValue) return ''
  const date = new Date(cellValue)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

//点击新增按钮触发的方法
const handleAdd = () => {
  data.formVisible = true //显示弹框
  data.form = {}  //清空表单
}

const add = () => {
  console.log(data.form);
  
  // formRef 是表单的引用
  formRef.value.validate((valid) => {
    if (valid) {   // 验证通过的情况下
      request.post('/user/add', data.form).then(res => {
        if (res.code === '200') {
          data.formVisible = false //隐藏弹框
          ElMessage.success('新增成功')
          load() //重新加载数据
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}


 //打开修改的弹框
const handleEdit = (row)=>{
  data.form = JSON.parse(JSON.stringify(row))  // 深度拷贝数据
  data.formVisible = true  
}

// //点击保存触发的方法
const save = () => {
  data.form.id ? update() : add()
}
//修改
const update = () => {
  // formRef 是表单的引用
  formRef.value.validate((valid) => {
    if (valid) {   // 验证通过的情况下
      request.post('/user/update', data.form).then(res => {
        if (res.code === '200') {
          data.formVisible = false
          ElMessage.success('修改成功')
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

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

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('/user/deleteBatch', { data: data.rows }).then(res => {
      if (res.code === '200') {
        ElMessage.success('批量删除成功')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {})
}
</script>
相关推荐
Warren988 小时前
Java后端面试题（含Dubbo、MQ、分布式、并发、算法）
java·开发语言·分布式·学习·算法·mybatis·dubbo
羊锦磊12 小时前
[ Mybatis 多表关联查询 ] resultMap
java·开发语言·数据库·mysql·mybatis
Warren981 天前
Java Record 类 — 简化不可变对象的写法
java·开发语言·jvm·分布式·算法·mybatis·dubbo
真实的菜2 天前
MyBatis高级特性与性能优化：从入门到精通的实战指南
性能优化·mybatis
尘心不灭2 天前
MyBatis 缓存与 Spring 事务相关笔记
java·spring·mybatis
写bug写bug2 天前
搞懂MyBatis拦截器的工作原理
java·后端·mybatis
四七伵2 天前
MyBatis #{} 与 ${} 有什么区别？为什么预编译能防止SQL注入？
前端·sql·mybatis
要开心吖ZSH3 天前
大数据量下分页查询性能优化实践（SpringBoot+MyBatis-Plus）
spring boot·性能优化·mybatis
PP东3 天前
Mybatis学习之动态SQL（八）
mybatis
热门推荐
01UV安装并设置国内源022025最新国内服务器可用docker源仓库地址大全（2025年8月更新）03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04全球最强模型Grok4，国内已可免费使用！（附教程）05TRAE Rules 实践：为项目配置 6A 工作流06KGG转MP3工具|非KGM文件|解密音频07【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）08GPT-5 使用限制与国内升级全攻略（免费 / Plus / Pro）【2025 最新】09Cursor 终端“卡死/无响应”问题的解法10Claude Code + claude-code-router白嫖魔搭社区千问模型，开启AI编程之路