谷粒学院
【课程列表】功能
一、课程列表分页显示
参考讲师列表部分快速完成
1、后端部分
- EduCourseController
//课程列表 基本实现
@GetMapping("/getCourseList")
public R getCourseList(){
List<EduCourse> list = eduCourseService.list(null);
return R.ok().data("list",list);
}
//多条件查询课程带分页
@ApiOperation(value = "多条件查询课程带分页")
@PostMapping("/pageCourseCondition/{page}/{limit}")
public R pageCourseCondition(@ApiParam(name = "page", value = "当前页码", required = true)@PathVariable Long page,
@ApiParam(name = "limit", value = "每页记录数", required = true)@PathVariable Long limit,
@RequestBody(required = false) CourseQuery courseQuery){
//通过封装courseQuery对象来直接传递查询条件
//创建分页page对象
Page<EduCourse> pageParam = new Page<>(page, limit);
//调用方法实现多条件分页查询
eduCourseService.pageQuery(pageParam,courseQuery);
//获取查询到的数据
List<EduCourse> records = pageParam.getRecords();
//获取总记录数
long total = pageParam.getTotal();
return R.ok().data("total",total).data("rows",records);
}
- EduCourseService
//多条件查询讲师带分页
void pageQuery(Page<EduCourse> pageParam, CourseQuery courseQuery);
- EduCourseServiceImpl
@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);//参数1:数据库字段名; 参数2:模糊查询的值
}
//判断是否传入状态
if (!StringUtils.isEmpty(status)) {
//构造条件
wrapper.eq("status", status);
}
//排序
wrapper.orderByDesc("gmt_create");
//带上门判断后的条件进行分页查询
baseMapper.selectPage(pageParam, wrapper);
}
- com.achang.eduservice.entity.vo.CourseQuery
@ApiModel(value = "Course查询对象", description = "课程查询对象封装")
@Data
public class CourseQuery implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "课程名称,模糊查询")
private String title;
@ApiModelProperty(value = "发布状态 Normal已发布 Draft未发布")
private String status;
}
2、前端部分
- api方法
//课程列表多条件分页查询
//page:当前页,limit:每页记录数,teacherQuery:条件对象
getCourseListPage(page, limit, courseQuery) {
return request({
url: `/eduservice/edu-course/pageCourseCondition/${
page}/${
limit}`,
method: 'post',
//teacherQuery条件对象,如果后端使用RequestBody获取数据
//data表示把对象转换成json对象进行传递到接口里
data: courseQuery
})
},
//课程列表数据查询
getCourseList() {
return request({
url: "/eduservice/edu-course/getCourseList/",
method: 'get',
})
}
- 导入api方法
//引入要调用的方法,teacher.js文件
import course from "@/api/teacher/course.js";
- 页面列表页面模版
<!--数据显示的表格-->
<el-table
:data="list"
style="width: 100%"
border
fit
highlight-current-row
element-loading-text="数据加载中"
>
<el-table-column prop="date" label="序号" 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="80">
</el-table-column>
<el-table-column label="发布状态" width="80">
<template slot-scope="scope">
{
{ scope.row.status === "Normal" ? "已发布" : "未发布" }}
</template>
</el-table-column>
<el-table-column prop="lessonNum" label="课时数" width="200" />
<el-table-column prop="gmtCreate" label="添加时间" width="300" />
<el-table-column prop="viewCount" label="浏览数量" width="500" />
<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"
>编辑课程基本信息</el-button
>
</router-link>
<router-link :to="'/teacher/edit/' + scope.row.id">
<el-button type="info" size="mini" icon="el-icon-edit"
>编辑课程大纲</el-button
>
</router-link>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeById(scope.row.id)"
>课程删除</el-button
>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<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>
- js代码
export default {
//写核心代码位置
data() {
//1、定义变量和初始值
return {
list: null, //查询之后给接口返回的数据装的集合
page: 1, //当前页
limit: 10, //每页显示记录数
courseQuery: {
}, //条件封装对象
total: 0, //总记录数
};
},
created() {
//页面渲染之前执行,调用method定义的方法
//调用
this.getList();
},
methods: {
//调用具体的方法,调用teacher.js定义的方法
//课程列表的方法
getList(page = 1) {
this.page = page;
course
.getCourseListPage(this.page, this.limit, this.courseQuery)
.then((resp) => {
//resp接口返回的数据
this.list = resp.data.rows;
this.total = resp.data.total;
}) //请求成功
.catch((err) => {
console.log(err);
}); //请求失败
},
//清空方法
resetData() {
//表单输入项数据清空
this.courseQuery = {
};
//查询所有课程数据
this.getList();
},
},
};
</script>
- 效果
二、课程列表中的课程删除
1、后端部分
编写后端接口
- EduCourseController
//课程列表中删除课程方法
@DeleteMapping("/removeCourseById/{id}")
public R removeCourseById(@PathVariable String id){
boolean flag = eduCourseService.removeCourse(id);
if (flag){
return R.ok();
}else {
return R.error();
}
}
- EduCourseService
//删除课程
boolean removeCourse(String id);
- EduVideoServiceImpl
@Service
public class EduVideoServiceImpl extends ServiceImpl<EduVideoMapper, EduVideo> implements EduVideoService {
//根据课程id删除小节
// TODO 删除小节,要删除对应的视频文件
@Override
public void removeVideoByCourseId(String id) {
QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();
wrapper.eq("course_id",id);
baseMapper.delete(wrapper);
}
}
- EduChapterService
void removeChapterByCourseId(String id);
- EduChapterServiceImpl
@Override
public void removeChapterByCourseId(String id) {
QueryWrapper<EduChapter> wrapper = new QueryWrapper<>();
wrapper.eq("course_id",id);
baseMapper.delete(wrapper);
}
- EduCourseServiceImpl
//删除课程
@Override
public boolean removeCourse(String id) {
//1、根据课程id删除小节
eduVideoService.removeVideoByCourseId(id);
//2、根据课程id删除章节部分
eduChapterService.removeChapterByCourseId(id);
//3、根据课程id删除课程描述
eduCourseDescriptionService.removeById(id);
//4、根据课程id删除课程本身
int result = baseMapper.deleteById(id);
if (result>=1){
return true;
}else {
throw new AchangException(20001,"删除失败");
}
}
- 测试
- 查看数据库
课程id为101的全部都删除了
2、前端部分
- 编写api方法
guli-admin\src\api\teacher\course.js
//课程列表数据查询
removeCourseById(courseId){
return request({
url: "/eduservice/edu-course/removeCourseById/"+courseId,
method: 'get',
})
}
- 引入api
guli-admin\src\views\edu\course\list.vue
//引入要调用的方法,course.js文件
import course from "@/api/teacher/course.js";
- 调用方法
removeCourseById(id) {
this.$confirm("此操作将永久删除该课程记录, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
//点击确定,执行then方法
course.removeCourseById(id).then((resp) => {
//删除成功
//提示信息
this.$message({
type: "success",
message: "删除成功!",
});
//刷新页面
this.getList();
});
});
}
- 效果测试
- 前端导航栏
<!--多条件查询表单-->
<el-form
:inline="true"
class="demo-form-inline"
style="margin-left: 20px; margin-top: 12px"
>
<el-form-item label="课程名称">
<el-input
v-model="courseQuery. "
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="发布状态">
<el-select v-model="courseQuery.status" placeholder="课程状态">
<el-option label="已发布" :value="'Normal'"></el-option>
<el-option label="未发布" :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>
- 效果
三、课程列表中的编辑课程基本信息、编辑课程大纲功能
- 前端
<router-link :to="'/course/info/' + scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit"
>编辑课程基本信息</el-button
>
</router-link>
<router-link :to="'/course/chapter/' + scope.row.id">
<el-button type="info" size="mini" icon="el-icon-edit"
>编辑课程大纲</el-button
>
</router-link>
- 修改路由
- guli-admin\src\views\edu\course\chapter.vue
根据连接中是否有id值来决定是否回显数据
- guli-admin\src\views\edu\course\info.vue
阿里云视频点播
一、介绍
参考文章:
https://blog.csdn.net/qq_33857573/article/details/79564255
视频点播( ApsaraVideo for VoD )是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、分
发加速于一体的一站式音视频点播解决方案。
二、开通视频点播云平台
资费说明:
https://www.aliyun.com/price/product?spm=a2c4g.11186623.2.12.7fbd59b9vmXVN6#/vod/detail
- 后付费
- 套餐包
- 欠费说明
- 计费案例:https://help.aliyun.com/document_detail/64032.html?spm=a2c4g.11186623.4.3.363db1bcfdvxB5
三、整体流程
四、视频点播服务的基本使用
完整的参考文档:
https://help.aliyun.com/product/29932.html?spm=a2c4g.11186623.6.540.3c356a58OEmVZJ
1 、设置转码格式
选择全局设置 > 转码设置,单击添加转码模板组。
在视频转码模板组页面,根据业务需求选择封装格式和清晰度。
或直接将已有的模板设置为默认即可
2 、分类管理
选择全局设置 > 分类管理
3 、上传视频文件
选择媒资库 > 音视频,单击上传音视频
4 、配置域名
音视频上传完成后,必须配一个已备案的域名,并完成 CNAME 绑定
得到 CNAME
在购买域名的服务商处的管理控制台配置域名解析
5 、在控制台查看视频
此时视频可以在阿里云控制台播放
6 、获取 web 播放器代码
使用服务端SDK
一、服务端SDK
1、简介
sdk的方式将api进行了进一步的封装,不用自己创建工具类。
我们可以基于服务端SDK编写代码来调用点播API,实现对点播产品和服务的快速操作
2、功能介绍
-
SDK封装了对API的调用请求和响应,避免自行计算较为繁琐的 API签名。
-
支持所有点播服务的API,并提供了相应的示例代码。
-
支持7种开发语言,包括:Java、Python、PHP、.NET、Node.js、Go、C/C++。
-
通常在发布新的API后,我们会及时同步更新SDK,所以即便您没有找到对应API的示例代码,也可以参考旧的示例自行实现调用。
二、使用SDK
0、创建环境
- 在service下创建子模块service_vod引入下面相关依赖,因为在父工程guli_parent已经规定了版本号
<dependencies>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-vod</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
</dependency>
</dependencies>
1、安装
参考文档:https://help.aliyun.com/document_detail/57756.html
添加maven仓库的配置和依赖到pom
<repositories>
<repository>
<id>sonatype-nexus-staging</id>
<name>Sonatype Nexus Staging</name>
<url>https://oss.sonatype.org/service/local/staging/deploy/maven2/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
添加Jar包依赖
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.5.1</version>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-vod</artifactId>
<version>2.15.11</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
aliyun-java-sdk-core
的版本4.4.5及以上。aliyun-java-sdk-vod
的版本,请参见服务端SDK发布历史,首段的Version
即为最新的版本号。
2、初始化
参考文档:https://help.aliyun.com/document_detail/61062.html
根据文档示例创建 com.achang.vodtest.InitObject
//初始化类
public class InitObject {
public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
String regionId = "cn-shanghai"; // 点播服务接入区域
DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
DefaultAcsClient client = new DefaultAcsClient(profile);
return client;
}
}
3、测试功能
获取视频播放地址:
public static void main(String[] args) throws ClientException {
//1、根据视频id获取视频播放地址
//创建初始化对象
DefaultAcsClient cl = InitObject.initVodClient("LTAI4GBABS7Sq8MLf2RNwLuu", "ynfsD31FLdcRoQVFSIdHP7AeoKaf4o");
//创建获取视频地址request对象和response对象
GetPlayInfoResponse response = new GetPlayInfoResponse();
GetPlayInfoRequest request = new GetPlayInfoRequest();
//向request对象设置视频id值
request.setVideoId("e9102d65ba3649f0b9fc8679cc5bda42");
//调用初始化对象里面的方法传递request,获取数据
response = cl.getAcsResponse(request);
List<GetPlayInfoResponse.PlayInfo> playInfoList = response.getPlayInfoList();
//播放地址
for (GetPlayInfoResponse.PlayInfo playInfo : playInfoList) {
System.out.print("PlayInfo.PlayURL = " + playInfo.getPlayURL() + "\n");
//PlayInfo.PlayURL = https://outin-5e688ec47b2c11ebb00500163e06123c.oss-cn-shanghai.aliyuncs.com/sv/52a57879-177f1fd5033/52a57879-177f1fd5033.mp4?Expires=1614680252&OSSAccessKeyId=LTAIrkwb21KyGjJl&Signature=FPlVfGbIDVGuvR3W8f2K4QcpATw%3D
}
//Base信息
System.out.print("VideoBase.Title = " + response.getVideoBase().getTitle() + "\n");//VideoBase.Title = 6 - What If I Want to Move Faster.mp4
}
获取视频播放凭证:
@Test
public void test1() throws ClientException {
//创建初始化对象
DefaultAcsClient cl = InitObject.initVodClient("LTAI4GBABS7Sq8MLf2RNwLuu", "ynfsD31FLdcRoQVFSIdHP7AeoKaf4o");
//创建获取视频地址request对象和response对象
GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
//向request对象设置视频id值
request.setVideoId("e9102d65ba3649f0b9fc8679cc5bda42");
GetVideoPlayAuthResponse response = cl.getAcsResponse(request);
//播放凭证
System.out.print("PlayAuth = " + response.getPlayAuth() + "\n");
//VideoMeta信息
System.out.print("VideoMeta.Title = " + response.getVideoMeta().getTitle() + "\n");
}
使用服务端SDK
参考文档:https://help.aliyun.com/document_detail/53406.html
一、安装SDK
1、配置pom
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
<version>4.5.1</version>
</dependency>
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-vod</artifactId>
<version>2.15.11</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20170516</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.2</version>
</dependency>
2、安装非开源jar包
在本地Maven仓库中安装jar包:
下载视频上传SDK,解压,命令行进入lib目录,执行以下代码
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.jar
然后在pom中引入jar包
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-sdk-vod-upload</artifactId>
<version>1.4.11</version>
</dependency>
二、测试
@Test
public void testFileUpload(){
String accessKeyId = "LTAI4GBABS7Sq8MLf2RNwLuu";
String accessKeySecret = "ynfsD31FLdcRoQVFSIdHP7AeoKaf4o";
String title = "6 - What If I Want to Move Faster"; //上传之后文件的名称
String fileName = "C:\\Users\\PePe\\Desktop\\学习\\博客\\学习资料\\21、谷粒学院 -尚硅谷\\在线教育--谷粒学院\\1-阿里云上传测试视频\\6 - What If I Want to Move Faster.mp4"; //本地文件的路径和名称
UploadVideoRequest request = new UploadVideoRequest(accessKeyId, accessKeySecret, title, fileName);
/* 可指定分片上传时每个分片的大小,默认为2M字节 */
request.setPartSize(2 * 1024 * 1024L);
/* 可指定分片上传时的并发线程数,默认为1,(注:该配置会占用服务器CPU资源,需根据服务器情况指定)*/
request.setTaskNum(1);
UploadVideoImpl uploader = new UploadVideoImpl();
UploadVideoResponse response = uploader.uploadVideo(request);
if (response.isSuccess()) {
System.out.print("VideoId=" + response.getVideoId() + "\n"); //获取到上传视频的id
} else {
/* 如果设置回调URL无效,不影响视频上传,可以返回VideoId同时会返回错误码。其他情况上传失败时,VideoId为空,此时需要根据返回错误码分析具体错误原因 */
System.out.print("VideoId=" + response.getVideoId() + "\n");
System.out.print("ErrorCode=" + response.getCode() + "\n");
System.out.print("ErrorMessage=" + response.getMessage() + "\n");
}
}
视频点播微服务功能
一、后端部分–【创建视频点播微服务】
1、创建微服务模块
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>com.aliyun</groupId>
<artifactId>aliyun-sdk-vod-upload</artifactId>
</dependency>
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
</dependency>
3、主启动类
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@ComponentScan(basePackages = {
"com.achang"}) //用于扫描swagger
public class Service_vod_Main8003 {
public static void main(String[] args) {
SpringApplication.run(Service_vod_Main8003.class,args);
}
}
4、VodController
@RestController
@CrossOrigin
@RequestMapping("/eduvod/video")
public class VodController {
@Autowired
private VodService vodService;
//上传视频到阿里云
@PostMapping("/uploadAliyunVideo")
public R uploadAliyunVideo(MultipartFile file){
//返回上传视频的id
String videoId = vodService.uploadVideoAliyun(file);
return R.ok().data("videoId",videoId);
}
}
5、service
- service接口
public interface VodService {
String uploadVideoAliyun(MultipartFile file);
}
- serviceImpl
@Service
public class VodServiceImpl implements VodService {
@Override
public String uploadVideoAliyun(MultipartFile file) {
try {
//accessKeyId,accessKeySecret
//fileName:上传文件原始名称
String fileName = file.getOriginalFilename();
//title:上传之后显示名称
String title = fileName.substring(0,fileName.lastIndexOf("."));
//inputStream:上传文件的输入流
InputStream inputStream = file.getInputStream();
UploadStreamRequest request = new UploadStreamRequest(ConstantVodUtils.ACCESSKEY_ID
, ConstantVodUtils.ACCESSKEY_SECRET
, title, fileName
, inputStream);
UploadVideoImpl uploader = new UploadVideoImpl();
UploadStreamResponse response = uploader.uploadStream(request);
System.out.print("RequestId=" + response.getRequestId() + "\n"); //请求视频点播服务的请求ID
String videoId = null;
if (response.isSuccess()) {
videoId = response.getVideoId();
} else {
//如果设置回调URL无效,不影响视频上传,可以返回VideoId同时会返回错误码。其他情况上传失败时,VideoId为空,此时需要根据返回错误码分析具体错误原因
videoId = response.getVideoId();
}
return videoId;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}
6、ConstantVodUtils
用来读取application.properties里面的值,并封装
@Component
public class ConstantVodUtils implements InitializingBean {
@Value("${aliyun.vod.file.keyid}")
private String accessKeyId;
@Value("${aliyun.vod.file.keysecret}")
private String accessKeySecret;
public static String ACCESSKEY_ID;
public static String ACCESSKEY_SECRET;
@Override
public void afterPropertiesSet() throws Exception {
ACCESSKEY_ID = this.accessKeyId;
ACCESSKEY_SECRET = this.accessKeySecret;
}
}
7、application.properites
# 服务端口号
server.port=8003
# 服务名
spring.application.name=service_vod
# 环境设置 dev test prod
spring.profiles.active=dev
# 最大上传单个文件大小:默认1M
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小 :默认10M
spring.servlet.multipart.max-request-size=1024MB
# 阿里云 vod
aliyun.vod.file.keyid=LTAI4GBABS7Sq8MLf2RNwLuu
aliyun.vod.file.keysecret=ynfsD31FLdcRoQVFSIdHP7AeoKaf4o
8、测试
通过swagger测试
访问:http://localhost:8003/swagger-ui.html
二、前端部分
- 数据定义
fileList: [], //上传文件列表
BASE_API: process.env.BASE_API, // 接口API地址
- 整合上传组件
<el-form-item label="上传视频">
<el-upload
:on-success="handleVodUploadSuccess"
:on-remove="handleVodRemove"
:before-remove="beforeVodRemove"
:on-exceed="handleUploadExceed"
:file-list="fileList"
:action="BASE_API + '/admin/vod/video/upload'"
:limit="1"
class="upload-demo"
>
<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>
- 方法定义
//上传成功执行方法
handleVodUploadSuccess(response,file,fileList){
this.video.videoSourceId = response.data.videoId
},
beforeVodRemove(file, fileList){
return this.$confirm(`确定移除 ${
file.name }?`);
},
三、配置nginx
配置nginx上传文件大小,否则上传时会有 413 (Request Entity Too Large)
异常
打开nginx主配置文件nginx.conf,找到http{},添加
client_max_body_size 1024m;
- 添加转发链接,根据后端端口和接口地址
location ~ /eduvod/ {
proxy_pass http://localhost:8003;
}
- 重启nginx,所在nginx目录
# 关闭nginx
nginx.exe -s -stop
# 启动nginx
nginx.exe
四、测试
删除云端视频
文档:服务端SDK->Java SDK->媒资管理
https://help.aliyun.com/document_detail/61065.html?spm=a2c4g.11186623.6.831.654b3815cIxvma#h2–div-id-deletevideo-div-7
一、后端部分
- 初始化对象方法
com.achang.voe.Utils.InitObject
//初始化类
public class InitObject {
public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
String regionId = "cn-shanghai"; // 点播服务接入区域
DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
DefaultAcsClient client = new DefaultAcsClient(profile);
return client;
}
}
- com.achang.voe.Utils.ConstantVodUtils
@Component
public class ConstantVodUtils implements InitializingBean {
@Value("${aliyun.vod.file.keyid}")
private String accessKeyId;
@Value("${aliyun.vod.file.keysecret}")
private String accessKeySecret;
public static String ACCESSKEY_ID;
public static String ACCESSKEY_SECRET;
@Override
public void afterPropertiesSet() throws Exception {
ACCESSKEY_ID = this.accessKeyId;
ACCESSKEY_SECRET = this.accessKeySecret;
}
}
- controller
//根据视频id删除阿里云视频
@DeleteMapping("/removeAliyunVideoById/{id}")
public R removeAliyunVideoById(@PathVariable String id){
vodService.removeAliyunVideoById(id);
return R.ok();
}
- service
接口
void removeAliyunVideoById(String id);
Impl
//根据id删除阿里云视频
@Override
public void removeAliyunVideoById(String id) {
try {
DefaultAcsClient client = InitObject.initVodClient(ConstantVodUtils.ACCESSKEY_ID, ConstantVodUtils.ACCESSKEY_SECRET);
DeleteVideoRequest request = new DeleteVideoRequest();
request.setVideoIds(id);
DeleteVideoResponse response = client.getAcsResponse(request);
System.out.println("RequestId = "+ response.getRequestId()+"\n");
} catch (ClientException e) {
throw new AchangException(20001,"视频删除失败");
}
}
- 测试
访问:http://localhost:8003/swagger-ui.html
二、前端部分
- api方法
guli-admin\src\api\teacher\video.js
//根据视频id删除阿里云视频
deleteAliyunVideoById(VideoId){
return request({
url: "/eduvod/video/removeAliyunVideoById/"+VideoId,
method: 'delete',
})
}
- guli-admin\src\views\edu\course\chapter.vue
handleVodRemove() {
//调用接口里面的删除视频方法
video.deleteAliyunVideoById(this.video.videoSourceId).then((resp) => {
this.$message({
type: "success",
message: "删除成功!",
});
//把文件列表清空
this.fileList = [];
//清空视频id和视频名称
this.video.videoSourceId =""
this.video.video_original_name =""
});
},