09静态资源虚拟主机

2.3.3.2 静态资源虚拟主机

1、配置静态资源虚拟主机

静态资源虚拟主机负责处理课程详情、公司信息、老师信息、统计信息等页面的请求：
将课程资料中的“静态页面目录”中的目录拷贝到F:/develop/xuecheng/static下在nginx中配置静态虚拟主机如下

    #学成网静态资源server {listen       91;server_name  localhost;#公司信息location /static/company/ {alias E:/java_www/xcEduUI05/static/company/;}#老师信息location /static/teacher/ {alias E:/java_www/xcEduUI05/static/teacher/;}#统计信息location /static/stat/ {alias E:/java_www/xcEduUI05/static/stat/;}location /course/detail/ {alias E:/java_www/xcEduUI05/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虚拟主机中配置如下：

        location /static/img/ {alias   E:/java_www/xcEduUI05/img/;}location /static/css/ {alias   E:/java_www/xcEduUI05/css/;}location /static/js/ {alias   E:/java_www/xcEduUI05/js/;}location /static/plugins/ {alias   E:/java_www/xcEduUI05/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;}

cors跨域参数：
Access-Control-Allow-Origin：允许跨域访问的外域地址
如果允许任何站点跨域访问则设置为*，通常这是不建议的。
Access-Control-Allow-Credentials：允许客户端携带证书访问
Access-Control-Allow-Methods：允许客户端跨域访问的方法

只有http://ucenter.xuecheng.com这个域名可以访问

add_header Access‐Control‐Allow‐Origin http://ucenter.xuecheng.com;

修改路径

门户的静态资源目录：E:\java_www\xcEduUI05

将F:/develop/xc_portal_static改为E:/java_www/xcEduUI05
那么访问图片js/css/插件路径如：www.xuecheng.com/static/img/1.jpg

注意门户文件夹下不能放课程的静态资源。门户是门户，课程是课程
课程静态资源在我提供的资源文件夹下有

重启nginx

或者启动方法2：

E:/java_soft/nginx-1.14.0/nginx -c E:/java_soft/nginx-1.14.0/conf/nginx.conf

注意：我测试时，将以下代码注释了，因为我这里打开这2行，老是报错，也没找到解决办法，如果大家打开注释不报错，建议打开注释。

    #add_header Access‐Control‐Allow‐Credentials true;#add_header Access‐Control‐Allow‐Methods GET;

预览

注意：我在预览http://www.xuecheng.com/course/detail/course_main_template.html
这个路径时，我电脑不知道怎么回事，detail下的文件访问不了，但是改为detail2就可以，大家自由发挥

我们发现当配置了Nginx的配置文件后，访问这个html文件时，调用的静态图片路径由
http://www.xuecheng.com/static/img/widget-myImg.jpg

不设置Nginx的话，/static/img/的资源找不到在哪，因为项目根目录下只有img文件夹，没有/static/img/文件夹

2.3.3.4 页面测试

请求：http://www.xuecheng.com/course/detail/course_main_template.html测试课程详情页面模板是否可以正常浏览。

Nginx配置文件修改如下：


#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;#log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '#                  '$status $body_bytes_sent "$http_referer" '#                  '"$http_user_agent" "$http_x_forwarded_for"';#access_log  logs/access.log  main;sendfile        on;#tcp_nopush     on;#keepalive_timeout  0;keepalive_timeout  65;#gzip  on;#cms页面预览upstream cms_server_pool{server 127.0.0.1:31001 weight=10;}#静态资源服务upstream static_server_pool{server 127.0.0.1:91 weight=10;}server {listen       80;server_name  localhost;location / {root   html;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}#门户的顶级域名，门户的主站server {listen       80;server_name  www.xuecheng.com;ssi on;ssi_silent_errors on;location / {alias   E:/java_www/xcEduUI05/;index  index.html index.htm;}location /static/img/ {alias   E:/java_www/xcEduUI05/img/;}location /static/css/ {alias   E:/java_www/xcEduUI05/css/;}location /static/js/ {alias   E:/java_www/xcEduUI05/js/;}location /static/plugins/ {alias   E:/java_www/xcEduUI05/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;}#页面预览location /cms/preview/ {proxy_pass http://cms_server_pool/cms/preview/;}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;}}#学成网静态资源server {listen       91;server_name  localhost;#公司信息location /static/company/ {alias E:/java_www/xcEduUI05/static/company/;}#老师信息location /static/teacher/ {alias E:/java_www/xcEduUI05/static/teacher/;}#统计信息location /static/stat/ {alias E:/java_www/xcEduUI05/static/stat/;}location /course/detail/ {alias E:/java_www/xcEduUI05/course/detail/;}}}

2.3.3.5 页面动态脚本

为了方便日后的维护，我们将javascript实现的动态部分单独编写一个html 文件,在门户的include目录下定义 course_detail_dynamic.html文件，此文件通过ssi包含在课程详情页面中.
文件地址：资料\静态页面目录\include\course_detail_dynamic.html 所有的课程公用一个页面动态脚本。
在课程详情主页面下端添加如下代码，通过SSI技术包含课程详情页面动态脚本文件：

<script>//课程idvar courseId = "template"
</script>
<!--#include virtual="/include/course_detail_dynamic.html"-->

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

主要查看 created钩子函数的内容。