目標(biāo)：學(xué)校管理

image.png

一、后臺三步驟：

1焰轻、打開projectName文件，在models目錄下創(chuàng)建school.js文件，接著文件操作：

constmongoose=require('mongoose')constfeld={name:String,//人物標(biāo)簽where:String,leixing:String}//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('School',personSchema)

2礼仗、在routes目錄下添加school.js：

projectName/routes/school.js：

constrouter=require('koa-router')()//建立模塊，require(“../db/models/文件名”)letModel=require("../db/models/school");router.prefix('/school')router.get('/',function(ctx,next){ctx.body='this is a users response!'})//數(shù)據(jù)庫增刪改查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({})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中加上school模塊的路由：

添加部分為：

image.png

projectName/app.js：

constKoa=require('koa')constapp=newKoa()constviews=require('koa-views')constjson=require('koa-json')constonerror=require('koa-onerror')constbodyparser=require('koa-bodyparser')constlogger=require('koa-logger')constmongoose=require('mongoose')constdbconfig=require('./db/config')mongoose.connect(dbconfig.dbs,{useNewUrlParser:true,useUnifiedTopology:true})constdb=mongoose.connectiondb.on('error',console.error.bind(console,'connection error:'));db.once('open',function(){console.log('mongoose 連接成功')});// error handleronerror(app)// middlewaresapp.use(bodyparser({enableTypes:['json','form','text']}))app.use(json())app.use(logger())app.use(require('koa-static')(__dirname+'/public'))app.use(views(__dirname+'/views',{extension:'pug'}))// loggerapp.use(async(ctx,next)=>{conststart=newDate()awaitnext()constms=newDate()-startconsole.log(`${ctx.method} ${ctx.url} - ${ms}ms`)})constindex=require('./routes/index')app.use(index.routes(),index.allowedMethods())constusers=require('./routes/users')app.use(users.routes(),users.allowedMethods())constschool=require('./routes/school')app.use(school.routes(),school.allowedMethods())// error-handling// routesapp.on('error',(err,ctx)=>{console.error('server error',err,ctx)});module.exports=app

二元践、從前端（vue-admin-template）添加學(xué)校模塊

1、在src/views目錄下添加school目錄（模塊）童谒，如圖所示：

image.png

并在school目錄下創(chuàng)建vue文件单旁。

1.editor.vue為編輯文件，用于創(chuàng)建學(xué)校記錄惠啄；

2.index.vue為目錄文件慎恒，用于顯示結(jié)果任内；

<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><!--? ? ? <el-table-column--><!--? ? ? ? prop="_id"--><!--? ? ? ? label="學(xué)校_id"--><!--? ? ? ? width="180">--><!--? ? ? </el-table-column>--><el-table-columnprop="name"label="學(xué)校名稱"width="180"></el-table-column><el-table-columnprop="where"label="位置"width="180"></el-table-column><el-table-columnprop="leixing"label="類型"></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: 'school',? ? computed: {? ? ? ...mapGetters([? ? ? ? 'name'? ? ? ])? ? },? ? data() {? ? ? return {? ? ? ? apiModel:'school',? ? ? ? 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.在src里面的router/index.js中添加路由：

{path:'/school',component:Layout,meta:{title:'學(xué)校管理',icon:'example'},redirect:'school',children:[{path:'school',name:'school',component:()=>import('@/views/school'),meta:{title:'學(xué)校管理',icon:'school'}},{path:'editor',name:'editor',component:()=>import('@/views/school/editor'),meta:{title:'添加學(xué)校',icon:'school'}}]},