navegación:
Tabla de contenido
1 Análisis de requisitos del módulo
2.2.1 ¿Qué es un motor de plantillas?
2.2.2 Inicio rápido de Freemarker
2.3.1 Implementación del portal web
2.3.2 Página de detalles del curso
2.3.4 Enrutamiento de página estática de reproducción de video Nginx
2.4.2 Proxy inverso de configuración de Nginx (con puerta de enlace)
2.5.1 Extracción de clase del modelo de información de vista previa del curso
2.5.2 Servicio, consulta la clase modelo según el id del curso
servicio, información básica del curso de consulta e información de marketing según id
servicio, conexión externa dao, consultar información del plan de curso según id
2.5.3 Mejora de la capa de interfaz
2.5.4 Depuración conjunta de front-end y back-end
2.5.6 Página de reproducción de video, URL de consulta de video y clase de modelo de vista previa
3.1.2 Formulario de prelanzamiento del curso y formulario de registro de auditoría
3.2 Definición de interfaz, enviada para revisión de acuerdo con la identificación del curso
Análisis de requisitos de 1 módulo
1.1 Introducción al módulo
Después de editar la información del curso, se puede publicar el curso. Publicar un curso equivale a una operación de confirmación. Después de publicar el curso, los alumnos pueden buscar el curso en el sitio web y luego ver la información detallada del curso y seleccione más cursos, pague y aprenda en línea.
El siguiente es el proceso general de edición y publicación del curso:
Para garantizar que no haya información ilegal en el contenido del curso y que la disposición del contenido del curso sea razonable, el operador realizará una revisión del curso antes de que se publique, y el curso solo se podrá publicar después de que se apruebe la revisión.
Como productor del curso, es decir, la institución de enseñanza, puede usar la función de vista previa del curso para ver el efecto del curso después de que se publique el curso antes de que se publique el curso. Cuando haya un problema con la información del curso, es fácil para comprobarlo y modificarlo a tiempo.
La siguiente imagen es la representación de la vista previa del curso, y también la interfaz de detalles del curso después de su lanzamiento oficial:
La institución de enseñanza confirma que el contenido del curso es correcto, lo envía para su revisión y el operador de la plataforma revisa el contenido del curso. Después de pasar la revisión, el personal de la institución de enseñanza libera el curso con éxito.
El módulo de publicación de cursos incluye tres funciones:
1. Vista previa del curso
2. Revisión del curso
3. Liberación del curso
1.2 Proceso comercial
1.2.1 Vista previa del curso
1. Los usuarios de instituciones educativas pueden buscar los cursos administrados por la institución en administración de cursos .
2. Haga clic en el enlace de vista previa detrás de ciertos datos del curso para obtener una vista previa del curso y podrá ver el efecto de la página de detalles después de la publicación.
La siguiente figura es la primera página de los detalles del curso, que muestra la información básica del curso.
Haga clic en el catálogo de cursos para mostrar el plan del curso y verifique si hay algún problema con la información del plan del curso a través de esta interfaz.
Haga clic en un capítulo específico en el catálogo de cursos para verificar si el video se está reproduciendo normalmente.
1.2.2 Revisión del curso
Después de que la institución de enseñanza envíe la revisión del curso, el operador de la plataforma inicia sesión en la plataforma de operaciones para realizar la revisión del curso. La revisión del curso incluye la revisión automática del programa y la revisión manual. El programa revisará la integridad del contenido y el personal revisará la vista previa del curso.
El proceso es el siguiente:
1. Primero consulta los registros a revisar.
2. Revisión del curso
El proceso de revisión específico es similar al proceso de vista previa del curso, y el operador verifica la información del curso, los videos del curso y otro contenido.
Si hay problemas, la revisión fallará y las razones de la falla de la revisión se adjuntarán para que el personal de la institución docente las revise.
Si no hay información de infracción en el contenido del curso y el contenido del curso es completo, se aprobará la revisión.
Después de aprobar la revisión del curso, la institución docente libera el curso con éxito.
1.2.3 Liberación del curso
1. Los usuarios de instituciones educativas pueden buscar cursos dentro de la institución en la gestión de cursos .
2. Haga clic en el enlace Publicar (el estado de revisión es Aprobado) y se puede publicar el curso.
3. Después de publicar el curso, puede consultar la información del curso a través de la búsqueda de cursos y ver la información detallada del curso.
4 Haga clic en un curso en la lista de cursos en la página de búsqueda de cursos para ingresar a la página de detalles del curso .
Vista previa de 2 cursos
2.1 Análisis de la demanda
La vista previa del curso es para integrar la información relevante del curso, mostrarla en la interfaz de detalles del curso y verificar si hay algún problema con la información a través de la página de vista previa del curso.
La siguiente figura es la fuente de datos de la vista previa del curso:
En la página de vista previa del curso, haga clic en "Imagen de reproducción de video" para abrir la página de reproducción de video y verifique si hay algún problema con el video correspondiente al plan del curso a través de la página de reproducción de video.
El efecto de la vista previa del curso es el mismo que se ve después del lanzamiento final del curso, por lo que la vista previa del curso se verá a través de la dirección del nombre de dominio del portal del sitio web. La siguiente figura muestra el diagrama de flujo de la vista previa del curso completo:
descrito de la siguiente manera:
1. Haga clic en la vista previa del curso y solicite el servicio de administración de contenido para obtener una vista previa del curso a través de Nginx y la puerta de enlace del servicio en segundo plano.
2. El servicio de administración de contenido consulta e integra información relevante del curso, presenta y genera páginas en el lado del servidor a través de la tecnología del motor de plantillas y las devuelve al navegador.
3. Haga clic en "Aprender ahora" en la página de vista previa del curso para abrir la página de reproducción de video.
4. La página de reproducción de video solicita la puerta de enlace del servicio en segundo plano a través de Nginx, consulta el directorio del plan de curso de visualización de información del curso, solicita el servicio de recursos de medios para consultar la dirección del archivo de video vinculado al plan del curso y explora y reproduce videos en línea.
2.2 Motor de plantillas
2.2.1 ¿Qué es un motor de plantillas?
El motor de plantillas recomendado por springboot es thymeleaf. La tecnología anterior todavía usa el motor de plantillas, y se recomienda separar los extremos frontal y posterior.
De acuerdo con el análisis anterior del modelo de datos, la vista previa del curso es para integrar la información relevante del curso y mostrarla en la interfaz de vista previa del curso.La interfaz de vista previa del curso es consistente con la interfaz de detalles del curso publicada por el curso.
El proyecto utiliza tecnología de motor de plantillas para realizar la interfaz de vista previa del curso. ¿Qué es un motor de plantillas?
La tecnología jsp que usamos en los primeros días es una tecnología de motor de plantillas, como se muestra en la siguiente figura:
1. El navegador solicita el servidor web
2. El servidor representa la página, y el proceso de representación consiste en llenar la página jsp (plantilla) con datos (modelo).
3. El servidor devuelve la página renderizada al navegador.
Entonces, el motor de plantillas es: plantilla + datos = salida, la página Jsp es la plantilla, la etiqueta jsp incrustada en la página son los datos y la combinación de las dos salidas es la página web html.
¿Cuáles son los motores de plantilla de Java comúnmente utilizados?
Jsp、Freemarker、Thymeleaf、Velocity 等。
Este proyecto utiliza Freemarker como tecnología de motor de plantilla.
Dirección oficial de Freemarker: http://freemarker.foofun.cn/
FreeMarker es un motor de plantillas : una herramienta genérica para generar texto de salida (páginas web HTML, correos electrónicos, archivos de configuración, código fuente, etc.) basado en plantillas y datos a modificar. No está destinado a usuarios finales, sino a una biblioteca de clases de Java, un componente que los programadores pueden integrar en los productos que desarrollan. FreeMarker es gratuito y se publica bajo la licencia Apache versión 2.0.
2.2.2 Inicio rápido de Freemarker
A continuación, configure el entorno operativo de Freemarker en la capa de interfaz de administración de contenido y pruébelo.
Agregue el paquete de integración de Freemarker y SpringBoot en la capa de interfaz de administración de contenido
<!-- Spring Boot 对结果视图 Freemarker 集成 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>Configure freemarker para la capa de interfaz de administración de contenido en nacos y agregue un nuevo freemarker-config-dev.yaml al grupo de configuración pública
La información de configuración es la siguiente:
spring:
freemarker:
enabled: true
cache: false #关闭模板缓存，方便测试
settings:
template_update_delay: 0
suffix: .ftl #页面模板后缀名
charset: UTF-8
template-loader-path: classpath:/templates/ #页面模板位置(默认为 classpath:/templates/)
resources:
add-mappings: false #关闭项目中的静态资源映射(static、resources文件夹下的资源)Agregue freemarker-config-dev.yaml al proyecto de interfaz de administración de contenido
Agregue una plantilla, cree un directorio de plantillas en recursos y agregue un archivo de plantilla test.ftl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
</head>
<body>
Hello ${name}!
</body>
</html>Escriba el método del controlador y prepare los datos del modelo.
package com.xuecheng.content.api;
/**
* @description freemarker测试
*/
@Controller
public class FreemarkerController {
@GetMapping("/testfreemarker")
public ModelAndView test(){
ModelAndView modelAndView = new ModelAndView();
//设置模型数据
modelAndView.addObject("name","小明");
//设置模板名称
modelAndView.setViewName("test");
return modelAndView;
}
}Inicie el proyecto de interfaz de administración de contenido, visite http://localhost:63040/content/testfreemarker
Salida de pantalla: ¡Hola Xiao Ming!
freemarker proporciona muchas instrucciones para analizar varios tipos de modelos de datos, dirección de referencia: http://freemarker.foofun.cn/ref_directives.html
2.3 Probar páginas estáticas
2.3.1 Implementación del portal del sitio web
En la interfaz de vista previa del curso, se debe cargar contenido como css, js e imágenes. Aquí, nginx se implementa para acceder a estos recursos estáticos. Para los recursos dinámicos servidos por SpringBoot, Nginx procesará las solicitudes, como se muestra en la siguiente figura:
1. Instale Nginx en esta máquina, obtenga nginx-1.23.1.zip del directorio de materiales del curso y descomprímalo.
2. Ejecute nginx.exe en el directorio nginx-1.23.1.
El puerto predeterminado es 80. Si el puerto local 80 está ocupado, debe eliminar el proceso ocupado antes de iniciar nginx.
Si no puede eliminar el proceso que ocupa el puerto 80, debe modificar el archivo de configuración conf/nginx.conf en el directorio nginx-1.23.1
Cambie el puerto 80 a un puerto libre.
Inicie nginx, visite http://localhost y aparecerá la siguiente página web, lo que indica que el inicio se realizó correctamente
Comience a implementar el proyecto front-end a continuación:
1. Obtenga xc-ui-pc-static-portal.zip del directorio de materiales del curso y descomprímalo.
2. Modifique el archivo de hosts locales y agregue 127.0.0.1 www.51xuecheng.cn 51xuecheng.cn ucenter.51xuecheng.cn teacher.51xuecheng.cn file.51xuecheng.cn.
El archivo de hosts del sistema operativo Windows 10 se encuentra en C:\Windows\System32\drivers\etc
El archivo hosts del sistema operativo Centos7 se encuentra en el directorio /etc.
Agregue la siguiente configuración al archivo de hosts
127.0.0.1 www.51xuecheng.cn 51xuecheng.cn ucenter.51xuecheng.cn teacher.51xuecheng.cn file.51xuecheng.cn3. Busque el directorio conf en el directorio nginx-1.23.1 y configure el archivo nginx.conf en el directorio.
El contenido de la configuración es el siguiente, preste atención para cambiar la ruta del directorio 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;
#}
}Inicie nginx:
Ingrese al administrador de tareas y elimine los dos procesos de nginx
Haga doble clic en nginx.exe nuevamente después de eliminarlo.
Después de que el inicio sea exitoso, el proceso nginx aparecerá en el administrador de tareas.
Los archivos de registro están en el directorio de registros en el directorio de instalación de nginx:
Comience con éxito y visite http://www.51xuecheng.cn
2.3.2 Página de detalles del curso
Course_template.html es una página html estática, y la etiqueta de marcador libre no se le ha agregado. Si desea obtener una vista previa de la página, debe usar Nginx para obtener una vista previa, ya que la página necesita cargar algunas hojas de estilo css, imágenes y otro contenido.
El archivo Course_Template.html está en el directorio xc-ui-pc-static-portal\course
Acceso a través del navegador: http://www.51xuecheng.cn/course/course_template.html
El efecto es el siguiente:
La apariencia de esta pantalla muestra que no hay problema en la navegación normal de archivos de plantilla.
2.3.3 Dirección del servidor de archivos de configuración de Nginx (sin una puerta de enlace primero)
Durante la vista previa del curso, es necesario mostrar la imagen del curso e insertar el video del curso en línea. La imagen y el video del curso se almacenan en el sistema de archivos MinIO. La parte inferior es uniformemente enviada por Nginx y se accede a través del archivo. nombre de dominio del servicio. Como se muestra abajo:
Configure el siguiente contenido en el archivo de hosts, si ya existe, no repita la configuración.
127.0.0.1 www.51xuecheng.cn file.51xuecheng.cnConfigure la dirección proxy del servidor de archivos en nginx.conf
Revisión de Nginx: para archivos de configuración, consulte la tercera sección a continuación:
#文件服务
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;
}
}Una vez completada la configuración, vuelva a cargar el archivo de configuración de nginx.
Ingrese al directorio donde se encuentra nginx.exe a través de cmd y ejecute el siguiente comando
nginx.exe -s reloadAcceda a las imágenes a través de la dirección del archivo de imagen http://file.51xuecheng.cn/mediafiles/
datos en los medios
2.3.4 Enrutamiento de página estática de reproducción de video Nginx
Ingrese a la página de detalles del curso, haga clic en el nombre de la sección debajo del estudio ahora o en el catálogo de cursos para abrir la página de reproducción de video.
Primero configure la dirección de la página de reproducción de video en nginx.conf
location /course/preview/learning.html {
alias D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal/course/learning.html;
}
location /course/search.html {
root D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal;
}
location /course/learning.html {
root D:/itcast2022/xc_edu3.0/code_1/xc-ui-pc-static-portal;
}Cargar archivo de configuración de nginx
Haga clic en el enlace de reproducción de video en la página de detalles del curso para abrir la página de reproducción de video, como se muestra a continuación:
A continuación, debe configurar la ruta de reproducción de video de la página learning.html para probar la página de reproducción de video, encontrar la definición del objeto videoObject en la página learning.html y configurar la dirección de reproducción de video.
Una vez completada la configuración, actualice la página y observe si el video se puede reproducir normalmente.
Nota: Esta página solicitará la interfaz de fondo para obtener el plan del curso, que no se procesará aquí por el momento, y se procesará en la oficina de desarrollo de la interfaz más adelante. Siempre que la página se pueda abrir normalmente y se pueda reproducir el video, se pasa la prueba.
2.4 Definición de interfaz
2.4.1 Interfaz de vista previa del curso, devuelve el objeto ModelAndView de acuerdo con la identificación del curso
La interfaz de vista previa del curso debe integrar la información del curso y volver al navegador después de mostrar la página en el lado del servidor.
El siguiente es un análisis de la interfaz de vista previa del curso:
1. Solicitar parámetros
Pase la identificación del curso, indicando qué curso desea obtener una vista previa.
2. Resultado de la respuesta
Muestra la página de detalles del curso en el navegador.
La página de respuesta al navegador se implementa utilizando la tecnología del motor de plantilla de freemarker.Primero, obtenga la página de vista previa del curso Course_template.html del directorio de material del curso, cópiela en los recursos/plantillas del proyecto de interfaz de administración de contenido y cópiela en este directorio y asígnele el nombre Course_template.ftl
Comience a definir la interfaz a continuación:
Aviso:
No use @RestController, porque no quiere @ResponseBody, porque el valor de retorno del método no es JSON
package com.xuecheng.content.api;
/**
* @description 课程预览，发布
*/
@Controller
public class CoursePublishController {
@GetMapping("/coursepreview/{courseId}")
public ModelAndView preview(@PathVariable("courseId") Long courseId){
ModelAndView modelAndView = new ModelAndView();
//指定模型
modelAndView.addObject("model",null);
//指定模板
modelAndView.setViewName("course_template");//根据视图名称加“.ftl”找到模板，即course_template.ftl
return modelAndView;
}
}Revise el uso de la hoja de tomillo:
package com.xuecheng.content.api; /** * @description 课程预览，发布，thymeleaf方法 */ @Controller public class CoursePublishController { @GetMapping("/coursepreview/{courseId}") public String preview(@PathVariable("courseId") Long courseId,Model model){ //指定模型 model.addAttribute("model",null); //指定模板 return "course_template";//等同于classpath:/templates/course_template.ftl } }
Reinicie el proyecto de interfaz de administración de contenido, visite http://localhost:63040/content/coursepreview/74
Como se muestra abajo:
El contenido de la página de vista previa del curso no tiene estilo, este problema se solucionará más adelante.
2.4.2 Proxy inverso de configuración de Nginx (con puerta de enlace)
Aunque se puede acceder normalmente a la interfaz de vista previa del curso, la página no tiene estilo. Verifique el registro de solicitud del navegador y descubra que no se puede acceder normalmente a la imagen y el estilo.
Todos estos recursos estáticos se encuentran en el portal. Necesitamos usar el proxy inverso Nginx para acceder a la interfaz de vista previa del curso y acceder a la vista previa del curso a través de la URL del portal.
1. Configurar bajo Nginx:
Revisión de Nginx: para archivos de configuración, consulte la tercera sección a continuación:
#后台网关
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. Vuelva a cargar el archivo de configuración de Nginx:
nginx.exe -s reload3. Inicie la puerta de enlace de microservicio
4. Visite la nueva dirección en este momento: http://www.51xuecheng.cn/api/content/coursepreview/74
El resultado es el siguiente y el estilo de página es normal.
Aunque la página es normal, el contenido interno es todo contenido estático. Luego, la capa de interfaz llama al método de servicio para obtener datos del modelo y representar la página.
El método actual es acceder a la puerta de enlace a través de Nginx, y luego la puerta de enlace reenvía la solicitud al microservicio.Nginx es el servidor proxy al frente de todo el proyecto, como se muestra en la siguiente figura:
2.5 Desarrollo de la interfaz
2.5.1 Extracción de clase del modelo de información de vista previa del curso
La vista previa del curso es para integrar la información del curso, como la información básica del curso, la información de marketing, los planes del curso y los profesores, y mostrarlos en la página de vista previa. Como se muestra abajo:
Se requiere un modelo de datos cuando se usa freemarker para representar y generar vistas. Este modelo de datos incluye información básica, información de marketing, planes de cursos, profesores y otra información.
Vista previa del curso Clase de modelado de información
package com.xuecheng.content.model.dto;
/**
* @description 课程预览数据模型
*/
@Data
@ToString
public class CoursePreviewDto {
//课程基本信息,课程营销信息
CourseBaseInfoDto courseBase;
//课程计划信息
List<TeachplanDto> teachplans;
//师资信息暂时不加...
}CourseBaseInfoDto: incluye información básica del curso e información de marketing.
//课程基本信息dto
@Data
public class CourseBaseInfoDto extends CourseBase {
/**
* 收费规则，对应数据字典
*/
private String charge;
/**
* 价格
*/
private Float price;
/**
* 原价
*/
private Float originalPrice;
/**
* 咨询qq
*/
private String qq;
/**
* 微信
*/
private String wechat;
/**
* 电话
*/
private String phone;
/**
* 有效期天数
*/
private Integer validDays;
/**
* 大分类名称
*/
private String mtName;
/**
* 小分类名称
*/
private String stName;
}List<TeachplanDto> : contiene una lista de planes de lecciones.
TeachplanDto
/**
* @description 课程计划信息模型类
*/
@Data
@ToString
public class TeachplanDto extends Teachplan {
//与媒资管理的信息
private TeachplanMedia teachplanMedia;
//小章节list
private List<TeachplanDto> teachPlanTreeNodes;
}2.5.2 Servicio, consulta la clase modelo según el id del curso
El servicio es responsable de consultar información básica, información de marketing, plan de curso y otra información relacionada con el curso de la base de datos para formar un objeto CoursePreviewDto.
package com.xuecheng.content.service.impl;
@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;
}
}servicio, información básica del curso de consulta e información de marketing según id
CourseBaseInfoServiceImpl
//查询课程信息
public CourseBaseInfoDto getCourseBaseInfo(Long courseId){
//从课程基本信息表查询
CourseBase courseBase = courseBaseMapper.selectById(courseId);
if(courseBase==null){
return null;
}
//从课程营销表查询
CourseMarket courseMarket = courseMarketMapper.selectById(courseId);
//组装在一起
CourseBaseInfoDto courseBaseInfoDto = new CourseBaseInfoDto();
BeanUtils.copyProperties(courseBase,courseBaseInfoDto);
if(courseMarket!=null){
BeanUtils.copyProperties(courseMarket,courseBaseInfoDto);
}
//通过courseCategoryMapper查询分类信息，将分类名称放在courseBaseInfoDto对象
CourseCategory mtObj = courseCategoryMapper.selectById(courseBase.getMt());
String mtName = mtObj.getName();//大分类名称
courseBaseInfoDto.setMtName(mtName);
CourseCategory stObj = courseCategoryMapper.selectById(courseBase.getSt());
String stName = stObj.getName();//小分类名称
courseBaseInfoDto.setStName(stName);
return courseBaseInfoDto;
}servicio, conexión externa dao, consultar información del plan de curso según id
Información del plan de lección de TeachplanService
@Override
public List<TeachplanDto> findTeachplanTree(Long courseId) {
List<TeachplanDto> teachplanDtos = teachplanMapper.selectTreeNodes(courseId);
return teachplanDtos;
} <select id="selectTreeNodes" parameterType="long" resultMap="treeNodeResultMap">
select
one.id one_id,
one.pname one_pname,
one.parentid one_parentid,
one.grade one_grade,
one.media_type one_mediaType,
one.start_time one_stratTime,
one.end_time one_endTime,
one.orderby one_orderby,
one.course_id one_courseId,
one.course_pub_id one_coursePubId,
two.id two_id,
two.pname two_pname,
two.parentid two_parentid,
two.grade two_grade,
two.media_type two_mediaType,
two.start_time two_stratTime,
two.end_time two_endTime,
two.orderby two_orderby,
two.course_id two_courseId,
two.course_pub_id two_coursePubId,
m1.media_fileName mediaFilename,
m1.id teachplanMeidaId,
m1.media_id mediaId
from teachplan one
left join teachplan two on two.parentid = one.id
left join teachplan_media m1 on two.id = m1.teachplan_id
where one.parentid = 0
and one.course_id = #{id}
order by one.orderby,two.orderby
</select>2.5.3 Capa de interfaz perfecta
El controlador de la capa de interfaz llama al método de servicio para obtener los datos del modelo requeridos por el motor de plantillas.
@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;
}2.5.4 Depuración conjunta de front-end y back-end
Efecto esperado: haga clic en "Vista previa" en la administración del curso para ir a la página de detalles del video de vista previa
Resulta que el front-end apunta directamente a la dirección de la puerta de enlace de fondo, y ahora debe cambiarse a la dirección de Nginx, de la siguiente manera:
Reinicie el proyecto front-end, ingrese a la lista de cursos y haga clic en el botón "Vista previa" para abrir la página de vista previa del curso normalmente http://www.51xuecheng.cn/api/content/coursepreview/2
2.5.5 Plantillas de escritura
Una vez que los datos del modelo estén listos, el siguiente paso es llenar los datos del modelo en Course_template.ftl. Al llenar, tenga cuidado de no llenar demasiado a la vez, y actualice y depure mientras llena.
freemarker proporciona muchas instrucciones para analizar varios tipos de modelos de datos, dirección de referencia: http://freemarker.foofun.cn/ref_directives.html
Después de modificar la plantilla, es necesario compilarla, como se muestra en la siguiente figura:
Al depurar la plantilla, puede ver qué información falta y complementarla en la oficina de administración del curso. Por ejemplo, la siguiente figura muestra que la información del plan del curso está incompleta y debe ingresar a la interfaz del plan del curso para agregar el curso. plan.
La plantilla completa de course_template.ftl es ligeramente:
2.5.6 Página de reproducción de video, URL de consulta de video y clase de modelo de vista previa
Ingrese a la página de reproducción de video desde la página de detalles del curso, como se muestra a continuación:
En esta página, es necesario obtener información del curso del fondo y obtener la dirección de video correspondiente de acuerdo con el plan del curso. Escriba estas dos interfaces a continuación:
Dos solicitudes y respuestas:
Interfaz para obtener información del curso: /open/content/course/whole/{courseId}
/open/content/course/whole/课程id
响应：同课程预览service接口返回数据Obtenga la interfaz de dirección de video de acuerdo con el plan del curso: /open/media/preview/{mediaId}
/open/media/preview/课程计划id
响应：
{"code":0,"msg":"success","result":"视频的url","successful":true}1. enrutamiento de configuración nginx
#openapi
location /open/content/ {
proxy_pass http://gatewayserver/content/open/;
}
location /open/media/ {
proxy_pass http://gatewayserver/media/open/;
}Configure y ejecute nginx.exe -s reload para cargar el archivo de configuración de nginx
2. Consulte la información de vista previa del curso de acuerdo con la identificación del curso
Defina la clase CourseOpenController en la capa de interfaz de administración de contenido y defina la interfaz: interfaz para obtener información del curso: /open/content/course/whole/{courseId}
el código se muestra a continuación:
@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;
}
}3. [Módulo de recursos de medios] Obtenga la URL del video de acuerdo con la identificación del archivo
Defina la clase MediaOpenController en el proyecto media-api del servicio de gestión de activos multimedia y defina la interfaz /open/media/preview/
el código se muestra a continuación:
@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());
}
}5. prueba
Después de la definición, inicie la administración de contenido, la administración de activos de medios, los servicios de puerta de enlace de servicio en segundo plano, pruebe si la página de reproducción de video puede obtener el plan del curso normalmente y haga clic en el plan de curso específico para reproducir el video normalmente.
Revisión de la presentación de 3 cursos
3.1 Análisis de la demanda
3.1.1 Proceso comercial
De acuerdo con el análisis de los requisitos del módulo, el curso debe revisarse antes de publicarse y solo puede publicarse después de aprobar la revisión. La siguiente figura es el diagrama de flujo de la revisión y publicación del curso:
¿Por qué el curso se puede publicar solo después de pasar la revisión?
Esto se hace para evitar violaciones de la información del curso . La información incompleta del curso no es buena para la experiencia del usuario del sitio web. La revisión del curso no solo desempeña un papel de supervisión, sino que también ayuda a las instituciones de enseñanza a estandarizar el uso de la plataforma.
¿Cómo controlar la aprobación del curso antes de que el curso pueda publicarse?
Establezca el campo de estado de revisión del curso en la tabla básica del curso, tabla base_del_curso , que incluye: no enviado, enviado (no revisado), aprobado y reprobado.
La siguiente es la relación de conversión del estado del curso:
descrito de la siguiente manera:
1. Después de agregar un nuevo curso, su estado de aprobación es "No enviado" y su estado de publicación es "No publicado".
2. Una vez finalizada la edición de la información del curso, el personal de la institución docente ejecuta la operación "enviar para revisión". En este punto, el estado de revisión del curso es "Enviado".
3. Cuando se envíe el estado del curso, el personal de la plataforma de operaciones revisará el curso.
4. El personal de la plataforma de operación revisa el curso y hay dos resultados: se pasa la revisión y no se pasa la revisión.
5. Después de la revisión del curso, independientemente de si el estado es aprobado o no, la institución docente puede modificar el curso nuevamente y enviarlo para su revisión, en este momento, el estado del curso es "enviado". En este momento, el personal de la plataforma de operaciones volverá a revisar el curso.
6. Después de pasar la revisión del curso, el personal de la institución de enseñanza puede publicar el curso.Después de que el curso se publique con éxito, el curso se publicará en el estado de "publicado".
7. Después de que se publique el curso, el estado de publicación del curso se puede cambiar a "listo para usar" a través de la operación "listo para usar".
8. Después de que el curso se retira del estante, el curso se puede liberar nuevamente a través de la operación de "poner en el estante". Después de que el curso se coloca en el estante, el estado de publicación del curso es "publicado".
3.1.2 Formulario de prelanzamiento del curso y formulario de registro de auditoría
Modificación de datos permitida después de la revisión:
No es razonable si no se permite la modificación, porque después de enviar para revisión, puede continuar con la siguiente etapa del contenido del curso, como agregar planes de lecciones, cargar videos del curso, etc.
Si se permite la modificación, ¿de dónde proviene el contenido del curso visto durante la revisión del curso? Si también consulta desde la tabla de información básica del curso, la tabla de marketing del curso y la tabla del plan del curso, ¿qué problemas existen? Como se muestra abajo:
El personal de operación revisa el curso y la institución docente edita los mismos datos, lo que generará conflictos. Por ejemplo: la institución docente modifica los datos mientras el operador está revisando.
Utilice el formulario de prelanzamiento del curso para resolver el problema de la modificación de datos durante la revisión:
Como se muestra abajo:
Envíe la revisión del curso , resuma la información del curso y escríbala en la tabla de publicación previa del curso La tabla de publicación previa del curso registra la información del curso que la institución docente publicará en un momento determinado.
Los revisores del curso consultan la información de la tabla previa al lanzamiento para su revisión.
El curso se puede modificar mientras se revisa el curso, y el contenido modificado no se escribirá en el formulario de versión preliminar del curso.
La revisión del curso escribe la información en la tabla de publicación previa del curso en la tabla de publicación del curso mediante la ejecución de la publicación del curso.
Después de la revisión, después de la revisión, permita enviar nuevamente para revisión:
Esta pregunta ya se respondió al analizar el estado de revisión del curso anterior, como se muestra en la siguiente figura:
Después de enviar un curso para su revisión, debe esperar hasta que se complete la revisión del curso antes de enviar el curso nuevamente.
La función de revisión del curso involucra a la institución docente que presenta la revisión y al personal de operaciones que realiza la revisión del curso. En el aula, solo implementamos la función de envío de la revisión por parte de la institución docente , y el resultado de la revisión del curso se realiza modificando manualmente la base de datos.
Aunque la función de revisión del curso no está implementada en el aula, es necesario comprender el diseño de la tabla de datos de revisión del curso completo.
Envíe la revisión y escriba la información en la tabla de publicación previa del curso , la estructura de la tabla es similar a la tabla de publicación del curso , la principal diferencia es que el campo de estado de revisión y el campo de publicación son diferentes:
Actualizar el estado de revisión del curso del formulario de información básica del curso: Enviado
Después de la revisión del curso, actualice el estado de revisión de la tabla de información básica del curso y el estado de revisión de la tabla de prelanzamiento del curso, y escriba los resultados de la revisión en el registro de revisión del curso.
Formulario de liberación del curso:
La estructura de la tabla de registro de auditoría curso_auditoría es la siguiente:
3.2 Definición de interfaz, enviada para revisión de acuerdo con la identificación del curso
La interfaz para enviar la revisión del curso se define a continuación, y la interfaz se define en el controlador de publicación del curso de la siguiente manera:
@ResponseBody
@PostMapping ("/courseaudit/commit/{courseId}")
public void commitAudit(@PathVariable("courseId") Long courseId){
}3.3 Realización de Negocios
3.3.1 Proceso de negocio
1. Consulte la información básica del curso, la información de marketing del curso, la información del plan del curso y otra información relacionada con el curso, e intégrelos en la información previa al lanzamiento del curso.
2. Inserte un registro en la tabla de publicación previa del curso, Course_publish_pre, si ya existe, actualícelo y el estado de revisión es: Enviado.
3. Actualice el estado de revisión del curso de la tabla básica del curso a: Enviado.
Situaciones que no permiten el envío a revisión:
1. Los cursos que se han enviado para revisión no pueden enviarse para revisión.
2. Esta institución solo puede enviar los cursos de esta institución.
3. No se permite enviar imágenes cargadas para su revisión.
4. No se permite enviar para revisión sin agregar un plan de curso.
3.3.2 Servicio , enviar para revisión según la identificación de la institución y la identificación del curso
CoursePublishServiceImpl
@Transactional
@Override
public void commitAudit(Long companyId, Long courseId) {
CourseBaseInfoDto courseBaseInfo = courseBaseInfoService.getCourseBaseInfo(courseId);
if (courseBaseInfo == null) {
XueChengPlusException.cast("课程找不到");
}
//审核状态
String auditStatus = courseBaseInfo.getAuditStatus();
//如果课程的审核状态为已提交则不允许提交
if (auditStatus.equals("202003")) {
XueChengPlusException.cast("课程已提交请等待审核");
}
//本机构只能提交本机构的课程
//todo:本机构只能提交本机构的课程
//课程的图片、计划信息没有填写也不允许提交
String pic = courseBaseInfo.getPic();
if (StringUtils.isEmpty(pic)) {
XueChengPlusException.cast("请求上传课程图片");
}
//查询课程计划
//课程计划信息
List<TeachplanDto> teachplanTree = teachplanService.findTeachplanTree(courseId);
if (teachplanTree == null || teachplanTree.size() == 0) {
XueChengPlusException.cast("请编写课程计划");
}
//查询到课程基本信息、营销信息、计划等信息插入到课程预发布表
CoursePublishPre coursePublishPre = new CoursePublishPre();
BeanUtils.copyProperties(courseBaseInfo, coursePublishPre);
//设置机构id
coursePublishPre.setCompanyId(companyId);
//营销信息
CourseMarket courseMarket = courseMarketMapper.selectById(courseId);
//转json
String courseMarketJson = JSON.toJSONString(courseMarket);
coursePublishPre.setMarket(courseMarketJson);
//计划信息
//转json
String teachplanTreeJson = JSON.toJSONString(teachplanTree);
coursePublishPre.setTeachplan(teachplanTreeJson);
//状态为已提交
coursePublishPre.setStatus("202003");
//提交时间
coursePublishPre.setCreateDate(LocalDateTime.now());
//查询预发布表，如果有记录则更新，没有则插入
CoursePublishPre coursePublishPreObj = coursePublishPreMapper.selectById(courseId);
if (coursePublishPreObj == null) {
//插入
coursePublishPreMapper.insert(coursePublishPre);
} else {
//更新
coursePublishPreMapper.updateById(coursePublishPre);
}
//更新课程基本信息表的审核状态为已提交
CourseBase courseBase = courseBaseMapper.selectById(courseId);
courseBase.setAuditStatus("202003");//审核状态为已提交
courseBaseMapper.updateById(courseBase);
}3.4 Interfaz perfecta
Mejorar el código de la capa de interfaz.
@ResponseBody
@PostMapping ("/courseaudit/commit/{courseId}")
public void commitAudit(@PathVariable("courseId") Long courseId){
Long companyId = 1232141425L;
coursePublishService.commitAudit(companyId,courseId);
}3.5 Prueba
Use el front-end para revisar los cursos con anticipación:
1. Encuentre un curso con información incompleta y pruebe cada restricción.
2. Después de enviar normalmente, observe si el contenido registrado en la tabla de prelanzamiento del curso en la base de datos está completo.
3. Vuelva a enviarlo después de la revisión de la prueba y observe si el contenido registrado en la tabla de prelanzamiento del curso en la base de datos es correcto después del envío.
Si se aprueba la aprobación, la base de datos debe modificarse manualmente:
1. Modificar el estado del formulario de prelanzamiento del curso a 202004 aprobado.
2. Modificar el estado de revisión del cuadro curricular básico al 202004 aprobado.
