学习淘淘商城第二十八课（首页大广告位的展示）

      上节课我们一起学习了内容的添加、修改、删除，这节我们一起学习下如何展示首页大广告位。

       首先，看一下页面代码，如下图所示，首页大广告是采用轮播图的方式显示的。数据需要从后台动态获取，它是从"ad1"这么一个变量中去取值的，因此我们在Controller层返回的结果中动态数据所对应的变量名一定要是"ad1"。

       下面在taotao-content-interface工程的ContentService接口类中添加一个接口

//根据内容分类id来获取内容列表
	List<TbContent> getContentListByCid(long cid);

        接着我们去taotao-content-service工程的ContentServiceImpl类中去实现这个接口

@Override
	public List<TbContent> getContentListByCid(long cid) {
		TbContentExample example = new TbContentExample();
		Criteria criteria = example.createCriteria();
		criteria.andCategoryIdEqualTo(cid);
		List<TbContent> list = contentMapper.selectByExample(example);
		return list;
	}

         由于前台工程taotao-portal-web需要使用taotao-content-interface工程，那么就在pom.xml文件当中添加如下依赖。

<!-- 依赖taotao-content -->
    <dependency>
    	<groupId>com.taotao</groupId>
		<artifactId>taotao-content-interface</artifactId>
		<version>0.0.1-SNAPSHOT</version>
    </dependency>

        下面我们来看下后台需要返回的数据格式是什么，如下所示，可以看到用到的字段有"srcB"、"height"、"alt"、"width"、"src"、"widthB"、"href"、"heightB"八个。这些字段与数据库表中的字段有不一致的地方，通常处理的方式是建一个POJO类来专门接收从数据库查询到的数据及自定义的配置然后转换成json格式的字符串。

[
    {
        "srcB": "http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg",
        "height": 240,
        "alt": "",
        "width": 670,
        "src": "http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg",
        "widthB": 550,
        "href": "http://sale.jd.com/act/e0FMkuDhJz35CNt.html?cpdad=1DLSUE",
        "heightB": 240
    },
    {
        "srcB": "http://image.taotao.com/images/2015/03/03/2015030304353109508500.jpg",
        "height": 240,
        "alt": "",
        "width": 670,
        "src": "http://image.taotao.com/images/2015/03/03/2015030304353109508500.jpg",
        "widthB": 550,
        "href": "http://sale.jd.com/act/UMJaAPD2VIXkZn.html?cpdad=1DLSUE",
        "heightB": 240
    }
]

      那么我们下面便来新建一个taotao.taotao.portal.pojo包并在包下新建一个AD1Node类，如下图所示。

         AD1Node的代码如下，这里由于该类只是在这个前台工程使用，不参与网络传输，因此可以不实现Serializable接口。

package com.taotao.portal.pojo;

public class AD1Node {
	private String srcB;
	private Integer height;
	private String alt;
	private Integer width;
	private String src;
	private Integer widthB;
	private String href;
	private Integer heightB;

	public String getSrcB() {
		return srcB;
	}

	public void setSrcB(String srcB) {
		this.srcB = srcB;
	}

	public Integer getHeight() {
		return height;
	}

	public void setHeight(Integer height) {
		this.height = height;
	}

	public String getAlt() {
		return alt;
	}

	public void setAlt(String alt) {
		this.alt = alt;
	}

	public Integer getWidth() {
		return width;
	}

	public void setWidth(Integer width) {
		this.width = width;
	}

	public String getSrc() {
		return src;
	}

	public void setSrc(String src) {
		this.src = src;
	}

	public Integer getWidthB() {
		return widthB;
	}

	public void setWidthB(Integer widthB) {
		this.widthB = widthB;
	}

	public String getHref() {
		return href;
	}

	public void setHref(String href) {
		this.href = href;
	}

	public Integer getHeightB() {
		return heightB;
	}

	public void setHeightB(Integer heightB) {
		this.heightB = heightB;
	}

}

       下面我们在taotao-portal-web工程引用dubbo发布的ContentService服务<dubbo:reference interface="com.taotao.content.service.ContentService" id="contentService" />，如下图所示。

       下面我们就去实现Controller层代码，如下所示。

package com.taotao.portal.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.alibaba.fastjson.JSON;
import com.taotao.content.service.ContentService;
import com.taotao.pojo.TbContent;
import com.taotao.portal.pojo.AD1Node;

@Controller
public class IndexController {
	@Value("${AD1_CATEGORY_ID}")
	private Long AD1_CATEGORY_ID;
	@Value("${AD1_WIDTH}")
	private Integer AD1_WIDTH;
	@Value("${AD1_WIDTH_B}")
	private Integer AD1_WIDTH_B;
	@Value("${AD1_HEIGHT}")
	private Integer AD1_HEIGHT;
	@Value("${AD1_HEIGHT_B}")
	private Integer AD1_HEIGHT_B;
	
    @Autowired
	private ContentService contentService;
    
	@RequestMapping("/index")
	public String showIndex(Model model){
		//根据内容ID去查询内容列表
		List<TbContent> list = contentService.getContentListByCid(AD1_CATEGORY_ID);
		//将列表转换为AD1Node列表
		List<AD1Node> adList = new ArrayList<>();
		for(TbContent content : list){
			AD1Node adNode = new AD1Node();
			adNode.setAlt(content.getTitle());
			adNode.setHeight(AD1_HEIGHT);
			adNode.setHeightB(AD1_HEIGHT_B);
			adNode.setWidth(AD1_WIDTH);
			adNode.setWidthB(AD1_WIDTH_B);
			adNode.setSrc(content.getPic());
			adNode.setSrcB(content.getPic2());
			adNode.setHref(content.getUrl());
			adList.add(adNode);
		}
		String ad1 = JSON.toJSONString(adList);
		model.addAttribute("ad1", ad1);
		return "index";
	}
}

       可以看到Controller层有很多变量都是从配置文件中去获取的，配置文件（resource.properties）的内容如下：

#大广告分类ID
AD1_CATEGORY_ID=89
#设置图片的宽高
AD1_WIDTH=670
AD1_WIDTH_B=550
AD1_HEIGHT=240
AD1_HEIGHT_B=240

       好了，代码写完后，我们重新打包taotao-content工程，打包完之后重启taotao-content工程，然后启动taotao-portal-web工程。如下图所示，可以看到下面4个数字图标，只是没有图片，这是因为数据库中的图片地址不正确而已。我们可以删掉原来的数据，重新添加几条数据。

 
 

         重新添加的数据如下图所示。大家可以到http://download.csdn.net/detail/u012453843/9819709这个地址下载广告图片。

        下面再到首页去观察，如下图所示，发现轮播图已经好了。