XueChProject09（课程详情页面的预览）

一、课程详情页预览的要求是：

1、访问速度要快（也就是用Redis等缓存技术）

2、利用SEO（之前用的是vue.js，是不利于SEO的。那么我们的解决方法是：服务端渲染后，响应给前端）

3、并发量高

但是主要的瓶颈是在Tomcat，因为Tomcat的并发访问量在300-400之间，所以我们采用Nignx。因为课程详情页修改的数据部分很少，所以可以采用页面静态化技术生成静态页面，通过Nginx来访问，少量的改变数据在服务端响应。

但是这个的方案技术缺点是：维护静态页面的成本比较大。

1.1、课程预览功能将使用cms系统提供的页面预览功能，业务流程如下：

1、用户进入课程管理页面，点击课程预览，请求到课程管理服务

2、课程管理服务远程调用cms添加页面接口向cms添加课程详情页面

3、课程管理服务得到cms返回课程详情页面id，并拼接生成课程预览Url

4、课程管理服务将课程预览Url给前端返回

5、用户在前端页面请求课程预览Url，打开新窗口显示课程详情内容

二、课程详情页面的编写

课程详情页面的实行静态化时，需要注意看看课程详情页面的样子，也就是编写静态页面。

2.1、草稿如下：（红色表示动态信息，红色以外表示静态信息。）

2.2、Nginx的配置(主页面加载思路)

1、主页面

我们需要在主页面中通过SSI加载：页头、页尾、教育机构、教师信息

2、异步加载课程统计与教育机构统计信息

课程统计信息（json）、教育机构统计信息（json）

3、马上学习按钮事件

用户点击“马上学习”会根据课程收费情况、课程购买情况执行下一步操作。

#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;

    

    sendfile        on;

    keepalive_timeout  65;
	
	
		#静态资源服务  
	upstream static_server_pool {
		server 127.0.0.1:31001;
		
	}
	upstream testfreamaker {
		server 127.0.0.1:8088;
	}

    server {
        listen       80;
        server_name  www.xuecheng.com;
	
	
		ssi on; # 开启SSI支持
		ssi_silent_errors on; # 默认为off，设置为on则在处理SSI文件出错时不输出错误信息
								# 需要支持的shtml 默认是 text/html


        location / {

            root   F:/xuecheng/xc-ui-pc-static-portal/;
            index  index.html index.htm;
        }
		
		#静态资源，包括系统所需要的图片，js、css等静态资源
		location /static/img/ {
		alias   F:/xuecheng/xc-ui-pc-static-portal/img/;        
		}
		
		
		location /static/css/ {
		alias   F:/xuecheng/xc-ui-pc-static-portal/css/;
		}
		
		
		location /static/js/ {
		alias   F:/xuecheng/xc-ui-pc-static-portal/js/;
		}
		
		
		location /static/plugins/ {
		alias   F:/xuecheng/xc-ui-pc-static-portal/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://static_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/course/detail/;
						}
		
		location /freemark/course/ {
					proxy_pass http://testfreamaker/freemarker/course/;
			}
	
		}
		
		




		#学成网静态资源 
		server {
				listen 91;
				server_name localhost;
				
				#公司信息 
				location /company/{
				alias F:/xuecheng/static/company/;
				}
				#老师信息
				location /teacher/{
				alias F:/xuecheng/static/teacher/;
				}
				#统计信息
				location /stat/{
				alias F:/xuecheng/static/stat/;
				}
				location /course/detail/{
				alias F:/xuecheng/static/course/detail/;
				}
			}

       
	   
	   
        

}

2.3、页面动态脚本

为了方便日后的维护，我们将javascript实现的动态部分单独编写一个html 文件,在门户的include目录下定义 course_detail_dynamic.html文件，此文件通过ssi包含在课程详情页面中.

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

三、数据模型的获取方式

3.1、定义返回值和请求参数（页面id）

四、模板的获取

五、执行预览课程功能（只要知道页面ID，就可以执行预览）

六、正常执行页面预览和发布的流程图