学成在线第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页面加载思路
打开课程资料中的“静态页面目录”中的课程详情模板页面，研究页面加载的思路。
模板页面路径如下：

静态页面目录\static\course\detail\course_main_template.html

1、主页面
我们需要在主页面中通过SSI加载：页头、页尾、教育机构、教师信息
2、异步加载课程统计与教育机构统计信息
课程统计信息（json）、教育机构统计信息（json）
3、马上学习按钮事件
用户点击“马上学习”会根据课程收费情况、课程购买情况执行下一步操作。
2.3.3.2 静态资源虚拟主机
1、配置静态资源虚拟主机
静态资源虚拟主机负责处理课程详情、公司信息、老师信息、统计信息等页面的请求：
将课程资料中的“静态页面目录”中的目录拷贝到F:/develop/xuecheng/static下
在nginx中配置静态虚拟主机如下：

#学成网静态资源
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虚拟主机加入如下配置：

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实现请求转发到资源服务虚拟主机：

#静态资源服务
upstream static_server_pool{
server 127.0.0.1:91 weight
=10;
}

2.3.3.3 门户静态资源路径
门户中的一些图片、样式等静态资源统一通过/static路径对外提供服务，在www.xuecheng.com虚拟主机中配置如下：

#静态资源，包括系统所需要的图片，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技术包含课程详情页面动态脚本文件：

<script>var courseId
=
"
template
"
</script>
<!
‐‐
#include virtual=
"
/include/course_detail_dynamic.html
"
‐‐
>
</body>
</html>

本页面使用vue.js动态获取信息，vue实例创建的代码如下：

主要查看 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)
}
})

学成在线第9天讲义-课程预览 Eureka Feign 五相关推荐

学成在线第9天讲义-课程预览 Eureka Feign Ribbon
1Eureka注册中心 1.1需求分析在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中心来管理微服务信息. 为什么要用注册中心? 1 ...
学成在线第9天讲义-课程预览 Eureka Feign 四
2.2 Feign 2.2.1 Feign介绍 Feign是Netflflix公司开源的轻量级rest客户端,使用Feign可以非常方便的实现Http 客户端.Spring Cloud引入Feig ...
学成在线第9天讲义-课程预览 Eureka Feign 六
4.2 课程数据模型查询接口静态化操作需要模型数据方可进行静态化,课程数据模型由课程管理服务提供,仅供课程静态化程序调用使用. 4.2.1 接口定义 1.响应结果类型 @Data @ToStr ...
学成在线第7天讲义-课程管理实战
1我的课程 1.1需求分析课程添加完成后可通过我的课程进入课程修改页面,此页面显示我的课程列表,如下图所示,可分页查询. 上边的查询要实现分页.会存在多表关联查询,所以建议使用mybatis实现我的 ...
存入json文件_学成在线第8-2天讲义-课程图片管理分布式文件系统上传图片开发...
上传图片开发 1.1.1需求分析在很多系统都有上传图片/上传文件的需求,比如:上传课程图片.上传课程资料.上传用户头像等,为了提供系统的可重用性专门设立文件系统服务承担图片/文件的管理,文件系统服 ...
学成在线-第16天-讲义- Spring Security Oauth2 JWT RSA加解密
学成在线-第16天-讲义- Spring Security Oauth2 JWT 1 用户认证需求分析 1.1 用户认证与授权截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进 ...
学成在线-第13天-讲义-在线学习 HLS
1在线学习需求分析 1.1需求描述学成在线作为在线教育网站,提供多种学习形式,包括:录播.直播.图文.社群等,学生登录进入学习中心即可在线学习,本章节将开发录播课程的在线学习功能,需求如下: 1. ...
学成在线-第19天-讲义-分布式事务
1订单与选课需求分析 1.1订单支付流程学成在线的课程分为免费和收费两种.对于收费课程,用户需提交订单并完成支付方可在线学习. 提交订单及支付流程如下: 1.用户提交订单需要先登录系统 2.提交订单 ...
学成在线第4天讲义-页面静态化页面预览
1页面静态化需求 1.为什么要进行页面管理? 本项目cms系统的功能就是根据运营需要,对门户等子系统的部分页面进行管理,从而实现快速根据用户需求修改页面内容并上线的需求. 2.如何修改页面的内容? ...

学成在线第9天讲义-课程预览 Eureka Feign 五

学成在线第9天讲义-课程预览 Eureka Feign 五相关推荐

最新文章

热门文章

学成在线 第9天 讲义-课程预览 Eureka Feign 五

学成在线 第9天 讲义-课程预览 Eureka Feign 五相关推荐

最新文章

热门文章

学成在线第9天讲义-课程预览 Eureka Feign 五

学成在线第9天讲义-课程预览 Eureka Feign 五相关推荐