淘淘商城系列——首頁輪播圖展示
阿新 • • 發佈：2019-01-25
上文我們一起學習了內容管理，由於時間太緊了，好多功能都沒實現，在此對讀者說聲抱歉！以後我一定會完善這些功能，讀者如果有興趣，也可以實現這些功能，希望大家都能學有所成。廢話扯了一大堆，進入主題，本文我們將一起學習如何展示商城首頁的輪播圖。
首先，看一下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 為了大家方便複製，現將該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 下面我們來看下後臺需要返回的資料格式是什麼，如下所示，可以看到用到的欄位有”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介面。
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;
}
}下面我們在taotao-portal-web工程中引用dubbo釋出的ContentService服務，即要向springmvc.xml配置檔案中新增如下配置：
<dubbo:reference interface="com.taotao.content.service.ContentService" id="contentService" />
下面我們就去實現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";
}
}可以看到IndexController類中有很多變數都是從配置檔案中去獲取的，配置檔案（resource.properties）的內容如下：
# 首頁大廣告位的內容分類id
AD1_CONTENT_CID=89
AD1_WIDTH=670
AD1_WIDTH_B=550
AD1_HEIGHT=240
AD1_HEIGHT_B=240
好了，程式碼寫完後，我們重新打包taotao-content工程，打包完之後重啟taotao-content工程，然後啟動taotao-portal-web工程。如下圖所示，可以看到下面4個數字圖示，只是沒有圖片，這是因為資料庫表中的圖片地址不正確而已。我們可以刪掉原來的資料，再重新向tb_content表中新增幾條資料。
重新新增的資料如下圖所示。
下面再到首頁去觀察，如下圖所示，發現輪播圖已經好了。
