在本篇文章中，我们将介绍如何使用阿里云的 OSS（对象存储服务）来搭建一个简单的在线教育视频课程分享网站。此网站会包括用户上传视频、播放视频、课程管理等功能，适合用于课程分享或小规模在线教育网站。
1. 项目概述
1.1 使用技术栈
- 后端：Spring Boot（用于业务逻辑处理）
- 前端：Vue.js + ElementUI（构建交互页面）
- 云存储：阿里云 OSS
- 数据库：MySQL
1.2 功能概览
- 用户注册、登录、课程浏览
- 上传课程视频到阿里云 OSS
- 从 OSS 中获取视频链接并展示在网站上
- 播放课程视频
2. 环境准备
2.1 配置阿里云 OSS
- 登录 阿里云控制台，创建一个 Bucket。
- 开启公共读权限，以便所有人可以访问课程视频。
- 获取 Access Key ID 和 Access Key Secret，这将用于在代码中配置 OSS 访问权限。
2.2 项目初始化
我们可以使用 Spring Boot 和 Vue CLI 创建项目骨架。
- 后端：使用 Spring Initializr 创建 Spring Boot 项目，并添加所需依赖，如
Web、Spring Data JPA、MySQL。 - 前端：使用 Vue CLI 创建 Vue 项目，并安装 ElementUI 组件库。
3. 后端开发
3.1 依赖配置
在 pom.xml 中添加阿里云 OSS SDK 和其他所需依赖。
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.12.0</version>
</dependency>
3.2 配置 OSS 连接信息
在 application.properties 文件中配置阿里云 OSS 的连接信息。
spring.datasource.url=jdbc:mysql://localhost:3306/education?useSSL=false
spring.datasource.username=root
spring.datasource.password=root
# OSS 配置
oss.endpoint=http://oss-cn-your-region.aliyuncs.com
oss.accessKeyId=YOUR_ACCESS_KEY_ID
oss.accessKeySecret=YOUR_ACCESS_KEY_SECRET
oss.bucketName=YOUR_BUCKET_NAME
3.3 创建 OSS 工具类
创建 OssUtil 工具类，用于上传和删除文件。
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import java.io.InputStream;
@Component
public class OssUtil {
@Value("${oss.endpoint}")
private String endpoint;
@Value("${oss.accessKeyId}")
private String accessKeyId;
@Value("${oss.accessKeySecret}")
private String accessKeySecret;
@Value("${oss.bucketName}")
private String bucketName;
public String uploadFile(String fileName, InputStream inputStream) {
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, fileName, inputStream);
ossClient.shutdown();
return "https://" + bucketName + "." + endpoint + "/" + fileName;
}
public void deleteFile(String fileName) {
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.deleteObject(bucketName, fileName);
ossClient.shutdown();
}
}
3.4 课程模型
创建 Course 实体类，用于表示课程信息，包括课程名、描述、视频地址等。
import javax.persistence.*;
@Entity
public class Course {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private String description;
private String videoUrl;
// Getters and Setters
}
3.5 课程上传和播放接口
创建 CourseController 控制器，处理上传和获取课程的接口。
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
@RestController
@RequestMapping("/courses")
public class CourseController {
@Autowired
private OssUtil ossUtil;
@Autowired
private CourseRepository courseRepository;
@PostMapping("/upload")
public String uploadCourse(@RequestParam("title") String title,
@RequestParam("description") String description,
@RequestParam("file") MultipartFile file) {
try {
String fileName = file.getOriginalFilename();
String url = ossUtil.uploadFile(fileName, file.getInputStream());
Course course = new Course();
course.setTitle(title);
course.setDescription(description);
course.setVideoUrl(url);
courseRepository.save(course);
return "Upload successful!";
} catch (Exception e) {
e.printStackTrace();
return "Upload failed!";
}
}
@GetMapping
public List<Course> getCourses() {
return courseRepository.findAll();
}
}
4. 前端开发
4.1 项目初始化和依赖安装
vue create online-education
cd online-education
npm install element-ui --save
在 main.js 中引入 ElementUI。
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');
4.2 课程上传页面
创建 Upload.vue 页面，用于上传课程视频。
<template>
<div>
<el-form ref="form" :model="formData" label-width="80px">
<el-form-item label="Title">
<el-input v-model="formData.title"></el-input>
</el-form-item>
<el-form-item label="Description">
<el-input v-model="formData.description"></el-input>
</el-form-item>
<el-form-item label="Video">
<input type="file" @change="handleFileChange" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="uploadCourse">Upload</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
formData: {
title: '',
description: '',
file: null,
},
};
},
methods: {
handleFileChange(event) {
this.formData.file = event.target.files[0];
},
async uploadCourse() {
const formData = new FormData();
formData.append('title', this.formData.title);
formData.append('description', this.formData.description);
formData.append('file', this.formData.file);
try {
const response = await axios.post('/api/courses/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
this.$message.success(response.data);
} catch (error) {
this.$message.error('Upload failed!');
}
},
},
};
</script>
4.3 课程展示页面
创建 Courses.vue 页面，用于显示所有课程并提供视频播放功能。
<template>
<div>
<el-table :data="courses" style="width: 100%">
<el-table-column prop="title" label="Title" width="200"></el-table-column>
<el-table-column prop="description" label="Description"></el-table-column>
<el-table-column label="Video">
<template slot-scope="scope">
<video controls width="250" :src="scope.row.videoUrl"></video>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
courses: [],
};
},
async created() {
const response = await axios.get('/api/courses');
this.courses = response.data;
},
};
</script>
5. 启动项目
5.1 启动后端服务
在 Spring Boot 项目目录中运行：
mvn spring-boot:run
5.2 启动前端服务
在 Vue 项目目录中运行：
npm run serve
6. 总结
本文介绍了如何使用阿里云 OSS 搭建一个简易的视频课程分享网站。通过 Spring Boot 实现后端 API，Vue.js 实现前端页面，我们能够实现课程视频的上传、展示及播放功能。