目标：创建班级管理模块（班级和学院、学校关联起来）
一、后台三步骤：
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'}
????? }]
? },
