2022年最新《谷粒学院开发教程》：5 - 章节管理
生活随笔
收集整理的這篇文章主要介紹了
2022年最新《谷粒学院开发教程》：5 - 章节管理
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
| 資料地址 |
| 1 - 構(gòu)建工程篇 | 7 - 渲染前臺(tái)篇 |
| 2 - 前后交互篇 | 8 - 前臺(tái)登錄篇 |
| 3 - 文件上傳篇 | 9 - 前臺(tái)課程篇 |
| 4 - 課程管理篇 | 10 - 前臺(tái)支付篇 |
| 5 - 章節(jié)管理篇 | 11 - 統(tǒng)計(jì)分析篇 |
| 6 - 微服務(wù)治理 | 12 - 項(xiàng)目完結(jié)篇 |
目錄
- 一、課程章節(jié)增刪改查
- 1.1、后端接口
- 1.2、前端實(shí)現(xiàn)
- 1.3、添加章節(jié)
- 1.4、修改章節(jié)
- 1.5、刪除章節(jié)
- 二、課程章節(jié)小節(jié)功能
- 2.1、后端接口
- 2.2、前端實(shí)現(xiàn)
- 2.3、添加小節(jié)
- 2.4、刪除小節(jié)
- 2.5、修改小節(jié)
- 三、課程發(fā)布信息預(yù)覽
- 3.1、后端接口
- 3.3、前端實(shí)現(xiàn)
- 四、課程發(fā)布
- 4.1、后端接口
- 4.2、前端頁(yè)面
- 五、課程列表
- 5.1、后端接口
- 5.2、前端實(shí)現(xiàn)
- 六、課程刪除
- 6.1、后端接口
- 6.2、前端實(shí)現(xiàn)
- 七、編輯基本信息及大綱
- 八、阿里云視頻點(diǎn)播
- 8.1、簡(jiǎn)介
- 8.2、使用
- 九、使用服務(wù)端SDK
- 9.1、簡(jiǎn)介
- 9.2、獲取視頻
- 9.3、上傳視頻
- 十、視頻點(diǎn)播微服務(wù)
- 10.1、后端接口
- 10.2、前端實(shí)現(xiàn)
- 10.3、視頻刪除
一、課程章節(jié)增刪改查
1.1、后端接口
@Api(tags = "章節(jié)模塊") @CrossOrigin @RestController @RequestMapping("/eduservice/chapter") public class EduChapterController {@Autowiredprivate EduChapterService eduChapterService;@AutowiredEduCourseService eduCourseService;// 添加章節(jié)@PostMapping("addChapter")public R addChapter(@RequestBody EduChapter eduChapter) {eduChapterService.save(eduChapter);return R.ok();}// 根據(jù)章節(jié)id查詢@GetMapping("getChapter/{chapterId}")public R getChapter(@PathVariable String chapterId) {EduChapter eduChapter = eduChapterService.getById(chapterId);return R.ok().data("chapter", eduChapter);}// 修改章節(jié)@PostMapping("updateChapter")public R updateChapter(@RequestBody EduChapter eduChapter) {eduChapterService.updateById(eduChapter);return R.ok();}// 刪除章節(jié) 若存在小節(jié)則不可刪除@DeleteMapping("deleteById/{chapterId}")public R deleteById(@PathVariable String chapterId) {boolean flag = eduChapterService.deleteChapter(chapterId);if (flag) {return R.ok();} else {return R.error();}}} @Override public boolean deleteChapter(String chapterId) {QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();wrapper.eq("chapter_id", chapterId);int count = eduVideoService.count(wrapper);if (count > 0) {throw new LaptoyException(20001, "還有小節(jié)數(shù)據(jù)，不能刪除");} else {return this.removeById(chapterId);} }1.2、前端實(shí)現(xiàn)
1、頁(yè)面代碼
<template><div class="app-container"><h2 style="text-align: center">發(fā)布新課程</h2><!-- 步驟條 --><el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;"><el-step title="填寫課程基本信息" /><el-step title="創(chuàng)建課程大綱" /><el-step title="最終發(fā)布" /></el-steps><!-- 章節(jié)數(shù)據(jù)折疊面板 --><el-collapse accordion v-for="chapter in chapterVideoList" :key="chapter.id"><!-- 按鈕組 --><el-button-group><el-button type="primary" size="mini" icon="el-icon-circle-plus">添加小節(jié)</el-button><el-button type="primary" size="mini" icon="el-icon-edit" @click="openEditChapter(chapter.id)"></el-button><el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(chapter.id)"></el-button></el-button-group><!-- 小節(jié)數(shù)據(jù) --><el-collapse-item :title=chapter.title><div v-for="video in chapter.children" :key="video.id">{{ video.title }}<span class="acts"><el-button type="text">編輯</el-button><el-button type="text">刪除</el-button></span></div></el-collapse-item></el-collapse><!-- 底部按鈕 --><el-form label-width="120px"><el-form-item><el-button @click="dialogChapterFormVisible=true">添加章節(jié)</el-button><el-button @click="previous">上一步</el-button><el-button :disabled="saveBtnDisabled" type="primary" @click="next">下 一步</el-button></el-form-item></el-form><!-- 添加或修改章節(jié)彈框 --><el-dialog :visible.sync="dialogChapterFormVisible" title="添加章節(jié)"><el-form :model="chapter" label-width="120px"><el-form-item label="章節(jié)標(biāo)題"><el-input v-model="chapter.title" /></el-form-item><el-form-item label="章節(jié)排序"><el-input-number v-model="chapter.sort" :min="0" controls-position="right" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogChapterFormVisible = false">取 消</el-button><el-button type="primary" @click="saveOrUpdate">確 定</el-button></div></el-dialog></div> </template> data() {return {dialogChapterFormVisible: false,chapter: {title: "",sort: 0},}; },稍微優(yōu)化了頁(yè)面
2、創(chuàng)建api - chapter.js
//添加章節(jié) addChapter(chapter) {return request({url: `/eduservice/chapter/addChapter`,method: `post`,data: chapter}) }, //根據(jù)id查詢章節(jié) updateChapterById(chapterId) {return request({url: `/eduservice/chapter/getChapter/${chapterId}`,method: `get`,}) }, //修改章節(jié) updateChapter(chapter) {return request({url: `/eduservice/chapter/updateChapter`,method: `post`,data: chapter}) }, //刪除章節(jié) deleteById(chapterId) {return request({url: `/eduservice/chapter/deleteById/${chapterId}`,method: `delete`,}) }1.3、添加章節(jié)
saveChapter() {//設(shè)置課程id到chapter對(duì)象中，不指定課程id無(wú)法正常保存，因?yàn)閿?shù)據(jù)庫(kù)字段為非空this.chapter.courseId = this.courseIdchapter.addChapter(this.chapter).then((resp) => {this.dialogChapterFormVisible = false;this.$message({message: "添加章節(jié)成功",type: "success",});this.chapter = {}this.getChapterVideoByCourseId()}); }, saveOrUpdate() {this.saveChapter() },1.4、修改章節(jié)
1、點(diǎn)擊修改章節(jié)按鈕根據(jù)章節(jié)id回顯數(shù)據(jù)
<el-button type="primary" size="mini" icon="el-icon-edit" @click="openEditChapter(chapter.id)"></el-button>2、修改方法
// 修改章節(jié)彈窗回顯數(shù)據(jù) openEditChapter(id) {this.dialogChapterFormVisible = true;chapter.updateChapterById(id).then((resp) => {this.chapter = resp.data.data}) }, // 修改章節(jié) updateChapter(id) {//設(shè)置課程id到chapter對(duì)象中，不指定課程id無(wú)法正常保存，因?yàn)閿?shù)據(jù)庫(kù)字段為非空this.chapter.courseId = this.courseIdchapter.updateChapter(this.chapter).then((resp) => {this.dialogChapterFormVisible = false;this.$message({message: "修改章節(jié)成功",type: "success",});this.getChapterVideoByCourseId();}); },1.5、刪除章節(jié)
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(chapter.id)"></el-button> // 刪除章節(jié) removeById(chapterId) {this.$confirm("此操作將永久刪除章節(jié)信息, 是否繼續(xù)?", "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning",}).then(() => {chapter.deleteById(chapterId).then((resp) => {this.$message({type: "success",message: "刪除成功!",});this.getChapterVideoByCourseId();});}); },二、課程章節(jié)小節(jié)功能
2.1、后端接口
@Api(tags = "小節(jié)模塊") @RestController @RequestMapping("/eduservice/video") @CrossOrigin //解決跨域問(wèn)題 public class EduVideoController {@Autowiredprivate EduVideoService eduVideoService;//添加小節(jié)@PostMapping("/addVideo")public R addVideo(@RequestBody EduVideo eduVideo) {eduVideoService.save(eduVideo);return R.ok();}//刪除小節(jié)// TODO 后面這個(gè)方法需要完善，刪除小節(jié)的時(shí)候，同時(shí)也要把視頻刪除@DeleteMapping("/deleteVideo/{id}")public R deleteVideo(@PathVariable String id) {eduVideoService.removeById(id);return R.ok();}//修改小節(jié)@PostMapping("/updateVideo")public R updateVideo(@RequestBody EduVideo eduVideo) {eduVideoService.updateById(eduVideo);return R.ok();}//根據(jù)小節(jié)id查詢@GetMapping("/getVideoById/{videoId}")public R getVideoById(@PathVariable String videoId) {EduVideo eduVideo = eduVideoService.getById(videoId);return R.ok().data("data", eduVideo);} }2.2、前端實(shí)現(xiàn)
1、頁(yè)面
<!-- 章節(jié)數(shù)據(jù)折疊面板 --> <el-collapse accordion v-for="chapter in chapterVideoList" :key="chapter.id"><!-- 按鈕組 --><el-button-group><el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="openSaveVideoForm(chapter.id)">添加小節(jié)</el-button></el-button-group> </el-collapse><!--添加小節(jié)表單--> <el-dialog :visible.sync="dialogVideoFormVisible" title="添加小節(jié)"><el-form :model="video" label-width="120px"><el-form-item label="小節(jié)標(biāo)題"><el-input v-model="video.title" /></el-form-item><el-form-item label="小節(jié)排序"><el-input-number v-model="video.sort" :min="0" controls-position="right" /></el-form-item><el-form-item label="是否免費(fèi)"><el-radio-group v-model="video.free"><el-radio :label="true">免費(fèi)</el-radio><el-radio :label="false">默認(rèn)</el-radio></el-radio-group></el-form-item><el-form-item label="上傳視頻"><!-- TODO --></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> data() {return {saveVideoBtnDisabled: false,dialogVideoFormVisible: false,video: {sort: 0,title: "",free: ""}}; },2、API - src\api\teacher\video.js
import request from '@/utils/request' //引入已經(jīng)封裝好的axios 和 攔截器export default {//添加小節(jié)addVideo(video) {return request({url: `/eduservice/video/addVideo`,method: `post`,data: video})},//根據(jù)id查詢小節(jié)getVideoById(videoId) {return request({url: `/eduservice/video/getVideoById/${videoId}`,method: `get`,})},//修改小節(jié)updateVideo(video) {return request({url: `/eduservice/video/updateVideo`,method: `post`,data: video})},//刪除小節(jié)deleteById(videoId) {return request({url: `/eduservice/video/deleteVideo/${videoId}`,method: `delete`,})}, }2.3、添加小節(jié)
openSaveVideoForm(id) {this.dialogVideoFormVisible = truethis.video.courseId = this.courseIdthis.video.chapterId = id }, saveOrUpdateVideo(){if (this.video.id) {//修改小節(jié)} else {//新增小節(jié)this.saveVideo();} }, // 添加小節(jié) saveVideo() {video.addVideo(this.video).then((resp) => {this.dialogVideoFormVisible = false;this.$message({message: "添加小節(jié)成功",type: "success",});this.video = {}this.getChapterVideoByCourseId();}); },2.4、刪除小節(jié)
<!-- 章節(jié)數(shù)據(jù)折疊面板 --> <el-collapse accordion v-for="chapter in chapterVideoList" :key="chapter.id"><!-- 按鈕組 --><!-- 小節(jié)數(shù)據(jù) --><el-collapse-item :title=chapter.title><div v-for="video in chapter.children" :key="video.id">{{ video.title }}<span class="acts"><el-button type="text">編輯</el-button><el-button type="text" @click="removeVideo(video.id)">刪除</el-button></span></div></el-collapse-item> </el-collapse> // 刪除小節(jié) removeVideo(id) {this.$confirm("此操作將永久刪除小節(jié)信息, 是否繼續(xù)?", "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning",}).then(() => {video.deleteById(id).then((resp) => {this.$message({type: "success",message: "刪除成功!",});this.getChapterVideoByCourseId();});}); },2.5、修改小節(jié)
<!-- 章節(jié)數(shù)據(jù)折疊面板 --> <el-collapse accordion v-for="chapter in chapterVideoList" :key="chapter.id"><!-- 按鈕組 --><!-- 小節(jié)數(shù)據(jù) --><el-collapse-item :title=chapter.title><div v-for="video in chapter.children" :key="video.id">{{ video.title }}<span class="acts"><el-button type="text" @click="openEditVideoForm(video.id)">編輯</el-button><el-button type="text" @click="removeVideo(video.id)">刪除</el-button></span></div></el-collapse-item> </el-collapse> // 展開(kāi)編輯表單 openEditVideoForm(id) {this.dialogVideoFormVisible = true;video.getVideoById(id).then((resp) => {this.video = resp.data.data;}); },// 修改小節(jié) updateVideo() {video.updateVideo(this.video).then((resp) => {this.dialogVideoFormVisible = false;this.$message({message: "修改小節(jié)成功",type: "success",});this.getChapterVideoByCourseId();}); },// 添加或修改小節(jié) saveOrUpdateVideo() {if (this.video.id) {//修改小節(jié)this.updateVideo();} else {//新增小節(jié)this.saveVideo();} },三、課程發(fā)布信息預(yù)覽
3.1、后端接口
1、創(chuàng)建 VO
@Data public class CoursePublishVo implements Serializable {private static final long serialVersionUID = 1L;private String id;//課程idprivate String title; //課程名稱private String cover; //封面private Integer lessonNum;//課時(shí)數(shù)private String subjectLevelOne;//一級(jí)分類private String subjectLevelTwo;//二級(jí)分類private String teacherName;//講師名稱private String price;//價(jià)格 ，只用于顯示}2、控制層
// 根據(jù)課程id查詢課程確認(rèn)信息 @GetMapping("/getPublishCourseInfo/{id}") public R getPublishCourseInfo(@PathVariable String id) {CoursePublishVo publishCourseInfo = eduCourseService.getPublishCourseInfo(id);return R.ok().data("data", publishCourseInfo); }3、業(yè)務(wù)層
@Override public CoursePublishVo getPublishCourseInfo(String id) {return eduCourseMapper.getPublishCourseInfo(id); }4、數(shù)據(jù)層
CoursePublishVo getPublishCourseInfo(String id); <select id="getPublishCourseInfo" resultType="com.laptoy.eduservice.entity.vo.CoursePublishVo">SELECT ec.id,ec.title,ec.cover,ec.lesson_num AS lessonNum,ec.price,s1.title AS subjectLevelOne,s2.title AS subjectLevelTwo,t.name AS teacherNameFROM edu_course ecLEFT JOIN edu_teacher t ON ec.teacher_id = t.idLEFT JOIN edu_subject s1 ON ec.subject_parent_id = s1.idLEFT JOIN edu_subject s2 ON ec.subject_id = s2.idWHERE ec.id = #{id} </select>5、將xml文件放到 resources/xml 目錄下，并再YML文件指定
mybatis-plus:mapper-locations: /mapper/*.xml3.3、前端實(shí)現(xiàn)
1、定義API - course.js
//課程確認(rèn)信息顯示 getPublishCourseInfo(courseId){return request({url:"/eduservice/course/getpublishCourseInfo/"+courseId,method: 'get',}) }2、頁(yè)面
<div class="ccInfo"><img :src="publishCourseInfo.cover" /><div class="main"><h2>{{ publishCourseInfo.title }}</h2><p class="gray"><span>共{{ publishCourseInfo.lessonNum }}課時(shí)</span></p><p><span>所屬分類：{{ publishCourseInfo.subjectLevelOne }} : {{ publishCourseInfo.subjectLevelTwo }}</span></p><p>課程講師：{{ publishCourseInfo.teacherName }}</p><h3 class="red">￥{{ publishCourseInfo.price }}</h3></div> </div>3、方法
export default {data() {return {saveBtnDisabled: false,courseId: '',publishCourseInfo: {},};},methods: {//根據(jù)課程id查詢getPublishCourseInfo() {course.getPublishCourseInfo(this.courseId).then(resp => {this.publishCourseInfo = resp.data.dataconsole.log(this.publishCourseInfo)})},// 跳轉(zhuǎn)到上一步previous() {this.$router.push("/course/chapter/" + this.courseId);},publish() {this.$router.push("/course/list");}},created() {//獲取路由中的id值if (this.$route.params && this.$route.params.id) {this.courseId = this.$route.params.id//調(diào)用接口方法根據(jù)課程id查詢課程信息this.getPublishCourseInfo()}}, };4、css
<style scoped> .ccInfo {background: #f5f5f5;padding: 20px;overflow: hidden;border: 1px dashed #ddd;margin-bottom: 40px;position: relative; } .ccInfo img {background: #d6d6d6;width: 500px;height: 278px;display: block;float: left;border: none; } .ccInfo .main {margin-left: 520px; } .ccInfo .main h2 {font-size: 28px;margin-bottom: 30px;line-height: 1;font-weight: normal; } .ccInfo .main p {margin-bottom: 10px;word-wrap: break-word;line-height: 24px;max-height: 48px;overflow: hidden; } .ccInfo .main p {margin-bottom: 10px;word-wrap: break-word;line-height: 24px;max-height: 48px;overflow: hidden; } .ccInfo .main h3 {left: 540px;bottom: 20px;line-height: 1;font-size: 28px;color: #d32f24;font-weight: normal;position: absolute; } </style>5、測(cè)試
四、課程發(fā)布
4.1、后端接口
1、控制層
//課程最終發(fā)布 //修改課程狀態(tài) @PostMapping("publishCourse/{id}") public R publishCourse(@PathVariable String id){EduCourse eduCourse = new EduCourse();eduCourse.setStatus("Normal"); //設(shè)置課程發(fā)布狀態(tài)eduCourse.setId(id);boolean flag = eduCourseService.updateById(eduCourse);if (flag){return R.ok();}else {return R.error();} }4.2、前端頁(yè)面
1、API
//課程最終發(fā)布 publishCourse(courseId) {return request({url: "/eduservice/course/publishCourse/" + courseId,method: 'post',}) }2、方法
//發(fā)布課程 publish() {this.$confirm("你確定要發(fā)布此課程, 是否繼續(xù)?", "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning",}).then(() => {course.publishCourse(this.courseId).then((resp) => {this.$message({message: "課程發(fā)布成功",type: "success",});//跳轉(zhuǎn)課程列表頁(yè)面this.$router.push({ path: "/course/list" });});}); }五、課程列表
5.1、后端接口
1、實(shí)體類作為模糊查詢條件
@ApiModel(value = "Course查詢對(duì)象", description = "課程查詢對(duì)象封裝") @Data public class CourseQuery implements Serializable {private static final long serialVersionUID = 1L;@ApiModelProperty(value = "課程名稱,模糊查詢")private String title;@ApiModelProperty(value = "發(fā)布狀態(tài) Normal已發(fā)布 Draft未發(fā)布")private String status; }2、控制層
//多條件查詢課程帶分頁(yè) @ApiOperation(value = "多條件查詢課程帶分頁(yè)") @PostMapping("/pageCourseCondition/{page}/{limit}") public R pageCourseCondition(@ApiParam(name = "page", value = "當(dāng)前頁(yè)碼", required = true) @PathVariable Long page,@ApiParam(name = "limit", value = "每頁(yè)記錄數(shù)", required = true) @PathVariable Long limit,@RequestBody(required = false) CourseQuery courseQuery) {//通過(guò)封裝courseQuery對(duì)象來(lái)直接傳遞查詢條件//創(chuàng)建分頁(yè)page對(duì)象Page<EduCourse> pageParam = new Page<>(page, limit);//調(diào)用方法實(shí)現(xiàn)多條件分頁(yè)查詢eduCourseService.pageQuery(pageParam, courseQuery);//獲取查詢到的數(shù)據(jù)List<EduCourse> records = pageParam.getRecords();//獲取總記錄數(shù)long total = pageParam.getTotal();return R.ok().data("total", total).data("data", records); }3、業(yè)務(wù)層
@Override public void pageQuery(Page<EduCourse> pageParam, CourseQuery courseQuery) {QueryWrapper<EduCourse> wrapper = new QueryWrapper<>();String title = courseQuery.getTitle();String status = courseQuery.getStatus();if (!StringUtils.isEmpty(title)) {wrapper.like("title", title);//參數(shù)1：數(shù)據(jù)庫(kù)字段名； 參數(shù)2：模糊查詢的值}if (!StringUtils.isEmpty(status)) {wrapper.eq("status", status);}wrapper.orderByDesc("gmt_create");baseMapper.selectPage(pageParam, wrapper); }5.2、前端實(shí)現(xiàn)
1、頁(yè)面
<template><div><!--多條件查詢表單--><el-form :inline="true" class="demo-form-inline" style="margin-left: 20px; margin-top: 12px"><el-form-item label="課程名稱"><el-input v-model="courseQuery.title" placeholder="請(qǐng)輸入名稱"></el-input></el-form-item><el-form-item label="發(fā)布狀態(tài)"><el-select v-model="courseQuery.status" placeholder="課程狀態(tài)"><el-option label="已發(fā)布" :value="'Normal'"></el-option><el-option label="未發(fā)布" :value="'Draft'"></el-option></el-select></el-form-item><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-item></el-form><!-- 展示表格 --><el-table :data="list" style="width: 100%" height="620" border fit highlight-current-row element-loading-text="數(shù)據(jù)加載中"><el-table-column prop="date" label="序號(hào)" width="70" align="center"><template slot-scope="scope">{{ (page - 1) * limit + scope.$index + 1 }}</template></el-table-column><el-table-column prop="title" label="課程名稱" width="400"></el-table-column><el-table-column label="發(fā)布狀態(tài)" width="80"><template slot-scope="scope">{{ scope.row.status === "Normal" ? "已發(fā)布" : "未發(fā)布" }}</template></el-table-column><el-table-column prop="lessonNum" label="課時(shí)數(shù)" width="100" /><el-table-column prop="gmtCreate" label="添加時(shí)間" width="300" /><el-table-column prop="viewCount" label="瀏覽數(shù)量" width="200" /><el-table-column label="操作" align="center"><template slot-scope="scope"><router-link :to="'/teacher/edit/' + scope.row.id"><el-button type="primary" size="mini" icon="el-icon-edit" plain>編輯基本信息</el-button></router-link><router-link :to="'/teacher/edit/' + scope.row.id"><el-button type="info" size="mini" icon="el-icon-edit" plain>編輯課程大綱</el-button></router-link><el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)" plain>點(diǎn)擊刪除課程</el-button></template></el-table-column></el-table><!--分頁(yè)組件--><el-pagination background layout="prev, pager, next,total,jumper" :total="total" :page-size="limit" style="padding: 30px 0; text-align: center" :current-page="page" @current-change="getList"></el-pagination></div> </template>2、API - course.js
//課程列表多條件分頁(yè)查詢 //page：當(dāng)前頁(yè)，limit：每頁(yè)記錄數(shù)，teacherQuery：條件對(duì)象 getCourseListPage(page, limit, courseQuery) {return request({url: `/eduservice/course/pageCourseCondition/${page}/${limit}`,method: 'post',data: courseQuery}) },3、js
import course from "@/api/teacher/course.js";export default {data() {return {list: null, //查詢之后給接口返回的數(shù)據(jù)裝的集合page: 1, //當(dāng)前頁(yè)limit: 10, //每頁(yè)顯示記錄數(shù)courseQuery: {}, //條件封裝對(duì)象total: 0, //總記錄數(shù)};},created() {this.getList();},methods: {getList(page = 1) {this.page = page;course.getCourseListPage(this.page, this.limit, this.courseQuery).then((resp) => {this.list = resp.data.data;this.total = resp.data.total;}) //請(qǐng)求成功.catch((err) => {console.log(err);}); //請(qǐng)求失敗},//清空方法resetData() {//表單輸入項(xiàng)數(shù)據(jù)清空this.courseQuery = {};//查詢所有課程數(shù)據(jù)this.getList();},}, };六、課程刪除
6.1、后端接口
1、控制層
//課程列表中刪除課程方法 @DeleteMapping("/removeCourseById/{id}") public R removeCourseById(@PathVariable String id) {boolean flag = eduCourseService.removeCourse(id);if (flag) {return R.ok();} else {return R.error();} }2、業(yè)務(wù)層
//刪除課程 @Transactional @Override public boolean removeCourse(String id) {//1、根據(jù)課程id刪除小節(jié)eduVideoService.removeVideoByCourseId(id);//2、根據(jù)課程id刪除章節(jié)部分eduChapterService.removeChapterByCourseId(id);//3、根據(jù)課程id刪除課程描述descriptionService.removeById(id);//4、根據(jù)課程id刪除課程本身boolean flag = this.removeById(id);if (flag) {return true;} else {throw new LaptoyException(20001, "刪除失敗");} }3、刪除小節(jié)
//根據(jù)課程id刪除小節(jié) // TODO 刪除小節(jié)，要?jiǎng)h除對(duì)應(yīng)的視頻文件 @Override public void removeVideoByCourseId(String id) {QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();wrapper.eq("course_id", id);baseMapper.delete(wrapper); }4、刪除章節(jié)
@Override public void removeChapterByCourseId(String id) {QueryWrapper<EduChapter> wrapper = new QueryWrapper<>();wrapper.eq("course_id",id);baseMapper.delete(wrapper); }6.2、前端實(shí)現(xiàn)
1、API - course.js
//刪除課程 removeCourseById(courseId) {return request({url: "/eduservice/course/removeCourseById/" + courseId,method: 'delete',}) }2、方法
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)" plain>點(diǎn)擊刪除課程</el-button><script> // 刪除課程 removeById(id) {this.$confirm("此操作將永久刪除該課程記錄, 是否繼續(xù)?", "提示", {confirmButtonText: "確定",cancelButtonText: "取消",type: "warning",}).then(() => {course.removeCourseById(id).then((resp) => {this.$message({type: "success",message: "刪除成功!",});this.getList();});}); }, </script>七、編輯基本信息及大綱
1、頁(yè)面
<el-table-column label="操作" align="center"><template slot-scope="scope"><router-link :to="'/course/info/' + scope.row.id"><el-button type="primary" size="mini" icon="el-icon-edit" plain>編輯基本信息</el-button></router-link><router-link :to="'/course/chapter/' + scope.row.id"><el-button type="info" size="mini" icon="el-icon-edit" plain>編輯課程大綱</el-button></router-link><el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)" plain>點(diǎn)擊刪除課程</el-button></template> </el-table-column>2、添加路由
{path: 'info/:id',name: 'EduCourseInfoEdit',component: () => import('@/views/edu/course/info.vue'),meta: { title: '編輯課程基本信息', noCache: true },hidden: true }, {path: 'chapter/:id',name: 'EduCourseChapterEdit',component: () => import('@/views/edu/course/chapter.vue'),meta: { title: '編輯課程大綱', noCache: true },hidden: true },八、阿里云視頻點(diǎn)播
8.1、簡(jiǎn)介
視頻點(diǎn)播（ ApsaraVideo for VoD ）是集音視頻采集、編輯、上傳、自動(dòng)化轉(zhuǎn)碼處理、媒體資源管理、分發(fā)加速于一體的一站式音視頻點(diǎn)播解決方案。
開(kāi)通服務(wù)-按流量計(jì)費(fèi)
8.2、使用
1、開(kāi)啟 存儲(chǔ)管理
2、添加 轉(zhuǎn)碼模板組
3、上傳視頻
九、使用服務(wù)端SDK
9.1、簡(jiǎn)介
1、簡(jiǎn)介
- sdk的方式將api進(jìn)行了進(jìn)一步的封裝，不用自己創(chuàng)建工具類。
- 我們可以基于服務(wù)端SDK編寫代碼來(lái)調(diào)用點(diǎn)播API，實(shí)現(xiàn)對(duì)點(diǎn)播產(chǎn)品和服務(wù)的快速操作
2、功能介紹
- SDK封裝了對(duì)API的調(diào)用請(qǐng)求和響應(yīng)，避免自行計(jì)算較為繁瑣的 API簽名。
- 支持所有點(diǎn)播服務(wù)的API，并提供了相應(yīng)的示例代碼。
- 支持7種開(kāi)發(fā)語(yǔ)言，包括：Java、Python、PHP、.NET、Node.js、Go、C/C++。
- 通常在發(fā)布新的API后，我們會(huì)及時(shí)同步更新SDK，所以即便您沒(méi)有找到對(duì)應(yīng)API的示例代碼，也可以參考舊的示例自行實(shí)現(xiàn)調(diào)用。
9.2、獲取視頻
1、在 service模塊 新建微服務(wù)模塊 service_vod
2、POM
<dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-core</artifactId> </dependency> <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId> </dependency> <dependency><groupId>com.aliyun</groupId><artifactId>aliyun-java-sdk-vod</artifactId> </dependency> <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId> </dependency> <dependency><groupId>org.json</groupId><artifactId>json</artifactId> </dependency> <dependency><groupId>joda-time</groupId><artifactId>joda-time</artifactId> </dependency>3、測(cè)試獲取視頻播放地
//初始化類 public class InitObject {public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {String regionId = "cn-shanghai"; // 點(diǎn)播服務(wù)接入?yún)^(qū)域DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);DefaultAcsClient client = new DefaultAcsClient(profile);return client;}public static void main(String[] args) throws ClientException {//1、根據(jù)視頻id獲取視頻播放地址//創(chuàng)建初始化對(duì)象DefaultAcsClient cl = InitObject.initVodClient("LTAI5tL5FrVJBuQadij4KRvJ", "Xs7dHUvxCdHLd0K5iFK7NWEbdUN7GG");//創(chuàng)建獲取視頻地址request對(duì)象和response對(duì)象GetPlayInfoResponse response = new GetPlayInfoResponse();GetPlayInfoRequest request = new GetPlayInfoRequest();//向request對(duì)象設(shè)置視頻id值request.setVideoId("1a383ac7aa7f4b8197714ca6f886e5be");//調(diào)用初始化對(duì)象里面的方法傳遞request，獲取數(shù)據(jù)response = cl.getAcsResponse(request);List<GetPlayInfoResponse.PlayInfo> playInfoList = response.getPlayInfoList();//播放地址for (GetPlayInfoResponse.PlayInfo playInfo : playInfoList) {System.out.print("PlayInfo.PlayURL = " + playInfo.getPlayURL() + "\n");}//Base信息System.out.print("VideoBase.Title = " + response.getVideoBase().getTitle() + "\n");//VideoBase.Title = 6 - What If I Want to Move Faster.mp4} } PlayInfo.PlayURL = https://outin-327a9fa3dcae11ecbc2400163e1c8dba.oss-cn-shanghai.aliyuncs.com/sv/60fc3bbf-180ff24e597/60fc3bbf-180ff24e597.mp4?Expires=1653551691&OSSAccessKeyId=LTAIrkwb21KyGjJl&Signature=h0s4mbCbwFd8797gs1KXWxJAUpU%3D VideoBase.Title = 視頻點(diǎn)播控制臺(tái) - Google Chrome 2022-05-25 21-26-51.mp43、測(cè)試獲取視頻播放憑證（加密視頻）
public static void main(String[] args) throws ClientException {//創(chuàng)建初始化對(duì)象DefaultAcsClient cl = InitObject.initVodClient("LTAI5tL5FrVJBuQadij4KRvJ", "Xs7dHUvxCdHLd0K5iFK7NWEbdUN7GG");//創(chuàng)建獲取視頻地址request對(duì)象和response對(duì)象GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();//向request對(duì)象設(shè)置視頻id值request.setVideoId("1a383ac7aa7f4b8197714ca6f886e5be");GetVideoPlayAuthResponse response = cl.getAcsResponse(request);//播放憑證System.out.print("PlayAuth = " + response.getPlayAuth() + "\n");//VideoMeta信息System.out.print("VideoMeta.Title = " + response.getVideoMeta().getTitle() + "\n"); } PlayAuth = eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWJESGZqVG40eHA0cUM1ZWw3WTFuay9kZUZHdWJmOW1qejJJSDlJZEhWb0FPOGZ2dlUwbTJ0WTdQc1psck1xR3NFZUhoZWJONUlwdDg0T29GMzlKcExGc3QySjZyOEpqc1VZcDVBQTdFYXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRTF5R21DQ2QvWDRvZ3VSUDF6N0VwTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHphRUpHZ1RTNExmWldJbGNUS0FNOVd1MlBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZDE0Sk9CS2cxMUtVR29BQlUrY0Q3SXpmeDIvSHJmNXA2cWdSa2UvdDNaMjFPUXF1NkRsSkV3VnpPL2poWngva3JNNitGNWlEK25kT1JHQitZbDJtcTN6SlBnclQxNVdveE5QdXJndy9xbWNib1BWR3dtV01qa3RKOXo0YS90TnA0SWNLRGxKQStvOWFvOWdLbUpPZWJFMnZXT1FicE1LbGFmOER6Q1JCMTl5NmZDUi9qWDFObndub3RTQT0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJLenVKNUlCVmRIc0E2eTNlTXFDbS9vYXVOMFZwVFBmYkU0L1VaUUt5c0dhVzc3MjRTWEZQejVyUHlyOGRSN0VaZXVFenpEdndDcDRIY2NoZFlkMjdMVy8yK0R2S1lySXRsVGxlTCtUa0lsZz1cIixcIkNhbGxlclwiOlwiNldQZVY4MkttMDlUbGNGUzVWeDB0SjUxY2pCWEVYb2FuZEk4dEU4OENjWT1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjItMDUtMjZUMDc6MDQ6NTZaXCIsXCJNZWRpYUlkXCI6XCIxYTM4M2FjN2FhN2Y0YjgxOTc3MTRjYTZmODg2ZTViZVwiLFwiU2lnbmF0dXJlXCI6XCI3Vjhza3RPTnRIK1NBZGV0bVFWRk9CU29vRmc9XCJ9IiwiVmlkZW9NZXRhIjp7IlN0YXR1cyI6Ik5vcm1hbCIsIlZpZGVvSWQiOiIxYTM4M2FjN2FhN2Y0YjgxOTc3MTRjYTZmODg2ZTViZSIsIlRpdGxlIjoi6KeG6aKR54K55pKt5o6n5Yi25Y+wIC0gR29vZ2xlIENocm9tZSAyMDIyLTA1LTI1IDIxLTI2LTUxLm1wNCIsIkNvdmVyVVJMIjoiaHR0cDovL291dGluLTMyN2E5ZmEzZGNhZTExZWNiYzI0MDAxNjNlMWM4ZGJhLm9zcy1jbi1zaGFuZ2hhaS5hbGl5dW5jcy5jb20vMWEzODNhYzdhYTdmNGI4MTk3NzE0Y2E2Zjg4NmU1YmUvc25hcHNob3RzLzNmOTg0ZTE0YjU5OTQxNTM5ODhmNDdiMGI1MDQxMDZhLTAwMDAxLmpwZz9FeHBpcmVzPTE2NTM1NTIxOTYmT1NTQWNjZXNzS2V5SWQ9TFRBSXJrd2IyMUt5R2pKbCZTaWduYXR1cmU9c040UEljem9UbUFPSFJzaHhRTXhMd3pxc09vJTNEIiwiRHVyYXRpb24iOjUuMzE3N30sIkFjY2Vzc0tleUlkIjoiU1RTLk5VdlZCZ3JTSFViUnh4aTJ5anlualZyVngiLCJBY2Nlc3NLZXlTZWNyZXQiOiI3dzRnaWtuSEFlbndCTVYxN2hqbXNqekw4cUZIdlRmZ0tHNjFtWDJ1cVdKcCIsIlJlZ2lvbiI6ImNuLXNoYW5naGFpIiwiQ3VzdG9tZXJJZCI6MTk2MzMzNzIxMTEyMTk2NH0= VideoMeta.Title = 視頻點(diǎn)播控制臺(tái) - Google Chrome 2022-05-25 21-26-51.mp49.3、上傳視頻
1、POM - 默認(rèn)找不到該依賴
<dependency><groupId>com.aliyun</groupId><artifactId>aliyun-sdk-vod-upload</artifactId> </dependency>2、將資料的 5-lib/aliyun-java-vod-upload-1.4.11.jar 放到maven倉(cāng)庫(kù)bin目錄下并執(zhí)行如下命令安裝上述依賴
mvn install:install-file -DgroupId=com.aliyun -DartifactId=aliyun-sdk-vod-upload -Dversion=1.4.11 -Dpackaging=jar -Dfile=aliyun-java-vod-upload-1.4.11.jar3、測(cè)試
@Test public void testFileUpload() {String accessKeyId = "LTAI5tL5FrVJBuQadij4KRvJ";String accessKeySecret = "Xs7dHUvxCdHLd0K5iFK7NWEbdUN7GG";String title = "My Upload Video"; //上傳之后文件的名稱String fileName = "C:\\Users\\lapto\\Desktop\\myVideo.mp4"; //本地文件的路徑和名稱UploadVideoRequest request = new UploadVideoRequest(accessKeyId, accessKeySecret, title, fileName);/* 可指定分片上傳時(shí)每個(gè)分片的大小，默認(rèn)為2M字節(jié) */request.setPartSize(2 * 1024 * 1024L);/* 可指定分片上傳時(shí)的并發(fā)線程數(shù)，默認(rèn)為1，(注：該配置會(huì)占用服務(wù)器CPU資源，需根據(jù)服務(wù)器情況指定）*/request.setTaskNum(1);UploadVideoImpl uploader = new UploadVideoImpl();UploadVideoResponse response = uploader.uploadVideo(request);if (response.isSuccess()) {System.out.print("VideoId=" + response.getVideoId() + "\n"); //獲取到上傳視頻的id} else {/* 如果設(shè)置回調(diào)URL無(wú)效，不影響視頻上傳，可以返回VideoId同時(shí)會(huì)返回錯(cuò)誤碼。其他情況上傳失敗時(shí)，VideoId為空，此時(shí)需要根據(jù)返回錯(cuò)誤碼分析具體錯(cuò)誤原因 */System.out.print("VideoId=" + response.getVideoId() + "\n");System.out.print("ErrorCode=" + response.getCode() + "\n");System.out.print("ErrorMessage=" + response.getMessage() + "\n");} }十、視頻點(diǎn)播微服務(wù)
10.1、后端接口
1、service_vod微服務(wù) 主啟動(dòng)類
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class) @ComponentScan(basePackages = {"com.laptoy"}) //用于掃描swagger public class Service_vod_Main8003 {public static void main(String[] args) {SpringApplication.run(Service_vod_Main8003.class, args);} }2、YML
# 服務(wù)端口號(hào) server.port=8003 # 服務(wù)名 spring.application.name=service-vod # nacos注冊(cè)中心 spring.cloud.nacos.discovery.server-addr=120.76.55.55:8848 # 環(huán)境設(shè)置 dev test prod spring.profiles.active=dev # 最大上傳單個(gè)文件大小：默認(rèn)1M spring.servlet.multipart.max-file-size=1024MB # 最大置總上傳的數(shù)據(jù)大小 ：默認(rèn)10M spring.servlet.multipart.max-request-size=1024MB # 阿里云 vod aliyun.vod.file.keyid=LTAI5tL5FrVJBuQadij4KRvJ aliyun.vod.file.keysecret=Xs7dHUvxCdHLd0K5iFK7NWEbdUN7GG3、控制層
@RestController @CrossOrigin @RequestMapping("/eduvod/video") public class VodController {@Autowiredprivate VodService vodService;//上傳視頻到阿里云@PostMapping("/uploadAliyunVideo")public R uploadAliyunVideo(MultipartFile file) {//返回上傳視頻的idString videoId = vodService.uploadVideoAliyun(file);return R.ok().data("data", videoId);}}4、業(yè)務(wù)層
@Service public class VodServiceImpl implements VodService {@Value("${aliyun.vod.file.keyid}")private String accessKeyId;@Value("${aliyun.vod.file.keysecret}")private String accessKeySecret;@Overridepublic String uploadVideoAliyun(MultipartFile file) {try {//fileName：上傳文件原始名稱String fileName = file.getOriginalFilename();//title：上傳之后顯示名稱String title = fileName.substring(0, fileName.lastIndexOf("."));//inputStream：上傳文件的輸入流InputStream inputStream = file.getInputStream();UploadStreamRequest request = new UploadStreamRequest(accessKeyId, accessKeySecret, title, fileName, inputStream);UploadVideoImpl uploader = new UploadVideoImpl();UploadStreamResponse response = uploader.uploadStream(request);System.out.print("RequestId=" + response.getRequestId() + "\n"); //請(qǐng)求視頻點(diǎn)播服務(wù)的請(qǐng)求IDString videoId = null;if (response.isSuccess()) {videoId = response.getVideoId();} else { //如果設(shè)置回調(diào)URL無(wú)效，不影響視頻上傳，可以返回VideoId同時(shí)會(huì)返回錯(cuò)誤碼。其他情況上傳失敗時(shí)，VideoId為空，此時(shí)需要根據(jù)返回錯(cuò)誤碼分析具體錯(cuò)誤原因videoId = response.getVideoId();}return videoId;} catch (Exception e) {e.printStackTrace();return null;}}}5、測(cè)試
10.2、前端實(shí)現(xiàn)
1、nginx.conf 添加配置并重啟 nginx
http { <--文件上傳最大大小 --> client_max_body_size 1024m;server {listen 9001;server_name localhost;...location ~ /eduvod/ {proxy_pass http://localhost:8003;}} }2、頁(yè)面
<el-form-item label="上傳視頻"><el-upload class="upload-demo" :on-success="handleVodUploadSuccess" :before-remove="beforeVodRemove" :file-list="fileList" :action="BASE_API + '/eduvod/video/uploadAliyunVideo'" :limit="1" ><el-button size="small" type="primary">上傳視頻</el-button><el-tooltip placement="right-end"><!-- 隱藏提示信息 --><div slot="content">最大支持1G,<br />支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br />GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br />MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br />SWF、TS、VOB、WMV、WEBM 等視頻格式上傳</div><i class="el-icon-question" /></el-tooltip></el-upload> </el-form-item>3、js
data() {return {video: {sort: 0,title: "",free: "",videoSourceId: ""},fileList: [], //上傳文件列表BASE_API: process.env.BASE_API, // 接口API地址}; }, methods: {// 上傳成功執(zhí)行方法handleVodUploadSuccess(response, file, fileList) {this.video.videoSourceId = response.data.data},beforeVodRemove(file, fileList) {return this.$confirm(`確定移除 ${file.name}?`);}, }10.3、視頻刪除
1、控制層
// 根據(jù)視頻id刪除阿里云視頻 @DeleteMapping("/removeAliyunVideoById/{id}") public R removeAliyunVideoById(@PathVariable String id) {vodService.removeAliyunVideoById(id);return R.ok(); }2、業(yè)務(wù)層
// 根據(jù)id刪除阿里云視頻 @Override public void removeAliyunVideoById(String id) {try {DefaultAcsClient client = initVodClient(accessKeyId, accessKeySecret);DeleteVideoRequest request = new DeleteVideoRequest();request.setVideoIds(id);DeleteVideoResponse response = client.getAcsResponse(request);System.out.println("RequestId = " + response.getRequestId() + "\n");} catch (ClientException e) {throw new LaptoyException(20001, "視頻刪除失敗");} }public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {String regionId = "cn-shanghai"; // 點(diǎn)播服務(wù)接入?yún)^(qū)域DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);DefaultAcsClient client = new DefaultAcsClient(profile);return client; }總結(jié)
以上是生活随笔為你收集整理的2022年最新《谷粒学院开发教程》：5 - 章节管理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 最简单的基于FFmpeg的解码器
- 下一篇： 编译error: no acceptab