上节课我们一起学习了内容的添加、修改、删除,这节我们一起学习下如何展示首页大广告位。
首先,看一下页面代码,如下图所示,首页大广告是采用轮播图的方式显示的。数据需要从后台动态获取,它是从"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;
/**
* @author gzm
* @date 2018年7月31日 下午3:29:04
*
*/
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;
}
@Override
public String toString() {
return "AD1Node [srcB=" + srcB + ", height=" + height + ", alt=" + alt + ", width=" + width + ", src=" + src
+ ", widthB=" + widthB + ", href=" + href + ", 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;
/**
* @author gzm
* @date 2018年7月13日 上午10:26:38
*
*/
@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个数字图标,只是没有图片,这是因为数据库中的图片地址不正确而已。我们可以删掉原来的数据,重新添加几条数据。
重新添加的数据如下图所示。大家可以到taotao广告图片这个地址下载广告图片。
下面再到首页去观察,如下图所示,发现轮播图已经好了。