目標：創(chuàng)建班級管理模塊（班級和學(xué)院、學(xué)校關(guān)聯(lián)起來）
一贫导、后臺三步驟：
1、打開projectName文件蟆盹，在models目錄下創(chuàng)建classs.js文件孩灯，接著文件操作：
constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={name:String,//人物標簽level:String,renshu:Number,school:{type:Schema.Types.ObjectId,ref:'School'},academy:{type:Schema.Types.ObjectId,ref:'Academy'}}//自動添加更新時間創(chuàng)建時間:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Classs',personSchema)
2、找到projectName下的routes目錄逾滥，創(chuàng)建classs.js文件：
constrouter=require('koa-router')()letModel=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)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=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中掛載路由：
constclasss=require('./routes/classs')app.use(classs.routes(),classs.allowedMethods())
二峰档、前臺三步驟：
打開vue-admin-template-master文件，在src/views目錄下創(chuàng)建一個classs模塊寨昙，并在academy目錄下創(chuàng)建vue文件讥巡。
1.editor.vue為編輯文件，用于創(chuàng)建班級記錄舔哪；
班級添加.png
<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="所屬學(xué)校"><el-selectv-model="form.school"placeholder="請選擇"@change="schoolChange"><el-optionv-for="item in schools":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><!--? ? ? 編輯框：學(xué)院選擇列表--><el-form-itemlabel="所屬學(xué)院"><el-selectv-model="form.academy"placeholder="請選擇"><el-optionv-for="item in academys":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="班級名稱"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="專業(yè)"><el-inputv-model="form.level"></el-input></el-form-item><el-form-itemlabel="人數(shù)"><el-inputv-model="form.renshu"></el-input></el-form-item><el-form-item><el-buttontype="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: 'classs',? ? computed: {? ? ? ...mapGetters([? ? ? ? 'name'? ? ? ])? ? },? ? data(){? ? ? return{? ? ? ? schools:[],? ? ? ? academys:[],? ? ? ? //列表內(nèi)容? ? ? ? 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){? ? ? ? //顯示學(xué)院選擇欄目? ? ? ? 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)? ? ? ? ? }? ? ? ? })? ? ? }? ? ? //顯示學(xué)校選擇欄目? ? ? this.$http.post('/api/school/find').then(res => {? ? ? ? if(res&&res.length>0){? ? ? ? ? this.schools = res? ? ? ? ? console.log('res:', res)? ? ? ? }? ? ? })? ? }? }</script><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
2.index.vue為目錄文件欢顷，用于顯示結(jié)果；
班級管理.png
<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="name"label="班級名稱"width="180"></el-table-column><el-table-columnprop="level"label="專業(yè)"width="180"></el-table-column><el-table-columnprop="renshu"label="人數(shù)"></el-table-column><!--? ? ? 列表添加項目
--><el-table-columnprop="school"label="學(xué)校名稱"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.school"><el-tag:type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學(xué)院' ? 'primary' : 'success'"disable-transitions>{{scope.row.school.name}}</el-tag></span></template></el-table-column><el-table-columnprop="academy"label="學(xué)院名稱"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.academy"><el-tag:type="scope.row.academy.name === '軟件學(xué)院' ? 'primary' : 'success'"disable-transitions>{{scope.row.academy.name}}</el-tag></span></template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
3.在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'}}]},
