目标:创建学生管理模块(学生和班级、学院、学校关联起来)
一、后台三步骤:
1、在db->models目录下创建student.js文件,接着文件操作:
const mongoose = require('mongoose')const Schema = mongoose.Schemaconstfeld={
name: String,
age: Number,
student_number:Number,
gender:String,
school : { type: Schema.Types.ObjectId, ref: 'School'},
academy : { type: Schema.Types.ObjectId, ref: 'Academy'},
classs : { type: Schema.Types.ObjectId, ref: 'Classs'}
}//自动添加更新时间创建时间:let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})module.exports= mongoose.model('Student',personSchema)
2、在routes目录,创建student.js文件:
const router = require('koa-router')()let Model = require("../db/models/student");
router.prefix('/student')
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 = newModel(ctx.request.body);
model =awaitmodel.save();
console.log('user',model)
ctx.body = model
})
router.post('/find', async function(ctx, next){
let models = awaitModel.
find({}).populate('classs').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 = awaitModel.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
3.在app.js中挂载路由:
const classs= require('./routes/student')
app.use(student.routes(), student.allowedMethods())
二、前台三步骤:
打开vue-admin-template-master文件,在src/views目录下创建一个student模块,并在student目录下创建vue文件。
1.editor.vue为编辑文件,用于创建班级记录;
v-for="item in schools"
:key="item._id"
:label="item.name"
:value="item._id">
编辑框:学院选择列表-->-->
v-for="item in academys"
:key="item._id"
:label="item.name"
:value="item._id">
v-for="item in classs"
:key="item._id"
:label="item.name"
:value="item._id">
立即创建
取消
import { mapGetters } from 'vuex'
export default{
name: 'student',
computed: {
...mapGetters([
'name'
])
},
data(){
return{
schools:[],
academys:[],
classs:[],
options: [
],
apiModel:'student',
form:{}
}
},
methods:{
onSubmit(){
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={}
})
}
},
schoolChange(val1){
//显示学院选择栏目
this.$http.post('/api/academy/get',{school:val1}).then(res => {
if(res&&res.length>0){
this.academys = res
console.log('res:', res)
}
})
}
},
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]
this.schoolChange(this.form.school)
}
})
}
//显示学校选择栏目
this.$http.post('/api/school/find').then(res => {
if(res&&res.length>0){
this.schools = res
console.log('res:', res)
}
})
//显示班级栏目
this.$http.post('/api/classs/find').then(res => {
if(res&&res.length>0){
this.classs = res
console.log('res:', res)
}
})
}
}
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
2.index.vue为目录文件,用于显示结果;
:data="users"
style="width: 100%"
:row-class-name="tableRowClassName">
prop="name"
label="名字"
width="180">
prop="age"
label="年龄"
width="180">
prop="student_number"
label="学号">
prop="gender"
label="性别">
列表添加项目-->
-->
prop="school"
label="学校名称"
width="180">
:type="scope.row.school.name === '深圳信息职业技术学院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.school.name}}
prop="academy"
label="学院名称"
width="180">
:type="scope.row.academy.name === '软件学院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.academy.name}}
prop="classs"
label="班级名称"
width="180">
:type="scope.row.classs.name === '18软工4-3' ? 'primary' : 'success'"
disable-transitions>{{scope.row.classs.name}}
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
import { mapGetters } from 'vuex'
export default{
name: 'student',
computed: {
...mapGetters([
'name'
])
},
data() {
return{
apiModel:'student',
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()
}
}
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
3.在index.js中添加路由:
{
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'}
}]
},