目标：创建班级管理模块（班级和学院、学校关联起来）

一、后台三步骤：

1、打开projectName文件，在models目录下创建classs.js文件，接着文件操作：

constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={name:String,//人物标签level:String,renshu:Number,school:{type:Schema.Types.ObjectId,ref:'School'},academy:{type:Schema.Types.ObjectId,ref:'Academy'}}//自动添加更新时间创建时间:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Classs',personSchema)

2、找到projectName下的routes目录，创建classs.js文件：

constrouter=require('koa-router')()letModel=require("../db/models/classs");router.prefix('/classs')router.get('/',function(ctx,next){ctx.body='this is a users response!'})router.post('/add',asyncfunction(ctx,next){console.log(ctx.request.body)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=awaitModel.find({}).populate('academy').populate('school')ctx.body=models})router.post('/get',asyncfunction(ctx,next){// let users = await User.// find({})console.log(ctx.request.body)letmodel=awaitModel.find(ctx.request.body)console.log(model)ctx.body=model})router.post('/update',asyncfunction(ctx,next){console.log(ctx.request.body)letpbj=awaitModel.update({_id:ctx.request.body._id},ctx.request.body);ctx.body=pbj})router.post('/delete',asyncfunction(ctx,next){console.log(ctx.request.body)awaitModel.remove({_id:ctx.request.body._id});ctx.body='shibai '})module.exports=router

3.在app.js中挂载路由：

constclasss=require('./routes/classs')app.use(classs.routes(),classs.allowedMethods())

二、前台三步骤：

打开vue-admin-template-master文件，在src/views目录下创建一个classs模块，并在academy目录下创建vue文件。

1.editor.vue为编辑文件，用于创建班级记录；

班级添加.png

<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="所属学校"><el-selectv-model="form.school"placeholder="请选择"@change="schoolChange"><el-optionv-for="item in schools":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><!--      编辑框：学院选择列表--><el-form-itemlabel="所属学院"><el-selectv-model="form.academy"placeholder="请选择"><el-optionv-for="item in academys":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="班级名称"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="专业"><el-inputv-model="form.level"></el-input></el-form-item><el-form-itemlabel="人数"><el-inputv-model="form.renshu"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></div></template><script>import { mapGetters } from 'vuex'  export default {    name: 'classs',    computed: {      ...mapGetters([        'name'      ])    },    data(){      return{        schools:[],        academys:[],        //列表内容        options: [        ],        apiModel:'classs',        form:{}      }    },    methods:{      onSubmit(){        if(this.form._id){          this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {            console.log('bar:', res)            this.$router.push({path:this.apiModel})            this.form={}          })        }else        {          this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {            console.log('bar:', res)            this.$router.push({path:this.apiModel})            this.form={}          })        }      },      schoolChange(val1){        //显示学院选择栏目        this.$http.post('/api/academy/get',{school:val1}).then(res => {          if(res&&res.length>0){            this.academys = res            console.log('res:', res)          }        })      }    },    mounted() {      if(this.$route.query._id){        this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {          if(res&&res.length>0){            this.form = res[0]            this.schoolChange(this.form.school)          }        })      }      //显示学校选择栏目      this.$http.post('/api/school/find').then(res => {        if(res&&res.length>0){          this.schools = res          console.log('res:', res)        }      })    }  }</script><stylelang="scss"scoped>.dashboard {    &-container {      margin: 30px;    }    &-text {      font-size: 30px;      line-height: 46px;    }  }</style>

2.index.vue为目录文件，用于显示结果；

班级管理.png

<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="name"label="班级名称"width="180"></el-table-column><el-table-columnprop="level"label="专业"width="180"></el-table-column><el-table-columnprop="renshu"label="人数"></el-table-column><!--      列表添加项目

--><el-table-columnprop="school"label="学校名称"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.school"><el-tag:type="scope.row.school.name === '深圳信息职业技术学院' ? 'primary' : 'success'"disable-transitions>{{scope.row.school.name}}</el-tag></span></template></el-table-column><el-table-columnprop="academy"label="学院名称"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.academy"><el-tag:type="scope.row.academy.name === '软件学院' ? 'primary' : 'success'"disable-transitions>{{scope.row.academy.name}}</el-tag></span></template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></template><script>import { mapGetters } from 'vuex'  export default {    name: 'classs',    computed: {      ...mapGetters([        'name'      ])    },    data() {      return {        apiModel:'classs',        users: {}      }    },    methods: {      onSubmit() {        console.log(123434)      },      handleEdit(index, item) {        this.$router.push({ path: '/'+this.apiModel+'/editor', query: {_id:item._id} })      },      handleDelete(index, item) {        this.$http.post('/api/'+this.apiModel+'/delete', item).then(res => {          console.log('res:', res)          this.findUser()        })      },      findUser(){        this.$http.post('/api/'+this.apiModel+'/find', this.user).then(res => {          console.log('res:', res)          this.users = res        })      }    },    mounted() {      this.findUser()    }  }</script><stylelang="scss"scoped>.dashboard {    &-container {      margin: 30px;    }    &-text {      font-size: 30px;      line-height: 46px;    }  }</style>

3.在index.js中添加路由：

{path:'/classs',component:Layout,meta:{title:'班级管理',icon:'example'},redirect:'/classs',children:[{path:'classs',name:'classs',component:()=>import('@/views/classs'),meta:{title:'班级管理',icon:'classs'}},{path:'editor',name:'editor',component:()=>import('@/views/classs/editor'),meta:{title:'添加班级',icon:'classs'}}]},

目标：创建班级管理模块（学生和班级、学院、学校关联起来）

一、后台三步骤：

1、打开projectName文件，在models目录下创建student.js文件，接着文件操作：

constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={name:String,age:Number,student_number:Number,gender:String,school:{type:Schema.Types.ObjectId,ref:'School'},academy:{type:Schema.Types.ObjectId,ref:'Academy'},classs:{type:Schema.Types.ObjectId,ref:'Classs'}}//自动添加更新时间创建时间:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Student',personSchema)

2、找到projectName下的routes目录，创建student.js文件：

constrouter=require('koa-router')()letModel=require("../db/models/student");router.prefix('/student')router.get('/',function(ctx,next){ctx.body='this is a users response!'})router.post('/add',asyncfunction(ctx,next){console.log(ctx.request.body)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=awaitModel.find({}).populate('classs').populate('academy').populate('school')ctx.body=models})router.post('/get',asyncfunction(ctx,next){// let users = await User.// find({})console.log(ctx.request.body)letmodel=awaitModel.find(ctx.request.body)console.log(model)ctx.body=model})router.post('/update',asyncfunction(ctx,next){console.log(ctx.request.body)letpbj=awaitModel.update({_id:ctx.request.body._id},ctx.request.body);ctx.body=pbj})router.post('/delete',asyncfunction(ctx,next){console.log(ctx.request.body)awaitModel.remove({_id:ctx.request.body._id});ctx.body='shibai '})module.exports=router

3.在app.js中挂载路由：

constclasss=require('./routes/student')app.use(student.routes(),student.allowedMethods())

二、前台三步骤：

打开vue-admin-template-master文件，在src/views目录下创建一个student模块，并在student目录下创建vue文件。

1.editor.vue为编辑文件，用于创建班级记录；

添加学生.png

<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="所属学校"><el-selectv-model="form.school"placeholder="请选择"@change="schoolChange"><el-optionv-for="item in schools":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><!--      编辑框：学院选择列表--><el-form-itemlabel="所属学院"><el-selectv-model="form.academy"placeholder="请选择"><el-optionv-for="item in academys":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="所属班级"><el-selectv-model="form.classs"placeholder="请选择"><el-optionv-for="item in classs":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="用户名"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="年龄"><el-inputv-model="form.age"></el-input></el-form-item><el-form-itemlabel="学号"><el-inputv-model="form.student_number"></el-input></el-form-item><el-form-itemlabel="性别"><el-inputv-model="form.gender"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></div></template><script>import { mapGetters } from 'vuex'  export default {    name: 'student',    computed: {      ...mapGetters([        'name'      ])    },    data(){      return{        schools:[],        academys:[],        classs:[],        options: [        ],        apiModel:'student',        form:{}      }    },    methods:{      onSubmit(){        if(this.form._id){          this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {            console.log('bar:', res)            this.$router.push({path:this.apiModel})            this.form={}          })        }else        {          this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {            console.log('bar:', res)            this.$router.push({path:this.apiModel})            this.form={}          })        }      },      schoolChange(val1){        //显示学院选择栏目        this.$http.post('/api/academy/get',{school:val1}).then(res => {          if(res&&res.length>0){            this.academys = res            console.log('res:', res)          }        })      }    },    mounted() {      if(this.$route.query._id){        this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {          if(res&&res.length>0){            this.form = res[0]            this.schoolChange(this.form.school)          }        })      }      //显示学校选择栏目      this.$http.post('/api/school/find').then(res => {        if(res&&res.length>0){          this.schools = res          console.log('res:', res)        }      })      //显示班级栏目      this.$http.post('/api/classs/find').then(res => {        if(res&&res.length>0){          this.classs = res          console.log('res:', res)        }      })    }  }</script><stylelang="scss"scoped>.dashboard {    &-container {      margin: 30px;    }    &-text {      font-size: 30px;      line-height: 46px;    }  }</style>

2.index.vue为目录文件，用于显示结果；

<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="name"label="名字"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="student_number"label="学号"></el-table-column><el-table-columnprop="gender"label="性别"></el-table-column><!--      列表添加项目

--><el-table-columnprop="school"label="学校名称"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.school"><el-tag:type="scope.row.school.name === '深圳信息职业技术学院' ? 'primary' : 'success'"disable-transitions>{{scope.row.school.name}}</el-tag></span></template></el-table-column><el-table-columnprop="academy"label="学院名称"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.academy"><el-tag:type="scope.row.academy.name === '软件学院' ? 'primary' : 'success'"disable-transitions>{{scope.row.academy.name}}</el-tag></span></template></el-table-column><el-table-columnprop="classs"label="班级名称"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.classs"><el-tag:type="scope.row.classs.name === '18软工4-3' ? 'primary' : 'success'"disable-transitions>{{scope.row.classs.name}}</el-tag></span></template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></template><script>import { mapGetters } from 'vuex'  export default {    name: 'student',    computed: {      ...mapGetters([        'name'      ])    },    data() {      return {        apiModel:'student',        users: {}      }    },    methods: {      onSubmit() {        console.log(123434)      },      handleEdit(index, item) {        this.$router.push({ path: '/'+this.apiModel+'/editor', query: {_id:item._id} })      },      handleDelete(index, item) {        this.$http.post('/api/'+this.apiModel+'/delete', item).then(res => {          console.log('res:', res)          this.findUser()        })      },      findUser(){        this.$http.post('/api/'+this.apiModel+'/find', this.user).then(res => {          console.log('res:', res)          this.users = res        })      }    },    mounted() {      this.findUser()    }  }</script><stylelang="scss"scoped>.dashboard {    &-container {      margin: 30px;    }    &-text {      font-size: 30px;      line-height: 46px;    }  }</style>

3.在index.js中添加路由：

{path:'/student',component:Layout,meta:{title:'学生管理',icon:'example'},redirect:'/student',children:[{path:'student',name:'student',component:()=>import('@/views/student/index'),meta:{title:'学生管理',icon:'user'}},{path:'editor',name:'editor',component:()=>import('@/views/student/editor'),meta:{title:'添加学生',icon:'user'}}]},

目标：创建班级管理模块（老师和学院、学校关联起来）

一、后台三步骤：

1、打开projectName文件，在models目录下创建teacher.js文件，接着文件操作：

constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={name:String,age:String,//人物标签level:String,gender:String,school:{type:Schema.Types.ObjectId,ref:'School'},academy:{type:Schema.Types.ObjectId,ref:'Academy'}}//自动添加更新时间创建时间:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Teacher',personSchema)

2、找到projectName下的routes目录，创建teacher.js文件：

constrouter=require('koa-router')()letModel=require("../db/models/teacher");router.prefix('/teacher')router.get('/',function(ctx,next){ctx.body='this is a users response!'})router.post('/add',asyncfunction(ctx,next){console.log(ctx.request.body)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=awaitModel.find({}).populate('academy').populate('school')ctx.body=models})router.post('/get',asyncfunction(ctx,next){// let users = await User.// find({})console.log(ctx.request.body)letmodel=awaitModel.find(ctx.request.body)console.log(model)ctx.body=model})router.post('/update',asyncfunction(ctx,next){console.log(ctx.request.body)letpbj=awaitModel.update({_id:ctx.request.body._id},ctx.request.body);ctx.body=pbj})router.post('/delete',asyncfunction(ctx,next){console.log(ctx.request.body)awaitModel.remove({_id:ctx.request.body._id});ctx.body='shibai '})module.exports=router

3.在app.js中挂载路由：

constteacher=require('./routes/teacher')app.use(teacher.routes(),teacher.allowedMethods())

二、前台三步骤：

打开vue-admin-template-master文件，在src/views目录下创建一个teacher模块，并在teacher目录下创建vue文件。

1.editor.vue为编辑文件，用于创建班级记录；

添加老师.png

<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="所属学校"><el-selectv-model="form.school"placeholder="请选择"@change="schoolChange"><el-optionv-for="item in schools":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><!--      编辑框：学院选择列表--><el-form-itemlabel="所属学院"><el-selectv-model="form.academy"placeholder="请选择"><el-optionv-for="item in academys":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="用户名"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="年龄"><el-inputv-model="form.age"></el-input></el-form-item><el-form-itemlabel="性别"><el-inputv-model="form.gender"></el-input></el-form-item><el-form-itemlabel="级别"><el-inputv-model="form.level"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></div></template><script>import { mapGetters } from 'vuex'  export default {    name: 'teacher-editor',    computed: {      ...mapGetters([        'name'      ])    },    data(){      return{        schools:[],        academys:[],        options: [        ],        apiModel:'teacher',        form:{}      }    },    methods:{      onSubmit(){        if(this.form._id){          this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {            console.log('bar:', res)            this.$router.push({path:this.apiModel})            this.form={}          })        }else        {          this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {            console.log('bar:', res)            this.$router.push({path:this.apiModel})            this.form={}          })        }      },      schoolChange(val1){        //显示学院选择栏目        this.$http.post('/api/academy/get',{school:val1}).then(res => {          if(res&&res.length>0){            this.academys = res            console.log('res:', res)          }        })      }    },    mounted() {      if(this.$route.query._id){        this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {          if(res&&res.length>0){            this.form = res[0]            this.schoolChange(this.form.school)          }        })      }      //显示学校选择栏目      this.$http.post('/api/school/find').then(res => {        if(res&&res.length>0){          this.schools = res          console.log('res:', res)        }      })    }  }</script><stylelang="scss"scoped>.dashboard {    &-container {      margin: 30px;    }    &-text {      font-size: 30px;      line-height: 46px;    }  }</style>

2.index.vue为目录文件，用于显示结果；

<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="name"label="名字"width="180"></el-table-column><el-table-columnprop="age"label="年龄"width="180"></el-table-column><el-table-columnprop="level"label="等级"></el-table-column><el-table-columnprop="gender"label="性别"></el-table-column><!--      列表添加项目

--><el-table-columnprop="school"label="学校名称"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.school"><el-tag:type="scope.row.school.name === '深圳信息职业技术学院' ? 'primary' : 'success'"disable-transitions>{{scope.row.school.name}}</el-tag></span></template></el-table-column><el-table-columnprop="academy"label="学院名称"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.academy"><el-tag:type="scope.row.academy.name === '软件学院' ? 'primary' : 'success'"disable-transitions>{{scope.row.academy.name}}</el-tag></span></template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></template><script>import { mapGetters } from 'vuex'  export default {    name: 'teacher',    computed: {      ...mapGetters([        'name'      ])    },    data() {      return {        apiModel:'teacher',        users: {}      }    },    methods: {      onSubmit() {        console.log(123434)      },      handleEdit(index, item) {        this.$router.push({ path: '/'+this.apiModel+'/editor', query: {_id:item._id} })      },      handleDelete(index, item) {        this.$http.post('/api/'+this.apiModel+'/delete', item).then(res => {          console.log('res:', res)          this.findUser()        })      },      findUser(){        this.$http.post('/api/'+this.apiModel+'/find', this.user).then(res => {          console.log('res:', res)          this.users = res        })      }    },    mounted() {      this.findUser()    }  }</script><stylelang="scss"scoped>.dashboard {    &-container {      margin: 30px;    }    &-text {      font-size: 30px;      line-height: 46px;    }  }</style>

3.在index.js中添加路由：

{path:'/teacher',component:Layout,meta:{title:'老师管理',icon:'example'},redirect:'/teacher',children:[{path:'teacher',name:'teacher',component:()=>import('@/views/teacher'),meta:{title:'老师管理',icon:'user'}},{path:'editor',name:'editor',component:()=>import('@/views/teacher/editor'),meta:{title:'添加老师',icon:'user'}}]},