4.2 课程数据模型查询接口
静态化操作需要模型数据方可进行静态化,课程数据模型由课程管理服务提供,仅供课程静态化程序调用使用。
4.2.1 接口定义
1、响应结果类型
@Data
@ToString
@NoArgsConstructor
public class CourseView implements Serializable {
CourseBase courseBase;//基础信息
CourseMarket courseMarket;//课程营销
CoursePic coursePic;//课程图片
TeachplanNode TeachplanNode;//教学计划
}
2、请求类型
String:课程id
3、接口定义如下
@ApiOperation(
"
课程视图查询
"
)
public CourseView courseview(String id);
4.2.2 Dao
需要对course_base、course_market、course_pic、teachplan等信息进行查询,新建课程营销的dao,其它dao已经存在不用再建。
public interface CourseMarketRepository extends JpaRepository<CourseMarket,String> {
}
4.2.3 Service
//课程视图查询[/size][/font]
[font=微软雅黑][size=3]public CourseView getCoruseView(String id) {
CourseView courseView = new CourseView();
//查询课程基本信息
Optional<CourseBase> optional =
courseBaseRepository
.findById(id);
if(optional.isPresent()){
CourseBase courseBase
=
optional.
get();
courseView.setCourseBase(courseBase);
}
//查询课程营销信息
Optional<CourseMarket> courseMarketOptional =
courseMarketRepository
.findById(id);
if(courseMarketOptional.isPresent()){
CourseMarket courseMarket
=
courseMarketOptional.
get();
courseView.setCourseMarket(courseMarket);
}
//查询课程图片信息
Optional<CoursePic> picOptional =
coursePicRepository
.findById(id);
if(picOptional.isPresent()){
CoursePic coursePic
=
picOptional.
get();
courseView.setCoursePic(picOptional.
get());
}
//查询课程计划信息
TeachplanNode teachplanNode
=
teachplanMapper.selectList(id);
courseView.setTeachplanNode(teachplanNode);
return courseView;
}
4.2.4 Controller
@Override[/size][/font]
[font=微软雅黑][size=3]@GetMapping(
"
/courseview/{id}
"
)
public CourseView courseview(@PathVariable(
"
id
"
) String id) {
return courseService.
getCoruseView(id);
}
4.2.5 测试
使用swagger-ui或postman测试本接口。
4.3 课程信息模板设计
在确定了静态化所需要的数据模型之后,就可以编写页面模板了,课程详情页面由多个静态化页面组成,所以我们需要创建多个页面模板,本章节创建课程详情页面的主模板,即课程信息模板。
4.3.1 模板内容
完整的模板请参考“资料\课程详情页面模板\course.ftl“文件,下边列出模板中核心的内容:
课程基本信息:
<div class
=
"
banner
‐
left
"
>
<p class
=
"
tit
"
>${courseBase.name}</p>
<p class
=
"
pic
"
><span class
=
"
new
‐
pic
"
>特惠价格¥${courseMarket.
price}</span> <span
class
=
"
old
‐
pic
"
>原价¥${courseMarket.
price_old!}</span></p>
<p class
=
"
info
"
>
<a href=
"
[url]http://ucenter.xuecheng[/url]
.com/#/learning/${courseBase.id}/0
"
target
=
"
_blank
"
v
‐
if=
"
learnstatus
== 1
"
v
‐
cloak>马上学习</a>
<a href=
"
#
"
@click=
"
addopencourse
"
v
‐
if=
"
learnstatus
== 2
"
v
‐
cloak>立即报名</a>
<a href=
"
#
"
@click=
"
buy
"
v
‐
if=
"
learnstatus
==
3
"
v
‐
cloak>立即购买</a>
<span><em>难度等级</em>
<#if courseBase.
grade
==
'
200001
'
>
低级
<#elseif courseBase.
grade
==
'
200002
'
>
中级
<#elseif courseBase.
grade
==
'
200003
'
>
高级
</#if>
</span>
<span><em>课程时长</em><stat v
‐
text
=
"
course_stat.s601001
"
></stat>
</span>
<span><em>评分</em><stat v
‐
text
=
"
course_stat.s601002
"
></stat></span>
<span><em>授课模式</em>
<#if courseBase.studymodel==
'
201001
'
>
自由学习
<#elseif courseBase.studymodel==
'
201002
'
>
任务式学习
</#if>
</span>
</p>
</div>
<div class
=
"
banner
‐
rit
"
>
<#if coursePic.
pic??>
<p><img src
=
"
http://img
.xuecheng
.com/${coursePic.
pic}
"
alt
=
""
width=
"
270
"
height
=
"
156
"
>
</p>
<#else>
<p><img src
=
"
/static/img/widget
‐
video.
png
"
alt
=
""
width=
"
270
"
height
=
"
156
"
> </p>
</#if>
<p class
=
"
vid
‐
act
"
><span> <i class
=
"
i
‐
heart
"
></i>收藏 <stat v
‐
text
=
"
course_stat.s601003
"
></stat> </span> <span>分享 <i class
=
"
i
‐
weixin
"
></i><i class
=
"
i
‐
qq
"
>
</i></span></p>
</div>
课程计划:
<div class
=
"
content
"
>
<#if teachplanNode.children??>
<#list teachplanNode.children as firstNode>
<div class
=
"
item
"
>
<div class
=
"
title act
"
><i class
=
"
i
‐
chevron
‐
top
"
>
</i>${firstNode.
pname}</div>
<div class
=
"
about
"
>${firstNode.description!}</div>
<div class
=
"
drop
‐
down
"
style
=
"
height: ${firstNode.children?
size
*
50}px;
"
>
<ul class
=
"
list
‐
box
"
>
<#list firstNode.children as secondNode>
<li>${secondNode.
pname}</li>
</#list>
</ul>
</div>
</div>
</#list>
</#if>
</div>
页头:
局部代码如下:
<body data
‐
spy
=
"
scroll
"
data
‐
target
=
"
#articleNavbar
"
data
‐
offset
=
"
150
"
>
<!
‐‐
页面头部
‐‐
>
<!
‐‐
#include virtual=
"
/include/header.html
"
‐‐
>
页尾:
局部代码如下:
<!
‐‐
页面底部
‐‐
>
<!
‐‐
底部版权
‐‐
>
<!
‐‐
#include virtual=
"
/include/footer.html
"
‐‐
>
动态脚本文件:
<script>
//课程id
var courseId
=
"
template
"
</script>
<!
‐‐
#include virtual=
"
/include/course_detail_dynamic.html
"
‐‐
>
教师信息文件:
从课程数据中获取课程所属的教师Id,这里由于教师信息管理功能没有开发我们使用固定的教师信息文件:
<div class
=
"
content
‐
com course
"
>
<div class
=
"
title
"
><span>课程制作</span></div>
<!
‐‐
#include virtual=
"
/teacher/teacher_info_template01.html
"
‐‐
>
</div>
教育机构文件:
同教师信息一样,由于教育机构功能模块没有开发,这里我们使用固定的教育机构文件:
<div class
=
"
about
‐
teach
"
>
<!
‐‐
机构信息
‐‐
>
<!
‐‐
#include virtual=
"
/company/company_info_template.html
"
‐‐
>
</div>