讲师管理表单实现

最新推荐文章于 2023-10-07 16:10:55 发布
最新推荐文章于 2023-10-07 16:10:55 发布
阅读量477 收藏 1
点赞数 1
分类专栏： 项目 项目前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35969228/article/details/106043204
版权
这篇博客详细介绍了讲师管理系统的添加讲师和修改讲师功能的实现过程。首先讲解了如何实现添加讲师功能，接着重点阐述了修改讲师的步骤，包括点击修改按钮后数据回显的实现，路由跳转中的隐藏路由设置，以及在表单页面中调用接口完成数据的显示。此外，还讨论了讲师修改功能的接口定义和方法实现，并提出了针对路由切换问题的解决方案，即使用Vue监听路由变化。
摘要由CSDN通过智能技术生成

一.添加讲师功能

 

 

二.修改讲师功能

1.点击修改按钮 进入表单页面，进行数据回显

根据讲师id查询数据显示

2.通过路由跳转，进入数据回显页面，在路由index中添加路由

①添加隐藏路由

隐藏路由     路由中添加router.index.js中添加

   {
        path: 'edit/:id',   
        name: 'EduTeacherEdit',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '编辑讲师', noCache: true },
        hidden: true
      }

edit/:id 相当于一个占位符，后面根讲师id

②路由跳转

通过id跳转

list.vue中的路径要和index.js中的地址对应，后面加一个讲师id

     <router-link :to="'/teacher/edit/'+scope.row.id">
          <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
     </router-link>

通过路由跳转到页面中

 

3.在表单页面实现数据回显

即点击修改的时页面有数据不是空白

①.在teacher.js定义根据id查询接口

 //根据id查询讲师
       getTeacherInfo(id){
            return request({
               url:`/eduservice/teacher/getTeacher/${id}`,
               method: 'get'
          })

       }

 

②.在页面调用接口实现数据回显

//根据讲师id查询回显数据
       getInfo(id){
         teacherApi.getTeacherInfo(id)
         .then(resp=>{
           this.teacher=resp.data.teacher
         })
       }

 

③.调用根据id查询方法

因为添加和修改都使用save页面，区分是添加还是修改，只有修改时候查询数据回显

判断路径是否有讲师id值，如果有id值，则为修改，没有id值则是添加

 created(){
        //判断路径有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getInfo(id)
      }
    }

 

 

4.讲师修改功能实现

①在api.teacher.js中定义修改方法的接口

     //修改讲师
       updateTeacher(teacher){
          return request({
               url:`/eduservice/teacher/updateTeacher`,
               method: 'post',
               data:teacher})
       }

 

②在save.vue中定义修改讲师的方法

 //修改讲师的方法
       updateTeacher(){
         teacherApi.updateTeacher(this.teacher)
         .then(resp=>{
               //提示信息
            this.$message({
            type: 'success',
            message: '修改成功!'
             });
             //修改完成，跳转讲师列表页面，即路由跳转
             this.$router.push({path:'/teacher/table'})
         })
       }

根据teacher是否有id判断，有id则是修改，没id则是添加，因为添加的时候id会自动生成

 saveOrUpdate(){
          //判断是修改还是添加
           //根据是否有id判断，有则是修改，没有则是添加
           if(!this.teacher.id){
              this.saveTeacher()
           }else{
             this.updateTeacher()
           }
          
        }

5.关于路由切换问题

解决方案，使用vue监听,当路由变化，此方法就会执行

   watch:{//监听
      $route(to,from){//路由变化的方式,当路由发送变化，此方法执行
       this.init()
     }
    }

save.vue

<template>
    <div class="app-container">
        讲师添加

   <el-form label-width="120px">
     <el-form-item label="讲师名称">
     <el-input v-model="teacher.name"/>
     </el-form-item>
     <el-form-item label="讲师排序">
     <el-input-number v-model="teacher.sort" controls-position="right" />
    </el-form-item>
   <el-form-item label="讲师头衔">
     <el-select v-model="teacher.level" clearable placeholder="请选择">
       <!--
         数据类型一定要和取出的json中的一致，否则没法回填
         因此，这里value使用动态绑定的值，保证其数据类型是number
       -->
       <el-option :value="1" label="高级讲师"/>
       <el-option :value="2" label="首席讲师"/>
     </el-select>
   </el-form-item>
   <el-form-item label="讲师资历">
    <el-input v-model="teacher.career"/>
    </el-form-item>
    <el-form-item label="讲师简介">
    <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
    </el-form-item>
    <!-- 讲师头像：TODO -->
    <el-form-item>
     <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate()">保存</el-button>
    </el-form-item>
  </el-form>
    </div>
</template>

<script>
import teacherApi from '@/api/edu/teacher'

export default {
    data(){
        return {
           teacher:{ //属性不加也可以，加了也没错
            name: '',
            sort: 0,
            level: 1,
            career: '',
            intro: '',
            avatar: ''

           },
           saveBtnDisabled:false//保存按钮是否禁用

        }
    },
    created(){
      this.init()
    },
    watch:{//监听
      $route(to,from){//路由变化的方式,当路由发送变化，此方法执行
       this.init()
     }
    },

    methods:{
      init(){
               //判断路径有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getInfo(id)
      }else{
        //清空表单
        this.teacher={} 
      }
      },

      //根据讲师id查询回显数据
       getInfo(id){
         teacherApi.getTeacherInfo(id)
         .then(resp=>{
           this.teacher=resp.data.teacher
         })
       },
       
       //修改讲师的方法
       updateTeacher(){
         teacherApi.updateTeacher(this.teacher)
         .then(resp=>{
               //提示信息
            this.$message({
            type: 'success',
            message: '修改成功!'
             });
             //修改完成，跳转讲师列表页面，即路由跳转
             this.$router.push({path:'/teacher/table'})
         })
       },

        saveOrUpdate(){
          //判断是修改还是添加
           //根据是否有id判断，有则是修改，没有则是添加
           if(!this.teacher.id){
              this.saveTeacher()
           }else{
             this.updateTeacher()
           }
          
        },
        saveTeacher(){
        teacherApi.addTeacher(this.teacher)
        .then(resp=>{
            //提示信息
            this.$message({
            type: 'success',
            message: '添加成功!'
             });
             //添加完成，跳转讲师列表页面，即路由跳转
             this.$router.push({path:'/teacher/table'})

        })

        }
    }

}
</script>

list.vue

<template>
<div class="app-container">
    讲师表单
    <!--查询表单-->
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item>
      <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
    </el-form-item>
    <el-form-item>
      <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
        <el-option :value="1" label="高级讲师"/>
        <el-option :value="2" label="首席讲师"/>
      </el-select>
    </el-form-item>
    <el-form-item label="添加时间">
      <el-date-picker
        v-model="teacherQuery.begin"
        type="datetime"
        placeholder="选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
      />
    </el-form-item>
    <el-form-item>
      <el-date-picker
          v-model="teacherQuery.end"
        type="datetime"
        placeholder="选择截止时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        default-time="00:00:00"
      />
     </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
     <!-- 表格 -->
  <el-table
    :data="list"
    border
    fit
    highlight-current-row>
    <el-table-column
      label="序号"
      width="70"
      align="center">
      <template slot-scope="scope">
	  {{ (page - 1) * limit + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="name" label="名称" width="80" />
    <el-table-column label="头衔" width="80">
      <template slot-scope="scope">
        {{ scope.row.level===1?'高级讲师':'首席讲师' }}
      </template>
    </el-table-column>
    <el-table-column prop="intro" label="资历" />
    <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
    <el-table-column prop="sort" label="排序" width="60" />
    <el-table-column label="操作" width="200" align="center">
      <template slot-scope="scope">
        <router-link :to="'/teacher/edit/'+scope.row.id">
          <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
         <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页  page当前页  limit每页记录数  total总记录数  getList分页的方法-->
   <el-pagination
     :current-page="page"
     :page-size="limit"
     :total="total"
     style="padding: 30px 0; text-align: center;"
     layout="total, prev, pager, next, jumper" 
     @current-change="getList"
/>
  </div>
</template>

<script>
import teacher from '@/api/edu/teacher'

export default {
    data(){ //定义变量和初始值
       return{
         list:null,//查询之后接口返回集合
         page:1,
         limit:10,
         total:0, //总记录数
         teacherQuery:{} //条件封装对象
       }   
    },
    created(){//在页面渲染之前执行，调用methods定义的方法
     this.getList()
    
    },
    methods:{//创建具体的方法，调用teacher.js定义的方法
        //讲师列表的方法
        getList(page=1){
          this.page=page
           teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
           .then(resp=>{
              //console.log(resp)
              this.list=resp.data.row
              this.total=resp.data.total
              console.log(this.list);
              console.log(this.total)
            
              
           })
           
        },
        resetData(){//清空的方法
         //表单输入数据清空 将对象清空
        this.teacherQuery={}  

         //查询所有讲师数据
         this.getList()

        },
        //删除讲师的方法
        removeDataById(id){
           this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { 
           teacher.deleteTeacherId(id)
           .then(resp=>{
              //提示信息
            this.$message({
            type: 'success',
            message: '删除成功!'
             });
              
              //回到列表页面刷新
              this.getList()
              })
         
        })

        
        }
      
    }

}
</script>

 

创造1024组合成员杨抄阅
关注
专栏目录
基于数据可视化+SpringBoot+Vue的医院综合管理平台设计和实现(源码+论文+部署讲解等)
java李阳勇的博客
09-26 727
社区医院管理系统是为了方便用户能够在网站上查看门诊门诊医生、特殊服务等，于是开发了基于springboot框架设计与实现了一款简洁、轻便的社区医院管理系统。本系统解决了社区医院管理事务中的主要问题，包括以下多个功能模块：诊断信息、病历信息、住院办理、出院办理、服务预约、药品信息、开药记录等管理。本系统采用了JAVA语言、springboot框架，采用了B/S设计模式，前端采用Vue技术，页面简洁美观。凭借ORM技术将相关数据映射到数据库中，数据采用MySQL数据库进行存储，界面化操作便于上手。
基于JavaSpringMvc+mybatis实现学生信息管理系统_基于mybatis的学生管理系统论文
最新发布
2401_84297265的博客
05-04 953
Python编程学习，学习内容包含：语法、正则、文件、 网络、多线程等常用库，推荐《Python核心编程》，不要看完；在实际的渗透测试过程中，面对复杂多变的网络环境，当常用工具不能满足实际需求的时候，往往需要对现有工具进行扩展，或者编写符合我们要求的工具、自动化脚本，这个时候就需要具备一定的编程能力。恭喜你，如果学到这里，你基本可以从事一份网络安全相关的工作，比如渗透测试、Web 渗透、安全服务、安全分析等岗位；主要数据表有：专业表、课程表、文件信息表、角色表、学生选课表、老师表、学生表等。
学生信息管理系统教师界面
10-19
学生信息管理系统
day05---(02)讲师管理模块准备(基本功能)
DKPT的博客
07-13 207
1、 创建vue组件与路由 (1) 创建vue组件 在在根目录下的src目录下的views目录下创建teacher目录，并在teacher目录下创建add.vue和list.vue文件。 Add.vue <template> <div class="app-container"> 讲师表单 </div> </template> List.vue <template> <div class="app-container"
1.EasyExcel读写Excel的介绍
weixin_46080928的博客
09-04 1257
EasyExcel读写Excel的介绍一、Excel导入导出的应用场景二、EasyExcel简介 一、Excel导入导出的应用场景 1、数据导入：减轻录入工作量 2、数据导出：统计信息归档 3、数据传输：异构系统之间数据传输 二、EasyExcel简介 1、EasyExcel特点 Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行，但是一旦并发上来后一定会OOM或者JVM频繁的full gc。 Eas
Day205.阿里云OSS、讲师管理前后端【上传头像功能】、课程分类管理【环境搭建、Excel文件读取添加数据库】 -谷粒学院
阿昌爱Java
02-27 6484
谷粒学院 阿里云存储OSS 一、对象存储OSS 为了解决海量数据存储与弹性扩容，项目中我们采用云存储的解决方案 - 阿里云 OSS 。 1、开通“对象存储OSS”服务 （ 0 ）www.aliyun.com （ 1 ）申请阿里云账号 （ 2 ）实名认证 （ 3 ）开通 “ 对象存储 OSS” 服务 （ 4 ）进入管理控制台 2、创建Bucket 选择：标准存储、公共读、不开通 3、上传默认头像 4、创建RAM子用户 一般在公司中，我们没有权限可以直接操作公司的阿里云账户， 所以我们需要获取创建阿里云OS
谷粒学苑 —— 4、讲师管理模块
Mr_zhangyj的博客
10-11 665
讲师管理模块
yuangongpeixun.rar_access_visual c_员工信息管理_课程管理
09-24
《Visual C++与Access结合构建员工信息管理及课程管理系统》 在信息技术日益发达的今天，高效、便捷的...通过这两个模块的协同工作，企业能够实现数据的规范化管理，提高工作效率，同时为员工提供个性化的培训服务。
环境人力资源管理程序.doc
02-11
1. **目的**：该程序的主要目标是确保公司各岗位配备合适的员工，并通过适当的培训和实习来提升员工的专业技能和综合素质，从而提高管理效率，实现企业高效运营。 2. **适用范围**：该管理程序适用于公司所有员工，...
HR程序文件-(表单).doc
12-24
此外，管理者代表对讲师资质进行审核，确保培训质量。 7. **验证人员资格鉴定条件**：为确保员工胜任工作，公司设定了一系列的资格鉴定条件，包括必要的知识、学历、经验和鉴定凭证。这适用于品质管制人员、工模...
P23后台讲师管理模块-讲师列表
weixin_44543578的博客
12-01 276
@RestController @RequestMapping("/eduservice/teacher") public class EduTeacherController { //把service注入 @Autowride private EduTeacherService teacherService; //1、查询讲师表所有数据 //rest风格 @GetMapping("findAll") public List<EduTeacher> findAllTeac
Day2-搭建后台讲师管理模块
weixin_39505091的博客
05-23 711
文章目录一. 项目结构 一. 项目结构 项目的基本结构是有一个父项目（SpringBoot）用于管理依赖包的版本及放置共有的依赖，父项目下有各个子模块（Maven），子模块下又有各个子模块。 先创建父项目，新建一个Spring Boot项目，修改版本号为2.2.1，再添加 <packaging> 将打包类型改成pom。 配置 <packaging>pom</pac...
Vue.js 2.6.0 版本之后，slot 和 slot-scope 被废弃了，取而代之的是使用新的 ＜template v-slot＞ 语法。
qq_44906497的博客
10-07 1374
原来这样写的话现在的编辑器会报错。
springboot-vue增删改功能实现步骤
sjgllllll的博客
06-15 1063
第一步：写后端接口 @ApiOperation(value = "讲师添加") @PostMapping("addteacher") public R addTeacher(@RequestBody EduTeacher eduTeacher){ boolean save = eduTeacherService.save(eduTeacher); if(save){ return R.ok(); }else{
easyui pageSize设置后报错 NAN
weixin_44735109的博客
12-18 526
原地址：http://www.dearboy.cn/a/201405/421.html 在使用EasyUI的DataGrid控件进行分页时，设置了pageSize却还是默认的10条数据，pageSize设置了报错为Failed to convert value of type ‘java.lang.String’ to required type ‘int’; nested exception i...
day06---(01)解决修改讲师切换添加讲师页面出现的Bug
DKPT的博客
07-13 230
1、问题是什么？ 问题说明： 登录后台主页面，查看讲师列表信息。点击修改讲师信息，数据显示在页面的文本框中，再去点击菜单之后的添加讲师，页面的文本框中依旧显示着刚刚点击修改讲师信息的内容，页面内容未清空。 正常状态： 点击菜单目录中添加讲师选项，跳转添加讲师页面，页面内容应该被清空。 2、如何解决bug？ （1）操作：直接在钩子方法中对应的if语句中添加else语句，执行清空页面数据操作。 created() { console.log(this.$route.params.id); if
Day05-讲师列表前端-讲师列表显示
qq_46112274的博客
03-05 279
1、讲师列表前端实现 第一步：添加路由 打开index.js文件 修改以下name、title信息： 代码如下： { path: '/example', component: Layout, redirect: '/teacher/table', name: '讲师管理', meta: { title: '讲师管理', icon: 'example' }, children: [ { path: 'table',
vue 中 自动加序号 翻页增加代码
亦碎流年的博客
05-29 1231
<el-table-column type="index" header-align="center" align="center" label="序号" width="50" > <!-- <template scope="scope"> <span>{{scope.$index + 1}} </span> </template>--> <template slot-scope="scope"> .
vue连续序号的实现
心有谦谦结
03-15 1660
一、场景 使用原本的index作为视图的序号，当下一页时，会重新编号，如第一页序号是1，2，3，4，5；第二页还是1，2，3，4，5 那么当我们希望序号是连续的，也就是第二页序号变成6，7，8，9，10等等。 二、实现 原来的（不连续的序号）： <el-table-column type="index" width="50"/> 修改成（连续的序号）： <el-table-column label="序号" width="50"> <temp
项目管理基础与实践
如果需要与讲师沟通，可以通过联系表单进行。 学习目标包括以下几个方面： 1. 了解项目管理协会（Project Management Institute, PMI）对项目管理的定义：PMI是全球领先的项目管理专业组织，其定义通常强调项目的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值