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

首页轮播图展示

 

taotao-portal-web工程中，动态展示内容信息。

前端团队：负责JS，html等开发。

后端团队：负责后台的开发并提供数据给前端。

 

1、功能分析

只需要动态生成一个json数据，轮播图就可以动态展示：

taotao-portal-web工程下的index.jsp中：

 

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

 

分析:

       portal-web  需要   自己自定义的POJO 的类型数据的列表

       content 服务层    公用的，可以被其他的系统（表现的系统）来调用 ；

 

为了通用性：content 服务层中 获取 tbcontent的内容列表 即：list<TbContent>

 

portal-web 表现层 需要拿到tbcontent 的列表，然后进行转换成自定义的类型的数据列表即可。

 

从tb_content表中取数据，根据(叶子节点)内容分类id查询列表(内容列表)。

内容分类id固定，需要配置在属性文件中。

List<TbContent>

 

图片的width、height配置在属性文件中。

Alt属性从sub_title中取。

alt-->sub_title

Src->pic

srcB->pic2

Href->url

 

分析:

URL:/index 

参数：无。

返回值:首页页面   (数据是JSON 设置model中)

 

业务逻辑：

   1.根据分类的id 查询 内容列表(List<TbContent>)

   2.发布服务

   3.表现层引入服务

   4.调用服务 ，转换成自定义的数据类型(Ad1Node) 的列表

   5.将数据列表设置到Model 中，返回给页面。

 

 

需要创建一个pojo转换成页面需要的json数据格式。放入com.taotao.portal.pojo中。

 

public class Ad1Node {        private String srcB;      private String height;      private String alt;      private String width;      private String src;      private String widthB;      private String href;      private String heightB;    //getter/setter }

 

2、Dao层

从tb_content表中取数据，根据内容分类id查询列表。

可以使用逆向工程

 

3、Service层

参数：long categoryId

返回值：List<TbContent>

在ContentServiceImpl中，部分代码如下：

@Override      public List<TbContent> getContentList(long cid) {           //根据cid查询内容列表           TbContentExample example = new TbContentExample();           //设置查询条件           Criteria criteria = example.createCriteria();           criteria.andCategoryIdEqualTo(cid);           //执行查询           List<TbContent> list = contentMapper.selectByExample(example);           return list;      }

 

3.1、发布服务

4、表现层

在taotao-portal-web中实现，查询首页轮播图的内容。

4.1、引用服务

在taotao-protal-web项目中引入依赖包,如图：

 

4.2、Controller

在首页展示之前，对数据进行处理，然后展示首页，需要在PageController中实现。以大广告位为例子。

 

@Controller public class PageController {      @Autowired      private ContentService contentService;           @Value("${AD1_CATEGORY_ID}")      private Long AD1_CATEGORY_ID;           @Value("${AD1_HEIGHT}")      private String AD1_HEIGHT;      @Value("${AD1_HEIGHT_B}")      private String AD1_HEIGHT_B;      @Value("${AD1_WIDTH}")      private String AD1_WIDTH;      @Value("${AD1_WIDTH_B}")      private String AD1_WIDTH_B;      /**       * 展示首页       *       * @return       */      @RequestMapping("/index")      public String showIndex(Model model) {           //1.引入服务           //2.注入服务           //3.调用方法 tbcontent的列表           List<TbContent> list = contentService.queryConentListByCategoryId(AD1_CATEGORY_ID);           //4.转换成ad1node列表           List<Ad1Node> nodes = new ArrayList<>();           for (TbContent tbContent : list) {                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);                nodes.add(node);           }           //5.转换成JSON数据           String json = JsonUtils.objectToJson(nodes);           //6.讲JSON数据设置到request域（MOdel）           model.addAttribute("content_ad1", json);           return "index";      } }

 

属性文件所在位置：

 

在taotao-portal-web中的springmvc.xml中还需要配置：

<!-- 加载属性文件 --> <context:property-placeholder location="classpath:resource/*.properties" />

 

测试效果：

 

5、首页大广告的展示流程

首页是系统的门户，也就是系统的入口。所以首页的访问量是这个系统最大的。如果每次展示首页都从数据库中查询首页的内容信息，那么势必会对数据库造成很大的压力，所以需要使用缓存来减轻数据库压力。

 

实现缓存的工具有很多，现在比较流行的是redis。

 

首页大广告展示流程：

展示流程： 先从缓存取 ，如果不存在 ，从数据库取出来，写入缓存，再返回页面；如果存在key ,直接从缓存中取出来，展示到页面。

同步缓存：当事务提交（更新，删除，插入）后，需要同步缓存，直接根据Key 删除redis的key(清空缓存) ，再展示时 由上边的流程展示。

 

同步缓存：