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

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

       首先,看一下页面代码,如下图所示,首页大广告是采用轮播图的方式显示的。数据需要从后台动态获取,它是从"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这个地址下载广告图片。


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




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值