学成在线-修改课程计划名称

本人技术有限写的不好的地方敬请原谅，如有什么问题或者更好的解决方案大家可以留言或者私信

---

前言

教程中讲解了课程计划查询展示以及新增，并没有实现课程计划的修改以及删除，所以本文将实现课程计划名称的修改，如果各位有兴趣在弹框上加上课程计划的其他字段即可进行修改

---

一、解决思路

点击修改按钮，弹出一个修改框回显之前的课程计划名称，然后获取到更改后的课程计划名称与ID提交到服务端然后进行更新到数据库

二、代码实现

1.vue前端

（1）course_plan.vue给修改按钮增加弹框

修改按钮的edit方法（参数为对应的课程计划信息）

 renderContent(h, { node, data, store }) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
            <span>
              <span>{node.label}</span>
            </span>
            <span>
              <el-button style="font-size: 12px;" type="text" on-click={ () => this.choosevideo(data) }>{data.mediaFileOriginalName}&nbsp;&nbsp;&nbsp;&nbsp; 选择视频</el-button>
              <el-button style="font-size: 12px;" type="text" on-click={ () => this.edit(data) }>修改</el-button>
              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
            </span>
          </span>);
      },

edit方法弹框的显示

 edit(data){
    // alert(data.id);//data.id就是获取这个章节的id，传入后台进行修改
    this.teachPlanFormVisible=true;
    this.teachPlanForm.teachPlanName=data.pname;
    this.teachPlanForm.teachPlanId=data.id;
  },

增加弹框变量

teachPlanFormVisible:false,//控制修改窗口是否显示

弹框代码

el-dialog title=修改课程计划名称 :visible.sync="teachPlanFormVisible" width="50%">
      <el-form :model="teachPlanForm" label-width="80px" :rules="courseRules" ref="courseForm">
        <el-form-item label="课程计划" prop="teachPlanName">
          <el-input v-model="teachPlanForm.teachPlanName" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="editTeachPlan">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

提交修改的editTeachPlan方法

 //修改章节的内容,
editTeachPlan(){
   console.log(this.teachPlanForm)
   this.$confirm("确认修改课程名称为"+"‘"+this.teachPlanForm.teachPlanName+"’"+"吗？", '提示', {}).then(() => {
     courseApi.editTeachPlanName(this.teachPlanForm.teachPlanId,this.teachPlanForm.teachPlanName).then(res=>{
       if(res.success){
         this.$message.success("修改成功,请及时更新发布");
         this.teachPlanFormVisible=false;
         this.findTeachplan();
       }else{
         this.$message.error("修改失败");
       }
     });
   });
 },

（2）course.js修改计划名称的请求

//修改章节计划的名称
export const editTeachPlanName=(teachPlanId,teachPlanName)=>{
  return http.requestPut(apiUrl+"/course/teachplan/edit/"+teachPlanId+"/"+teachPlanName)
}

2.Java服务端

xc-service-manage-course服务

（1）课程管理controller与api

controller

@Override
    @PutMapping("/teachplan/edit/{teachPlanId}/{teachPlanName}")
    public ResponseResult editTeachPlanName(
            @PathVariable(name ="teachPlanId") String teachPlanId,
            @PathVariable(name ="teachPlanName")String teachPlanName) {//修改课程章节计划名称
        System.out.println("teachPlanId"+teachPlanId);
        System.out.println("teachPlanName"+teachPlanName);
        return this.courseService.editTeachPlanName(teachPlanId,teachPlanName);
    }

api

@ApiOperation("修改章节课程名称")
    public ResponseResult editTeachPlanName(String teachPlanId,String teachPlanName);

---

（2）service处理修改逻辑

/修改课程计划名称
    @Transactional
    public ResponseResult editTeachPlanName(String teachPlanId, String teachPlanName) {
        //首先根据Id查询出原本的课程信息
        Optional<Teachplan> byId = this.teachPlanRepository.findById(teachPlanId);
        if (byId.isPresent()){
            //存在就更新
            Teachplan teachplan = byId.get();
            teachplan.setPname(teachPlanName);
            //更新数据之后进性保存
            this.teachPlanRepository.save(teachplan);
            //返回成功
            return new ResponseResult(CommonCode.SUCCESS);
        }else {
            //不存在返回失败记录日志
            log.error("修改课程计划失败，TeachPlanId："+teachPlanId+";");
            return new ResponseResult(CommonCode.FAIL);
        }
    }

三.测试

我们选择一个课程计划然后在弹框修改名称，提交保存，刷新查看对应的课程计划已经修改成功。
最后修改成功之后请及时更新发布以获取最新的课程计划目录

本人技术有限写的不好的地方敬请原谅，如有什么问题或者更好的解决方案大家可以留言或者私信