一、后臺三步驟：

1巩步、打開projectName文件，在db/models目錄下創(chuàng)建academy.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' }
}
//自動添加更新時間創(chuàng)建時間:
let schema = new Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Academy',schema)

2竟闪、找到projectName下的routes目錄，創(chuàng)建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', async function (ctx, next) {
    console.log(ctx.request.body)
    let model = new Model(ctx.request.body);
    model = await model.save();
    console.log('user',model)
    ctx.body = model
})

router.post('/find', async function (ctx, next) {
    let models = await Model.
    find({}).populate('school')
    ctx.body = models
})

router.post('/get', async function (ctx, next) {
    // let users = await User.
    // find({})
    console.log(ctx.request.body)
    let model = await Model.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.打開projectName/app.js在其中中掛載路由：

const academy = require('./routes/academy')
app.use(academy.routes(), academy.allowedMethods())

二术徊、前臺三步驟：

打開vue-admin-template-master文件鲸湃，在src/views目錄下創(chuàng)建一個academy模塊：并在academy目錄下創(chuàng)建vue文件子寓。

1.editor.vue為編輯文件笋除，用于創(chuàng)建學(xué)院記錄垃它；

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="學(xué)院名稱">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="專業(yè)">
        <el-input v-model="form.major"></el-input>
      </el-form-item>
      <el-form-item label="人數(shù)">
        <el-input v-model="form.renshu"></el-input>
      </el-form-item>

      <el-form-item label="所屬學(xué)校">
        <el-select v-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-button type="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: '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>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>

2.index.vue為目錄文件国拇，用于顯示結(jié)果；

  <template>
  <div class="dashboard-container">
    <el-table
      :data="users"
      style="width: 100%"
      :row-class-name="tableRowClassName">

      <el-table-column
        prop="_id"
        label="學(xué)院_id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="學(xué)院名稱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="major"
        label="專業(yè)"
        width="180">
      </el-table-column>
      <el-table-column
        prop="renshu"
        label="人數(shù)">
      </el-table-column>

      <el-table-column
        prop="school"
        label="學(xué)校名稱"
        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}}</el-tag>
          </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: '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>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>     

3.在vue-admin-template\src\router\index.js中添加路由：

{
    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' }
      }]
  },

結(jié)果界面：

11.png

注意做完一步要觀察數(shù)據(jù)庫連接是否斷開

441.png