一、改变路由警告

二、实现新增数据

1.UserMapper.xml

2.Controller层

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

3.设置提交的表单

<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-pickerv-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 与表单组件关联

<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.listdata.total = res.data.total} else {ElMessage.error(res.msg)}})
}
load()//搜索重置
const reset = () => {data.username = nulldata.address = nullload()
}//点击新增按钮触发的方法
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

<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的修改和删除按钮

<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的数据提交

 //打开修改的弹框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 = falseElMessage.success('修改成功')load()} else {ElMessage.error(res.msg)}})}})
}

四、删除数据

xml配置

controller层

删除数据

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

import {ElMessage, ElMessageBox } from "element-plus";

//删除数据
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>

前端实现批量删除功能

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 => {})
}

六、前端全部代码

<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-paginationv-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-pickerv-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.listdata.total = res.data.total} else {ElMessage.error(res.msg)}})
}
load()//搜索重置
const reset = () => {data.username = nulldata.address = nullload()
}// 添加日期格式化函数
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 = falseElMessage.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>