企业设计网站公司,易语言可以做网站嘛,tp5第二季企业网站开发auth权限认证,安装网站模版视频教程本文为博主的vue实战小项目系列中的第六篇#xff0c;很适合后端或者才入门的小伙伴看#xff0c;一个前端项目从0到1的保姆级教学。前面的内容#xff1a;
【vue实战项目】通用管理系统#xff1a;登录页-CSDN博客
【vue实战项目】通用管理系统#xff1a;封装token操作…本文为博主的vue实战小项目系列中的第六篇很适合后端或者才入门的小伙伴看一个前端项目从0到1的保姆级教学。前面的内容
【vue实战项目】通用管理系统登录页-CSDN博客
【vue实战项目】通用管理系统封装token操作和网络请求-CSDN博客
【vue实战项目】通用管理系统api封装、404页-CSDN博客
【vue实战项目】通用管理系统首页-CSDN博客
【vue实战项目】通用管理系统学生列表-CSDN博客 目录
1.概述
2.架子
3.校验规则
4.新增
5.查询 1.概述
首先我们要搞清楚学生信息列表页是用来干啥的
用来对学生的基本信息进入管理也就是录入基本信息以及维护基本信息。
和前面的学生列表不同的是学生列表是展示学生的关于学生这个身份的相关信息是从学校的角度出发。学生信息列表是用来维护学生的更多、更全面的详细基本信息的更多的是从一个自然人的角度出发的。
来看看整个页面长什么样子
一个展示学生信息的列表然后附带增删改的功能。 当前工程目录结构以及新编写的内容 2.架子
先来把页面的架子写出来后面再完善功能。
首先来写展示学生信息的列表直接将就以前学生列表页的表格来改一下就行新建一个infoList组件。
代码示例
templatediv classstudentListel-table :datatableData border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propaddress label家庭住址 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter/el-table-columnel-table-column label操作template slot-scopescopeel-buttonclickedit(scope.row)typedangersizeminiiconel-icon-edit/el-buttonel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column/el-table/div
/template
script
export default {data() {return {tableData:[]}},methods:{edit(){},del(){}}
};
/scriptstyle langless
.studentList {.el-form-inline .el-form-item{text-align: left;}.el-pagination {text-align: left;margin-top: 20px;}
}
/style效果 加个新增按钮出来。
代码示例
templatediv classstudentList!--查询表单--el-form :inlinetrue :modelformInline classdemo-form-inline sizeminiel-form-item label姓名el-input v-modelformInline.name placeholder请输入姓名/el-input/el-form-itemel-form-item label活动区域el-button typeprimary clickreset查询/el-button/el-form-itemel-form-itemel-button typeprimary clickfind查询/el-button/el-form-item/el-formel-table :datacompData border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propsex_text label性别 aligncenter/el-table-columnel-table-column propclassNum label班级 aligncenter/el-table-columnel-table-column propnumber label学号 aligncenter/el-table-columnel-table-column propaddress label地址 aligncenter/el-table-columnel-table-column propstatus_text label状态 aligncenter/el-table-columnel-table-column label操作template slot-scopescopeel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column/el-table!--分页组件--div classblockspan classdemonstration完整功能/spanel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 15, 20]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/div
/template
script
import { students } from /api/api.js;
import { studentDel } from /api/api.js;
export default {data() {return {tableData: [],currentPage: 1, //当前页数pageSize: 10, //每页显示条数total: 0, //总条数formInline:{name:}};},methods: {getData(params) {students(params).then((res) {if (res.data.code 200) {this.tableData res.data.data;this.total res.data.total;this.tableData.forEach((item) {item.sex 1 ? (item.sex_text 男) : (item.sex_text 女);item.status 1? (item.status_text 已入学): (item.status_text 未入学);});}});},//分页方法handleSizeChange(val) {this.pageSize val;this.currentPage 1;},handleCurrentChange(val) {this, (this.currentPage val);},//删除del(row) {studentDel(row.id).then((res) {if (res.data.code 200) {this.$message({ message: 删除数据成功, type: success });this.getData();}});},//查询find(){this.getData(this.formInline.name);},//重置reset(){this.getData();}},created() {this.getData();},computed: {compData() {return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);},},
};
/scriptstyle langless
.studentList {.demo-form-inline, .el-form-item{text-align: left;}.el-pagination {text-align: left;margin-top: 20px;}
}
/style
效果 点击新增按钮弹出录入学生信息的弹框接下来就是找弹框组件去elementUI上找会发现没有弹框只有对话框所以我们就将就对话框来改写就是了。 templatediv classinfoList!--新增按钮--el-form:inlinetrue:modelformInlineclassdemo-form-inlinesizeminiel-form-itemel-button typeprimary clickaddStudent新增/el-button/el-form-item/el-formel-table :datatableData border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propaddress label家庭住址 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter/el-table-columnel-table-column label操作template slot-scopescopeel-buttonclickedit(scope.row)typedangersizeminiiconel-icon-edit/el-buttonel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column/el-table!--弹框--el-dialog title添加学生信息 :visible.syncdialogFormVisibleel-form :modelformel-form-item label姓名 :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button确定/el-buttonel-button clickdialogFormVisiblefalse取 消/el-button/div/el-dialog/div
/template
script
export default {data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible:false,form:{name:}};},methods: {edit() {},del() {},addStudent(){this.dialogFormVisibletrue;}},
};
/scriptstyle langless
.infoList {.demo-form-inline,.el-form-item {text-align: left;}.el-pagination {text-align: left;margin-top: 20px;}
}
/style
效果 补全弹框里面的内容
templatediv classinfoList!--新增按钮--el-form:inlinetrue:modelformInlineclassdemo-form-inlinesizeminiel-form-itemel-button typeprimary clickaddStudent新增/el-button/el-form-item/el-formel-table :datatableData border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propaddress label家庭住址 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter/el-table-columnel-table-column label操作template slot-scopescopeel-buttonclickedit(scope.row)typedangersizeminiiconel-icon-edit/el-buttonel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column/el-table!--弹框--el-dialog title添加学生信息 :visible.syncdialogFormVisibleel-form :modelform rulesrules refformel-form-item label姓名 :label-widthformLabelWidth propnameel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 :label-widthformLabelWidth propnameel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label :label-widthformLabelWidth propnameel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label年龄 :label-widthformLabelWidth propnameel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-item label父亲姓名 :label-widthformLabelWidth propnameel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-item label母亲姓名 :label-widthformLabelWidth propnameel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-item label家庭住址 :label-widthformLabelWidth propnameel-input v-modelform.address autocompleteoff/el-input/el-form-itemel-form-item label入校时间 :label-widthformLabelWidth propnameel-input v-modelform.time autocompleteoff/el-input/el-form-itemel-form-item label联系方式 :label-widthformLabelWidth propnameel-input v-modelform.phone autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button确定/el-buttonel-button clickdialogFormVisiblefalse取 消/el-button/div/el-dialog/div
/template
script
export default {data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible:false,form:{name:},rules:{}};},methods: {edit() {},del() {},addStudent(){this.dialogFormVisibletrue;}},
};
/scriptstyle langless
.infoList {.demo-form-inline,.el-form-item {text-align: left;}.el-pagination {text-align: left;margin-top: 20px;}
}
/style
效果 这里我们发现入校时间不可能去手动填写需要去找一个时间插件来用 代码示例
templatediv classinfoList!--新增按钮--el-form:inlinetrue:modelformInlineclassdemo-form-inlinesizeminiel-form-itemel-button typeprimary clickaddStudent新增/el-button/el-form-item/el-formel-table :datatableData border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propaddress label家庭住址 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter/el-table-columnel-table-column label操作template slot-scopescopeel-buttonclickedit(scope.row)typedangersizeminiiconel-icon-edit/el-buttonel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column/el-table!--弹框--el-dialog title添加学生信息 :visible.syncdialogFormVisibleel-form :modelform rulesrules refformel-form-item label姓名 :label-widthformLabelWidth propnameel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 :label-widthformLabelWidth propsexel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label年龄 :label-widthformLabelWidth propageel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-itemlabel父亲姓名:label-widthformLabelWidthpropfatherel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-itemlabel母亲姓名:label-widthformLabelWidthpropmatherel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-itemlabel家庭住址:label-widthformLabelWidthpropaddressel-input v-modelform.address autocompleteoff/el-input/el-form-itemel-form-itemlabel入校时间:label-widthformLabelWidthproptimeel-date-pickerv-modelform.timeformatyyyy 年 MM 月 dd日value-formatyyyy-MM-ddalignrighttypedateplaceholder选择日期/el-date-picker/el-form-itemel-form-itemlabel联系方式:label-widthformLabelWidthpropphoneel-input v-modelform.phone autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button确定/el-buttonel-button clickdialogFormVisible false取 消/el-button/div/el-dialog/div
/template
script
export default {data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible: false,form: {name: ,},rules: {},};},methods: {edit() {},del() {},addStudent() {this.dialogFormVisible true;},},
};
/scriptstyle langless
.infoList {.demo-form-inline,.el-form-item {text-align: left;}.el-pagination {text-align: left;margin-top: 20px;}
}
/style
效果 补全data
将sex默认为1后弹窗打开会有一个默认选项。
data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible: false,form: {name: ,sex: 1,age: ,father: ,mather: ,address: ,time: ,phone: },rules: {},};},
调整一下样式
观察一下发现弹窗的每一项内容都是用的一个变量来表示宽度于是给这个变量赋值为80px
data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible: false,form: {name: ,sex: 1,age: ,father: ,mather: ,address: ,time: ,phone: },rules: {},formLabelWidth:80px};
瞬间整个弹窗清爽整齐了很多 再把它变窄一点
!--弹框--el-dialog title添加学生信息 :visible.syncdialogFormVisible width500px 然后我们把弹窗录入的数据打印出来看看是不是对的
templatediv classinfoList!--新增按钮--el-form:inlinetrue:modelformInlineclassdemo-form-inlinesizeminiel-form-itemel-button typeprimary clickaddStudent新增/el-button/el-form-item/el-formel-table :datatableData border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propaddress label家庭住址 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter/el-table-columnel-table-column label操作template slot-scopescopeel-buttonclickedit(scope.row)typedangersizeminiiconel-icon-edit/el-buttonel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column/el-table!--弹框--el-dialog title添加学生信息 :visible.syncdialogFormVisible width500pxel-form :modelform :rulesrules refformel-form-item label姓名 :label-widthformLabelWidth propnameel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 :label-widthformLabelWidth propsexel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label年龄 :label-widthformLabelWidth propageel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-itemlabel父亲姓名:label-widthformLabelWidthpropfatherel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-itemlabel母亲姓名:label-widthformLabelWidthpropmatherel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-itemlabel家庭住址:label-widthformLabelWidthpropaddressel-input v-modelform.address autocompleteoff/el-input/el-form-itemel-form-itemlabel入校时间:label-widthformLabelWidthproptimeel-date-pickerv-modelform.timeformatyyyy 年 MM 月 dd日value-formatyyyy-MM-ddalignrighttypedateplaceholder选择日期/el-date-picker/el-form-itemel-form-itemlabel联系方式:label-widthformLabelWidthpropphoneel-input v-modelform.phone autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clicksure(form)确定/el-buttonel-button clickdialogFormVisible false取 消/el-button/div/el-dialog/div
/template
script
export default {data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible: false,form: {name: ,sex: 1,age: ,father: ,mather: ,address: ,time: ,phone: },rules: {},formLabelWidth:80px};},methods: {edit() {},del() {},addStudent() {this.dialogFormVisible true;},sure(form){console.log(form,this.form)}},
};
/scriptstyle langless
.infoList {.demo-form-inline,.el-form-item {text-align: left;}.el-pagination {text-align: left;margin-top: 20px;}
}
/style 3.校验规则
弹窗里面有输入框那么自然就需要对输入进行校验接下来开始编写校验规则。规则可以写简单点把必填项列出来即可。
data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible: false,form: {name: ,sex: 1,age: ,father: ,mather: ,address: ,time: ,phone: },rules: {name:[{required:true,message:请输入姓名}],sex:[{required:true,message:请输入性别}],age:[{required:true,message:请输入年龄}],address:[{required:true,message:请输入地址}],time:[{required:true,message:请输入入学时间}],phone:[{required:true,message:请输入联系方式}],},formLabelWidth:80px};},
写好规则后当然是在点击确定时触发这个校验规则
methods: {edit() {},del() {},addStudent() {this.dialogFormVisible true;},sure(form){this.$refs[form].validate(valid{if(valid){console.log(form,this.form)}})}},
效果 4.新增
接下来就是完善新增方法也就是在sure方法里调用api来新增学生信息。在api.js里加入新增学生信息的api。
export function info(data){return service({method:post,url:/student/info,data})
}
在infoList组件里调用api来完成新增
import {info} from /api/apisure(form){this.$refs[form].validate(valid{if(valid){info(this.form).then(res{console.log(res.data.code)if(res.data.code200){//新增成功后关闭窗口this.dialogFormVisiblefalse}})}})}
5.查询
刚刚做完了新增功能我们会发现新增了但是数据没有渲染出来那是以为我们还没有做查询接口。这里来做一个查询接口。
export function getInfo(){return service({method:get,url:/student/info})
}
封装方法
import {getInfo} from /api/apigetData(){getInfo().then(res{console.log(res)if(res.data.code200){this.tableDatares.data.data}})}
页面初始化数据
created(){this.getData()}
效果 最终组件代码
templatediv classinfoList!--新增按钮--el-form:inlinetrue:modelformInlineclassdemo-form-inlinesizeminiel-form-itemel-button typeprimary clickaddStudent新增/el-button/el-form-item/el-formel-table :datatableData border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propsex label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column propaddress label家庭住址 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter/el-table-columnel-table-column label操作template slot-scopescopeel-buttonclickedit(scope.row)typedangersizeminiiconel-icon-edit/el-buttonel-buttonclickdel(scope.row)typedangersizeminiiconel-icon-delete/el-button/template/el-table-column/el-table!--弹框--el-dialog title添加学生信息 :visible.syncdialogFormVisible width500pxel-form :modelform :rulesrules refformel-form-item label姓名 :label-widthformLabelWidth propnameel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 :label-widthformLabelWidth propsexel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label年龄 :label-widthformLabelWidth propageel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-itemlabel父亲姓名:label-widthformLabelWidthpropfatherel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-itemlabel母亲姓名:label-widthformLabelWidthpropmatherel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-itemlabel家庭住址:label-widthformLabelWidthpropaddressel-input v-modelform.address autocompleteoff/el-input/el-form-itemel-form-itemlabel入校时间:label-widthformLabelWidthproptimeel-date-pickerv-modelform.timeformatyyyy 年 MM 月 dd日value-formatyyyy-MM-ddalignrighttypedateplaceholder选择日期/el-date-picker/el-form-itemel-form-itemlabel联系方式:label-widthformLabelWidthpropphoneel-input v-modelform.phone autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clicksure(form)确定/el-buttonel-button clickdialogFormVisible false取 消/el-button/div/el-dialog/div
/template
script
import {info} from /api/api
import {getInfo} from /api/api
export default {data() {return {tableData: [],//控制是否弹窗的标志位dialogFormVisible: false,form: {name: ,sex: 1,age: ,father: ,mather: ,address: ,time: ,phone: },rules: {name:[{required:true,message:请输入姓名}],sex:[{required:true,message:请输入性别}],age:[{required:true,message:请输入年龄}],address:[{required:true,message:请输入地址}],time:[{required:true,message:请输入入学时间}],phone:[{required:true,message:请输入联系方式}],},formLabelWidth:80px};},methods: {edit() {},del() {},addStudent() {this.dialogFormVisible true;},sure(form){this.$refs[form].validate(valid{if(valid){info(this.form).then(res{if(res.data.code200){//新增成功后关闭窗口this.dialogFormVisiblefalse}})}})},getData(){getInfo().then(res{console.log(res)if(res.data.code200){this.tableDatares.data.data}})}},created(){this.getData()}
};
/scriptstyle langless
.infoList {.demo-form-inline,.el-form-item {text-align: left;}.el-pagination {text-align: left;margin-top: 20px;}
}
/style
