实训四

班级管理篇

(可将学校、学院与班级关联起来)

一、从后端(projectName)添加班级模块

1、在models目录下添加classs.js:

projectName/db/models/classs.js:

const mongoose=require('mongoose')

const Schema=mongoose.Schema

const feld={

    name:String,

    //人物标签

    major:String,

    renshu:Number,

    school:{type:Schema.Types.ObjectId,ref:'School'},

    academy:{type:Schema.Types.ObjectId,ref:'Academy'}

}

//自动添加更新时间创建时间:

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模块的路由:

添加部分为:

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)添加班级模块

1、在src/views目录下添加classs目录(模块),如图所示:

前端布局的classs模块


①在classs目录下添加editor.vue:

vue-admin-template/src/views/classs/editor.vue:

    .dashboard {    &-container {      margin: 30px;    }    &-text {      font-size: 30px;      line-height: 46px;    }  }

        

效果图:

editor.vue的效果图

②在classs目录下添加index.vue:

vue-admin-template/src/views/classs/index.vue:

                

                    

                        

                            {{scope.row.academy.name}}

             

                    编辑

                    删除

                        

    .dashboard {    &-container {      margin: 30px;    }    &-text {      font-size: 30px;      line-height: 46px;    }  }

效果图:

index.vue的效果图


2、在router下的index.js中添加classs模块的路由:

添加部分:

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 (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:'学校管理',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:'/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'}}]},{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

这样班级管理模块就构建好了,最终的效果图:

班级管理模块

你可能感兴趣的:(实训四)