实训（二）
打开projectName文件，在models目录下创建school.js文件
const mongoose = require('mongoose')
const feld={
name: String,
//人物标签
where:String,
leixing: String
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('School',personSchema)
projectName下的routes目录创建school.js，结果如下：
const router = require('koa-router')()
//建立模块，require(“../db/models/文件名”)
let Model = require("../db/models/school");
router.prefix('/school')
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({})
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文件
// logger
app.use(async (ctx, next) => {
const start = new Date()
await next()
const ms = new Date() - start
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
const school = require('./routes/school')
app.use(school.routes(), school.allowedMethods())
打开vue-admin-template-master文件，在src/views目录下创建一个school模块
创建school/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.where"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-input v-model="form.leixing"></el-input>
</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: '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]
}
})
}
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
创建school/idex.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="where"
label="位置"
width="180">
</el-table-column>
<el-table-column
prop="leixing"
label="类型">
</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: '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>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
在vue-element-admin中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'}}]},
