班級(jí)管理篇
（可將學(xué)校、學(xué)院與班級(jí)關(guān)聯(lián)起來）
一、從后端（projectName）添加班級(jí)模塊
1、在models目錄下添加classs.js：
projectName/db/models/classs.js：
const mongoose=require('mongoose')
const Schema=mongoose.Schema
const feld={
????name:String,
????//人物標(biāo)簽
????major:String,
????renshu:Number,
????school:{type:Schema.Types.ObjectId,ref:'School'},
????academy:{type:Schema.Types.ObjectId,ref:'Academy'}
}
//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:
let personSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})
module.exports=mongoose.model('Classs',personSchema)
2、在routes目錄下添加classs.js：
projectName/routes/classs.js：
const router=require('koa-router')()
let Model=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)
????let model=newModel(ctx.request.body);
????model=awaitmodel.save();
????console.log('user',model)
????ctx.body=model
})
router.post('/find',async function(ctx,next){
let models=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中加上classs模塊的路由：
添加部分為：
projectName/app.js：
const Koa=require('koa')
const app=newKoa()constviews=require('koa-views')
const json=require('koa-json')
const onerror=require('koa-onerror')
const bodyparser=require('koa-bodyparser')
const logger=require('koa-logger')
const mongoose=require('mongoose')
const dbconfig=require('./db/config')
mongoose.connect(dbconfig.dbs,{useNewUrlParser:true,useUnifiedTopology:true})
constdb=mongoose.connection
db.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()-startconsole.log(`${ctx.method} ${ctx.url} - ${ms}ms`)})
// routes
const index=require('./routes/index')
app.use(index.routes(),index.allowedMethods())
const users=require('./routes/users')
app.use(users.routes(),users.allowedMethods())
const school=require('./routes/school')
app.use(school.routes(),school.allowedMethods())
const academy=require('./routes/academy')
app.use(academy.routes(),academy.allowedMethods())
const classs=require('./routes/classs')
app.use(classs.routes(),classs.allowedMethods())
// error-handling
app.on('error',(err,ctx)=>{console.error('server error',err,ctx)});
module.exports=app
二、從前端（vue-admin-template）添加班級(jí)模塊
1、在src/views目錄下添加classs目錄（模塊），如圖所示：
①在classs目錄下添加editor.vue：
vue-admin-template/src/views/classs/editor.vue：
<template>
????<divclass="dashboard-container">
????????<el-formref="form":model="form"label-width="80px">
????????????<el-form-itemlabel="所屬學(xué)校">
????????????????<el-selectv-model="form.school"placeholder="請(qǐng)選擇"@change="schoolChange">
????????????????????<el-option
????????????????????????????v-for="item in schools":key="item._id":label="item.name":value="item._id">
????????????????????</el-option>
????????????????</el-select>
????????????</el-form-item>
????????????<!--? ? ? 編輯框：學(xué)院選擇列表-->
????????????<el-form-itemlabel="所屬學(xué)院">
????????????????<el-selectv-model="form.academy"placeholder="請(qǐng)選擇">
????????????????????<el-option
????????????????????????v-for="item in academys":key="item._id":label="item.name":value="item._id">
????????????????????</el-option>
????????????????</el-select>
????????????????</el-form-item>
????????????????<el-form-itemlabel="班級(jí)名稱">
????????????????????<el-inputv-model="form.name">
????????????????</el-input>
????????????</el-form-item>
????????????<el-form-itemlabel="專業(yè)">
????????????????<el-inputv-model="form.level">
? ? ? ? ? ? ?</el-input>
????????</el-form-item>
????????<el-form-itemlabel="人數(shù)">
????????????<el-inputv-model="form.renshu">
????????</el-input>
? ? ? ?</el-form-item>
????????<el-form-item>
????????????<el-buttontype="primary"@click="onSubmit">立即創(chuàng)建</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:[],? ? ? ? //列表內(nèi)容? ? ? ? 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){? ? ? ? //顯示學(xué)院選擇欄目? ? ? ? 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)? ? ? ? ? }? ? ? ? })? ? ? }? ? ? //顯示學(xué)校選擇欄目? ? ? 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>
? ??????
效果圖：
②在classs目錄下添加index.vue：
vue-admin-template/src/views/classs/index.vue：
<template>
????<divclass="dashboard-container">
????????<el-table:data="users"style="width: 100%":row-class-name="tableRowClassName">
????????????<el-table-columnprop="name"label="班級(jí)名稱"width="180">
????????????</el-table-column>
????????????<el-table-columnprop="level"label="專業(yè)"width="180"></el-table-column>
????????????<el-table-columnprop="renshu"label="人數(shù)"></el-table-column>
????????????<!--? ? ? 列表添加項(xiàng)目
? ? ? -->
????????????<el-table-columnprop="school"label="學(xué)校名稱"width="180">
????????????????<templateslot-scope="scope">
????????????????????<spanclass=""v-if="scope.row.school">
????????????????????????<el-tag:type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學(xué)院' ? 'primary' : 'success'"disable-transitions>{{scope.row.school.name}}</el-tag></span></template></el-table-column>
????????????????<el-table-columnprop="academy"label="學(xué)院名稱"width="180">
????????????????????<templateslot-scope="scope">
????????????????????????<spanclass=""v-if="scope.row.academy">
????????????????????????????<el-tag:type="scope.row.academy.name === '軟件學(xué)院' ? '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>
效果圖：
2、在router下的index.js中添加classs模塊的路由：
添加部分：
vue-admin-template/src/router/index.js：
importVuefrom'vue'importRouterfrom'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
*/exportconstconstantRoutes=[{path:'/login',component:()=>import('@/views/login/index'),hidden:true},{path:'/school',component:Layout,meta:{title:'學(xué)校管理',icon:'example'},redirect:'school',children:[{path:'school',name:'school',component:()=>import('@/views/school'),meta:{title:'學(xué)校管理',icon:'school'}},{path:'editor',name:'editor',component:()=>import('@/views/school/editor'),meta:{title:'添加學(xué)校',icon:'school'}}]},{path:'/academy',component:Layout,meta:{title:'學(xué)院管理',icon:'example'},redirect:'academy',children:[{path:'academy',name:'academy',component:()=>import('@/views/academy'),meta:{title:'學(xué)院管理',icon:'academy'}},{path:'editor',name:'editor',component:()=>import('@/views/academy/editor'),meta:{title:'添加學(xué)院',icon:'academy'}}]},{path:'/classs',component:Layout,meta:{title:'班級(jí)管理',icon:'example'},redirect:'classs',children:[{path:'classs',name:'classs',component:()=>import('@/views/classs'),meta:{title:'班級(jí)管理',icon:'classs'}},{path:'editor',name:'editor',component:()=>import('@/views/classs/editor'),meta:{title:'添加班級(jí)',icon:'classs'}}]},{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}]constcreateRouter=()=>newRouter({// mode: 'history', // require service supportscrollBehavior:()=>({y:0}),routes:constantRoutes})constrouter=createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465exportfunctionresetRouter(){constnewRouter=createRouter()router.matcher=newRouter.matcher// reset router}exportdefaultrouter
這樣班級(jí)管理模塊就構(gòu)建好了，最終的效果圖：
