VUE实训二

目标：学校管理

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为编辑文件，用于创建学校记录；

立即创建取消

import { mapGetters } from 'vuex' export default { name: 'school', computed: { ...mapGetters([ 'name' ]) }, data(){ return{ apiModel:'school', 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] } }) } } } .dashboard { &-container { margin: 30px; } &-text { font-size: 30px; line-height: 46px; } }

2.index.vue为目录文件，用于显示结果；

VUE实训二

你可能感兴趣的:(VUE实训二)