目標(biāo)：創(chuàng)建教師管理模塊（老師和學(xué)院、學(xué)校關(guān)聯(lián)起來）
一、后臺三步驟：
1在db->models目錄下創(chuàng)建teacher.js文件，接著文件操作：
const mongoose = require('mongoose')const Schema= mongoose.Schemaconstfeld={
??? name: String,
??? age: String,
??? //人物標(biāo)簽
??? level:String,
??? gender:String,
??? school : { type: Schema.Types.ObjectId, ref: 'School'},
??? academy : { type: Schema.Types.ObjectId, ref: 'Academy'}
}//自動添加更新時間創(chuàng)建時間:let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})module.exports= mongoose.model('Teacher',personSchema)
2、找到routes目錄，創(chuàng)建teacher.js文件：
const router = require('koa-router')()let Model = require("../db/models/teacher");
router.prefix('/teacher')
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 teacher= require('./routes/teacher')
app.use(teacher.routes(), teacher.allowedMethods())
二、前臺三步驟：
打開vue-admin-template-master文件，在src/views目錄下創(chuàng)建一個teacher模塊，并在teacher目錄下創(chuàng)建vue文件。
1.editor.vue為編輯文件，用于創(chuàng)建班級記錄；
<template>
? <div class="dashboard-container">
??? <el-form ref="form" :model="form" label-width="80px">
????? <el-form-item label="所屬學(xué)校">
??????? <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>
????? 編輯框：學(xué)院選擇列表-->-->
????? <el-form-item label="所屬學(xué)院">
??????? <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.age"></el-input>
????? </el-form-item>
????? <el-form-item label="性別">
??????? <el-input v-model="form.gender"></el-input>
????? </el-form-item>
????? <el-form-item label="級別">
??????? <el-input v-model="form.level"></el-input>
????? </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: 'teacher-editor',
??? computed: {
????? ...mapGetters([
??????? 'name'
????? ])
??? },
??? data(){
????? return{
??????? schools:[],
??????? academys:[],
??????? options: [
??????? ],
??????? apiModel:'teacher',
??????? 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)
??????? }
????? })
??? }
? }
<style lang="scss" scoped>
? .dashboard {
??? &-container {
????? margin: 30px;
??? }
??? &-text {
????? font-size: 30px;
????? line-height: 46px;
??? }
? }
2.index.vue為目錄文件，用于顯示結(jié)果；
<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="age"
??????? label="年齡"
??????? width="180">
????? </el-table-column>
????? <el-table-column
??????? prop="level"
??????? label="等級">
????? </el-table-column>
????? <el-table-column
??????? prop="gender"
??????? label="性別">
????? </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 === '深圳信息職業(yè)技術(shù)學(xué)院' ? 'primary' : 'success'"
????????????? disable-transitions>{{scope.row.school.name}}
????????? </span>
??????? </template>
????? </el-table-column>
????? <el-table-column
??????? prop="academy"
??????? label="學(xué)院名稱"
??????? width="180">
??????? <template slot-scope="scope">
????????? <span class="" v-if="scope.row.academy">
??????????? <el-tag
????????????? :type="scope.row.academy.name === '軟件學(xué)院' ? '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: 'teacher',
??? computed: {
????? ...mapGetters([
??????? 'name'
????? ])
??? },
??? data() {
????? return{
??????? apiModel:'teacher',
??????? 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.在index.js中添加路由：
? {
??? path: '/teacher',
??? component: Layout,
??? meta: { title: '老師管理', icon: 'example'},
??? redirect: '/teacher',
??? children: [{
????? path: 'teacher',
????? name: 'teacher',
????? component: () => import('@/views/teacher/teacher'),
????? meta: { title: '老師管理', icon: 'user'}
??? },
????? {
??????? path: 'editor',
??????? name: 'editor',
??????? component: () => import('@/views/teacher/editor'),
??????? meta: { title: '添加老師', icon: 'user'}
????? }]
? },
