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] 纯文本查看 复制代码
?
|
1
|
<script>var courseId = "template"</script> <!‐‐#include virtual="/include/course_detail_dynamic.html"‐‐> </body> </html>
|
本页面使用vue.js动态获取信息，vue实例创建的代码如下：
主要查看 created钩子函数的内容。
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
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;
|
[AppleScript] 纯文本查看 复制代码
?
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//获取教育机构的统计数据
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)
}
})
|
