学习淘淘商城第六十四课（实现商品详情页面展示）

上节课我们一起学习了搭建商品详情工程，这节课我们一起实现商品详情展示。

首先来看一下商品详情页面代码，可以看到商品一般属性在tbItem实体类中都是存在的，只是图片需要特殊处理，因为tbItem实体类中图片的字段存储的是以","分隔的图片地址的字符串，因此要将字符串转换成数组才行，而tbItem实体类没有images属性，这就需要我们再新建一个pojo类，该类要继承自tbItem，只是处理一下图片即可。商品描述是在实体类tbItemDesc当中。



那么我们把pojo放到什么工程下？有的同学可能会想到要放到taotao-common工程下，这其实是不行的，因为这个pojo要继承tbItem实体类，而这个实体类是在taotao-manager-dao工程中，taotao-manager-dao工程引用了taotao-common工程，如果把pojo放到taotao-common工程中就需要让taotao-common工程依赖taotao-manager-dao工程，这样一来，就会造成循环依赖，这会报错的，因此我们不能把它放到taotao-common工程当中。比较合理的位置是放到taotao-item-web工程当中。如下图所示。



Item类代码如下：

package com.taotao.item.pojo;

import org.apache.commons.lang3.StringUtils;

import com.taotao.pojo.TbItem;

public class Item extends TbItem {

public Item(TbItem tbItem){
this.setBarcode(tbItem.getBarcode());
this.setCid(tbItem.getCid());
this.setCreated(tbItem.getCreated());
this.setId(tbItem.getId());
this.setImage(tbItem.getImage());
this.setNum(tbItem.getNum());
this.setPrice(tbItem.getPrice());
this.setSellPoint(tbItem.getSellPoint());
this.setStatus(tbItem.getStatus());
this.setTitle(tbItem.getTitle());
this.setUpdated(tbItem.getUpdated());
}

public String[] getImages(){
if(!StringUtils.isBlank(this.getImage())){
String[] images = this.getImage().split(",");
return images;
}
return null;
}
}

写完了pojo类，下面我们来写接口，由于商品和商品详情在不同的表，我们写两个接口，分别获取商品详情和商品描述，其中获取商品详情的接口已经写好了（下图getItemById），现在我们要做的便是再写一个获取商品描述的接口（下图getItemDescById）



写完了接口，现在我们来实现getItemDescById接口，如下图所示。



之所以可以通过主键来查询商品描述，是因为在商品描述表中也把商品ID作为了主键，如下图所示。



写完了接口，下面我们需要在taotao-item-web工程中引用itemService的dubbo服务，如下图所示。



引用代码如下

<dubbo:reference interface="com.taotao.service.ItemService" id="itemService" />

下面我们来写一下Controller，新建一个ItemController类，如下图所示。



Controller代码如下：

package com.taotao.item.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import com.taotao.item.pojo.Item;
import com.taotao.pojo.TbItem;
import com.taotao.pojo.TbItemDesc;
import com.taotao.service.ItemService;

/**
* 商品详情页面展示Controller
* @author wanghaijie
*
*/
@Controller
public class ItemController {
@Autowired
private ItemService itemService;

@RequestMapping("/item/{itemId}")
public String showItem(@PathVariable Long itemId,Model model){
//获取商品基本信息
TbItem tbItem = itemService.getItemById(itemId);
Item item = new Item(tbItem);
//获取商品描述信息
TbItemDesc tbItemDesc = itemService.getItemDescById(itemId);
//返回给页面需要的对象
model.addAttribute("item", item);
model.addAttribute("itemDesc", tbItemDesc);
//返回逻辑视图
return "item";
}
}

写完了taotao-item-web工程代码，现在我们依次启动taotao-manager、taotao-content、taotao-search、taotao-manager-web、taotao-portal-web、taotao-search-web工程，在启动taotao-item-web工程之前，由于taotao-manager工程做了修改，因此需要重新安装到本地Maven仓库（工程右键---->Run As----->Maven install）。

然后我们再启动我们刚写好的taotao-item-web工程，这里再说一遍怎么使用tomcat7插件启动一个新的工程，我们在taotao-item-web工程上右键------->Run As------->Maven build...，如下图所示。



在弹出的对话框中的Goals一栏输入：clean tomcat7:run，然后点击"Apply"，然后点击"Run"。



启动完后，我们访问淘淘商城首页，搜索"华为P10"，如下图所示，回车。



搜索到的结果如下图所示。我们点击搜索到的那个商品。



详情如下图所示，发现正常查询到商品详情了！！