4 課程詳情頁面靜態化
4.1 靜態頁面測試
4.1.1 頁面內容組成
我們在編寫一個頁面時需要知道哪些信息是靜態信息，哪些信息為動態信息，下圖是頁面的設計圖：

打開靜態頁面，觀察每部分的內容。
紅色表示動態信息，紅色以外表示靜態信息。
紅色動態信息：表示一個按鈕，根據用戶的登錄狀態、課程的購買狀態顯示按鈕的名稱及按鈕的事件。
包括以下信息內容：
1、課程信息
課程標題、價格、課程等級、授課模式、課程圖片、課程介紹、課程目錄。
2、課程統計信息
課程時長、評分、收藏人數
3、教育機構信息
公司名稱、公司簡介
4、教育機構統計信息
好評數、課程數、學生人數
5、教師信息
老師名稱、老師介紹

4.1.2 頁面拆分

將頁面拆分成如下頁面：
1、頁頭
本頁頭文件和門戶使用的頁頭為同一個文件。
參考：代碼\頁面與模板\include\header.html
2、頁面尾
本頁尾文件和門戶使用的頁尾為同一個文件。
參考：代碼\頁面與模板\include\footer.html
3、課程詳情主頁面
每個課程對應一個文件，命名規則為：課程id.html（課程id動態變化）
模板頁面參考：\代碼\頁面與模板\course\detail\course_main_template.html
4、教育機構頁面
每個教育機構對應一個文件，文件的命名規則為：company_info_公司id.html（公司id動態變化）
參考：代碼\頁面與模板\company\company_info_template.html
5、老師信息頁面
每個教師信息對應一個文件，文件的命名規則為：teacher_info_教師id.html（教師id動態變化）
參考：代碼\頁面與模板\teacher\teacher_info_template01.html
6、課程統計頁面
每個課程對應一個文件，文件的命名規則為：course_stat_課程id.json（課程id動態變化）
參考：\代碼\頁面與模板\stat\course\course_stat_template.json
7、教育機構統計頁面
每個教育機構對應一個文件，文件的命名規則為：company_stat_公司id.json（公司id動態變化）
參考：\代碼\頁面與模板\stat\company\company_stat_template.json

2.3.3 靜態頁面測試

2.3.3.1頁面加載思路
打開課程資料中的“靜態頁面目錄”中的課程詳情模板頁面，研究頁面加載的思路。
模板頁面路徑如下：
靜態頁面目錄\static\course\detail\course_main_template.html
1、主頁面
我們需要在主頁面中通過SSI加載：頁頭、頁尾、教育機構、教師信息
2、異步加載課程統計與教育機構統計信息
課程統計信息（json）、教育機構統計信息（json）
3、馬上學習按鈕事件
用戶點擊“馬上學習”會根據課程收費情況、課程購買情況執行下一步操作。

2.3.3.2 靜態資源虛擬主機

1、配置靜態資源虛擬主機
靜態資源虛擬主機負責處理課程詳情、公司信息、老師信息、統計信息等頁面的請求：
將課程資料中的“靜態頁面目錄”中的目錄拷貝到F:/develop/xuecheng/static下
在nginx中配置靜態虛擬主機如下：

2、通過www.xuecheng.com虛擬主機轉發到靜態資源
由于課程頁面需要通過SSI加載頁頭和頁尾所以需要通過www.xuecheng.com虛擬主機轉發到靜態資源
在www.xuecheng.com虛擬主機加入如下配置：




配置upstream實現請求轉發到資源服務虛擬主機：

2.3.3.3 門戶靜態資源路徑

門戶中的一些圖片、樣式等靜態資源統一通過/static路徑對外提供服務，在www.xuecheng.com虛擬主機中配置如
下：

在頂級域名下配置



www.xuecheng.com/static/img/就可以訪問到 門戶的圖片了。

這是跨域的設置↓
cors跨域參數：
Access-Control-Allow-Origin：允許跨域訪問的外域地址
如果允許任何站點跨域訪問則設置為*，通常這是不建議的。
Access-Control-Allow-Credentials： 允許客戶端攜帶證書訪問
Access-Control-Allow-Methods：允許客戶端跨域訪問的方法


把門戶的地址改一下，復制門戶所在的文件夾地址





提供的資料靜態目錄


啟動nginx



這就是詳情頁面的具體的html的內容









找到course/detail這個頁面對應的具體的路徑


采用了ssr的技術把這個頁面動態的引入進來

將來我們就通過這個頁面，編寫js獲取動態數據


靜態頁面的測試就完成了。