一、从后端（projectName）添加学院模块
1、在models目录下添加academy.js：
projectName/db/models/academy.js：
const mongoose=require('mongoose')
const Schema=mongoose.Schema
const feld={
name:String,
//人物标签
major:String,
renshu:Number,
school:{type:Schema.Types.ObjectId,ref:'School'}
}
//自动添加更新时间创建时间:
let schema=newSchema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})
module.exports=mongoose.model('Academy',schema)
2、在routes目录下添加academy.js：
projectName/routes/academy.js：
const router=require('koa-router')()
let Model=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)
let model=awaitModel.find(ctx.request.body)
console.log(model)
ctx.body=model
})
router.post('/update',asyncfunction(ctx,next){
console.log(ctx.request.body)
let pbj = await Model.update({_id:ctx.request.body._id},ctx.request.body);
ctx.body=pbj
})
router.post('/delete',asyncfunction(ctx,next){
console.log(ctx.request.body)
await Model.remove({_id:ctx.request.body._id});
ctx.body='shibai '
})
module.exports=router
3、在app.js中加上academy模块的路由：
添加部分为：
projectName/app.js：
constKoa=require('koa')
constapp=newKoa()
constviews=require('koa-views')
constjson=require('koa-json')
constonerror=require('koa-onerror')
constbodyparser=require('koa-bodyparser')
constlogger=require('koa-logger')
constmongoose=require('mongoose')
constdbconfig=require('./db/config')
mongoose.connect(dbconfig.dbs,{useNewUrlParser:true,useUnifiedTopology:true})constdb=mongoose.connectiondb.on('error',console.error.bind(console,'connection error:'));db.once('open',function(){console.log('mongoose 连接成功')});
// error handler
onerror(app)
// middlewares
app.use(bodyparser({enableTypes:['json','form','text']}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname+'/public'))
app.use(views(__dirname+'/views',{extension:'pug'}))
// logger
app.use(async(ctx,next)=>{
conststart=newDate()
awaitnext()
constms=newDate()-start
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes
constindex=require('./routes/index')
app.use(index.routes(),index.allowedMethods())
constusers=require('./routes/users')
app.use(users.routes(),users.allowedMethods())
constschool=require('./routes/school')
app.use(school.routes(),school.allowedMethods())
constacademy=require('./routes/academy')
app.use(academy.routes(),academy.allowedMethods())
// error-handling
app.on('error',(err,ctx)=>{console.error('server error',err,ctx)});
module.exports=app
二、从前端（vue-admin-template）添加学院模块
1、在src/views目录下添加academy目录（模块），如图所示：
前端布局的academy模块
①在academy目录下添加editor.vue：
vue-admin-template/src/views/academy/editor.vue：
<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-option
v-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>
效果图：
②在academy目录下添加index.vue：
vue-admin-template/src/views/academy/index.vue：
<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-button
size="mini"@click="handleEdit(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="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>
效果图：
2、在router下的index.js中添加academy模块的路由：
添加部分：
vue-admin-template/src/router/index.js：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
importLayoutfrom'@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*//**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes=[
{
path:'/login',
component:()=>import('@/views/login/index'),
hidden:true},
{path:'/school',component:Layout,meta:{title:'学校管理',icon:'example'},redirect:'school',children:[
{path:'school',name:'school',component:()=>import('@/views/school'),meta:{title:'学校管理',icon:'school'}},{
path:'editor',name:'editor',component:()=>import('@/views/school/editor'),meta:{title:'添加学校',icon:'school'}}]},{
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'}}]},{
path:'/404',component:()=>import('@/views/404'),hidden:true},{path:'/',component:Layout,redirect:'/dashboard',children:[{
path:'dashboard',name:'Dashboard',component:()=>import('@/views/dashboard/index'),meta:{title:'Dashboard',icon:'dashboard'}}]},
// 404 page must be placed at the end !!!
{path:'*',redirect:'/404',hidden:true}]
const createRouter=()=>newRouter({
// mode: 'history', // require service support
scrollBehavior:()=>({y:0}),
routes:constantRoutes
})
constrouter=createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
exportfunctionresetRouter(){
const newRouter=createRouter()
router.matcher=newRouter.matcher // reset router
}
export default router
这样学院管理模块就构建好了，最终的效果图：
