科技公司网站系统,2015年做那些网站能致富,如何建设一个简易网站,北流网站制作一、改变路由警告 二、实现新增数据
1.UserMapper.xml 2.Controller层
注意:前端传的是json对象,所以后台也需要使用JSON 3.设置提交的表单 el-dialog title信息 v-modeldata.formVisible width30% destroy-on-closeel-form…一、改变路由警告 二、实现新增数据
1.UserMapper.xml 2.Controller层
注意:前端传的是json对象,所以后台也需要使用JSON 3.设置提交的表单 el-dialog title信息 v-modeldata.formVisible width30% destroy-on-closeel-form refformRef :modeldata.form :rulesdata.rules label-width80px stylepadding: 20px 30px 10px 0el-form-item propusername label账号el-input v-modeldata.form.username autocompleteoff //el-form-itemel-form-item propbirthday label生日el-date-pickerv-modeldata.form.birthdaytypedatetimeplaceholder选择日期时间/el-date-picker/el-form-itemel-form-item propsex label性别el-select v-modeldata.form.sex placeholder请选择性别 stylewidth: 100%el-option label男 value男/el-optionel-option label女 value女/el-option/el-select/el-form-itemel-form-item propaddress label地址el-input v-modeldata.form.address autocompleteoff //el-form-item/el-formtemplate #footerdiv classdialog-footerel-button clickdata.formVisible false取 消/el-buttonel-button typeprimary clicksave保 存/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 idupdate parameterTypecom.qcby.springboot.entity.Userupdate usersetif testusername!nullusername#{username},/ifif testbirthday!nullbirthday#{birthday},/ifif testsex!nullsex#{sex},/ifif testaddress!nulladdress#{address},/if/setwhere id #{id}
/update
controller层 3.设置vue的修改和删除按钮
el-table-column label操作 width100template #defaultscopeel-button typeprimary iconEdit circle clickhandleEdit(scope.row)/el-buttonel-button typedanger iconDelete circle clickdel(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-changehandleSelectionChange 添加批量删除按钮 el-button typedanger clickdeleteBatch批量删除/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 {})
}
六、前端全部代码
templatedivdiv classcard stylemargin-bottom: 5pxel-input clearable clearload stylewidth: 260px; margin-right: 5px v-modeldata.username placeholder请输入用户名查询 :prefix-iconSearch/el-inputel-input clearable clearload stylewidth: 260px; margin-right: 5px v-modeldata.address placeholder请输入地址查询 :prefix-iconSearch/el-inputel-button typeprimary clickload查 询/el-buttonel-button clickreset重 置/el-button/divdiv classcard stylemargin-bottom: 5pxel-button typeprimary clickhandleAdd新 增/el-buttonel-button typedangerclickdeleteBatch 批量删除/el-button/divdiv classcard stylemargin-bottom: 5pxel-table :datadata.tableData stylewidth: 100% selection-changehandleSelectionChange :header-cell-style{ color: #333, backgroundColor: #eaf4ff }!-- typeselection这指定该列将包含用于行选择的复选框。它允许用户在表格中选择一行或多行。 --el-table-column typeselection width55 /el-table-column propusername label用户名 width180 /el-table-column propbirthday label生日 width180 :formatterdateFormat /el-table-column propsex label性别 width80 /el-table-column propaddress label地址 width180 /el-table-column label操作 width100template #defaultscopeel-button typeprimary iconEdit circle clickhandleEdit(scope.row)/el-buttonel-button typedanger iconDelete circle clickdel(scope.row.id)/el-button/template/el-table-column/el-table/divdiv classcardel-paginationv-model:current-pagedata.pageNum:page-sizedata.pageSizelayouttotal, prev, pager, next:totaldata.totalcurrent-changeloadsize-changeload//div/divel-dialog title信息 v-modeldata.formVisible width30% destroy-on-closeel-form refformRef :modeldata.form :rulesdata.rules label-width80px stylepadding: 20px 30px 10px 0el-form-item propusername label账号el-input v-modeldata.form.username autocompleteoff //el-form-itemel-form-item propbirthday label生日el-date-pickerv-modeldata.form.birthdaytypedateplaceholder选择日期时间/el-date-picker/el-form-itemel-form-item propsex label性别el-select v-modeldata.form.sex placeholder请选择性别 stylewidth: 100%el-option label男 value男/el-optionel-option label女 value女/el-option/el-select/el-form-itemel-form-item propaddress label地址el-input v-modeldata.form.address autocompleteoff //el-form-item/el-formtemplate #footerdiv classdialog-footerel-button clickdata.formVisible false取 消/el-buttonel-button typeprimary clicksave保 存/el-button/div/template
/el-dialog/templatescript 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
