Mybatis實現頁面增刪改查

一、改變路由警告

二、實現新增數據

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>