目标：创建学院管理模块
一、后台三步骤：
1、在db->models目录下创建academy.js文件，接着文件操作：
const mongoose = require('mongoose')const Schema= mongoose.Schemaconstfeld={
??? name: String,
??? //人物标签
??? major:String,
??? renshu: Number,
??? school : { type: Schema.Types.ObjectId, ref: 'School'}
}//自动添加更新时间创建时间:let schema = new Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})module.exports= mongoose.model('Academy',schema)
2、在db->routes目录，创建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 = 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('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 academy = require('./routes/academy')
app.use(academy.routes(), academy.allowedMethods())
二、前台三步骤：
打开vue-admin-template-master文件，在src/views目录下创建一个academy?？?，并在academy目录下创建vue文件。
1.editor.vue为编辑文件，用于创建学院记录；
<template>
? <div class="dashboard-container">
??? <el-form ref="form" :model="form" label-width="80px">
????? <el-form-item label="学院名称">
??????? <el-input v-model="form.name"></el-input>
????? </el-form-item>
????? <el-form-item label="专业">
??????? <el-input v-model="form.major"></el-input>
????? </el-form-item>
????? <el-form-item label="人数">
??????? <el-input v-model="form.renshu"></el-input>
????? </el-form-item>
????? <el-form-item label="所属学校">
??????? <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">立即创建</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)
??????? }
????? })
??? }
? }
<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="_id"
??????? label="学院_id"
??????? width="180">
????? </el-table-column>
????? <el-table-column
??????? prop="name"
??????? label="学院名称"
??????? width="180">
????? </el-table-column>
????? <el-table-column
??????? prop="major"
??????? 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 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()
??? }
? }
<style lang="scss" scoped>
? .dashboard {
??? &-container {
????? margin: 30px;
??? }
??? &-text {
????? font-size: 30px;
????? line-height: 46px;
??? }
? }????
3.在index.js中添加路由：
{
??? path: '/academy',
??? component: Layout,
??? meta: { title: '学院管理', icon: 'example'},
??? redirect: 'academy',
??? children: [{
????? path: 'academy',
????? name: 'academy',
????? component: () => import('@/views/academy'),
????? meta: { title: '学院管理', icon: 'academy'}
??? },
????? {
??????? path: 'editor',
??????? name: 'editor',
??????? component: () => import('@/views/academy/editor'),
??????? meta: { title: '添加学院', icon: 'academy'}
????? }]
? },
