校园管理项目实训(六)_Seal_moon的博客-程序员信息网

技术标签: 校园管理项目实训  vue  vue.js  mongodb  javascript  

校园管理项目实训(六)

目标:创建班级管理模块(老师和学院、学校关联起来)

一、后台三步骤:

1、打开projectName文件,在models目录下创建teacher.js文件,接着文件操作:

const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    
    name: String,
    age: String,
    //人物标签
    level:String,
    gender:String,
    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('Teacher',personSchema)

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

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

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 teacher = require('./routes/teacher')
app.use(teacher.routes(), teacher.allowedMethods())

二、前台三步骤:

打开vue-admin-template-master文件,在src/views目录下创建一个teacher模块,并在teacher目录下创建vue文件。
在这里插入图片描述

1.editor.vue为编辑文件,用于创建班级记录:
在这里插入图片描述

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所属学校">
        <el-select v-model="form.school" placeholder="请选择" @change="schoolChange">
          <el-option
            v-for="item in schools"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--      编辑框:学院选择列表-->
      <el-form-item label="所属学院">
        <el-select v-model="form.academy" placeholder="请选择">
          <el-option
            v-for="item in academys"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="form.gender"></el-input>
      </el-form-item>
      <el-form-item label="级别">
        <el-input v-model="form.level"></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: 'teacher-editor',
    computed: {
    
      ...mapGetters([
        'name'
      ])
    },
    data(){
    
      return{
    
        schools:[],
        academys:[],
        options: [
        ],
        apiModel:'teacher',
        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)
        }
      })
    }
  }
</script>
<style lang="scss" scoped>
  .dashboard {
    
    &-container {
    
      margin: 30px;
    }
    &-text {
    
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>

2.index.vue为目录文件,用于显示结果:
在这里插入图片描述

<template>
  <div class="dashboard-container">
    <el-table
      :data="users"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="180">
      </el-table-column>
      <el-table-column
        prop="level"
        label="等级">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性别">
      </el-table-column>
      <!--      列表添加项目
-->
      <el-table-column
        prop="school"
        label="学校名称"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.school">
            <el-tag
              :type="scope.row.school.name === '深圳信息职业技术学院' ? 'primary' : 'success'"
              disable-transitions>{
    {
    scope.row.school.name}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="academy"
        label="学院名称"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.academy">
            <el-tag
              :type="scope.row.academy.name === '软件学院' ? 'primary' : 'success'"
              disable-transitions>{
    {
    scope.row.academy.name}}</el-tag>
          </span>

        </template>
      </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: 'teacher',
    computed: {
    
      ...mapGetters([
        'name'
      ])
    },
    data() {
    
      return {
    
        apiModel:'teacher',
        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>

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

  {
    
    path: '/teacher',
    component: Layout,
    meta: {
     title: '老师管理', icon: 'example' },
    redirect: '/teacher',
    children: [{
    
      path: 'teacher',
      name: 'teacher',
      component: () => import('@/views/teacher'),
      meta: {
     title: '老师管理', icon: 'user' }
    },
      {
    
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/teacher/editor'),
        meta: {
     title: '添加老师', icon: 'user' }
      }]
  },
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_50513646/article/details/111647661

智能推荐

TypeError: __init__() takes 1 positional argument but 6 positional arguments (and 1 keyword-only arg_权权qxj的博客-程序员信息网_typeerror: __init__() takes 1 positional argument

python中pymysql升级导致的报错本地代码正常运行,部署到服务器之后,开始报错,经过检查发现,唯一不同之处是pymysql的版本不同,本地是0.9.2,服务器上pymysql的版本是1.0.2源代码:db = pymysql.connect("127.0.0.1", "root", "XXXX", "datebase", 3306, autocommit=True)报错信息:TypeError: __init__() takes 1 positional argument but 6 p

SDN,RYU 控制器报错解决_Icoding_F2014的博客-程序员信息网_opendaylight还是ryu

前言在以ryu为控制器,加载simple_switch_13.py 模块运行的时候,mininet总是无法正常使用,而ryu一直提示 “unsupported version 0x1”. If possible, set the switch to use one of the versions [4]”, 这直接就导致了 mininet内部无法ping通解决方案检查openvSwitch以上报

数据结构与算法1:数组操作的时间复杂度_叶小叶丶的博客-程序员信息网_数组插入的时间复杂度

数组为何从0开始计数这几年学了VB、C、C++、C#、JAVA等编程语言,发现数组都是从零开始计数,从1开始不应该是人类的惯性思维吗?直到今天接触了数据结构所给出答案才知道。数组的概念:线性表连续的内存空间和相同类型的数据因为数组具有以上两个特性,计算机会给每个内存单元分配一个地址,通过地址来访问内存(数组)中的数据,当计算机随机访问某个数组元素时,会通过一个寻址公式来进行查找:...

给文件夹生成repodata,做成本地仓库_观鱼知命的博客-程序员信息网_repodata

给文件夹生成repodata,做成本地仓库createrepo 文件路径创建成功后可以看到指定路径下生成repodata文件,进入repodata文件目录可以看到xml等相关文件,即创建成功。然后即可用该文件进行挂载yum源。...

一个注解搞定接口防刷!还有谁不会?_程序员小乐的博客-程序员信息网

点击上方 &#34;编程技术圈&#34;关注,星标或置顶一起成长后台回复“大礼包”有惊喜礼包!每日英文Anywhere, it is a good in the past, recall...

windows下socket编程实现客户端和服务端互发消息__return_的博客-程序员信息网_winsocket senddata

WinSock在windows系统下有一个api专门提供socket编程,这个api即为WinSock,其中特别需要注意的是先需要调用WSAStartup函数初始化Windows Sockets API,在这之后需要调用WSACleanup函数释放掉Windows Sockets DLLsocket编程关于socket在客户端、服务端之间的通信可如图所示:其中socket()函数是创建套接字函数,其函数如下:socket(int af,int type,int protocol) 其中af代表地址

随便推点

QT三步打包发布单个可执行程序exe方法(解决cannot load library qt5core或者cannot load library qt5core问题)_wow_awsl_qwq的博客-程序员信息网

1在QT中release构建release构建后找到工程的build_realase文件夹,复制.exe文件到另外一个文件夹中2使用QT命令行先进入到刚才复制的exe文件所在的文件夹:比如 : cd /d e:\eee在Qt命令行中运行命令windeployqt unititled.exe3使用Enigma virtual box工具下载Enigma virtual box工具,官方链接:https://enigmaprotector.com/en/downloads.html安装后:

国外排行前十的Python开源项目,短时间打造无数超级“黑客”!_weixin_34183910的博客-程序员信息网

文章最后有彩蛋哦!导读:在过去的一个月,我们对近250个开源项目进行了排名,选出了前十。我们比较了解在此期间有新的发布或是重大发布的项目。Mybridge AI基于多种因素对项目进行排名,以衡量其在专业人员眼中的质量。开源项目对程序员大有裨益。希望你找到一个有意思的项目,让你有所启发。1. Delorean:时间旅行变得容易了[v 1.0][Github上点赞数:1335个]2. ...

微信小程序开发入门教程(一)_QStack的博客-程序员信息网_微信小程序开发 教程

背景作为一个程序猿需要不断的充实自己,不仅要追求知识的深度,也要追求知识的广度,我也一直在这条路上践行,主要学习会让我变得专注,我非常喜欢这样的感觉,学习微信小程序开发也是兴趣使然,希望拿微信小程序做一些小工具。微信平台提供了很多能力,也进行了很多的优化,相较于传统的移动开发需要兼容Android和iOS两大平台,开发周期较长,维护难度大,微信小程序一套代码能够运行于两大平台,而且微信小程序开发效率高,周期短,很多应用会在微信小程序上先试验新的业务和功能,成熟后为了追求更好的性能再原生化。话不多说,还是让

CNN+Transformer=SOTA!CNN丢掉的全局信息,Transformer来补_人工智能与算法学习的博客-程序员信息网

转自 新智元 来源:Microsoft编辑:LRS、小匀【新智元导读】微软在arxiv上发布新论文,把CNN带入Transformer后能够同时兼顾全局和局部的信息。在计算...

使用Android Studio遇到的一些常见问题总结_atXin##33的博客-程序员信息网

问题1:导入SDK中的Samples后,Messages中提示“Error:Cause: failed to find targetAndroid-19.0.1 Please install the missing platform from the Android SDK Manager.”原因:AS安装后,自带的Build-tools版本是19.0.3,而示例是在19.0.1下创建的。...

推荐文章

热门文章

相关标签