Mooc项目开发笔记（十五）：小节管理前后端实现

一、小节（视频）管理后端开发

web层接口的定义

@RestController
@RequestMapping("/eduservice/video")
@CrossOrigin
@Api("课程视频（小节）管理")
public class EduVideoController {

    @Autowired
    private EduVideoService videoService;

    @ApiOperation("添加小节信息")
    @PostMapping("/add")
    public R addVideo(@RequestBody EduVideo video) {
        videoService.save(video);
        return R.ok();
    }

    // TODO 删除小节时需要将其关联的视频进行删除
    @ApiOperation("删除小节信息")
    @DeleteMapping("{id}")
    public R deleteVideo(@PathVariable String id) {
        videoService.removeById(id);
        return R.ok();
    }

    @ApiOperation("根据小节id获取小节信息")
    @GetMapping("{id}")
    public R getVideoById(@PathVariable String id){
        EduVideo video = videoService.getById(id);
        return R.ok().data("video", video);
    }

    @ApiOperation("修改小节信息")
    @PostMapping("update")
    public R updateVideo(@RequestBody EduVideo video) {
        videoService.updateById(video);
        return R.ok();
    }
}

二、小节（视频）管理前端开发

1、添加Api接口

在scr/api/edu下创建video.js，内容如下：

import request from '@/utils/request'

export default {

    /**
     * 添加小节信息
     */
    addVideo(video){
        return request({
            url: `/eduservice/video/add`,
            method: 'post',
            data: video
          })
    },
    /**
     * 删除小节信息
     */
    deleteVideo(id){
        return request({
            url: `/eduservice/video/${id}`,
            method: 'delete'
          })
    },
    /**
     * 根据小节id获取小节信息
     */
    getVideoById(id){
        return request({
            url: `/eduservice/video/${id}`,
            method: 'get'
          })
    },
    /**
     * 修改小节信息
     */
    updateVideo(video){
        return request({
            url: `/eduservice/video/update`,
            method: 'post',
            data: video
          })
    },
}

二、小节（视频）添加前端开发

在页面chapter.vue中进行如下修改

1、定义data数据

saveVideoBtnDisabled: false, // 课时按钮是否禁用
dialogVideoFormVisible: false, // 是否显示课时表单
chapterId: '', // 课时所在的章节id
video: {// 课时对象
  title: '',
  sort: 0,
  isFree: 0,
  videoSourceId: ''
},

2、添加课时按钮

<el-button type="text" @click="openAddVideo">添加课时el-button>

3、课时表单dialog

<el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
  <el-form :model="video" label-width="120px">
    <el-form-item label="课时标题">
      <el-input v-model="video.title"/>
    el-form-item>
    <el-form-item label="课时排序">
      <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
    el-form-item>
    <el-form-item label="是否免费">
      <el-radio-group v-model="video.isFree">
        <el-radio :label="true">免费el-radio>
        <el-radio :label="false">默认el-radio>
      el-radio-group>
    el-form-item>
    <el-form-item label="上传视频">
      
    el-form-item>
  el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVideoFormVisible = false">取 消el-button>
    <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定el-button>
  div>
el-dialog>

4、添加课时methods

引入video模块

import videoApi from '@/api/edu/video'

方法的定义

   //添加小节弹窗
    openAddVideo(chapterId){
        this.dialogVideoFormVisible = true
        //清空之前的数据
        this.video = {sort: 0, isFree: true}
        //设置章节id
        this.video.chapterId = chapterId
    },

    //添加小节
    addVideo(){
        //设置课程id
        this.video.courseId = this.courseId

        videoApi.addVideo(this.video)
            .then(response => {
                //关闭弹窗
                this.dialogVideoFormVisible = false
                //提示信息
                this.$message({
                    type: 'success',
                    message: '小节信息添加成功'
                })
                //从新获取章节小节信息
                this.getCourseChapter()
            })
    },

    //保存或更新小节
    saveOrUpdateVideo(){
        this.addVideo()
    },

5、测试

在章节的后面点击 添加课时按钮

填写信息点击确定，添加成功：

三、小节（视频）删除前端开发

在页面chapter.vue中进行如下修改

1、按钮

<el-button type="text" @click="deleteVideo(video.id)">删除</el-button>

2、定义删除方法

    //删除小节
    deleteVideo(id){
        this.$confirm('此操作将删除该小节信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //用户点击确定会调用
          //尝试删除数据，并且提示删除结果
          videoApi.deleteVideo(id)
            .then(response => {
                //提示信息
                this.$message({
                    type: 'success',
                    message: '小节信息删除成功'
                })
                //从新获取章节小节信息
                this.getCourseChapter()
            })
        })
    },

3、测试

点击小节后面的 删除 按钮：

四、小节（视频）修改前端开发

在页面chapter.vue中进行如下修改

1、按钮

<el-button type="text" @click="openEditVideo(video.id)">编辑</el-button>

2、定义修改方法

    //打开修改小节弹窗
    openEditVideo(id){
        //根据id从服务器获取小节信息
        videoApi.getVideoById(id)
            .then(response => {
                this.video = response.data.video
            })

        //显示修改弹窗
        this.dialogVideoFormVisible = true
    },
        
    //修改小节信息
    updateVideo(){
        videoApi.updateVideo(this.video)
            .then(response => {
                //关闭弹窗
                this.dialogVideoFormVisible = false
                //提示信息
                this.$message({
                    type: 'success',
                    message: '小节信息修改成功'
                })
                //从新获取章节小节信息
                this.getCourseChapter()
            })
    },

    //保存或更新小节
    saveOrUpdateVideo(){
      if(this.video.id){ //修改方法
        this.updateVideo()
      } else{ //添加方法
        this.addVideo()
      }
    },

3、测试

在小节后面点击编辑，并在弹窗中修改信息，完后点击确定：