实训（实训四）

projectName文件，在models目录下创建classs.js文件

const mongoose = require('mongoose') const Schema= mongoose.Schema const feld={ 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)

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', 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('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 = 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

app.js中挂载路由

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

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

index.vue文件

  <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}}</el-tag>

          </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}}</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: '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>

<style lang="scss" scoped>

  .dashboard {

    &-container {

      margin: 30px;

    }

    &-text {

      font-size: 30px;

      line-height: 46px;

    }

  }

</style>

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' }       }]   },   {     path: '/student',     component: Layout,     meta: { title: '学生管理', icon: 'example' },     redirect: '/student',     children: [{       path: 'student',       name: 'student',       component: () => import('@/views/student/index'),       meta: { title: '学生管理', icon: 'user' }     },       {         path: 'editor',         name: 'editor',         component: () => import('@/views/student/editor'),         meta: { title: '添加学生', icon: 'user' }       }]   },