（转）淘淘商城系列——首页轮播图展示

http://blog.csdn.net/yerenyuan_pku/article/details/72848306

上文我们一起学习了内容管理，由于时间太紧了，好多功能都没实现，在此对读者说声抱歉！以后我一定会完善这些功能，读者如果有兴趣，也可以实现这些功能，希望大家都能学有所成。废话扯了一大堆，进入主题，本文我们将一起学习如何展示商城首页的轮播图。 
首先，看一下index.jsp页面代码，如下图所示，首页大广告是采用轮播图的方式显示的。数据需要从后台动态获取，它是从”ad1”这么一个变量中去取值的，因此我们在表现层返回的结果中动态数据所对应的变量名一定要是”ad1”。 

下面我们来实现首页轮播图展示这个功能。首先我们来编写Service层的代码，在taotao-content-interface工程的ContentService接口中添加一个方法，如下图所示。 

接着我们去taotao-content-service工程的ContentServiceImpl实现类中去实现这个方法，如下图所示。 

然后，我们来编写表现层的代码。由于前台工程taotao-portal-web需要使用taotao-content-interface工程，那么就在pom.xml文件当中添加如下依赖。

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

为了大家方便复制，现将该pom.xml文件的内容贴出来。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>com.taotao</groupId>
        <artifactId>taotao-content</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>
    <artifactId>taotao-content-service</artifactId>
    <packaging>war</packaging>

    <dependencies>
        <dependency>
            <groupId>com.taotao</groupId>
            <artifactId>taotao-manager-dao</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
        <dependency>
            <groupId>com.taotao</groupId>
            <artifactId>taotao-content-interface</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
        <!-- Spring -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jms</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
        </dependency>

        <!-- dubbo相关 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>dubbo</artifactId>
            <!-- 排除依赖 -->
            <exclusions>
                <exclusion>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.jboss.netty</groupId>
                    <artifactId>netty</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <!-- zookeeper的客户端，你要连接zookeeper，需要把以下两个jar包加进来 -->
        <dependency>
            <groupId>org.apache.zookeeper</groupId>
            <artifactId>zookeeper</artifactId>
        </dependency>
        <dependency>
            <groupId>com.github.sgroschupf</groupId>
            <artifactId>zkclient</artifactId>
        </dependency>
    </dependencies>
</project>

• 1

下面我们来看下后台需要返回的数据格式是什么，如下所示，可以看到用到的字段有”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  
    }  
]  

• 1

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

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

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;
    }
}

• 1

下面我们在taotao-portal-web工程中引用dubbo发布的ContentService服务，即要向springmvc.xml配置文件中添加如下配置：

<dubbo:reference interface="com.taotao.content.service.ContentService" id="contentService" />

• 1

• 1

下面我们就去实现Controller层的代码，IndexController类的代码需要修改为：

/**
 * 商城首页展示处理
 * <p>Title: IndexController</p>
 * <p>Description: </p>
 * <p>Company: www.itcast.cn</p> 
 * @version 1.0
 */
@Controller
public class IndexController {

    @Value("${AD1_CONTENT_CID}")
    private Long AD1_CONTENT_CID;

    @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，需要从属性文件中取
        // 根据内容分类id查询内容列表
        List<TbContent> contentList = contentService.getContentList(AD1_CONTENT_CID);
        List<Ad1Node> ad1NodeList = new ArrayList<Ad1Node>();
        for (TbContent tbContent : contentList) {
            Ad1Node node = new Ad1Node();
            node.setAlt(tbContent.getSubTitle());
            node.setHref(tbContent.getUrl());
            node.setSrc(tbContent.getPic());
            node.setSrcB(tbContent.getPic2());
            node.setHeight(AD1_HEIGHT);
            node.setHeightB(AD1_HEIGHT_B);
            node.setWidth(AD1_WIDTH);
            node.setWidthB(AD1_WIDTH_B);

            ad1NodeList.add(node);
        }
        // 将List集合转成json字符串
        String json = JsonUtils.objectToJson(ad1NodeList);
        model.addAttribute("ad1", json);
        return "index";
    }

}

• 1

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

# 首页大广告位的内容分类id
AD1_CONTENT_CID=89
AD1_WIDTH=670
AD1_WIDTH_B=550
AD1_HEIGHT=240
AD1_HEIGHT_B=240

• 1

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

重新添加的数据如下图所示。 

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

 

顶

0

踩