4.2.5 测试
使用swagger-ui或postman测试本接口。
4.3 课程信息模板设计
在确定了静态化所需要的数据模型之后,就可以编写页面模板了,课程详情页面由多个静态化页面组成,所以我们 需要创建多个页面模板,本章节创建课程详情页面的主模板,即课程信息模板。
4.3.1 模板内容
完整的模板请参考 “资料\课程详情页面模板\course.ftl“ 文件,下边列出模板中核心的内容:
课程基本信息:
[AppleScript] 纯文本查看 复制代码
@Override @GetMapping("/courseview/{id}") public CourseView courseview(@PathVariable("id") String id) {
return courseService.getCoruseView(id); }
<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="http://ucenter.xuecheng.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>
[AppleScript] 纯文本查看 复制代码 </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 vtext="course_stat.s601003"></stat> </span>
<span>分享 <i class="i‐weixin"></i><i class="i‐qq"> </i></span></p>
</div>
课程计划
[AppleScript] 纯文本查看 复制代码 <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>
页头:
局部代码如下:
[AppleScript] 纯文本查看 复制代码 <body data‐spy="scroll" data‐target="#articleNavbar" data‐offset="150">
<!‐‐ 页面头部 ‐‐>
<!‐‐#include virtual="/include/header.html"‐‐>
页尾:
局部代码如下:
[AppleScript] 纯文本查看 复制代码 <!‐‐ 页面底部 ‐‐>
<!‐‐底部版权‐‐>
<!‐‐#include virtual="/include/footer.html"‐‐>
[AppleScript] 纯文本查看 复制代码 动态脚本文件:
<script>
//课程id
var courseId = "template" </script>
<!‐‐#include virtual="/include/course_detail_dynamic.html"‐‐>
教师信息文件:
从课程数据中获取课程所属的教师Id,这里由于教师信息管理功能没有开发我们使用固定的教师信息文件:
教育机构文件:
同教师信息一样,由于教育机构功能模块没有开发,这里我们使用固定的教育机构文件:
<div class="about‐teach">
<!‐‐机构信息‐‐>
<!‐‐#include virtual="/company/company_info_template.html"‐‐>
</div>
|