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

一、后台三步骤：

1、在db->models目录下创建classs.js文件，接着文件操作：

const mongoose = require('mongoose')const Schema= mongoose.Schemaconstfeld={

    name: String,

    //人物标签

    level:String,

    renshu: Number,

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

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

}//自动添加更新时间创建时间:let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})module.exports= mongoose.model('Classs',personSchema)

2、在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', async function(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', async function(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', async function(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', async function(ctx, next){

    console.log(ctx.request.body)

    await Model.remove({ _id: ctx.request.body._id });

    ctx.body ='shibai '

})module.exports = router

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

const classs= require('./routes/classs')

app.use(classs.routes(), classs.allowedMethods())

二、前台三步骤：

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

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

<template>

  <div class="dashboard-container">

    <el-form ref="form" :model="form" label-width="80px">

      <el-form-item label="所属学校">

        <el-select v-model="form.school" placeholder="请选择" @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>编辑框：学院选择列表-->-->

      <el-form-item label="所属学院">

        <el-select v-model="form.academy" placeholder="请选择">

          <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-item label="班级名称">

        <el-input v-model="form.name"></el-input>

      </el-form-item>

      <el-form-item label="专业">

        <el-input v-model="form.level"></el-input>

      </el-form-item>

      <el-form-item label="人数">

        <el-input v-model="form.renshu"></el-input>

      </el-form-item>

      <el-form-item>

        <el-button type="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)

        }

      })

    }

  }

<style lang="scss" scoped>

  .dashboard {

    &-container {

      margin: 30px;

    }

    &-text {

      font-size: 30px;

      line-height: 46px;

    }

  }

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

<template>

  <div class="dashboard-container">

    <el-table

      :data="users"

      style="width: 100%"

      :row-class-name="tableRowClassName">

      <el-table-column

        prop="name"

        label="班级名称"

        width="180">

      </el-table-column>

      <el-table-column

        prop="level"

        label="专业"

        width="180">

      </el-table-column>

      <el-table-column

        prop="renshu"

        label="人数">

      </el-table-column>列表添加项目-->

-->

      <el-table-column

        prop="school"

        label="学校名称"

        width="180">

        <template slot-scope="scope">

          <span class="" v-if="scope.row.school">

            <el-tag

              :type="scope.row.school.name === '深圳信息职业技术学院' ? 'primary' : 'success'"

              disable-transitions>{{scope.row.school.name}}

          </span>

        </template>

      </el-table-column>

      <el-table-column

        prop="academy"

        label="学院名称"

        width="180">

        <template slot-scope="scope">

          <span class="" v-if="scope.row.academy">

            <el-tag

              :type="scope.row.academy.name === '软件学院' ? 'primary' : 'success'"

              disable-transitions>{{scope.row.academy.name}}

          </span>

        </template>

      </el-table-column>

      <el-table-column label="操作">

        <template slot-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: '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()

    }

  }

<style lang="scss" scoped>

  .dashboard {

    &-container {

      margin: 30px;

    }

    &-text {

      font-size: 30px;

      line-height: 46px;

    }

  }

3.在router->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'}

      }]

  },