【Django+Vue3 线上教育平台项目实战】构建课程详情页与集成视频播放功能

在构建一个线上教育平台时，课程详情页和视频播放功能是不可或缺的重要组成部分。本文将以 Django 和 Vue3 为基础，详细介绍如何构建课程详情页并集成视频播放功能。

一、项目环境设置

在开始之前，请确保您已安装 Django 和 Vue 3，并创建了基本的项目结构。您可以通过以下命令安装 Django：

pip install django

然后使用以下命令创建 Django 项目和应用：

django-admin startproject education_platform
cd education_platform
django-admin startapp courses

在前端，我们使用 Vue 3。首先全局安装 Vue CLI：

npm install -g @vue/cli

然后使用 Vue CLI 创建新的 Vue 项目：

vue create frontend

二、Django 后端设置

在 courses 应用中，我们需要定义课程模型和 API 接口。

1. 创建模型

在 courses/models.py 中定义课程模型：

from django.db import models

class Course(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    video_url = models.URLField()  # 视频链接

    def __str__(self):
        return self.title

2. 创建 API 视图

使用 Django REST Framework 创建课程 API。首先安装这两个包：

pip install djangorestframework

然后在 courses/views.py 中添加视图：

from rest_framework import viewsets
from .models import Course
from .serializers import CourseSerializer

class CourseViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Course.objects.all()
    serializer_class = CourseSerializer

然后，创建序列化器 courses/serializers.py：

from rest_framework import serializers
from .models import Course

class CourseSerializer(serializers.ModelSerializer):
    class Meta:
        model = Course
        fields = '__all__'

最后在 education_platform/urls.py 中配置 URL：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from courses.views import CourseViewSet

router = DefaultRouter()
router.register(r'courses', CourseViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

三、Vue 3 前端设置

在 Vue 项目中，我们将使用 Axios 来请求后端 API，并展示课程详情。

1. 安装 Axios

在 Vue 项目根目录下，安装 Axios：

npm install axios

2. 创建课程详情组件

在 src/components 目录下创建 CourseDetail.vue 文件：

<template>
  <div>
    <h1>{{ course.title }}</h1>
    <p>{{ course.description }}</p>
    <video v-if="course.video_url" controls>
      <source :src="course.video_url" type="video/mp4">
      你的浏览器不支持播放视频。
    </video>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      course: {}
    };
  },
  created() {
    const courseId = this.$route.params.id;
    axios.get(`http://localhost:8000/courses/${courseId}/`)
      .then(response => {
        this.course = response.data;
      })
      .catch(error => {
        console.error("无法获取课程数据:", error);
      });
  }
};
</script>

<style scoped>
/*添加样式*/
</style>

四、配置 Vue Router

在 src/router/index.js 中添加路由配置：

import { createRouter, createWebHistory } from 'vue-router';
import CourseDetail from '../components/CourseDetail.vue';

const routes = [
  {
    path: '/course/:id',
    name: 'CourseDetail',
    component: CourseDetail
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

五、总结

通过以上步骤，我们成功地将 Django 后端的课程信息通过 API 提供给 Vue 3 前端，并在课程详情页中展示课程信息及视频播放功能。您可以根据需求扩展更多功能，例如用户评论、课程购买等。希望这篇文章能为您构建线上教育平台提供参考和帮助！