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 ) } } ) |