商城首页的展示方法

分析

一般商城页面不同区域展示不同类型的商品，但是所有都是归属于商品这个类中，只不过分类不同。这样就简单了，我们可以根据类别的编号来得到你想要的商品信息。

例子

var data = [{"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},{"srcB":"http://image.taotao.com/images/2015/03/03/2015030304345761102862.jpg","height":240,"alt":"","width":670,"src":"http://image.taotao.com/images/2015/03/03/2015030304345761102862.jpg","widthB":550,"href":"http://sale.jd.com/act/UMJaAPD2VIXkZn.html?cpdad=1DLSUE","heightB":240},{"srcB":"http://image.taotao.com/images/2015/03/03/201503030434200950530.jpg","height":240,"alt":"","width":670,"src":"http://image.taotao.com/images/2015/03/03/201503030434200950530.jpg","widthB":550,"href":"http://sale.jd.com/act/kj2pmwMuYCrGsK3g.html?cpdad=1DLSUE","heightB":240},{"srcB":"http://image.taotao.com/images/2015/03/03/2015030304333327002286.jpg","height":240,"alt":"","width":670,"src":"http://image.taotao.com/images/2015/03/03/2015030304333327002286.jpg","widthB":550,"href":"http://sale.jd.com/act/xcDvNbzAqK0CoG7I.html?cpdad=1DLSUE","heightB":240},{"srcB":"http://image.taotao.com/images/2015/03/03/2015030304324649807137.jpg","height":240,"alt":"","width":670,"src":"http://image.taotao.com/images/2015/03/03/2015030304324649807137.jpg","widthB":550,"href":"http://sale.jd.com/act/eDpBF1s8KcTOYM.html?cpdad=1DLSUE","heightB":240}];

这一段代码是一个主页轮播图所播放的数据，不难看出，每条数据格式都是一样的，是键值对，这里我们就想到JSON数据。

实现

1.分析我们所需要的数据，从上述代码中可以看到我们所需要的数据是
srcB,height,alt,width,src,widthB,href,heightB 8个属性将他们封装成
一个pojo类

2.编写通用接口
List getContentByCid(long cid);通过所属类找该类下所有项目

3.实现接口

public List<TbContent> getContentByCid(long cid) {
        // TODO Auto-generated method stub
        TbContentExample example = new TbContentExample();
        Criteria criteria=example.createCriteria();
        criteria.andCategoryIdEqualTo(cid);
        List<TbContent> list=contentMapper.selectByExample(example);

        return list;
    }

4.分析哪些属性是需要以后修改的将其定义下配置文件中
如下：
AD1_CATEGORY_ID=89
AD1_WIDTH=670
AD1_WIDTH_B=550
AD1_HEIGHT=240
AD1_HEIGHT_B=240
方便以后修改
记住在spring的配置文件中，配置加载

5.编写Controller类

@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) {
        //根据cid查询轮播图内容列表
                List<TbContent> contentList = contentService.getContentByCid(AD1_CATEGORY_ID);
                //把列表转换为Ad1Node列表
                List<AD1Node> ad1Nodes = new ArrayList<>();
                for (TbContent tbContent : contentList) {
                    AD1Node node = new AD1Node();
                    node.setAlt(tbContent.getTitle());
                    node.setHeight(AD1_HEIGHT);
                    node.setHeightB(AD1_HEIGHT_B);
                    node.setWidth(AD1_WIDTH);
                    node.setWidthB(AD1_WIDTH_B);
                    node.setSrc(tbContent.getPic());
                    node.setSrcB(tbContent.getPic2());
                    node.setHref(tbContent.getUrl());
                    //添加到节点列表
                    ad1Nodes.add(node);
                }
                //把列表转换成json数据
                String ad1Json = JsonUtils.objectToJson(ad1Nodes);
                //把json数据传递给页面
                model.addAttribute("ad1", ad1Json);

        return "index";
    }

6.替换主页上的代码
将之前的代码替换为
var data = ${ad1};

总结

显示方法大同小异，思路都跟上面差不多，根据页面的需求来改变。