分享您的知识的一个好方法是在线课程。与其被知名课程平台提供的枯燥且不灵活的课程页面所束缚,我们可以构建自己的课程,以便我们可以按照自己的喜好进行设计和用户体验。 在本教程中,我将向您展示如何使用 Vue 3 和 Vite 创建单页应用程序课程网站。这些功能将包括基于降价的内容、嵌入式 Vimeo 视频和课程导航。 我们会将其设为静态站点,因此您不需要后端。以下是主页、课程页面和课程页面的外观: [

分享您的知识的一个好方法是在线课程。与其被知名课程平台提供的枯燥且不灵活的课程页面所束缚,我们可以构建自己的课程,以便我们可以按照自己的喜好进行设计和用户体验。

在本教程中,我将向您展示如何使用 Vue 3 和 Vite 创建单页应用程序课程网站。这些功能将包括基于降价的内容、嵌入式 Vimeo 视频和课程导航。

我们会将其设为静态站点,因此您不需要后端。以下是主页、课程页面和课程页面的外观:

在教程结束时,我还将向您展示如何(可选)注册学生,以便您可以跟踪学生进度并保护课程内容,以便您可以通过课程获利。对于这一部分,我们将集成CourseKit,这是一个用于托管在线课程的无头 API。

我们现在需要编辑src/main.js并将路由器添加到我们的应用程序中。

课程页面,将显示特定课程及其课程的信息。这将有一个动态路由/courses/:courseId。

由于我们使用的是 Vue Router,我们将为每个页面创建一个组件。让我们将它们放在目录src/pages中。

现在让我们配置路由器。我们将导入路由器 API 和页面组件。然后,我们将使用上述路径设置路线。最后,我们将从文件中创建和导出路由器。

我们现在将转到App组件并清除内容。然后,我们将创建自己的模板,在其中声明RouterView组件,作为路由的出口。

由于我们没有使用后端 API,我们的课程和课程的数据将存储在嵌套的 JavaScript 数组中。该数组将用于填充我们应用程序的内容。

该数组将由具有id、title、description的课程对象和课程对象的子数组组成。

现在让我们开始构建我们的页面,从主页开始。我们将首先从我们刚刚创建的模块中导入courses数组。

在组件模板中,我们将映射数组并将数据传递到新组件CourseSummary。

该组件将显示每门课程的标题和描述,并提供指向该课程的链接,允许用户选择他们想要学习的课程。我们通过 props 传入课程信息。

完成后,添加了一些 CSS 后,我们的主页将如下所示(为简洁起见,我不会在这里展示,但您可以在源代码中看到它。)。

我们将创建的下一个页面是课程页面。请注意,页面路径/courses/:courseId具有课程 ID 的动态段,这是我们知道要显示哪个课程的数据的方式。

让我们使用 Vue Router 中的useRoute可组合来在运行时提取动态段。

我们现在可以为课程定义一个模板。标题将包括页面顶部的面包屑和课程的详细信息,包括标题和描述。

然后,我们将有一个链接到第一课的文本“开始课程”。我们还将显示我们通过映射lessons子属性并将数据传递到另一个组件LessonSummary创建的课程中包含的课程的摘要。

与CourseSummary组件类似,这个组件将接收带有课程数据的道具,这些数据可用于将标题和描述显示为可点击的链接。这将允许用户直接导航到课程。

与课程页面类似,课程页面在 URL 中包含动态段。这一次,我们有courseId和lessonId允许我们使用数组查找来检索正确的课程和课程对象。

每节课都会有一个相关的视频。在此演示中,我们将使用Vimeo视频,尽管您可以使用任何允许嵌入您自己网站的视频服务。

您需要做的就是在视频上传后获取视频的 ID 并将其添加到课程数据模块中。 ID 通常是一个数字,例如76979871。

在运行时,我们将嵌入一个 Vimeo 视频播放器并使用其 ID 加载视频。为此,让我们安装Vue Vimeo Player组件。

现在让我们为我们的课程页面组件创建一个模板。与课程页面一样,我们将在模板顶部提供面包屑和课程标题。

然后,我们将使用Vimeo组件并通过我们数据中的 vimeo ID 向它传递一个道具video。

我们将添加到课程页面的最后一件事是完成并继续按钮。这允许用户在观看完视频后导航到下一课。

我们将在课程页面模板中的Vimeo组件下直接添加该组件。请注意,我们需要获取下一个课程 ID 并将其作为道具传递。我们将创建一个函数nextLessonId()来找到它。

Vue Router 的怪癖之一是更改路由参数不会重新加载页面组件。这意味着完成和继续按钮将更改路线,但页面上的数据将保持不变。

在这种情况下,我们更愿意重新加载页面组件。我们可以通过向路由器视图添加key属性并将完整的路由路径传递给它来做到这一点。这意味着它将路由参数的每个组合视为单独的页面。

完成后,这就是我们的课程页面的样子。当然,该视频是可播放的,学生观看完后可以导航到下一课。

目前,我们的应用程序具有课程的基本功能:学生可以选择课程、选择课程并观看视频。

首先,个性化。学生希望能够跟踪他们已经完成的课程,以防他们没有一口气完成课程。

其次,我们可能希望保护我们的内容,以便只有付费学生才能看到它。这样我们就可以通过我们的课程获利。

这两个功能都需要一个允许学生注册的身份验证系统,以便我们知道他们购买了哪些课程以及他们完成了哪些课程。

创建课程后端是一项艰巨的任务。另一种方法是使用CourseKit,这是一个用于在线课程的无头 API,我们可以轻松地将其插入我们创建的应用程序中。

CourseKit 旨在提供我们应用程序中缺少的功能:学生管理和基于角色的内容访问。

要将 CourseKit 添加到此项目,我们将创建一个帐户并在那里传输我们的课程数据。然后,我们将使用 CourseKit JavaScript 客户端通过 API 调用数据。

这是添加 CourseKit 后课程页面的样子。请注意在用户进行身份验证之前内容是如何隐藏的。

CourseKit 目前处于公开测试阶段,这意味着它已经启动并且可以运行,但某些功能(例如分析)仍在进行中。