nodejs vue-element-admin (实训3、4)

nodejs vue-element-admin (实训3)

目标:创建学院管理模块(学院和学校关联起来)
一、后台三步骤:
1、打开projectName文件,在/db/models目录下创建academy.js文件,接着文件操作:/db/models/academy.js

const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    name: String,
    //人物标签
    major:String,
    renshu: Number,
    school : { type: Schema.Types.ObjectId, ref: 'School' }
}
//自动添加更新时间创建时间:
let schema = new Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Academy',schema)

2、找到projectName下的routes目录,创建academy.js文件:/routes/academy.js

const router = require('koa-router')()
let Model = require("../db/models/academy");
router.prefix('/academy')

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({}).populate('school')
    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

3.在根目录下/app.js中挂载路由:

const academy = require('./routes/academy')
app.use(academy.routes(), academy.allowedMethods())

二、前台三步骤:
打开vue-admin-template-master文件,在/src/views目录下创建一个academy模块:

并在academy目录下创建vue文件。

1./src/views/academy/editor.vue为编辑文件,用于创建学院记录;







2./src/views/academy/index.vue为目录文件,用于显示结果;

  



     

3.在/src/router/index.js中添加路由:

{
    path: '/academy',
    component: Layout,
    meta: { title: '学院管理', icon: 'example' },
    redirect: 'academy',
    children: [{
      path: 'academy',
      name: 'academy',
      component: () => import('@/views/academy'),
      meta: { title: '学院管理', icon: 'academy' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/academy/editor'),
        meta: { title: '添加学院', icon: 'academy' }
      }]
  },

nodejs vue-element-admin (实训4)

目标:创建班级管理模块(班级和学院、学校关联起来)
一、后台三步骤:
1、打开projectName文件,在/db/models目录下创建classs.js文件,接着文件操作:/db/models/classs.js

const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    name: String,
    //人物标签
    level:String,
    renshu: Number,
    school : { type: Schema.Types.ObjectId, ref: 'School' },
    academy : { type: Schema.Types.ObjectId, ref: 'Academy' }
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Classs',personSchema)

2、找到projectName下的routes目录,创建classs.js文件:/routes/classs.js

const router = require('koa-router')()
let Model = require("../db/models/classs");
router.prefix('/classs')

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({}).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 = 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

3.在根目录下/app.js中挂载路由:

const classs= require('./routes/classs')
app.use(classs.routes(), classs.allowedMethods())

二、前台三步骤:
打开vue-admin-template-master文件,在/src/views目录下创建一个classs模块,/src/views/classs/
并在classs目录下创建vue文件。

1./src/views/classs/editor.vue为编辑文件,用于创建班级记录;
editor.vue:








2./src/views/classs/index.vue为目录文件,用于显示结果;

 





3.在/router/index.js中添加路由:

{
    path: '/classs',
    component: Layout,
    meta: { title: '班级管理', icon: 'example' },
    redirect: '/classs',
    children: [{
      path: 'classs',
      name: 'classs',
      component: () => import('@/views/classs'),
      meta: { title: '班级管理', icon: 'classs' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/classs/editor'),
        meta: { title: '添加班级', icon: 'classs' }
      }]
  },

你可能感兴趣的:(nodejs vue-element-admin (实训3、4))