|
【郑州校区】学成在线 第9天 讲义-课程预览 Eureka Feign 五
3.3 课程预览技术方案
根据要求：课程详情页面采用静态化技术生成Html页面，课程预览的效果要与最终静态化的Html页面内容一致。
所以，课程预览功能也采用静态化技术生成Html页面，课程预览使用的模板与课程详情页面模板一致，这样就可以保证课程预览的效果与最终课程详情页面的效果一致。
操作流程：
1、制作课程详情页面模板
2、开发课程详情页面数据模型的查询接口（为静态化提供数据）
3、调用cms课程预览接口通过浏览器浏览静态文件
4 课程详情页面静态化
4.1 静态页面测试
4.1.1 页面内容组成
我们在编写一个页面时需要知道哪些信息是静态信息，哪些信息为动态信息，下图是页面的设计图：
打开静态页面，观察每部分的内容。
红色表示动态信息，红色以外表示静态信息。
红色动态信息：表示一个按钮，根据用户的登录状态、课程的购买状态显示按钮的名称及按钮的事件。
包括以下信息内容：
1、课程信息
课程标题、价格、课程等级、授课模式、课程图片、课程介绍、课程目录。
2、课程统计信息
课程时长、评分、收藏人数
3、教育机构信息
公司名称、公司简介
4、教育机构统计信息
好评数、课程数、学生人数
5、教师信息
老师名称、老师介绍
4.1.2 页面拆分
将页面拆分成如下页面：
1、页头
本页头文件和门户使用的页头为同一个文件。
参考：代码\页面与模板\include\header.html
2、页面尾
本页尾文件和门户使用的页尾为同一个文件。
参考：代码\页面与模板\include\footer.html
3、课程详情主页面
每个课程对应一个文件，命名规则为：课程id.html（课程id动态变化）
模板页面参考：\代码\页面与模板\course\detail\course_main_template.html
4、教育机构页面
每个教育机构对应一个文件，文件的命名规则为：company_info_公司id.html（公司id动态变化）
参考：代码\页面与模板\company\company_info_template.html
5、老师信息页面
每个教师信息对应一个文件，文件的命名规则为：teacher_info_教师id.html（教师id动态变化）
参考：代码\页面与模板\teacher\teacher_info_template01.html
6、课程统计页面
每个课程对应一个文件，文件的命名规则为：course_stat_课程id.
json（课程id动态变化）
参考：\代码\页面与模板\stat\course\course_stat_template.json
7、教育机构统计页面
每个教育机构对应一个文件，文件的命名规则为：company_stat_公司id.json（公司id动态变化）
参考：\代码\页面与模板\stat\company\company_stat_template.json
2.3.3 静态页面测试
2.3.3.1页面加载思路
打开课程资料中的“静态页面目录”中的课程详情模板页面，研究页面加载的思路。
模板页面路径如下：
[AppleScript] 纯文本查看 复制代码 静态页面目录\static\course\detail\course_main_template.html
1、主页面
我们需要在主页面中通过SSI加载：页头、页尾、教育机构、教师信息
2、异步加载课程统计与教育机构统计信息
课程统计信息（json）、教育机构统计信息（json）
3、马上学习按钮事件
用户点击“马上学习”会根据课程收费情况、课程购买情况执行下一步操作。
2.3.3.2 静态资源虚拟主机
1、配置静态资源虚拟主机
静态资源虚拟主机负责处理课程详情、公司信息、老师信息、统计信息等页面的请求：
将课程资料中的“静态页面目录”中的目录拷贝到F:/develop/xuecheng/static下
在nginx中配置静态虚拟主机如下：
[AppleScript] 纯文本查看 复制代码 #学成网静态资源
server {
listen 91;
server_name localhost;
#公司信息
location /static/company/ {
alias F:/develop/xuecheng/static/company/;
#老师信息
location /static/teacher/ {
alias F:/develop/xuecheng/static/teacher/;
}
#统计信息
location /static/stat/ {
alias F:/develop/xuecheng/static/stat/;
}
location /course/detail/ {
alias F:/develop/xuecheng/static/course/detail/;
}
}
2、通过www.xuecheng.com虚拟主机转发到静态资源
由于课程页面需要通过SSI加载页头和页尾所以需要通过www.xuecheng.com虚拟主机转发到静态资源
在www.xuecheng.com虚拟主机加入如下配置：
[AppleScript] 纯文本查看 复制代码 location /static/company/ {
proxy_pass http://static_server_pool;
}
location /static/teacher/ {
proxy_pass http://static_server_pool;
}
location /static/stat/ {
proxy_pass http://static_server_pool;
}
location /course/detail/ {
proxy_pass http://static_server_pool;
}
配置upstream实现请求转发到资源服务虚拟主机：
[AppleScript] 纯文本查看 复制代码 #静态资源服务
upstream static_server_pool{
server 127.0.0.1:91 weight
=10;
}
2.3.3.3 门户静态资源路径
门户中的一些图片、样式等静态资源统一通过/static路径对外提供服务，在www.xuecheng.com虚拟主机中配置如下：
[AppleScript] 纯文本查看 复制代码 #静态资源，包括系统所需要的图片，js、css等静态资源
location /static/img/ {
alias F:/develop/xc_portal_static/img/;
}
location /static/css/ {
alias F:/develop/xc_portal_static/css/;
}
location /static/js/ {
alias F:/develop/xc_portal_static/js/;
}
location /static/plugins/ {
alias F:/develop/xc_portal_static/plugins/;
add_header Access
‐
Control
‐
Allow
‐
Origin [url]http://ucenter.xuecheng[/url]
.com;
add_header Access
‐
Control
‐
Allow
‐
Credentials true;
add_header Access
‐
Control
‐
Allow
‐
Methods GET;
}
cors跨域参数：
Access-Control-Allow-Origin：允许跨域访问的外域地址
如果允许任何站点跨域访问则设置为*，通常这是不建议的。
Access-Control-Allow-Credentials： 允许客户端携带证书访问
Access-Control-Allow-Methods：允许客户端跨域访问的方法
2.3.3.4 页面测试
请求：http://www.xuecheng.com/course/detail/course_main_template.html测试课程详情页面模板是否可以正常浏览。
2.3.3.5 页面动态脚本
为了方便日后的维护，我们将javascript实现的动态部分单独编写一个html 文件,在门户的include目录下定义course_detail_dynamic.html文件，此文件通过ssi包含在课程详情页面中.
文件地址：资料\静态页面目录\include\course_detail_dynamic.html
所有的课程公用一个 页面动态脚本。
在课程详情主页面下端添加如下代码，通过SSI技术包含课程详情页面动态脚本文件：
[AppleScript] 纯文本查看 复制代码 <script>var courseId
=
"
template
"
</script>
<!
‐‐
#include virtual=
"
/include/course_detail_dynamic.html
"
‐‐
>
</body>
</html>
本页面使用vue.js动态获取信息，vue实例创建的代码如下：
[AppleScript] 纯文本查看 复制代码 主要查看 created钩子函数的内容。
var body
= new Vue({ //创建
一
个Vue的实例
el:
"
#body
"
, //挂载点是id
=
"
app
"
的地方
data: {
editLoading: false,
title:
'
测试
'
,
courseId:
''
,
charge:
''
,//203001免费,203002收费
learnstatus:0,//课程状态，1：马上学习，2：立即报名、3：立即购买
course:{},
companyId:
'
template
'
,
company_stat:[],
course_stat:{
"
s601001
"
:
""
,
"
s601002
"
:
""
,
"
s601003
"
:
""
}
},
methods: {
//学习报名
addopencourse(){
...
},
//立即购买
buy(){
...
},
createOrder(){
...
},
getLearnstatus(){//获取学习状态
...
}
},
created() {
// this.charge
=
'
203002
'
this.courseId
=
courseId;
//获取教育机构的统计数据
queryCompanyStat(this.companyId)
.then((res)
=
>{
console.log(res)
if(res.stat){
this.company_stat
= res.stat
console.log(this.company_stat)
}
})
//获取课程的统计数据
queryCourseStat(this.courseId)
.then((res)
=
>{
console.log(res)
if(res.stat){
let stat
= res.stat
for(var i=
0;i<stat.length;i++){
this.course_stat[
'
s
'
+stat[i]
.id]
=
stat[i]
.value
}
}
console.log(this.course_stat)
})
},
mounted(){
// alert(courseId)
}
})
| 
收藏
淘帖
踩
