03课程发布模块课程预览

课程预览界面

`界面原型`

课程在发布前需要运营方进行审核，作为课程制作方即教学机构发布课程前可以通过课程预览功能查看课程详情界面，及时修改页面中的内容排版和违规问题

课程预览就是把课程的相关信息进行整合然后在课程预览界面进行展示，课程预览界面与将来要发布的课程详情界面一致

第一步: 教育机构在课程管理界面对该机构内所管理的课程进行检索

在这里插入图片描述

第二步: 点击某课程后的预览链接预览该课程的详情信息

在这里插入图片描述

第三步: 点击课程目录查看课程相关的课程计划信息

在这里插入图片描述

第四步: 在课程预览页面点击视频播放图片打开视频播放页面，通过视频播放页面可以选择相关的课程计划播放对应的视频

在这里插入图片描述

`请求响应模型类`

课程预览就是把课程的基本信息、营销信息、课程计划、师资等课程的相关信息进行整合，然后使用Freemarker将数据和模板结合渲染生成HTML页面

在这里插入图片描述

定义一个数据模型类用来整合课程的基本信息、营销信息、课程计划、师资等课程的相关信息

@Data
@ToString
public class CoursePreviewDto {
    // 课程基本信息,课程营销信息
    CourseBaseInfoDto courseBase;

    // 课程计划信息(章/节的基本信息和绑定的媒资信息)
    List<TeachplanDto> teachplans;

    //课程师资信息
}

`接口定义`

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

在内容管理模块的接口工程中定义课程预览的接口，将查询到的课程信息与模板进行整合并在服务端渲染生成页面返回浏览器

请求参数：课程id表示要预览哪一门课程
响应结果：基于course_template.html静态页面创建resources/templates/course_template.ftl模板结合数据输出课程详情页面到浏览器

在这里插入图片描述

// 响应一个页面
@Controller
public class CoursePublishController {
    @Autowired
    CoursePublishService coursePublishService;

    @GetMapping("/coursepreview/{courseId}")
    public ModelAndView preview(@PathVariable("courseId") Long courseId){
        // 调用Service方法获取模板引擎需要的课程预览信息
        CoursePreviewDto coursePreviewInfo = coursePublishService.getCoursePreviewInfo(courseId);
        // 使用模板引擎将模板和数据进行整合
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("model",coursePreviewInfo);
        modelAndView.setViewName("course_template");
        return modelAndView;
    }
}

`业务逻辑`

编写CoursePublishService接口从数据库查询课程的基本信息、营销信息、课程计划等课程相关信息然后组成CoursePreviewDto对象

在这里插入图片描述

public interface CoursePublishService {
 /**
  * @description 获取课程预览信息
  * @param courseId 课程id
 */
   public CoursePreviewDto getCoursePreviewInfo(Long courseId);
}

@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;
    }
}

`定义模板`

模型数据准备好后就将其填充到course_template.ftl上，填充时可以一边填充一边刷新调试,修改模板后需要编译

在这里插入图片描述

在调试模板时，对于缺少的课程信息可能是我们在添加课程时没有指定,我们可以在课程信息编辑界面进行补充,在模板中填充数据时如果数据为null会报错

在这里插入图片描述

视频播放界面

从课程详情页面进入视频播放页面后需要从后台获取课程计划信息以及课程计划中小节绑定的视频地址

在这里插入图片描述

`配置公开接口`

在nginx配置文件中进行配置,配置完后执行nginx.exe -s reload命令重新加载nginx的配置文件

# openapi 
location /open/content/ {     
	proxy_pass http://gatewayserver/content/open/; 
}  
location /open/media/ {
	proxy_pass http://gatewayserver/media/open/; 
}

`获取课程计划信息`

# 请求
/open/content/course/whole/课程id

# 响应
课程预览模型

在内容管理模块的接口层定义CourseOpenController类，并定义获取课程计划信息接口

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

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

`获取视频地址`

# 请求
/open/media/preview/媒资文件id
# 响应
{"code":0,"msg":"success","result":"视频的url","successful":true}

在媒资管理服务media-api工程定义MediaOpenController类,定义根据媒资文件Id获取小节绑定视频地址的接口

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

    @ApiOperation("预览文件")
    @GetMapping("/preview/{mediaId}")
    public RestResponse<String> getPlayUrlByMediaId(@PathVariable String mediaId){
        // 获取文件的URL
        MediaFiles mediaFiles = mediaFileService.getFileById(mediaId);
        return RestResponse.success(mediaFiles.getUrl());
    }
}

在media-service工程中编写Service接口及其实现类MediaFileServiceImpl

public interface MediaFileService {
    // 根据媒资文件Id获取文件对应URL
    MediaFiles getFileById(String mediaId);
}

@Service
@Slf4j
public class MediaFileServiceImpl implements MediaFileService {
    @Override
    public MediaFiles getFileById(String id) {
        MediaFiles mediaFiles = mediaFilesMapper.selectById(id);
        if (mediaFiles == null || StringUtils.isEmpty(mediaFiles.getUrl())) {
            XueChengPlusException.cast("视频还没有转码处理");
        }
        return mediaFiles;
    }
}

课程预览界面样式

`配置Nginx`

第一步：启动内容管理模块的接口工程，访问http://localhost:63040/content/coursepreview/74查看响应页面(不含样式)

在这里插入图片描述

第二步：对于课程预览界面中页面需要加载的样式和图片等静态资源无法直接访问,此时需要通过Nginx反向代理的方式访问课程预览接口

在这里插入图片描述

# 通过Nginx访问后台网关，然后由网关再将请求转发到具体的微服务,网关会把请求转发到具体的服务
upstream gatewayserver{
    server 127.0.0.1:63010 weight=10;
} 
server {
    listen       80;
    server_name  www.51xuecheng.cn localhost;
    ....
        location /api/ {
        proxy_pass http://gatewayserver/;
    } 
    .... 
 }