当前位置： 首页 > news >正文

[学成在线]09-课程预览

news 2025/11/4 13:06:19

模块需求分析

模块介绍

课程信息编辑完毕即可发布课程，发布课程相当于一个确认操作，课程发布后学习者在网站可以搜索到课程，然后查看课程的详细信息，进一步选课、支付、在线学习。

下边是课程编辑与发布的整体流程：

为了课程内容没有违规信息、课程内容安排合理，在课程发布之前运营方会进行课程审核，审核通过后课程方可发布。

作为课程制作方即教学机构，在课程发布前通过课程预览功能可以看到课程发布后的效果，哪里的课程信息存在问题方便查看，及时修改。

下图是课程预览的效果图，也是课程正式发布后的课程详情界面：

教学机构确认课程内容无误，提交审核，平台运营人员对课程内容审核，审核通过后教学机构人员发布课程成功。

课程发布模块共包括三块功能：

1、课程预览

2、课程审核

3、课程发布

业务流程

课程预览

1.教育机构用户在课程管理中可对该机构内所管理的课程进行检索。

2.点击某课程数据后的预览链接，即可对该课程进行预览，可以看到发布后的详情页面效果。

下图是课程详情首页，显示了课程的基本信息。

点击课程目录，显示课程计划，通过此界面去核实课程计划的信息是否存在问题。

点击课程目录中的具体章节，查看视频播放是否正常

课程审核

教学机构提交课程审核后，平台运营人员登录运营平台进行课程审核，课程审核包括程序自动审核和人工审核，程序会审核内容的完整性，人员通过课程预览进行审核。

流程如下：

1、首先查询待审核的记录。

2、课程审核

具体审核的过程与课程预览的过程类似，运营人员查看课程信息、课程视频等内容。

如果存在问题则审核不通过，并附上审核不通过的原因供教学机构人员查看。

如果课程内容没有违规信息且课程内容全面则审核通过。

课程审核通过后教学机构发布课程成功。

课程发布

1.教育机构用户在课程管理中可对机构内课程进行检索。

2.点击某课程数据后的发布链接（审核状态为通过），即可对该课程进行发布。

3、课程发布后可通过课程搜索查询到课程信息，并查看课程的详细信息。

4 点击课程搜索页中课程列表的某个课程，可进入课程详情页。

课程预览

需求分析

课程预览就是把课程的相关信息进行整合，在课程详情界面进行展示，通过课程预览页面查看信息是否存在问题。

下图是课程预览的数据来源：

在课程预览页面点击"视频播放图片"打开视频播放页面，通过视频播放页面查看课程计划对应的视频是否存在问题。

课程预览的效果与最终课程发布后查看到的效果是一致的，所以课程预览时会通过网站门户域名地址进行预览，下图显示了整个课程预览的流程图：

说明如下：

1、点击课程预览，通过Nginx、后台服务网关请求内容管理服务进行课程预览。

2、内容管理服务查询课程相关信息进行整合，并通过模板引擎技术在服务端渲染生成页面，返回给浏览器。

3、通过课程预览页面点击”马上学习“打开视频播放页面。

4、视频播放页面通过Nginx请求后台服务网关，查询课程信息展示课程计划目录，请求媒资服务查询课程计划绑定的视频文件地址，在线浏览播放视频。

模板引擎

什么是模板引擎

根据前边的数据模型分析，课程预览就是把课程的相关信息进行整合，在课程预览界面进行展示，课程预览界面与课程发布的课程详情界面一致。

项目采用模板引擎技术实现课程预览界面。什么是模板引擎？

早期我们采用的jsp技术就是一种模板引擎技术，如下图：

1、浏览器请求web服务器

2、服务器渲染页面，渲染的过程就是向jsp页面(模板)内填充数据(模型)。

3、服务器将渲染生成的页面返回给浏览器。

  1. 所以模板引擎就是：模板+数据=输出，Jsp页面就是模板，页面中嵌入的jsp标签就是数据，两者相结合输出html网页。

常用的java模板引擎还有哪些？ Jsp、Freemarker、Thymeleaf 、Velocity 等。

本项目采用Freemarker作为模板引擎技术。

Freemarker官方地址：http://freemarker.foofun.cn/

FreeMarker 是一款模板引擎：即一种基于模板和要改变的数据，并用来生成输出文本(HTML网页，电子邮件，配置文件，源代码等)的通用工具。它不是面向最终用户的，而是一个Java类库，是一款程序员可以嵌入他们所开发产品的组件。FreeMarker 是免费的，基于Apache许可证2.0版本发布。

Freemarker快速入门

下边在内容管理接口层搭建Freemarker的运行环境并进行测试。

  1. 在内容管理接口工层添加Freemarker与SpringBoot的整合包
<!-- Spring Boot 对结果视图 Freemarker 集成 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
  1. 在nacos为内容管理接口层配置freemarker，公用配置组新加一个freemarker-config-dev.yaml

  1. 在内容管理接口工程添加freemarker-config-dev.yaml

  1. 添加模板，在resources下创建templates目录，添加test.ftl模板文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World!</title>
</head>
<body>
Hello ${name}!
</body>
</html>
  1. 编写controller方法，准备模型数据

package com.xuecheng.content.api;

/**
 * @author Mr.M
 * @version 1.0
 * @description freemarker测试
 * @date 2022/9/15 19:20
 */
@Controller
public class FreemarkerController {
    @GetMapping("/testfreemarker")
    public ModelAndView test() {
        // 创建数据模型
        ModelAndView modelAndView = new ModelAndView();
        //设置模型数据
        modelAndView.addObject("name","小明");
        //设置模板名称
        modelAndView.setViewName("test");
        return modelAndView;
    }

}
  1. 启动内容管理接口工程，访问http://localhost:63040/content/testfreemarker

  1. freemarker提供很多指令用于解析各种类型的数据模型，
  2. 参考地址：http://freemarker.foofun.cn/ref_directives.html
部署网站门户

在课程预览界面上要加载css、js、图片等内容，这里部署nginx来访问这些静态资源，对于SpringBoot服务的动态资源由Nginx去代理请求，如下图：

安装 Nginx

  1. 在本机安装 Nginx ，从课程资料目录获取nginx-1.23.1.zip并解压。
  2. 运行nginx-1.23.1目录下的nginx.exe。
  • 默认端口为80，如果本机80端口被占用，则需要杀掉占用进程后再启动nginx。
  • 如果无法杀掉80端口占用进程则需要修改nginx-1.23.1目录下conf/nginx.conf配置文件, 将80端口修改为空闲端口。

  1. 启动nginx，访问http://localhost 出现下边的网页表示启动成功

下边开始部署前端工程：

  1. 从课程资料目录获取xc-ui-pc-static-portal.zip 并解压。
  2. 修改本机hosts文件，加入127.0.0.1 www.51xuecheng.cn 51xuecheng.cn ucenter.51xuecheng.cn teacher.51xuecheng.cn file.51xuecheng.cn。

  • window10操作系统hosts文件在C:\Windows\System32\drivers\etc下
  • Centos7操作系统的hosts文件在/etc目录下。
  • 在hosts文件加入如下配置
127.0.0.1 www.51xuecheng.cn 51xuecheng.cn ucenter.51xuecheng.cn teacher.51xuecheng.cn file.51xuecheng.cn
  1. 在nginx-1.23.1目录中找到conf目录，配置目录下的nginx.conf文件。

配置内容如下，注意更改xc-ui-pc-static-portal目录的路径：

server {
        listen       80;
        server_name  www.51xuecheng.cn localhost;
        #rewrite ^(.*) https://$server_name$1 permanent;
        #charset koi8-r;
        ssi on;
        ssi_silent_errors on;
        #access_log  logs/host.access.log  main;

        location / {
            alias   D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/;
            index  index.html index.htm;
        }
        #静态资源
        location /static/img/ {  
                alias  D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/img/;
        } 
        location /static/css/ {  
                alias   D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/css/;
        } 
        location /static/js/ {  
                alias   D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/js/;
        } 
        location /static/plugins/ {  
                alias   D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/plugins/;
                add_header Access-Control-Allow-Origin http://ucenter.51xuecheng.cn;  
                add_header Access-Control-Allow-Credentials true;  
                add_header Access-Control-Allow-Methods GET;
        } 
        location /plugins/ {  
                alias   D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/plugins/;
        } 



        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
  1. 启动nginx:
  • 进入任务管理器，杀死nginx的两个进程

  • 杀死后再次双击nginx.exe。
  • 启动成功在任务管理器会出现nginx的进程。
  • 日志文件在nginx安装目录下的logs目录：

  1. 启动成功访问http://www.51xuecheng.cn

课程详情页面

course_template.html是一个静态html页面，里边还没有添加freemarker标签，如果要预览该页面需要借助Nginx进行预览，因为页面需要加载一些css样式表、图片等内容。

  1. course_template.html文件在xc-ui-pc-static-portal\course目录下

  1. 通过浏览器访问：http://www.51xuecheng.cn/course/course_template.html

  1. 出现这个画面说明模板文件正常浏览是没有问题的。
文件服务器

在进行课程预览时需要展示课程的图片，在线插放课程视频，课程图片、视频这些都在MinIO文件系统存储，下边统一由Nginx代理，通过文件服务域名统一访问。如下图：

  1. 在hosts文件配置如下内容，如果已存在不要重复配置。
127.0.0.1 www.51xuecheng.cn file.51xuecheng.cn
  1. 在nginx.conf中配置文件服务器的代理地址
 #文件服务
  upstream fileserver{
    server 192.168.101.65:9000 weight=10;
  } 
   server {
        listen       80;
        server_name  file.51xuecheng.cn;
        #charset koi8-r;
        ssi on;
        ssi_silent_errors on;
        #access_log  logs/host.access.log  main;
        location /video {
            proxy_pass   http://fileserver;
        }

        location /mediafiles {
            proxy_pass   http://fileserver;
        }
   }
  1. 配置完毕，重新加载nginx配置文件。

通过cmd进入nginx.exe所在目录,运行如下命令

nginx.exe -s reload
  1. 通过http://file.51xuecheng.cn/mediafiles/图片文件地址 访问图片
  • 在媒资数据库的文件表中找一个图片的地址进行测试。
  • http://file.51xuecheng.cn/mediafiles/2025/02/20/775a578fbfb0aa97ed8eeef80c62a76e.png
视频播放页面

进入课程详情页面，点击马上学习或课程目录下的小节的名称将打开视频播放页面。

首先在nginx.conf中配置视频播放页面的地址, 然后加载nginx配置文件

     location /course/preview/learning.html {
                alias D:\UserDatas\Note\16Project\xue-cheng-zai-xian/xc-ui-pc-static-portal/course/learning.html;
        } 
        location /course/search.html {  
                root   D:\UserDatas\Note\16Project\xue-cheng-zai-xian/xc-ui-pc-static-portal;
        } 
        location /course/learning.html {  
                root   D:\UserDatas\Note\16Project\xue-cheng-zai-xian/xc-ui-pc-static-portal;
        }

下边需要配置learning.html页面的视频播放路径来测试视频播放页面，找到learning.html页面中videoObject对象的定义处，配置视频的播放地址。

点击课程详情页面上的视频播放链接，打开视频播放页面，如下图：

配置完成，刷新页面，观察视频是否可以正常播放。
注意：此页面会去请求后台接口获取课程计划，这里暂时不处理，稍后在接口开发处进行处理。只要页面可以正常打开，可以播放视频就测试通过了。

接口定义

课程预览接口要将课程信息进行整合，在服务端渲染页面后返回浏览器。

下边对课程预览接口进行分析：

1、请求参数

传入课程id，表示要预览哪一门课程。

2、响应结果

输出课程详情页面到浏览器。

响应页面到浏览器使用freemarker模板引擎技术实现，

  1. 首先从课程资料目录下获取课程预览页面course_template.html，
  2. 拷贝至内容管理的接口工程的resources/templates下，
  3. 并将其在本目录复制一份命名为course_template.ftl

下边开始定义接口：

package com.xuecheng.content.api;

/**
 * @author Mr.M
 * @version 1.0F
 * @description 课程预览，发布
 * @date 2022/9/16 14:48
 */
@Controller
public class CoursePublishController {
    @GetMapping("/coursepreview/{courseId}")
    public ModelAndView preview(@PathVariable("courseId") Long courseId) {

        ModelAndView modelAndView = new ModelAndView(); // 数据模型
        modelAndView.addObject("model", null); // 模型数据,暂时为null
        modelAndView.setViewName("course_template"); // 视图名称, 自动拼接.ftl后缀
        return modelAndView;
    }

}

重启内容管理接口工程，访问http://localhost:63040/content/coursepreview/74

注意: 如果Bean冲突了, 检查xuecheng-plus-generator工程中的controller代码, 解决冲突

课程预览接口虽然可以正常访问，但是页面没有样式，查看浏览器请求记录，发现图片、样式无法正常访问。

这些静态资源全在门户下，我们需要由Nginx反向代理访问课程预览接口，通过门户的URL去访问课程预览。

1、在Nginx下配置：

 #后台网关
  upstream gatewayserver{
    server 127.0.0.1:63010 weight=10;
  } 
  server {
        listen       80;
        server_name  www.51xuecheng.cn localhost;
        ....
        #api
        location /api/ {
                proxy_pass http://gatewayserver/;
        } 
        ....
}

2、重新加载Nginx配置文件：

nginx.exe -s reload

3、启动微服务网关

4、此时访问新地址： http://www.51xuecheng.cn/api/content/coursepreview/74

5、页面虽然正常，但是里边的内容都是静态内容，稍后接口层调用service方式获取模型数据并进行页面渲染。

6、目前的方式是通过Nginx访问网关，由网关再将请求转发到微服务，Nginx是整个的项目最前方的代理服务器，如下图：

接口开发

课程预览就是把课程基本信息、营销信息、课程计划、师资等课程的相关信息进行整合，在预览页面进行展示。如下图：

在使用freemarker渲染生成视图时需要数据模型，此数据模型包括了基本信息、营销信息、课程计划、师资等信息。

所以首先定义一个数据模型类：

package com.xuecheng.content.model.dto;

/**
 * @description 课程预览数据模型
 * @author Mr.M
 * @date 2022/9/16 15:03
 * @version 1.0
 */
@Data
@ToString
public class CoursePreviewDto {

    //课程基本信息,课程营销信息
    CourseBaseInfoDto courseBase;


    //课程计划信息
    List<TeachplanDto> teachplans;

    //师资信息暂时不加...

}
  • CourseBaseInfoDto：包括了课程基本信息、营销信息。
  • List<TeachplanDto> ：包括了课程计划列表。

Service负责从数据库查询基本信息、营销信息、课程计划等课程相关信息，组成CoursePreviewDto 对象。

package com.xuecheng.content.service;

import com.xuecheng.content.model.dto.CoursePreviewDto;

/**
 * @description 课程预览、发布接口
 * @author Mr.M
 * @date 2022/9/16 14:59
 * @version 1.0
 */
public interface CoursePublishService {


    /**
     * @description 获取课程预览信息
     * @param courseId 课程id
     * @return com.xuecheng.content.model.dto.CoursePreviewDto
     * @author Mr.M
     * @date 2022/9/16 15:36
     */
    public CoursePreviewDto getCoursePreviewInfo(Long courseId);


}
package com.xuecheng.content.service.impl;

/**
 * @description TODO
 * @author Mr.M
 * @date 2022/9/16 15:37
 * @version 1.0
 */
@Service
public class CoursePublishServiceImpl implements CoursePublishService {

    @Autowired
    CourseBaseInfoService courseBaseInfoService;

    @Autowired
    TeachplanService teachplanService;


    @Override
    public CoursePreviewDto getCoursePreviewInfo(Long courseId) {

        //课程基本信息、营销信息
        CourseBaseInfoDto courseBaseInfo = courseBaseInfoService.getCourseBaseInfo(courseId);

        //课程计划信息
        List<TeachplanDto> teachplanTree= teachplanService.findTeachplanTree(courseId);

        CoursePreviewDto coursePreviewDto = new CoursePreviewDto();
        coursePreviewDto.setCourseBase(courseBaseInfo);
        coursePreviewDto.setTeachplans(teachplanTree);
        return coursePreviewDto;
    }

}

接口层Controller调用Service方法获取模板引擎需要的模型数据

package com.xuecheng.content.api;

/**
 * @description 课程预览，发布
 * @author Mr.M
 * @date 2022/9/16 14:48
 * @version 1.0
 */
@Controller()
public class CoursePublishController {

    @Autowired
    CoursePublishService coursePublishService;

    @GetMapping("/coursepreview/{courseId}")
    public ModelAndView preview(@PathVariable("courseId") Long courseId){

        //获取课程预览信息
        CoursePreviewDto coursePreviewInfo = coursePublishService.getCoursePreviewInfo(courseId);

        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("model",coursePreviewInfo);
        modelAndView.setViewName("course_template");
        return modelAndView;

    }

}

前后端联调

原来前端直接指向后台网关地址，现在要更改为Nginx的地址，如下：

重启前端工程，进入课程列表点击"预览"按钮，正常打开课程预览页面

http://www.51xuecheng.cn/api/content/coursepreview/2

编写模板

模型数据准备好后下一步将模型数据填充到course_template.ftl上，填充时注意不要一次填充太多，一边填充一边刷新调试。

  1. freemarker提供很多指令用于解析各种类型的数据模型，参考地址：http://freemarker.foofun.cn/ref_directives.html
  2. 修改模板后需要编译，如下图：

  1. 在调试模板时，可以看出哪些信息有缺少，在课程管理处进行补充，比如下图显示课程计划信息不完整，需要进入课程计划界面添加课程计划。

  1. 完整的course_template.ftl模板在课程资料目录下，差不多学会了freemarker标签的使用方法，将课程资料下的course_template.ftl覆盖自己的工程下的course_template.ftl。
  2. 覆盖后报错页面报错, 是因为模板文件的27行数据为null, 造成报错

视频播放页面接口

从课程详情页面进入视频播放页面，如下图：

在此页面需要从后台获取课程信息、根据课程计划获取对应的视频地址，下边编写这两个接口：

  1. 获取课程信息接口：/open/content/course/whole/{courseId}
/open/content/course/whole/课程id

响应：同课程预览service接口返回数据
  1. 根据课程计划获取视频地址接口：/open/media/preview/{mediaId}
Java
/open/media/preview/课程计划id

响应：
{"code":0,"msg":"success","result":"视频的url","successful":true}
  1. 在nginx配置如下地址
#openapi
location /open/content/ {
        proxy_pass http://gatewayserver/content/open/;
} 
location /open/media/ {
        proxy_pass http://gatewayserver/media/open/;
}

配置运行nginx.exe -s reload加载nginx的配置文件

  1. 在内容管理接口层定义CourseOpenController类，并定义接口：获取课程信息接口：/open/content/course/whole/{courseId}
package com.xuecheng.content.api;

@Api(value = "课程公开查询接口",tags = "课程公开查询接口")
@RestController
@RequestMapping("/open")
public class CourseOpenController {

    @Autowired
    private CourseBaseInfoService courseBaseInfoService;

    @Autowired
    private CoursePublishService coursePublishService;


    @GetMapping("/course/whole/{courseId}")
    public CoursePreviewDto getPreviewInfo(@PathVariable("courseId") Long courseId) {
        //获取课程预览信息
        CoursePreviewDto coursePreviewInfo = coursePublishService.getCoursePreviewInfo(courseId);
        return coursePreviewInfo;
    }

}
  1. 在媒资管理服务media-api工程定义MediaOpenController类，并定义接口/open/media/preview/
package com.xuecheng.media.api;

@Api(value = "媒资文件管理接口",tags = "媒资文件管理接口")
@RestController
@RequestMapping("/open")
public class MediaOpenController {

    @Autowired
    MediaFileService mediaFileService;

    @ApiOperation("预览文件")
    @GetMapping("/preview/{mediaId}")
    public RestResponse<String> getPlayUrlByMediaId(@PathVariable String mediaId){

        MediaFiles mediaFiles = mediaFileService.getFileById(mediaId);
        if(mediaFiles == null || StringUtils.isEmpty(mediaFiles.getUrl())){
            XueChengPlusException.cast("视频还没有转码处理");
        }
        return RestResponse.success(mediaFiles.getUrl());

    }


}

package com.xuecheng.media.service;


/**
 * @author Mr.M
 * @version 1.0
 * @description 媒资文件管理业务类
 * @date 2022/9/10 8:55
 */
public interface MediaFileService {

    /**
     * 根据媒资文件id查询文件信息
     * @param mediaId
     * @return
     */
    MediaFiles getFileById(String mediaId);

}

package com.xuecheng.media.service.impl;


/**
 * @author Mr.M
 * @version 1.0
 * @description TODO
 * @date 2022/9/10 8:58
 */
@Service
@Slf4j
public class MediaFileServiceImpl implements MediaFileService {

    @Autowired
    MediaFilesMapper mediaFilesMapper;

    @Override
    public MediaFiles getFileById(String mediaId) {
        MediaFiles mediaFiles = mediaFilesMapper.selectById(mediaId);
        return mediaFiles;
    }

}
  1. 启动内容管理、媒资管理、后台服务网关服务，测试视频播放页面是否可以正常获取课程计划，点击具体的课程计划是否正常可以播放视频。

http://www.dtcms.com/a/105871.html

相关文章：

  • 论文阅读笔记：Denoising Diffusion Implicit Models （2）
  • Spring Boot 快速入手
  • node.js、npm相关知识
  • Redis 在 Linux 系统的安装指南
  • 【Docker项目实战】使用Docker部署NoteFlow笔记工具
  • 本地RAG知识库，如何进行数据结构化和清洗？
  • 在 Vue2 项目中配置自定义属性并在组件中使用，可按以下步骤进行：
  • 探秘 LPC 接收端重建：从理论根基到 Matlab 仿真实战
  • Android 应用程序包的 adb 命令
  • android studio 安装flutter插件
  • kubectl 命令
  • LLM的Sink(水槽) Token
  • 【漫话机器学习系列】168.最大最小值缩放（Min-Max Scaling）
  • 解锁兰亭妙微桌面端 UE/UI 设计，抢占数字先机
  • 主流数据库的存储引擎/存储机制的详细对比分析，涵盖关系型数据库、NoSQL数据库和分布式数据库
  • go游戏后端开发21:处理nats消息
  • 数据结构实验1.2： 顺序表的基本运算
  • 【CSS】- 表单控件的 placeholder 如何控制换行显示？
  • 自动驾驶---学术论文的常客：nuScenes数据集的使用
  • 卫星电话究竟是“锦上添花”？还是“刚需之选”？
  • android 设置状态栏背景
  • JAVA-Spring Boot多线程
  • React(九）React Hooks
  • RabbitMQ的工作模式
  • nginx的自动跳转https
  • 客户端给服务器发数据，服务器不显示：开放端口操作
  • 【工作梳理】怎么把f12里面的东西导入到postman
  • 赛逸展2025“创新引擎”启动：限量席位，点亮科技绿色新征程
  • 七. JAVA类和对象（一）
  • 权限框架SpringSecurity介绍