目标：创建学院管理模块（学院和学校关联起来）
一、后台三步骤：
1、打开projectName文件，在models目录下创建academy.js文件，接着文件操作：
constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={name:String,//人物标签major:String,renshu:Number,school:{type:Schema.Types.ObjectId,ref:'School'}}//自动添加更新时间创建时间:letschema=newSchema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Academy',schema)
2、找到projectName下的routes目录，创建academy.js文件：
constrouter=require('koa-router')()letModel=require("../db/models/academy");router.prefix('/academy')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('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中挂载路由：
constacademy=require('./routes/academy')app.use(academy.routes(),academy.allowedMethods())
二、前台三步骤：
打开vue-admin-template-master文件，在src/views目录下创建一个academy模块：
academy.png
并在academy目录下创建vue文件。
1.editor.vue为编辑文件，用于创建学院记录；
添加学院.png
<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="学院名称"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="专业"><el-inputv-model="form.major"></el-input></el-form-item><el-form-itemlabel="人数"><el-inputv-model="form.renshu"></el-input></el-form-item><el-form-itemlabel="所属学校"><el-selectv-model="form.school"placeholder="请选择"><el-optionv-for="item in options":key="item._id":label="item.name":value="item._id"></el-option></el-select></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: 'academy', computed: { ...mapGetters([ 'name' ]) }, data(){ return{ options: [ ], apiModel:'academy', form:{} } }, methods:{ onSubmit(){ console.log('222:', 222) 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={} }) } } }, 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.$http.post('/api/school/find').then(res => { if(res&&res.length>0){ this.options = 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="_id"label="学院_id"width="180"></el-table-column><el-table-columnprop="name"label="学院名称"width="180"></el-table-column><el-table-columnprop="major"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-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: 'academy', computed: { ...mapGetters([ 'name' ]) }, data() { return { apiModel:'academy', 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:'/academy',component:Layout,meta:{title:'学院管理',icon:'example'},redirect:'academy',children:[{path:'academy',name:'academy',component:()=>import('@/views/academy'),meta:{title:'学院管理',icon:'academy'}},{path:'editor',name:'editor',component:()=>import('@/views/academy/editor'),meta:{title:'添加学院',icon:'academy'}}]},
作者：去年的牛肉
链接：//www.greatytc.com/p/64f711c68fef
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
