4.2.5 test
Use swagger UI or postman to test the interface.
4.3 course information template design
After determining the data model required for the static, you can write a page template. The course details page is composed of multiple static pages, so we need to create multiple page templates. In this chapter, we create the main template of the course details page, namely the course information template.
4.3.1 template content
For the complete template, please refer to the "materials \ course details page template \ course.ftl" file. The core contents of the template are listed below:
Basic course information:
[mw_shl_code=applescript,true]
@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">Preferential price￥${courseMarket.price}</span>
<span class="old‐pic">Original price￥${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 > learn now < / a > < a href =" ා "@ Click =" addopencourse "V ‐ if =" learnstatus = = 2 "V ‐ cloak > sign up now</a>
<a href="#"@ Click =" buy "V ‐ if =" learnstatus = = 3 "V ‐ clock > buy now</a>
<span><em>Difficulty level</em> <#if courseBase.grade=='200001'>
Lower
<#Elseif coursebase. Grade = ='200002 '> intermediate
<#elseif courseBase.grade=='200003'>
senior
</#if>
</span>
<span><em>Duration of course</em><stat v‐text="course_stat.s601001"></stat>
</span>
<span><em>score</em><stat v‐text="course_stat.s601002"></stat></span>
<span><em>Teaching mode</em>
<#If coursebase. Studymodel = ='201001 '> free learning
<#Elseif coursebase. Studymodel = ='201002 '> task-based learning
</#if>[/mw_shl_code]
[mw_shl_code=applescript,true] </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>Collection <stat vtext="course_stat.s601003"></stat> </span>
<span>share <i class="i‐weixin"></i><i class="i‐qq"> </i></span></p>
</div>
[/mw_shl_code]
Curriculum plan
[mw_shl_code=applescript,true]<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>[/mw_shl_code]
Page header:
The local codes are as follows:
[mw_shl_code=applescript,true]<body data‐spy="scroll" data‐target="#articleNavbar" data‐offset="150">
<!‐‐ Page header ‐‐>
<!‐‐#include virtual="/include/header.html"‐‐> [/mw_shl_code]
Footer:
The local codes are as follows:
[mw_shl_code=applescript,true]<!‐‐ Bottom of page ‐‐>
<!‐‐Bottom copyright‐‐>
<!‐‐#include virtual="/include/footer.html"‐‐>
[/mw_shl_code]
[mw_shl_code=applescript,true]Dynamic script file:
<script>
//Course id
var courseId = "template" </script>
<!‐‐#include virtual="/include/course_detail_dynamic.html"‐‐>
Teacher information file:
Get the teachers of the course from the course data Id，Because the teacher information management function is not developed here, we use fixed teacher information files:
Educational institution documents:
As the same as teacher information, because the function module of educational institution is not developed, here we use the fixed educational institution file:
<div class="about‐teach">
<!‐‐Institutional information‐‐>
<!‐‐#include virtual="/company/company_info_template.html"‐‐>
</div>
[/mw_shl_code]