网站建设的分项报价,国外媒体中文网站,企业vi设计公司性价比高,卫辉网站建设环境搭建
通过解压之前《Vue3开发后台管理系统模板》的代码#xff0c;我们能够得到用户增删改查的页面#xff0c;我们基于用户增删改查的页面做进一步的优化。
创建学生增删改查页面
第一步#xff1a;复制用户增删改查页面#xff0c;重命名为StudentCRUD.vue
…环境搭建
通过解压之前《Vue3开发后台管理系统模板》的代码我们能够得到用户增删改查的页面我们基于用户增删改查的页面做进一步的优化。
创建学生增删改查页面
第一步复制用户增删改查页面重命名为StudentCRUD.vue
script setup
import {FilterMatchMode} from primevue/api;
import {ref, onBeforeMount} from vue;
import {useToast} from primevue/usetoast;
import users from /assets/data/user.json// 用户
const user ref({id: 0,name: ,age: 0,
})
const toast useToast();const userDialog ref(false); // 用户弹窗是否显示
const deleteUserDialog ref(false); // 确认删除用户弹窗是否显示
const deleteUsersDialog ref(false); // 批量删除用户弹窗是否显示
const selectedUsers ref(null);
const dt ref(null);
const filters ref({});
const submitted ref(false);onBeforeMount(() {initFilters();
});/*** 打开新增用户的弹窗*/
function openNew() {user.value {id: 0,name: ,age: 0,};submitted.value false;userDialog.value true;
}/*** 新增用户*/
function addUser() {console.log(新增用户, user.value)userDialog.value false
}const hideDialog () {userDialog.value false;submitted.value false;
};const editUser (editUser) {user.value {...editUser};console.log(user);userDialog.value true;
};/*** 确认删除用户* param editUser 要删除的用户信息*/
const confirmDeleteUser (editUser) {user.value editUser;deleteUserDialog.value true;
};/*** 删除用户*/
const deleteUser () {users users.filter((val) val.id ! user.value.id);deleteUserDialog.value false;user.value {id: 0,name: ,age: 0,};toast.add({severity: success, summary: 成功, detail: 删除用户, life: 3000});
};const exportCSV () {dt.value.exportCSV();
};const confirmDeleteSelected () {deleteUsersDialog.value true;
};/*** 删除选中的用户*/
const deleteSelectedUsers () {users users.filter((val) !selectedUsers.value.includes(val));deleteUsersDialog.value false;selectedUsers.value null;toast.add({severity: success, summary: 成功, detail: 删除用户, life: 3000});
};/*** 初始化过滤器*/
const initFilters () {filters.value {global: {value: null, matchMode: FilterMatchMode.CONTAINS}};
};
/scripttemplatediv classgriddiv classcol-12div classcard!--消息提示--Toast/!--顶部工具栏--Toolbar classmb-4!--左侧--template v-slot:startdiv classmy-2Button label新增 iconpi pi-plus classp-button-success mr-2 clickopenNew/Button label删除 iconpi pi-trash classp-button-danger clickconfirmDeleteSelected:disabled!selectedUsers || !selectedUsers.length//div/template!--右侧--template v-slot:endFileUpload modebasic acceptimage/* :maxFileSize1000000 labelImport chooseLabel导入classmr-2 inline-block/Button label导出 iconpi pi-upload classp-button-help clickexportCSV($event)//template/Toolbar!--数据表格--DataTablerefdt:valueusersv-model:selectionselectedUsersdataKeyid:paginatortrue:rows10:filtersfilterspaginatorTemplateFirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown:rowsPerPageOptions[5, 10, 25]currentPageReportTemplateShowing {first} to {last} of {totalRecords} productsresponsiveLayoutscroll!--表头--template #headerdiv classflex flex-column md:flex-row md:justify-content-between md:align-items-centerh5 classm-0用户管理/h5span classblock mt-2 md:mt-0 p-input-icon-lefti classpi pi-search/InputText v-modelfilters[global].value placeholder搜索...//span/div/template!--内容--Column selectionModemultiple headerStylewidth: 3rem/ColumnColumn fieldname header姓名 :sortabletrue headerStylemin-width:10rem;/ColumnColumn fieldage header年龄 :sortabletrue headerStylemin-width:8rem;/ColumnColumn headerStylemin-width:10rem;template #bodyslotPropsButton iconpi pi-pencil classp-button-rounded p-button-success mr-2clickeditUser(slotProps.data)/Button iconpi pi-trash classp-button-rounded p-button-warning mt-2clickconfirmDeleteUser(slotProps.data)//template/Column/DataTable!--新增弹窗--Dialog v-model:visibleuserDialog:style{ width: 450px }header新增用户:modaltrueclassp-fluiddiv classfieldlabel forname姓名/labelInputText idname v-model.trimuser.name requiredtrue autofocus:class{ p-invalid: submitted !user.name }/small classp-invalid v-ifsubmitted !user.name姓名不能为空/small/divdiv classfieldlabel forname年龄/labelInputText idname v-model.numberuser.age requiredtrue autofocus:class{ p-invalid: submitted !user.age }/small classp-invalid v-ifsubmitted !user.age年龄不能为空/small/divtemplate #footerButton label取消 iconpi pi-times classp-button-text clickhideDialog/Button label保存 iconpi pi-check classp-button-text clickaddUser//template/Dialog!--确认删除弹窗--Dialog v-model:visibledeleteUserDialog :style{ width: 450px } headerConfirm :modaltruediv classflex align-items-center justify-content-centeri classpi pi-exclamation-triangle mr-3 stylefont-size: 2rem/span v-ifuser您确认要删除 b{{ user.name }}/b吗/span/divtemplate #footerButton label取消 iconpi pi-times classp-button-text clickdeleteUserDialog false/Button label确认 iconpi pi-check classp-button-text clickdeleteUser//template/Dialog!--批量删除确认弹窗--Dialog v-model:visibledeleteUsersDialog :style{ width: 450px } header请确认 :modaltruediv classflex align-items-center justify-content-centeri classpi pi-exclamation-triangle mr-3 stylefont-size: 2rem/span v-ifuser删除后无法撤销您确定要删除吗/span/divtemplate #footerButton label取消 iconpi pi-times classp-button-text clickdeleteUsersDialog false/Button label确认 iconpi pi-check classp-button-text clickdeleteSelectedUsers//template/Dialog/div/div/div
/template
第二步在router/index.js中配置学生增删改查的路由
{path: /pages/crud/student,name: /pages/crud/student,component: () import(/pages/crud/StudentCRUD.vue)
}第三步在AppMenu.vue中添加学生增删改查的跳转链接
{label: 学生增删改查, icon: pi pi-fw pi-home, to: /pages/crud/student},效果图如下这样我们就有了一个学生增删改查的基本页面
学生基本信息设计
初中学生有哪些基本的属性
ID唯一标识字符串最大长度36student_id学生证号字符串最大长度是36chinese_id身份证号字符串最大长度36name姓名字符串最大长度36age年龄整数gender性别字符串最大长度6height身高浮点数weight体重浮点数phone联系电话字符串最大长度20home_name家长名称字符串最大长度36home_relation家长关系字符串最大长度36home_phone家长电话字符串最大长度20sclass_id班级ID字符串最大长度36sclass_name班级名称字符串最大长度36sclass_level年纪名称字符串最大长度36master_id班主任ID字符串最大长度36master_name班主任姓名字符串最大长度36master_phone班主任电话字符串最大长度是20address_id地址id字符串最大长度36address地址信息字符串最大长度255detail学生详细信息文本类型存储JSON字符串
学生基本信息的JSON构造
[{id: 1,student_id: 1,chinese_id: 5222xxx,name: 张三,age: 13,gender: 男,height: 148,weight: 57,phone: 18811112222,home_id: 1,home_name: 张三家长,home_relation: 父子,home_phone: 18811112222,sclass_id: 1,sclass_name: 初一3班,sclass_level: 1,master_id: 1,master_name: 张三班主任,master_phone: 18811112222,address_id: 1,address: 四川省成都市金牛区xxx街道xxx号,detail: {}},{id: 2,student_id: 1,chinese_id: 5222xxx,name: 李四,age: 13,gender: 男,height: 148,weight: 57,phone: 18811112222,home_id: 1,home_name: 张三家长,home_relation: 父子,home_phone: 18811112222,sclass_id: 1,sclass_name: 初一3班,sclass_level: 1,master_id: 1,master_name: 张三班主任,master_phone: 18811112222,address_id: 1,address: 四川省成都市金牛区xxx街道xxx号,detail: {}},{id: 3,student_id: 1,chinese_id: 5222xxx,name: 王五,age: 13,gender: 男,height: 148,weight: 57,phone: 18811112222,home_id: 1,home_name: 张三家长,home_relation: 父子,home_phone: 18811112222,sclass_id: 1,sclass_name: 初一3班,sclass_level: 1,master_id: 1,master_name: 张三班主任,master_phone: 18811112222,address_id: 1,address: 四川省成都市金牛区xxx街道xxx号,detail: {}}
]渲染学生信息
第一步导入学生JSON数据
import students from /assets/data/students.json第二步传入DataTable数据表格
:valuestudents第三步编辑要显示的字段
DataTablerefdt:valuestudentsv-model:selectionselectedUsersdataKeyid:paginatortrue:rows10:filtersfilterspaginatorTemplateFirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown:rowsPerPageOptions[5, 10, 25]currentPageReportTemplateShowing {first} to {last} of {totalRecords} productsresponsiveLayoutscroll!--表头--template #headerdiv classflex flex-column md:flex-row md:justify-content-between md:align-items-centerh5 classm-0学生管理/h5span classblock mt-2 md:mt-0 p-input-icon-lefti classpi pi-search/InputText v-modelfilters[global].value placeholder搜索...//span/div/template!--内容--Column selectionModemultiple headerStylewidth: 3rem/ColumnColumn fieldsclass_name header班级 :sortabletrue headerStylemin-width:10rem;/ColumnColumn fieldname header姓名 :sortabletrue headerStylemin-width:10rem;/ColumnColumn fieldage header年龄 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldgender header性别 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldphone header手机 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldmaster_name header班主任 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldmaster_phone header班主任电话 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldhome_name header家长 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldhome_phone header家长电话 :sortabletrue headerStylemin-width:8rem;/ColumnColumn headerStylemin-width:10rem;template #bodyslotPropsButton iconpi pi-pencil classp-button-rounded p-button-success mr-2clickeditUser(slotProps.data)/Button iconpi pi-trash classp-button-rounded p-button-warning mt-2clickconfirmDeleteUser(slotProps.data)//template/Column/DataTable完整代码如下
script setup
import {FilterMatchMode} from primevue/api;
import {ref, onBeforeMount} from vue;
import {useToast} from primevue/usetoast;
import students from /assets/data/students.json// 用户
const user ref({id: 0,name: ,age: 0,
})
const toast useToast();const userDialog ref(false); // 用户弹窗是否显示
const deleteUserDialog ref(false); // 确认删除用户弹窗是否显示
const deleteUsersDialog ref(false); // 批量删除用户弹窗是否显示
const selectedUsers ref(null);
const dt ref(null);
const filters ref({});
const submitted ref(false);onBeforeMount(() {initFilters();
});/*** 打开新增用户的弹窗*/
function openNew() {user.value {id: 0,name: ,age: 0,};submitted.value false;userDialog.value true;
}/*** 新增用户*/
function addUser() {console.log(新增用户, user.value)userDialog.value false
}const hideDialog () {userDialog.value false;submitted.value false;
};const editUser (editUser) {user.value {...editUser};console.log(user);userDialog.value true;
};/*** 确认删除用户* param editUser 要删除的用户信息*/
const confirmDeleteUser (editUser) {user.value editUser;deleteUserDialog.value true;
};/*** 删除用户*/
const deleteUser () {users users.filter((val) val.id ! user.value.id);deleteUserDialog.value false;user.value {id: 0,name: ,age: 0,};toast.add({severity: success, summary: 成功, detail: 删除用户, life: 3000});
};const exportCSV () {dt.value.exportCSV();
};const confirmDeleteSelected () {deleteUsersDialog.value true;
};/*** 删除选中的用户*/
const deleteSelectedUsers () {users users.filter((val) !selectedUsers.value.includes(val));deleteUsersDialog.value false;selectedUsers.value null;toast.add({severity: success, summary: 成功, detail: 删除用户, life: 3000});
};/*** 初始化过滤器*/
const initFilters () {filters.value {global: {value: null, matchMode: FilterMatchMode.CONTAINS}};
};
/scripttemplatediv classgriddiv classcol-12div classcard!--消息提示--Toast/!--顶部工具栏--Toolbar classmb-4!--左侧--template v-slot:startdiv classmy-2Button label新增 iconpi pi-plus classp-button-success mr-2 clickopenNew/Button label删除 iconpi pi-trash classp-button-danger clickconfirmDeleteSelected:disabled!selectedUsers || !selectedUsers.length//div/template!--右侧--template v-slot:endFileUpload modebasic acceptimage/* :maxFileSize1000000 labelImport chooseLabel导入classmr-2 inline-block/Button label导出 iconpi pi-upload classp-button-help clickexportCSV($event)//template/Toolbar!--数据表格--DataTablerefdt:valuestudentsv-model:selectionselectedUsersdataKeyid:paginatortrue:rows10:filtersfilterspaginatorTemplateFirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown:rowsPerPageOptions[5, 10, 25]currentPageReportTemplateShowing {first} to {last} of {totalRecords} productsresponsiveLayoutscroll!--表头--template #headerdiv classflex flex-column md:flex-row md:justify-content-between md:align-items-centerh5 classm-0学生管理/h5span classblock mt-2 md:mt-0 p-input-icon-lefti classpi pi-search/InputText v-modelfilters[global].value placeholder搜索...//span/div/template!--内容--Column selectionModemultiple headerStylewidth: 3rem/ColumnColumn fieldsclass_name header班级 :sortabletrue headerStylemin-width:10rem;/ColumnColumn fieldname header姓名 :sortabletrue headerStylemin-width:10rem;/ColumnColumn fieldage header年龄 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldgender header性别 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldphone header手机 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldmaster_name header班主任 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldmaster_phone header班主任电话 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldhome_name header家长 :sortabletrue headerStylemin-width:8rem;/ColumnColumn fieldhome_phone header家长电话 :sortabletrue headerStylemin-width:8rem;/ColumnColumn headerStylemin-width:10rem;template #bodyslotPropsButton iconpi pi-pencil classp-button-rounded p-button-success mr-2clickeditUser(slotProps.data)/Button iconpi pi-trash classp-button-rounded p-button-warning mt-2clickconfirmDeleteUser(slotProps.data)//template/Column/DataTable!--新增弹窗--Dialog v-model:visibleuserDialog:style{ width: 450px }header新增用户:modaltrueclassp-fluiddiv classfieldlabel forname姓名/labelInputText idname v-model.trimuser.name requiredtrue autofocus:class{ p-invalid: submitted !user.name }/small classp-invalid v-ifsubmitted !user.name姓名不能为空/small/divdiv classfieldlabel forname年龄/labelInputText idname v-model.numberuser.age requiredtrue autofocus:class{ p-invalid: submitted !user.age }/small classp-invalid v-ifsubmitted !user.age年龄不能为空/small/divtemplate #footerButton label取消 iconpi pi-times classp-button-text clickhideDialog/Button label保存 iconpi pi-check classp-button-text clickaddUser//template/Dialog!--确认删除弹窗--Dialog v-model:visibledeleteUserDialog :style{ width: 450px } headerConfirm :modaltruediv classflex align-items-center justify-content-centeri classpi pi-exclamation-triangle mr-3 stylefont-size: 2rem/span v-ifuser您确认要删除 b{{ user.name }}/b吗/span/divtemplate #footerButton label取消 iconpi pi-times classp-button-text clickdeleteUserDialog false/Button label确认 iconpi pi-check classp-button-text clickdeleteUser//template/Dialog!--批量删除确认弹窗--Dialog v-model:visibledeleteUsersDialog :style{ width: 450px } header请确认 :modaltruediv classflex align-items-center justify-content-centeri classpi pi-exclamation-triangle mr-3 stylefont-size: 2rem/span v-ifuser删除后无法撤销您确定要删除吗/span/divtemplate #footerButton label取消 iconpi pi-times classp-button-text clickdeleteUsersDialog false/Button label确认 iconpi pi-check classp-button-text clickdeleteSelectedUsers//template/Dialog/div/div/div
/template
显示效果如下
