目标:学校管理
image.png
一、后台三步骤:
1、打开projectName文件,在models目录下创建school.js文件,接着文件操作:
constmongoose=require('mongoose')constfeld={name:String,//人物标签where:String,leixing:String}//自动添加更新时间创建时间: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!'})//数据库增删改查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)添加学校模块
1、在src/views目录下添加school目录(模块),如图所示:
image.png
并在school目录下创建vue文件。
1.editor.vue为编辑文件,用于创建学校记录;
2.index.vue为目录文件,用于显示结果;
<template><divclass="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-columnprop="name"label="学校名称"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:'学校管理',icon:'example'},redirect:'school',children:[{path:'school',name:'school',component:()=>import('@/views/school'),meta:{title:'学校管理',icon:'school'}},{path:'editor',name:'editor',component:()=>import('@/views/school/editor'),meta:{title:'添加学校',icon:'school'}}]},