• 谷粒学苑 —— 7、课程管理：课程发布页面2 —— 课程大纲

    目录

    1、课程大纲列表展示

    1.1、后端

    1.1.1、创建 VO

    1.1.2、根据课程 ID 获取大纲信息

    1.2、前端实现

    1.2.1、定义 API

    1.2.2、前端页面

    2、上一步和下一步的跳转

    3、章节管理

    3.1、后端

    3.1.1、添加章节

    3.1.2、根据章节ID查询章节信息

    3.1.3、根据章节ID修改章节信息

    3.1.4、删除指定章节ID的信息

    3.2、前端

    3.2.1、定义 API

    3.2.2、添加章节的按钮和 dialog

    3.2.3、添加章节

    3.2.4、修改章节

    3.2.5、删除章节

    4、小节管理

    4.1、后端

    4.1.1、添加小节

    4.1.2、删除小节

    4.1.3、根据小节ID查询小节信息

    4.1.4、修改小节信息

    4.2、前端

    4.2.1、定义 API

    4.2.2、添加和修改小节表单dialog

    4.2.3、添加小节

    4.2.4、修改小节

    4.2.5、删除小节

    5、完整页面内容

    1、课程大纲列表展示

    1.1、后端

    1.1.1、创建 VO

    1. @ApiModel(value = "章节信息VO")
    2. @Data
    3. public class ChapterVO {
    4.  
    5.     private String id;
    6.  
    7.     private String title;
    8.  
    9.     private List children = new ArrayList<>();
    10.  
    11. }
    1. @Data
    2. @ApiModel(value = "课时(小节)信息VO")
    3. public class VideoVO {
    4.  
    5.     private String id;
    6.  
    7.     private String title;
    8.  
    9.     private Boolean free;
    10.  
    11. }

    1.1.2、根据课程 ID 获取大纲信息

    EduChapterService

    1.     /**
    2.      * 根据课程ID查询课程大纲
    3.      * @param courseId 课程ID
    4.      * @return
    5.      */
    6.     List getChapterVideoByCourseId(String courseId);

    EduChapterServiceImpl

    1. @Service
    2. public class EduChapterServiceImpl extends ServiceImpl implements EduChapterService {
    3.  
    4.     @Autowired
    5.     private EduVideoService eduVideoService;
    6.  
    7.     /**
    8.      * 根据课程ID查询课程大纲
    9.      * @param courseId 课程ID
    10.      * @return
    11.      */
    12.     @Override
    13.     public List getChapterVideoByCourseId(String courseId) {
    14.         // 根据课程ID查询课程的所有章节
    15.         LambdaQueryWrapper chapterQueryWrapper = new LambdaQueryWrapper<>();
    16.         chapterQueryWrapper.eq(EduChapter::getCourseId, courseId);
    17.         List chapterList = this.list(chapterQueryWrapper);
    18.  
    19.         // 根据课程ID查询课程的所有小节
    20.         LambdaQueryWrapper videoQueryWrapper = new LambdaQueryWrapper<>();
    21.         videoQueryWrapper.eq(EduVideo::getCourseId, courseId);
    22.         List videoList = eduVideoService.list(videoQueryWrapper);
    23.  
    24.         // 封装
    25.         List chapterVOList = chapterList.stream().map((item) -> {
    26.             ChapterVO chapterVO = new ChapterVO();
    27.             BeanUtils.copyProperties(item, chapterVO);
    28.             List children = new ArrayList<>();
    29.             for (EduVideo v : videoList) {
    30.                 if(v.getChapterId().equals(item.getId())) {
    31.                     VideoVO videoVO = new VideoVO();
    32.                     BeanUtils.copyProperties(v, videoVO);
    33.                     children.add(videoVO);
    34.                 }
    35.             }
    36.             chapterVO.setChildren(children);
    37.             return chapterVO;
    38.         }).collect(Collectors.toList());
    39.  
    40.         return chapterVOList;
    41.     }
    42.  
    43. }

    EduChapterController

    1. @RestController
    2. @CrossOrigin
    3. @Api(description="课程大纲管理")
    4. @RequestMapping("/eduservice/chapter")
    5. public class EduChapterController {
    6.  
    7.     @Autowired
    8.     private EduChapterService chapterService;
    9.  
    10.     /**
    11.      * 根据课程ID查询课程大纲
    12.      * @return
    13.      */
    14.     @ApiOperation(value = "根据课程ID查询课程大纲")
    15.     @GetMapping("/getChapterVideo/{courseId}")
    16.     public R getChapterVideo(
    17.             @ApiParam(name = "courseId", value = "课程ID", required = true) @PathVariable String courseId
    18.     ) {
    19.         List list = chapterService.getChapterVideoByCourseId(courseId);
    20.         return R.ok().data("allChapterVideo", list);
    21.     }
    22.  
    23. }

    1.2、前端实现

    1.2.1、定义 API

    src\api\edu\chapter.js

    1. import request from '@/utils/request'
    2.  
    3. export default {
    4.  
    5.     /**
    6.      * 根据课程ID获取所有章节和小节信息
    7.      * @param {*} courseId 课程ID
    8.      * @returns 
    9.      */
    10.     getAllChapterVideo(courseId) {
    11.         return request({
    12.             url: `/eduservice/chapter/getChapterVideo/${courseId}`,
    13.             method: 'GET'
    14.         })
    15.     }
    16. }

    1.2.2、前端页面

    1. <template>
    2.     <div class="app-container">
    3.         <h2 style="text-align: center;">发布新课程h2>
    4.  
    5.         <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
    6.             <el-step title="填写课程基本信息" />
    7.             <el-step title="创建课程大纲" />
    8.             <el-step title="最终发布" />
    9.         el-steps>
    10.  
    11.         
    12.         <ul class="chanpterList">
    13.             <li v-for="chapter in chapterVideoList" :key="chapter.id">
    14.                 <p>
    15.                     {{ chapter.title }}
    16.                     <span class="acts">
    17.                         <el-button type="text">添加课时el-button>
    18.                         <el-button style="" type="text">编辑el-button>
    19.                         <el-button type="text">删除el-button>
    20.                     span>
    21.                 p>
    22.         
    23.                 
    24.                 <ul class="chanpterList videoList">
    25.                     <li v-for="video in chapter.children" :key="video.id">
    26.                         <p>
    27.                             {{ video.title }}
    28.                             <span class="acts">
    29.                                 <el-button type="text">编辑el-button>
    30.                                 <el-button type="text">删除el-button>
    31.                             span>
    32.                         p>
    33.                     li>
    34.                 ul>
    35.             li>
    36.         ul>
    37.  
    38.         <el-form label-width="120px">
    39.             <el-form-item>
    40.                 <el-button @click="previous">上一步el-button>
    41.                 <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步el-button>
    42.             el-form-item>
    43.         el-form>
    44.     div>
    45. template>
    46. <script>
    47.     import chapter from '@/api/edu/chapter';
    48.  
    49.     export default {
    50.         data() {
    51.             return {
    52.                 saveBtnDisabled: false,
    53.                 chapterVideoList: [],   // 章节和小节信息
    54.                 courseId: ''    // 课程ID
    55.             }
    56.         },
    57.         created() {
    58.             // 获取路由ID值
    59.             if(this.$route.params && this.$route.params.id) {
    60.                 this.courseId = this.$route.params.id;
    61.                 // console.log('course = ' + this.courseId);
    62.             }
    63.  
    64.             // 根据课程ID获取所有章节和小节信息
    65.             this.getAllChapterVideo();
    66.         },
    67.         methods: {
    68.             /**
    69.              * 点击上一步跳转到src\views\edu\course\info.vue
    70.              */
    71.             previous() {
    72.                 this.$router.push({ path: '/course/info/1' });
    73.             },
    74.  
    75.             /**
    76.              * 点击下一步跳转到src\views\edu\course\publish.vue
    77.              */
    78.             next() {
    79.                 this.$router.push({ path: '/course/publish/1' });
    80.             },
    81.  
    82.             /**
    83.              * 根据课程ID获取所有章节和小节信息
    84.              */
    85.             getAllChapterVideo() {
    86.                 chapter.getAllChapterVideo(this.courseId).then(response => {
    87.                     this.chapterVideoList = response.data.allChapterVideo;
    88.                     // console.log(this.chapterVideoList);
    89.                 });
    90.             }
    91.         }
    92.     }
    93. script>
    94. <style scoped>
    95. .chanpterList {
    96.     position: relative;
    97.     list-style: none;
    98.     margin: 0;
    99.     padding: 0;
    100. }
    101.  
    102. .chanpterList li {
    103.     position: relative;
    104. }
    105.  
    106. .chanpterList p {
    107.     float: left;
    108.     font-size: 20px;
    109.     margin: 10px 0;
    110.     padding: 10px;
    111.     height: 70px;
    112.     line-height: 50px;
    113.     width: 100%;
    114.     border: 1px solid #DDD;
    115.     position: relative;
    116. }
    117.  
    118. .chanpterList .acts {
    119.     float: right;
    120.     font-size: 14px;
    121.     position: relative;
    122.     z-index: 1;
    123. }
    124.  
    125. .videoList {
    126.     padding-left: 50px;
    127. }
    128.  
    129. .videoList p {
    130.     float: left;
    131.     font-size: 14px;
    132.     margin: 10px 0;
    133.     padding: 10px;
    134.     height: 50px;
    135.     line-height: 30px;
    136.     width: 100%;
    137.     border: 1px dotted #DDD;
    138. }
    139. style>

    2、上一步和下一步的跳转

    页面组件：

    1.         <el-form label-width="120px">
    2.             <el-form-item>
    3.                 <el-button @click="previous">上一步el-button>
    4.                 <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步el-button>
    5.             el-form-item>
    6.         el-form>

    methods 中的方法

    1.             /**
    2.              * 点击上一步跳转到课程信息页面，并携带课程ID参数
    3.              */
    4.             previous() {
    5.                 this.$router.push({ path: '/course/info/' + this.courseId });
    6.             },
    7.  
    8.             /**
    9.              * 点击下一步跳转到课程发布页面，并携带课程ID参数
    10.              */
    11.             next() {
    12.                 this.$router.push({ path: '/course/publish/' + this.courseId });
    13.             },

    3、章节管理

    3.1、后端

    3.1.1、添加章节

    EduChapterController

    1.     /**
    2.      * 添加章节
    3.      * @param chapter 章节信息
    4.      * @return
    5.      */
    6.     @PostMapping("/addChapter")
    7.     public R addChapter(
    8.             @ApiParam(name = "EduChapter", value = "章节对象", required = true) @RequestBody EduChapter chapter
    9.     ) {
    10.         chapterService.save(chapter);
    11.         return R.ok();
    12.     }

    3.1.2、根据章节ID查询章节信息

    EduChapterController

    1.     /**
    2.      * 根据章节ID查询章节信息
    3.      * @param chapterId 章节ID
    4.      * @return
    5.      */
    6.     @GetMapping("/getChapterInfo/{chapterId}")
    7.     public R getChapterInfo(
    8.             @ApiParam(name = "chapterId", value = "章节ID", required = true) @PathVariable String chapterId
    9.     ) {
    10.         EduChapter chapter = chapterService.getById(chapterId);
    11.         return R.ok().data("chapter", chapter);
    12.     }

    3.1.3、根据章节ID修改章节信息

    EduChapterController

    1.     /**
    2.      * 根据章节ID修改章节信息
    3.      * @param chapter 章节信息
    4.      * @return
    5.      */
    6.     @PostMapping("/updateChapter")
    7.     public R updateChapter(
    8.             @ApiParam(name = "EduChapter", value = "章节对象", required = true) @RequestBody EduChapter chapter
    9.     ) {
    10.         chapterService.updateById(chapter);
    11.         return R.ok();
    12.     }

    3.1.4、删除指定章节ID的信息

    EduChapterService

    1.     /**
    2.      * 删除指定章节ID的信息
    3.      * @param chapterId 章节ID
    4.      * @return
    5.      */
    6.     boolean deleteChapter(String chapterId);

    EduChapterServiceImpl

    1.     /**
    2.      * 删除指定章节ID的信息
    3.      * @param chapterId 章节ID
    4.      * @return
    5.      */
    6.     @Override
    7.     public boolean deleteChapter(String chapterId) {
    8.         // 查询该章节下是否有小节
    9.         LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
    10.         queryWrapper.eq(EduVideo::getChapterId, chapterId);
    11.         int count = eduVideoService.count(queryWrapper);
    12.  
    13.         if(count > 0) {
    14.             // 该章节下有小节，不可以删除
    15.             throw new GuliException(20001, "该章节下有小节，不能删除！");
    16.         } else {
    17.             // 该章节下没有小节，可以删除
    18.             boolean result = this.removeById(chapterId);
    19.             return result;
    20.         }
    21.     }

    EduChapterController

    1.     /**
    2.      * 删除指定章节ID的信息
    3.      * @param chapterId 章节ID
    4.      * @return
    5.      */
    6.     @DeleteMapping("/{chapterId}")
    7.     public R deleteChapter(
    8.             @ApiParam(name = "chapterId", value = "章节ID", required = true) @PathVariable String chapterId
    9.     ) {
    10.         boolean flag = chapterService.deleteChapter(chapterId);
    11.         if(flag) {
    12.             return R.ok();
    13.         } else {
    14.             return R.error();
    15.         }
    16.     }

    3.2、前端

    3.2.1、定义 API

    src\api\edu\chapter.js

    1.     /**
    2.      * 添加章节
    3.      * @param {*} chapter 章节信息
    4.      * @returns 
    5.      */
    6.     addChapter(chapter) {
    7.         return request({
    8.             url: `/eduservice/chapter/addChapter`,
    9.             method: 'POST',
    10.             data: chapter
    11.         })
    12.     },
    13.  
    14.     /**
    15.      * 根据章节ID查询章节信息
    16.      * @param {*} chapterId 章节ID
    17.      * @returns 
    18.      */
    19.     getChapterById(chapterId) {
    20.         return request({
    21.             url: `/eduservice/chapter/getChapterInfo/${chapterId}`,
    22.             method: 'GET'
    23.         })
    24.     },
    25.  
    26.     /**
    27.      * 根据章节ID修改章节信息
    28.      * @param {*} chapter 章节信息
    29.      * @returns 
    30.      */
    31.     updateChapter(chapter) {
    32.         return request({
    33.             url: `/eduservice/chapter/updateChapter`,
    34.             method: 'POST',
    35.             data: chapter
    36.         })
    37.     },
    38.  
    39.     /**
    40.      * 删除指定章节ID的信息
    41.      * @param {*} chapterId 章节ID
    42.      * @returns 
    43.      */
    44.     deleteChapter(chapterId) {
    45.         return request({
    46.             url: `/eduservice/chapter/${chapterId}`,
    47.             method: 'DELETE'
    48.         })
    49.     }

    3.2.2、添加章节的按钮和 dialog

    1.         
    2.         <el-button type="text" @click="openChapterDialog()">添加章节el-button>
    3.         
    4.         
    5.         <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
    6.             <el-form :model="chapter" label-width="120px" :rules="rules" ref="chapterForm">
    7.                 <el-form-item label="章节标题" prop="title">
    8.                     <el-input v-model="chapter.title" />
    9.                 el-form-item>
    10.                 <el-form-item label="章节排序" prop="sort">
    11.                     <el-input-number v-model="chapter.sort" :min="0" />
    12.                 el-form-item>
    13.             el-form>
    14.             <div slot="footer" class="dialog-footer">
    15.                 <el-button @click="dialogChapterFormVisible = false">取 消el-button>
    16.                 <el-button type="primary" @click="saveOrUpdate">确 定el-button>
    17.             div>
    18.         el-dialog>

    在 data 中定义

    1.                 dialogChapterFormVisible: false,     // 添加章节的弹框dialog是否可见
    2.                 chapter: {  // 封装章节数据
    3.                     title: '',
    4.                     sort: undefined
    5.                 },
    6.                 rules: {    // 表单校验规则
    7.                     title: [
    8.                         { required: true, message: '请输入章节标题', trigger: 'blur' },
    9.                         { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
    10.                     ],
    11.                     sort: [
    12.                         { required: true, message: '请输入章节排序', type: 'number', trigger: 'blur' }
    13.                     ],
    14.                 },

    3.2.3、添加章节

    在 methods 中添加方法

    1.             /**
    2.              * 添加或修改章节
    3.              */
    4.             saveOrUpdate() {
    5.                 this.addChapter();
    6.             },
    7.  
    8.             /**
    9.              * 添加章节
    10.              */
    11.             addChapter() {
    12.                 this.chapter.courseId = this.courseId;  // 设置课程ID
    13.                 this.$refs['chapterForm'].validate((valid) => {
    14.                     if (valid) {
    15.                         chapter.addChapter(this.chapter).then(response => {
    16.                             // 关闭弹框
    17.                             this.dialogChapterFormVisible = false;
    18.  
    19.                             // 提示信息
    20.                             this.$message({
    21.                                 type: 'success',
    22.                                 message: '添加成功!'
    23.                             });
    24.  
    25.                             // 刷新页面(重新加载数据)
    26.                             this.getAllChapterVideo();
    27.                         });
    28.                     } else {
    29.                         return false;
    30.                     }
    31.                 });
    32.             },
    33.  
    34.             /**
    35.              * 点击添加章节按钮后打开弹框
    36.              */
    37.             openChapterDialog() {
    38.                 // 初始化
    39.                 this.chapter.title = '';
    40.                 this.chapter.sort = undefined;
    41.  
    42.                 this.dialogChapterFormVisible = true;   // 打开弹框
    43.             }

    3.2.4、修改章节

    在章节大纲组件的编辑按钮添加点击事件

    1.                 <p>
    2.                     {{ chapter.title }}
    3.                     <span class="acts">
    4.                         <el-button type="text">添加课时el-button>
    5.                         <el-button style="" type="text" @click="openEditChapterDialog(chapter.id)">编辑el-button>
    6.                         <el-button type="text">删除el-button>
    7.                     span>
    8.                 p>

    在 methods 中修改 saveOrUpdate 方法并添加方法

    1.             /**
    2.              * 添加或修改章节
    3.              */
    4.             saveOrUpdate() {
    5.                 // 根据章节ID判断进行添加还是修改操作(注意，不是课程ID)
    6.                 if(!this.chapter.id) {
    7.                     this.addChapter();
    8.                 } else {
    9.                     this.updateChapter();
    10.                 }
    11.             },
    12.  
    13.             /**
    14.              * 点击编辑按钮后打开弹框
    15.              * @param {*} chapterId 
    16.              */
    17.             openEditChapterDialog(chapterId) {
    18.                 // 初始化
    19.                 chapter.getChapterById(chapterId).then(response => {
    20.                     this.chapter = response.data.chapter;
    21.                 });
    22.  
    23.                 this.dialogChapterFormVisible = true;   // 打开弹框
    24.             },
    25.  
    26.             /**
    27.              * 修改章节
    28.              */
    29.             updateChapter() {
    30.                 this.$refs['chapterForm'].validate((valid) => {
    31.                     if (valid) {
    32.                         chapter.updateChapter(this.chapter).then(response => {
    33.                             // 关闭弹框
    34.                             this.dialogChapterFormVisible = false;
    35.  
    36.                             // 提示信息
    37.                             this.$message({
    38.                                 type: 'success',
    39.                                 message: '修改成功!'
    40.                             });
    41.  
    42.                             // 刷新页面(重新加载数据)
    43.                             this.getAllChapterVideo();
    44.                         });
    45.                     } else {
    46.                         return false;
    47.                     }
    48.                 });
    49.             }

    3.2.5、删除章节

    在章节大纲组件的删除按钮添加点击事件

    1.                 <p>
    2.                     {{ chapter.title }}
    3.                     <span class="acts">
    4.                         <el-button type="text">添加课时el-button>
    5.                         <el-button type="text" @click="openEditChapterDialog(chapter.id)">编辑el-button>
    6.                         <el-button type="text" @click="removeChapter(chapter.id)">删除el-button>
    7.                     span>
    8.                 p>

    在 methods 中添加删除方法

    1.             /**
    2.              * 删除章节
    3.              * @param {} chapterId 
    4.              */
    5.             removeChapter(chapterId) {
    6.                 this.$confirm('此操作将永久删除该章节信息, 是否继续?', '提示', {
    7.                     confirmButtonText: '确定',
    8.                     cancelButtonText: '取消',
    9.                     type: 'warning'
    10.                 })
    11.                 // 确认删除
    12.                 .then(() => {
    13.                     chapter.deleteChapter(chapterId)
    14.                         // 删除成功
    15.                         .then(response => {
    16.                             // 提示信息
    17.                             this.$message({
    18.                                 type: 'success',
    19.                                 message: '删除成功!'
    20.                             });
    21.                             // 刷新页面(重新加载数据)
    22.                             this.getAllChapterVideo();
    23.                         })
    24.                 })
    25.                 // 取消删除
    26.                 .catch(() => {
    27.                     this.$message({
    28.                         type: 'info',
    29.                         message: '已取消删除'
    30.                     });
    31.                 });
    32.             }

    4、小节管理

    4.1、后端

    4.1.1、添加小节

    EduVideoController

    1.     /**
    2.      * 添加小节
    3.      * @param video 小节信息
    4.      * @return
    5.      */
    6.     @ApiOperation(value = "添加小节")
    7.     @PostMapping("/addVideo")
    8.     public R addVideo(
    9.             @ApiParam(name = "EduVideo", value = "小节信息", required = true) @RequestBody EduVideo video
    10.     ) {
    11.         videoService.save(video);
    12.         return R.ok();
    13.     }

    4.1.2、删除小节

    EduVideoController

    1.     /**
    2.      * 删除小节
    3.      * @param videoId 小节ID
    4.      * @return
    5.      */
    6.     @DeleteMapping("/{videoId}")
    7.     public R deleteVideo(
    8.             @ApiParam(name = "videoId", value = "小节ID", required = true) @PathVariable String videoId
    9.     ) {
    10.         videoService.removeById(videoId);
    11.         return R.ok();
    12.     }

    4.1.3、根据小节ID查询小节信息

    EduVideoController

    1.     /**
    2.      * 根据小节ID查询小节信息
    3.      * @param videoId
    4.      * @return
    5.      */
    6.     @GetMapping("/getVideoInfo/{videoId}")
    7.     public R getVideoInfo(
    8.             @ApiParam(name = "videoId", value = "课时ID", required = true) @PathVariable String videoId
    9.     ) {
    10.         EduVideo video = videoService.getById(videoId);
    11.         return R.ok().data("video", video);
    12.     }

    4.1.4、修改小节信息

    EduVideoController

    1.     /**
    2.      * 修改小节信息
    3.      * @param eduVideo 小节信息
    4.      * @return
    5.      */
    6.     @PostMapping("/updateVideo")
    7.     public R updateVideo(
    8.             @ApiParam(name = "eduVideo", value = "课时基本信息", required = true) @RequestBody EduVideo eduVideo
    9.     ) {
    10.         videoService.updateById(eduVideo);
    11.         return R.ok();
    12.     }

    4.2、前端

    4.2.1、定义 API

    src\api\edu\video.js

    1. import request from '@/utils/request'
    2.  
    3. export default {
    4.  
    5.     /**
    6.      * 添加小节
    7.      * @param {*} video 小节信息
    8.      * @returns 
    9.      */
    10.     addVideo(video) {
    11.         return request({
    12.             url: `/eduservice/video/addVideo`,
    13.             method: 'POST',
    14.             data: video
    15.         })
    16.     },
    17.  
    18.     /**
    19.      * 删除指定小节ID的信息
    20.      * @param {*} videoId 小节ID
    21.      * @returns 
    22.      */
    23.     deleteChapter(videoId) {
    24.         return request({
    25.             url: `/eduservice/video/${videoId}`,
    26.             method: 'DELETE'
    27.         })
    28.     },
    29.  
    30.     /**
    31.      * 根据小节ID查询小节信息
    32.      * @param {*} videoId 小节ID
    33.      * @returns 
    34.      */
    35.     getVideoById(videoId) {
    36.         return request({
    37.             url: `/eduservice/video/getVideoInfo/${videoId}`,
    38.             method: 'GET'
    39.         })
    40.     },
    41.  
    42.     /**
    43.      * 根据小节ID修改小节信息
    44.      * @param {*} video 小节信息
    45.      * @returns 
    46.      */
    47.     updateVideo(video) {
    48.         return request({
    49.             url: `/eduservice/video/updateVideo`,
    50.             method: 'POST',
    51.             data: video
    52.         })
    53.     },
    54.  
    55. }

    并在页面中引入

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

    4.2.2、添加和修改小节表单dialog

    1.         
    2.         <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
    3.             <el-form :model="video" label-width="120px">
    4.                 <el-form-item label="课时标题">
    5.                     <el-input v-model="video.title" />
    6.                 el-form-item>
    7.                 <el-form-item label="课时排序">
    8.                     <el-input-number v-model="video.sort" :min="0" controls-position="right" />
    9.                 el-form-item>
    10.                 <el-form-item label="是否免费">
    11.                     <el-radio-group v-model="video.free">
    12.                         <el-radio :label="true">免费el-radio>
    13.                         <el-radio :label="false">默认el-radio>
    14.                     el-radio-group>
    15.                 el-form-item>
    16.                 <el-form-item label="上传视频">
    17.                     
    18.                 el-form-item>
    19.             el-form>
    20.             <div slot="footer" class="dialog-footer">
    21.                 <el-button @click="dialogVideoFormVisible = false">取 消el-button>
    22.                 <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定el-button>
    23.             div>
    24.         el-dialog>

    在 data 中定义

    1.                 dialogVideoFormVisible: false,   // 添加和修改小节的表单dialog是否可见
    2.                 video: {    // 封装小节数据
    3.                     title: '',
    4.                     sort: undefined,
    5.                     free: undefined,
    6.                     videoSourceId: ''
    7.                 },
    8.                 videoRules: {
    9.                     title: [
    10.                         { required: true, message: '请输入小节标题', trigger: 'blur' },
    11.                         { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
    12.                     ],
    13.                     sort: [
    14.                         { required: true, message: '请输入章节排序', type: 'number', trigger: 'blur' }
    15.                     ],
    16.                     free: [
    17.                         { required: true, message: '请选择是否免费', trigger: 'blur' }
    18.                     ]
    19.                 }

    4.2.3、添加小节

    在章节栏的添加小节按钮绑定事件

    1.             <li v-for="chapter in chapterVideoList" :key="chapter.id">
    2.                 <p>
    3.                     {{ chapter.title }}
    4.                     <span class="acts">
    5.                         <el-button type="text" @click="openVideo(chapter.id)">添加小节el-button>
    6.                         <el-button type="text" @click="openEditChapterDialog(chapter.id)">编辑el-button>
    7.                         <el-button type="text" @click="removeChapter(chapter.id)">删除el-button>
    8.                     span>
    9.                 p>

    在添加和修改小节的 dialog 的确定按钮绑定事件

    1.             <div slot="footer" class="dialog-footer">
    2.                 <el-button @click="dialogVideoFormVisible = false">取 消el-button>
    3.                 <el-button type="primary" @click="saveOrUpdateVideo">确 定el-button>
    4.             div>

    在 methods 中添加方法

    1.             /**
    2.              * 点击添加小节打开弹框，并初始化video对象
    3.              * @param {*} chapterId 本次添加的小节所属的章节的ID
    4.              */
    5.             openVideo(chapterId) {
    6.                 // 初始化
    7.                 this.video = {
    8.                     title: '',
    9.                     sort: undefined,
    10.                     isFree: undefined,
    11.                     videoSourceId: ''
    12.                 };
    13.                 this.video.chapterId = chapterId;
    14.  
    15.                 // 显示弹框
    16.                 this.dialogVideoFormVisible = true;
    17.             },
    18.  
    19.             saveOrUpdateVideo() {
    20.                 if(!this.video.id) {
    21.                     this.addVideo();
    22.                 } else {
    23.                     this.updateVideo();
    24.                 }
    25.             },
    26.  
    27.             /**
    28.              * 添加小节
    29.              */
    30.             addVideo() {
    31.                 this.$refs['videoForm'].validate((valid) => {
    32.                     if (valid) {
    33.                         this.video.courseId = this.courseId;    // 设置课程ID
    34.                         video.addVideo(this.video).then(response => {
    35.                             // 关闭弹框
    36.                             this.dialogVideoFormVisible = false;
    37.  
    38.                             // 提示信息
    39.                             this.$message({
    40.                                 type: 'success',
    41.                                 message: '添加成功!'
    42.                             });
    43.  
    44.                             // 刷新页面(重新加载数据)
    45.                             this.getAllChapterVideo();
    46.                         });
    47.                     } else {
    48.                         return false;
    49.                     }
    50.                 });
    51.             },

    4.2.4、修改小节

    在小节栏的编辑按钮绑定事件

    1.                 
    2.                 <ul class="chanpterList videoList">
    3.                     <li v-for="video in chapter.children" :key="video.id">
    4.                         <p>
    5.                             {{ video.title }}
    6.                             <span class="acts">
    7.                                 <el-button type="text" @click="openEditVideoDialog(video.id)">编辑el-button>
    8.                                 <el-button type="text" @click="removeVideo(video.id)">删除el-button>
    9.                             span>
    10.                         p>
    11.                     li>
    12.                 ul>

    在 methods 中添加方法

    1.             openEditVideoDialog(videoId) {
    2.                 // 初始化
    3.                 video.getVideoById(videoId).then(response => {
    4.                     this.video = response.data.video;
    5.                 });
    6.  
    7.                 this.dialogVideoFormVisible = true;     // 打开弹框
    8.             },
    9.  
    10.             updateVideo() {
    11.                 this.$refs['videoForm'].validate((valid) => {
    12.                     if (valid) {
    13.                         video.updateVideo(this.video).then(response => {
    14.                             // 关闭弹框
    15.                             this.dialogVideoFormVisible = false;
    16.  
    17.                             // 提示信息
    18.                             this.$message({
    19.                                 type: 'success',
    20.                                 message: '添加成功!'
    21.                             });
    22.  
    23.                             // 刷新页面(重新加载数据)
    24.                             this.getAllChapterVideo();
    25.                         });
    26.                     } else {
    27.                         return false;
    28.                     }
    29.                 });
    30.             },

    4.2.5、删除小节

    在删除小节按钮绑定事件

    1.                             <span class="acts">
    2.                                 <el-button type="text" @click="openEditVideoDialog(video.id)">编辑el-button>
    3.                                 <el-button type="text" @click="removeVideo(video.id)">删除el-button>
    4.                             span>

    在 methods 中添加方法

    1.             /**
    2.              * 删除小节
    3.              * @param {*} videoId 小节Id
    4.              */
    5.             removeVideo(videoId) {
    6.                 this.$confirm('此操作将永久删除该小节信息, 是否继续?', '提示', {
    7.                     confirmButtonText: '确定',
    8.                     cancelButtonText: '取消',
    9.                     type: 'warning'
    10.                 })
    11.                 // 确认删除
    12.                 .then(() => {
    13.                     video.deleteChapter(videoId)
    14.                         // 删除成功
    15.                         .then(response => {
    16.                             // 提示信息
    17.                             this.$message({
    18.                                 type: 'success',
    19.                                 message: '删除成功!'
    20.                             });
    21.                             // 刷新页面(重新加载数据)
    22.                             this.getAllChapterVideo();
    23.                         })
    24.                 })
    25.                 // 取消删除
    26.                 .catch(() => {
    27.                     this.$message({
    28.                         type: 'info',
    29.                         message: '已取消删除'
    30.                     });
    31.                 });
    32.             },

    5、完整页面内容

    1. <template>
    2.     <div class="app-container">
    3.         <h2 style="text-align: center;">发布新课程h2>
    4.  
    5.         <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
    6.             <el-step title="填写课程基本信息" />
    7.             <el-step title="创建课程大纲" />
    8.             <el-step title="最终发布" />
    9.         el-steps>
    10.  
    11.         
    12.         <el-button type="text" @click="openChapterDialog()">添加章节el-button>
    13.         
    14.         
    15.         <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
    16.             <el-form :model="chapter" label-width="120px" :rules="rules" ref="chapterForm">
    17.                 <el-form-item label="章节标题" prop="title">
    18.                     <el-input v-model="chapter.title" />
    19.                 el-form-item>
    20.                 <el-form-item label="章节排序" prop="sort">
    21.                     <el-input-number v-model="chapter.sort" :min="0" />
    22.                 el-form-item>
    23.             el-form>
    24.             <div slot="footer" class="dialog-footer">
    25.                 <el-button @click="dialogChapterFormVisible = false">取 消el-button>
    26.                 <el-button type="primary" @click="saveOrUpdate">确 定el-button>
    27.             div>
    28.         el-dialog>
    29.  
    30.         
    31.         <ul class="chanpterList">
    32.             <li v-for="chapter in chapterVideoList" :key="chapter.id">
    33.                 <p>
    34.                     {{ chapter.title }}
    35.                     <span class="acts">
    36.                         <el-button type="text" @click="openVideo(chapter.id)">添加小节el-button>
    37.                         <el-button type="text" @click="openEditChapterDialog(chapter.id)">编辑el-button>
    38.                         <el-button type="text" @click="removeChapter(chapter.id)">删除el-button>
    39.                     span>
    40.                 p>
    41.         
    42.                 
    43.                 <ul class="chanpterList videoList">
    44.                     <li v-for="video in chapter.children" :key="video.id">
    45.                         <p>
    46.                             {{ video.title }}
    47.                             <span class="acts">
    48.                                 <el-button type="text" @click="openEditVideoDialog(video.id)">编辑el-button>
    49.                                 <el-button type="text" @click="removeVideo(video.id)">删除el-button>
    50.                             span>
    51.                         p>
    52.                     li>
    53.                 ul>
    54.             li>
    55.         ul>
    56.  
    57.         
    58.         <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
    59.             <el-form :model="video" label-width="120px" :rules="videoRules" ref="videoForm">
    60.                 <el-form-item label="课时标题" prop="title">
    61.                     <el-input v-model="video.title" />
    62.                 el-form-item>
    63.                 <el-form-item label="课时排序" prop="sort">
    64.                     <el-input-number v-model="video.sort" :min="0" controls-position="right" />
    65.                 el-form-item>
    66.                 <el-form-item label="是否免费" prop="isFree">
    67.                     <el-radio-group v-model="video.isFree">
    68.                         <el-radio :label="true">免费el-radio>
    69.                         <el-radio :label="false">默认el-radio>
    70.                     el-radio-group>
    71.                 el-form-item>
    72.                 <el-form-item label="上传视频">
    73.                     
    74.                 el-form-item>
    75.             el-form>
    76.             <div slot="footer" class="dialog-footer">
    77.                 <el-button @click="dialogVideoFormVisible = false">取 消el-button>
    78.                 <el-button type="primary" @click="saveOrUpdateVideo">确 定el-button>
    79.             div>
    80.         el-dialog>
    81.  
    82.         <el-form label-width="120px">
    83.             <el-form-item>
    84.                 <el-button @click="previous">上一步el-button>
    85.                 <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步el-button>
    86.             el-form-item>
    87.         el-form>
    88.     div>
    89. template>
    90. <script>
    91.     import chapter from '@/api/edu/chapter';
    92.     import video from '@/api/edu/video';
    93.  
    94.     export default {
    95.         data() {
    96.             return {
    97.                 saveBtnDisabled: false,
    98.                 chapterVideoList: [],   // 章节和小节信息
    99.                 courseId: '',    // 课程ID
    100.                 dialogChapterFormVisible: false,     // 添加章节的弹框dialog是否可见
    101.                 chapter: {  // 封装章节数据
    102.                     title: '',
    103.                     sort: undefined
    104.                 },
    105.                 rules: {    // 表单校验规则
    106.                     title: [
    107.                         { required: true, message: '请输入章节标题', trigger: 'blur' },
    108.                         { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
    109.                     ],
    110.                     sort: [
    111.                         { required: true, message: '请输入章节排序', type: 'number', trigger: 'blur' }
    112.                     ],
    113.                 },
    114.                 dialogVideoFormVisible: false,   // 添加和修改小节的表单dialog是否可见
    115.                 video: {    // 封装小节数据
    116.                     title: '',
    117.                     sort: undefined,
    118.                     isFree: undefined,
    119.                     videoSourceId: ''
    120.                 },
    121.                 videoRules: {
    122.                     title: [
    123.                         { required: true, message: '请输入小节标题', trigger: 'blur' },
    124.                         { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
    125.                     ],
    126.                     sort: [
    127.                         { required: true, message: '请输入章节排序', type: 'number', trigger: 'blur' }
    128.                     ],
    129.                     isFree: [
    130.                         { required: true, message: '请选择是否免费', trigger: 'blur' }
    131.                     ]
    132.                 }
    133.             }
    134.         },
    135.         created() {
    136.             // 获取路由ID值
    137.             if(this.$route.params && this.$route.params.id) {
    138.                 this.courseId = this.$route.params.id;
    139.                 // console.log('course = ' + this.courseId);
    140.             }
    141.  
    142.             // 根据课程ID获取所有章节和小节信息
    143.             this.getAllChapterVideo();
    144.         },
    145.         methods: {
    146.             /**
    147.              * 点击上一步跳转到课程信息页面，并携带课程ID参数
    148.              */
    149.             previous() {
    150.                 this.$router.push({ path: '/course/info/' + this.courseId });
    151.             },
    152.  
    153.             /**
    154.              * 点击下一步跳转到课程发布页面，并携带课程ID参数
    155.              */
    156.             next() {
    157.                 this.$router.push({ path: '/course/publish/' + this.courseId });
    158.             },
    159.  
    160.             /**
    161.              * 根据课程ID获取所有章节和小节信息
    162.              */
    163.             getAllChapterVideo() {
    164.                 chapter.getAllChapterVideo(this.courseId).then(response => {
    165.                     this.chapterVideoList = response.data.allChapterVideo;
    166.                     // console.log(this.chapterVideoList);
    167.                 });
    168.             },
    169.  
    170.             /**
    171.              * 添加或修改章节
    172.              */
    173.             saveOrUpdate() {
    174.                 // 根据章节ID判断进行添加还是修改操作(注意，不是课程ID)
    175.                 if(!this.chapter.id) {
    176.                     this.addChapter();
    177.                 } else {
    178.                     this.updateChapter();
    179.                 }
    180.             },
    181.  
    182.             /**
    183.              * 添加章节
    184.              */
    185.             addChapter() {
    186.                 this.chapter.courseId = this.courseId;  // 设置课程ID
    187.                 this.$refs['chapterForm'].validate((valid) => {
    188.                     if (valid) {
    189.                         chapter.addChapter(this.chapter).then(response => {
    190.                             // 关闭弹框
    191.                             this.dialogChapterFormVisible = false;
    192.  
    193.                             // 提示信息
    194.                             this.$message({
    195.                                 type: 'success',
    196.                                 message: '添加成功!'
    197.                             });
    198.  
    199.                             // 刷新页面(重新加载数据)
    200.                             this.getAllChapterVideo();
    201.                         });
    202.                     } else {
    203.                         return false;
    204.                     }
    205.                 });
    206.             },
    207.  
    208.             /**
    209.              * 点击添加章节按钮后打开弹框
    210.              */
    211.             openChapterDialog() {
    212.                 // 初始化
    213.                 this.chapter.title = '';
    214.                 this.chapter.sort = undefined;
    215.  
    216.                 this.dialogChapterFormVisible = true;   // 打开弹框
    217.             },
    218.  
    219.             /**
    220.              * 点击编辑按钮后打开弹框
    221.              * @param {*} chapterId 
    222.              */
    223.             openEditChapterDialog(chapterId) {
    224.                 // 初始化
    225.                 chapter.getChapterById(chapterId).then(response => {
    226.                     this.chapter = response.data.chapter;
    227.                 });
    228.  
    229.                 this.dialogChapterFormVisible = true;   // 打开弹框
    230.             },
    231.  
    232.             /**
    233.              * 修改章节
    234.              */
    235.             updateChapter() {
    236.                 this.$refs['chapterForm'].validate((valid) => {
    237.                     if (valid) {
    238.                         chapter.updateChapter(this.chapter).then(response => {
    239.                             // 关闭弹框
    240.                             this.dialogChapterFormVisible = false;
    241.  
    242.                             // 提示信息
    243.                             this.$message({
    244.                                 type: 'success',
    245.                                 message: '修改成功!'
    246.                             });
    247.  
    248.                             // 刷新页面(重新加载数据)
    249.                             this.getAllChapterVideo();
    250.                         });
    251.                     } else {
    252.                         return false;
    253.                     }
    254.                 });
    255.             },
    256.  
    257.             /**
    258.              * 删除章节
    259.              * @param {} chapterId 
    260.              */
    261.             removeChapter(chapterId) {
    262.                 this.$confirm('此操作将永久删除该章节信息, 是否继续?', '提示', {
    263.                     confirmButtonText: '确定',
    264.                     cancelButtonText: '取消',
    265.                     type: 'warning'
    266.                 })
    267.                 // 确认删除
    268.                 .then(() => {
    269.                     chapter.deleteChapter(chapterId)
    270.                         // 删除成功
    271.                         .then(response => {
    272.                             // 提示信息
    273.                             this.$message({
    274.                                 type: 'success',
    275.                                 message: '删除成功!'
    276.                             });
    277.                             // 刷新页面(重新加载数据)
    278.                             this.getAllChapterVideo();
    279.                         })
    280.                 })
    281.                 // 取消删除
    282.                 .catch(() => {
    283.                     this.$message({
    284.                         type: 'info',
    285.                         message: '已取消删除'
    286.                     });
    287.                 });
    288.             },
    289.  
    290. //============================ 以下为小节操作 ==============================================
    291.  
    292.             /**
    293.              * 点击添加小节打开弹框，并初始化video对象
    294.              * @param {*} chapterId 本次添加的小节所属的章节的ID
    295.              */
    296.             openVideo(chapterId) {
    297.                 // 初始化
    298.                 this.video = {
    299.                     title: '',
    300.                     sort: undefined,
    301.                     isFree: undefined,
    302.                     videoSourceId: ''
    303.                 };
    304.                 this.video.chapterId = chapterId;
    305.  
    306.                 // 显示弹框
    307.                 this.dialogVideoFormVisible = true;
    308.             },
    309.  
    310.             saveOrUpdateVideo() {
    311.                 if(!this.video.id) {
    312.                     this.addVideo();
    313.                 } else {
    314.                     this.updateVideo();
    315.                 }
    316.             },
    317.  
    318.             /**
    319.              * 添加小节
    320.              */
    321.             addVideo() {
    322.                 this.$refs['videoForm'].validate((valid) => {
    323.                     if (valid) {
    324.                         this.video.courseId = this.courseId;    // 设置课程ID
    325.                         video.addVideo(this.video).then(response => {
    326.                             // 关闭弹框
    327.                             this.dialogVideoFormVisible = false;
    328.  
    329.                             // 提示信息
    330.                             this.$message({
    331.                                 type: 'success',
    332.                                 message: '添加成功!'
    333.                             });
    334.  
    335.                             // 刷新页面(重新加载数据)
    336.                             this.getAllChapterVideo();
    337.                         });
    338.                     } else {
    339.                         return false;
    340.                     }
    341.                 });
    342.             },
    343.  
    344.             updateVideo() {
    345.                 this.$refs['videoForm'].validate((valid) => {
    346.                     if (valid) {
    347.                         video.updateVideo(this.video).then(response => {
    348.                             // 关闭弹框
    349.                             this.dialogVideoFormVisible = false;
    350.  
    351.                             // 提示信息
    352.                             this.$message({
    353.                                 type: 'success',
    354.                                 message: '添加成功!'
    355.                             });
    356.  
    357.                             // 刷新页面(重新加载数据)
    358.                             this.getAllChapterVideo();
    359.                         });
    360.                     } else {
    361.                         return false;
    362.                     }
    363.                 });
    364.             },
    365.  
    366.             /**
    367.              * 删除小节
    368.              * @param {*} videoId 小节Id
    369.              */
    370.             removeVideo(videoId) {
    371.                 this.$confirm('此操作将永久删除该小节信息, 是否继续?', '提示', {
    372.                     confirmButtonText: '确定',
    373.                     cancelButtonText: '取消',
    374.                     type: 'warning'
    375.                 })
    376.                 // 确认删除
    377.                 .then(() => {
    378.                     video.deleteChapter(videoId)
    379.                         // 删除成功
    380.                         .then(response => {
    381.                             // 提示信息
    382.                             this.$message({
    383.                                 type: 'success',
    384.                                 message: '删除成功!'
    385.                             });
    386.                             // 刷新页面(重新加载数据)
    387.                             this.getAllChapterVideo();
    388.                         })
    389.                 })
    390.                 // 取消删除
    391.                 .catch(() => {
    392.                     this.$message({
    393.                         type: 'info',
    394.                         message: '已取消删除'
    395.                     });
    396.                 });
    397.             },
    398.  
    399.             openEditVideoDialog(videoId) {
    400.                 // 初始化
    401.                 video.getVideoById(videoId).then(response => {
    402.                     this.video = response.data.video;
    403.                 });
    404.  
    405.                 this.dialogVideoFormVisible = true;     // 打开弹框
    406.             },
    407.  
    408.             
    409.         }
    410.     }
    411. script>
    412. <style scoped>
    413. .chanpterList {
    414.     position: relative;
    415.     list-style: none;
    416.     margin: 0;
    417.     padding: 0;
    418. }
    419.  
    420. .chanpterList li {
    421.     position: relative;
    422. }
    423.  
    424. .chanpterList p {
    425.     float: left;
    426.     font-size: 20px;
    427.     margin: 10px 0;
    428.     padding: 10px;
    429.     height: 70px;
    430.     line-height: 50px;
    431.     width: 100%;
    432.     border: 1px solid #DDD;
    433.     position: relative;
    434. }
    435.  
    436. .chanpterList .acts {
    437.     float: right;
    438.     font-size: 14px;
    439.     position: relative;
    440.     z-index: 1;
    441. }
    442.  
    443. .videoList {
    444.     padding-left: 50px;
    445. }
    446.  
    447. .videoList p {
    448.     float: left;
    449.     font-size: 14px;
    450.     margin: 10px 0;
    451.     padding: 10px;
    452.     height: 50px;
    453.     line-height: 30px;
    454.     width: 100%;
    455.     border: 1px dotted #DDD;
    456. }
    457. style>

  • 相关阅读:
    什么是智能视频美颜SDK？
    wchar_t* argv[] 数组赋值
    Hadoop集群启动但是没有datanode/namenode的情况
    C++程序设计--第三章内容
    Python入门系列（八）日期时间、数学、json
    Python 文件（文件夹）复制、剪切、删除速查
    【岛上书店】读后感
    WPF旋转变换
    开源生态与软件供应链研讨会
    数论知识点总结(一)
  • 原文地址：https://blog.csdn.net/Mr_zhangyj/article/details/127578230