学生管理系统

路由嵌套

一些网页的UI由多层嵌套的组件组成,通过vue router,可以使用嵌套路由组件来完成

{
path: '/main',
component: Main, 
children:[
{
path:"/admin",
component:Admin
}
]
}

在main的下面创建子路由,创建在children里,可以将子路由的界面嵌套在main界面中

管理系统功能分析

学生管理:管理员登陆后对学生信息进行维护(增删改查)

学生信息:学号,姓名,性别,生日,专业,电话,住址

专业信息:专业名称

数据库设计

学生信息表 student:

id,num,name,gender,birthday,majorid,phone,address,oper_time

专业信息表 major:

id,name,adminid,oper_time

步骤

进入学生管理系统

进入list.vue动态的显示学生的信息

页面代码

<el-button type="primary" @click="openAddDialog()">新增</el-button>
				<el-table :data="studentList" border  style="width: 100%">
					<el-table-column type="index" width="50" label="序号"></el-table-column>
					<el-table-column prop="num" label="学号" width="180"></el-table-column>
					<el-table-column prop="name" label="姓名" width="180"></el-table-column>
					<el-table-column prop="gender" label="性别" width="50"></el-table-column>
					<el-table-column prop="phone" align="center" label="手机"></el-table-column>
					<el-table-column prop="mname" label="专业"></el-table-column>
					<el-table-column prop="account" label="操作人" width="100"></el-table-column>
					<el-table-column prop="operTime" align="center" label="操作时间" sortable=""></el-table-column>
					<el-table-column label="操作" align="center">
					      <template slot-scope="scope">
					        <el-button size="mini" @click="updateStudent(scope.row.id)">编辑</el-button>
					        <el-button
					          size="mini" type="danger" @click="deleteStudent(scope.row.id)">删除</el-button>
					      </template>
					    </el-table-column>
						</el-table>
						
				<Add ref="add"></Add>
				<Update ref="update"></Update>

打开组件后,根据需求像后端发送请求,查询学生列表的数据

不同需求的代码

// 导入新增组件
	import Add from'./Add.vue'
	import Update from'./Update.vue'
	export default {
			components:{
				Add,
				Update
			},
			data() {
				return {
					studentList: [],
					dialogFormVisible:false
				}
			},
			methods: {
//修改学生信息
				updateStudent(id){
					this.$refs.update.getStudentByid(id);
					this.$refs.update.dialogFormVisible=true
				},
//新增学生
				openAddDialog(){
					this.$refs.add.dialogFormVisible=true
				},
//删除学生
				deleteStudent(id){
					this.$confirm('您确定要删除吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$http.get("back/student?mark=delete&id="+id).then((resp) => {
							if (resp.data.code == 200) {
								this.$message({
								         message: resp.data.message,
								         type: 'success'});
										 this.$router.go();
							}
						})
					})
				}
	         
			},
			mounted() {
				this.$http.get("back/student?mark=list").then((resp) => {
					if (resp.data.code == 200) {
						this.studentList = resp.data.data; 
					}
				})
			}
		}

java后端servlet接收到请求,将接收到的数据并传输到数据库,对学生信息进行修改,新增或删除

servlet完成请求后将数据返回到list.vue页面上,完成使用人员的需求