3. 首頁模組（一）之搭建伺服器
上一節對歡迎模組進行了綜述(可參見2. 歡迎模組 進行了解)，接下來將從首頁模組開始詳細介紹：
知識點：
- 掌握伺服器的搭建，獨立製作伺服器
搭建伺服器
任務綜述：
在實際開發中，由於所使用的後臺資料量比較大，因此該專案Tomcat為例搭建一個小型的簡易伺服器。在該伺服器的ROOT資料夾中存放首頁資料資訊與圖片資訊。
1. 首頁廣告欄資料
任務分析：
首頁廣告欄由廣告圖片與廣告資料組成，其中圖片 是通過在Tomcat的ROOT資料夾中建立一個圖片資料夾banner進行存放的，資料 是通過在ROOT資料夾中建立一個home_ad_list_data.json檔案進行存放的。
任務實施：
（1）建立存放首頁廣告欄圖片的資料夾。在Tomcat的ROOT資料夾中建立一個newsdemo資料夾，用於存放頭條專案的所有資料，在newsdemo資料夾中建立一個img資料夾，在img資料夾中建立一個banner資料夾，用於存放首頁廣告欄的圖片。
（2）建立首頁廣告欄資料。在ROOT/newsdemo資料夾中建立一個home_ad_list_data.json檔案，用於存放首頁廣告欄資料。
home_ad_list_data.json
[
{
"id":1,
"type":3,
"newsName":"XX超級惠猿季",
"newsTypeName":"",
"img1":"http://192.168.43.140:8080/newsdemo/img/banner/banner1.png",
"img2":"",
"img3":"",
"newsUrl":"http://www.itheima.com/special/hyjzly/index.shtml?tj"
},
{
"id":2,
"type":3,
"newsName":"網路營銷",
"newsTypeName":"",
"img1":"http://192.168.43.140:8080/newsdemo/img/banner/banner2.png",
"img2":"",
"img3":"",
"newsUrl":"http://www.itheima.com/special/mhmzly/"
},
{
"id":3,
"type":3,
"newsName":"UI設計",
"newsTypeName":"",
"img1":"http://192.168.43.140:8080/newsdemo/img/banner/banner3.png",
"img2":"",
"img3":"",
"newsUrl":"http://www.itheima.com/special/szicd/"
},
{
"id":4,
"type":3,
"newsName":"人工智慧+Python",
"newsTypeName":"",
"img1":"http://192.168.43.140:8080/newsdemo/img/banner/banner4.png",
"img2":"",
"img3":"",
"picUrl":"http://www.itheima.com/special/pythonzly/"
}
]
注意：
上述檔案中的IP地址192.168.43.140為本機的IP地址，在使用是需要將其修改為自己計算機的IP地址，否則無法訪問資料。此處的IP地址的不可設定為localhost。
2. 首頁新聞列表資料
任務分析：
首頁新聞列表由新聞圖片與新聞資料組成，其中圖片是通過Tomcat的ROOT資料夾中建立一個圖片資料夾homenews進行縮放的，資料是通過在ROOT資料夾中建立一個home_news_list_data.json檔案進行存放的。
任務實施：
（1）建立存放首頁新聞列表圖片的資料夾。在Tomcat的ROOT/newsdemo/img資料夾中建立一個homenews資料夾，用於存放首頁新聞列表圖片。
（2）建立首頁新聞列表資料。在ROOT/newsdemo資料夾中建立一個home_news_list_data.json檔案，用於存放首頁新聞列表資料。
home_news_list_data.json
[
{
"id":1,
"type":1,
"newsName":"XXX成功入駐合肥，開啟江淮學子高薪時代",
"newsTypeName":"XX新聞",
"img1":"http://192.168.43.140:8080/newsdemo/img/homenews/home_news1.png",
"img2":"",
"img3":"",
"newsUrl":"http://bbs.itheima.com/thread-343752-1-1.html?tj"
},
{
"id":2,
"type":2,
"newsName":"iOS課程全新升級",
"newsTypeName":"XX推薦",
"img1":"http://192.168.43.140:8080/newsdemo/img/homenews/home_recom_ios1.png",
"img2":"http://192.168.43.140:8080/newsdemo/img/homenews/home_recom_ios2.png",
"img3":"http://192.168.43.140:8080/newsdemo/img/homenews/home_recom_ios3.png",
"newsUrl":"http://www.itheima.com/special/hmiospro/?tj"
},
{
"id":3,
"type":1,
"newsName":"線上學院（來線上學院 不離職、不離校）",
"newsTypeName":"XX新聞",
"img1":"http://192.168.43.140:8080/newsdemo/img/homenews/home_news_college.png",
"img2":"",
"img3":"",
"newsUrl":"http://www.itheima.com/special/online/index.html?tj"
},
{
"id":4,
"type":2,
"newsName":"人工智慧+Python將革新更多領域",
"newsTypeName":"XX推薦",
"img1":"http://192.168.43.140:8080/newsdemo/img/homenews/home_recom_python1.png",
"img2":"http://192.168.43.140:8080/newsdemo/img/homenews/home_recom_python2.png",
"img3":"http://192.168.43.140:8080/newsdemo/img/homenews/home_recom_python3.png",
"newsUrl":"http://www.itheima.com/special/pythonzly/?tj"
},
{
"id":5,
"type":1,
"newsName":"全棧工程師順勢而生，打造精通前端+後端+移動端的精英型全棧工程師",
"newsTypeName":"XX新聞",
"img1":"http://192.168.43.140:8080/newsdemo/img/homenews/home_news_q.png",
"img2":"",
"img3":"",
"newsUrl":"http://www.itheima.com/special/stackzly/?zxdt"
}
]