實訓（實訓四）

projectName文件，在models目錄下創(chuàng)建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' } } //自動添加更新時間創(chuàng)建時間: let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}}) module.exports= mongoose.model('Classs',personSchema)

projectName下的routes目錄们镜，創(chuàng)建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目錄下創(chuàng)建一個classs模塊阳堕，并創(chuàng)建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="專業(yè)"

????????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?===?'深圳信息職業(yè)技術學院'???'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'?} ??????}] ??},