2.3.3 静态页面测试 2.3.3.1页面加载思路 打开课程资料中的“静态页面目录”中的课程详情模板页面，研究页面加载的思路。 模板页面路径如下： [mw_shl_code=applescript,true]静态页面目录\static\course\detail\course_main_template.html[/mw_shl_code] 1、主页面 我们需要在主页面中通过SSI加载：页头、页尾、教育机构、教师信息 2、异步加载课程统计与教育机构统计信息 课程统计信息（json）、教育机构统计信息（json） 3、马上学习按钮事件 用户点击“马上学习”会根据课程收费情况、课程购买情况执行下一步操作。 2.3.3.2 静态资源虚拟主机 1、配置静态资源虚拟主机 静态资源虚拟主机负责处理课程详情、公司信息、老师信息、统计信息等页面的请求： 将课程资料中的“静态页面目录”中的目录拷贝到F:/develop/xuecheng/static下 在nginx中配置静态虚拟主机如下：
[mw_shl_code=applescript,true]
静态页面目录\static\course\detail\course_main_template.html
#学成网静态资源 server { listen
91;
server_name localhost;
#公司信息
location /static/company/ {
alias F:/develop/xuecheng/static/company/;[/mw_shl_code]
[mw_shl_code=applescript,true] #老师信息
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/;
}
}[/mw_shl_code]
2、通过www.xuecheng.com虚拟主机转发到静态资源 由于课程页面需要通过SSI加载页头和页尾所以需要通过www.xuecheng.com虚拟主机转发到静态资源 在www.xuecheng.com虚拟主机加入如下配置：
[mw_shl_code=applescript,true]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;
}[/mw_shl_code]
配置upstream实现请求转发到资源服务虚拟主机：
[mw_shl_code=applescript,true]#静态资源服务 upstream static_server_pool{ server 127.0.0.1:91 weight=10; } [/mw_shl_code] 2.3.3.3 门户静态资源路径 门户中的一些图片、样式等静态资源统一通过/static路径对外提供服务，在www.xuecheng.com虚拟主机中配置如 下：
[mw_shl_code=applescript,true]#静态资源，包括系统所需要的图片，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 http://ucenter.xuecheng.com;
add_header Access‐Control‐Allow‐Credentials true;
add_header Access‐Control‐Allow‐Methods GET;
}[/mw_shl_code]
cors跨域参数：
Access-Control-Allow-Origin：允许跨域访问的外域地址
如果允许任何站点跨域访问则设置为*，通常这是不建议的。
Access-Control-Allow-Credentials： 允许客户端携带证书访问
Access-Control-Allow-Methods：允许客户端跨域访问的方法
