上一节对欢迎模块进行了综述(可参见 2. 欢迎模块 进行了解)，接下来将从首页模块开始详细介绍：
- 首页模块（一）之搭建服务器
- 首页模块（二）之工具类
- 首页模块（三）之首页
- 首页模块（四）之新闻详情
- 首页模块（五）之Python学科
知识点：
- 掌握服务器的搭建，独立制作服务器
搭建服务器：
任务综述：
在实际开发中，由于所使用的后台数据量比较大，因此该项目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"
}
]
Tomcat服务器下载地址
（内部已放入newsdemo所有文件）：apache-tomcat-7.0.56