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

迈不过友情╰ 2022-05-10 08:44 265阅读 0赞

# 首页轮播图展示 #

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

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

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

## 1、功能分析 ##

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

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

![70][]

Json数据格式：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> [ &nbsp;&nbsp;&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "srcB": "http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "height": 240, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "alt": "", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "width": 670, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "src": "http://image.taotao.com/images/2015/03/03/2015030304360302109345.jpg", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "widthB": 550, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "href": "http://sale.jd.com/act/e0FMkuDhJz35CNt.html?cpdad=1DLSUE", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "heightB": 240 } ] </td> 
 </tr> 
 </tbody> 
</table>

**分析:**

**       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中。

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> public class Ad1Node { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; private String srcB; &nbsp;&nbsp;&nbsp;&nbsp; private String height; &nbsp;&nbsp;&nbsp;&nbsp; private String alt; &nbsp;&nbsp;&nbsp;&nbsp; private String width; &nbsp;&nbsp;&nbsp;&nbsp; private String src; &nbsp;&nbsp;&nbsp;&nbsp; private String widthB; &nbsp;&nbsp;&nbsp;&nbsp; private String href; &nbsp;&nbsp;&nbsp;&nbsp; private String heightB; &nbsp;&nbsp; //getter/setter } </td> 
 </tr> 
 </tbody> 
</table>

## 2、Dao层 ##

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

可以使用逆向工程

## 3、Service层 ##

参数：long categoryId

返回值：List<TbContent>

在ContentServiceImpl中，部分代码如下：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> @Override &nbsp;&nbsp;&nbsp;&nbsp; public List&lt;TbContent&gt; getContentList(long cid) { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //根据cid查询内容列表 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; TbContentExample example = new TbContentExample(); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //设置查询条件 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; Criteria criteria = example.createCriteria(); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; criteria.andCategoryIdEqualTo(cid); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //执行查询 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; List&lt;TbContent&gt; list = contentMapper.selectByExample(example); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; return list; &nbsp;&nbsp;&nbsp;&nbsp; } </td> 
 </tr> 
 </tbody> 
</table>

### 3.1、发布服务 ###

![70 1][]

##    4、表现层 ##

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

### 4.1、引用服务 ###

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

![70 2][]

### 4.2、Controller ###

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

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> @Controller public class PageController { &nbsp;&nbsp;&nbsp;&nbsp; @Autowired &nbsp;&nbsp;&nbsp;&nbsp; private ContentService contentService; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; @Value("${AD1_CATEGORY_ID}") &nbsp;&nbsp;&nbsp;&nbsp; private Long AD1_CATEGORY_ID; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; @Value("${AD1_HEIGHT}") &nbsp;&nbsp;&nbsp;&nbsp; private String AD1_HEIGHT; &nbsp;&nbsp;&nbsp;&nbsp; @Value("${AD1_HEIGHT_B}") &nbsp;&nbsp;&nbsp;&nbsp; private String AD1_HEIGHT_B; &nbsp;&nbsp;&nbsp;&nbsp; @Value("${AD1_WIDTH}") &nbsp;&nbsp;&nbsp;&nbsp; private String AD1_WIDTH; &nbsp;&nbsp;&nbsp;&nbsp; @Value("${AD1_WIDTH_B}") &nbsp;&nbsp;&nbsp;&nbsp; private String AD1_WIDTH_B; &nbsp;&nbsp;&nbsp;&nbsp; /** &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* 展示首页 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* @return &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp; @RequestMapping("/index") &nbsp;&nbsp;&nbsp;&nbsp; public String showIndex(Model model) { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //1.引入服务 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //2.注入服务 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //3.调用方法 tbcontent的列表 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; List&lt;TbContent&gt; list = contentService.queryConentListByCategoryId(AD1_CATEGORY_ID); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //4.转换成ad1node列表 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; List&lt;Ad1Node&gt; nodes = new ArrayList&lt;&gt;(); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; for (TbContent tbContent : list) { &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; Ad1Node node = new Ad1Node(); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; node.setAlt(tbContent.getSubTitle()); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; node.setHref(tbContent.getUrl()); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; node.setSrc(tbContent.getPic()); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; node.setSrcB(tbContent.getPic2()); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; node.setHeight(AD1_HEIGHT); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; node.setHeightB(AD1_HEIGHT_B); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; node.setWidth(AD1_WIDTH); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; node.setWidthB(AD1_WIDTH_B); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; nodes.add(node); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //5.转换成JSON数据 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; String json = JsonUtils.objectToJson(nodes); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; //6.讲JSON数据设置到request域（MOdel） &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; model.addAttribute("content_ad1", json); &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; return "index"; &nbsp;&nbsp;&nbsp;&nbsp; } } </td> 
 </tr> 
 </tbody> 
</table>

属性文件所在位置：

![70 3][]

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

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;!-- 加载属性文件 --&gt; &lt;context:property-placeholder location="classpath:resource/*.properties" /&gt; </td> 
 </tr> 
 </tbody> 
</table>

测试效果：

![70 4][]

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

![70 5][]

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

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

首页大广告展示流程：

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

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

![70 6][]

同步缓存：

![70 7][]

[70]: /images/20220510/492bd64637774d91b02fbe937f115b2b.png
[70 1]: /images/20220510/5604ae820c794c519b81caf4bc3f959f.png
[70 2]: /images/20220510/12d55d144df9435e9cf80d636999c022.png
[70 3]: /images/20220510/56c1a31f4ff347e587c369a1752a5a20.png
[70 4]: /images/20220510/088697b752704e79b4bca3fc65de020c.png
[70 5]: /images/20220510/0f093f72aa1b4c969d487b4ec63998c3.png
[70 6]: /images/20220510/4f7c1a22b88e4816a1efb76385f139e9.png
[70 7]: /images/20220510/fa4b84a078754c4493792d6c7c84eb3f.png