當點擊商品圖片的時候，會跳轉到商品的詳情頁面，我們看下具體是如何實現的：
1、點擊商品的圖片，打開商品詳情頁面
a) 商品基本信息
b) 延遲加載商品詳情。延遲一秒加載使用ajax
c) 商品的規格參數。按需加載，當用戶點擊商品規格參數tab頁，加載ajax。
如圖：點擊圖片后顯示內容如下；
所以需要從三個表中獲取數據，發布服務接口：
需要在taotao-rest工程中發布服務
1、取商品基本信息的服務
2、取商品描述的服務
3、取商品規格的服務
需要把商品信息添加到緩存中。設置商品的過期時間，過期時間為一天。需要緩存同步。
服務層接口controller層：
@Controller
public class ItemController {
@Autowired
private ItemService itemService;
//取商品基本信息
@RequestMapping("/item/info/{itemId}")
@ResponseBody
public TaotaoResult getItemList(@PathVariable Long itemId){
TaotaoResult result= itemService.getItemList(itemId);
return result;
}
//根據商品id獲取商品的描述信息
@RequestMapping("/item/desc/{itemId}")
@ResponseBody
public TaotaoResult getItemDescList(@PathVariable Long itemId){
TaotaoResult result= itemService.getdescList(itemId);
return result;
}
//根據商品的id獲取商品的規格參數
@RequestMapping("/item/param/{itemId}")
@ResponseBody
public TaotaoResult getItemParamList(@PathVariable Long itemId){
TaotaoResult result= itemService.getparamList(itemId);
return result;
}
}
service層：
@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private TbItemMapper itemMapper;
@Autowired
private TbItemDescMapper descMapper;
@Autowired
private TbItemParamItemMapper paramMapper;
@Override
public TaotaoResult getItemList(long itemId) {
TbItem item= itemMapper.selectByPrimaryKey(itemId);
return TaotaoResult.ok(item);
}
@Override
public TaotaoResult getdescList(long itemId) {
TbItemDesc desc = descMapper.selectByPrimaryKey(itemId);
return TaotaoResult.ok(desc);
}
@Override
public TaotaoResult getparamList(long itemId) {
TbItemParamItemExample example=new TbItemParamItemExample();
TbItemParamItemExample.Criteria criteria = example.createCriteria();
criteria.andItemIdEqualTo(itemId);
List<TbItemParamItem> list=paramMapper.selectByExampleWithBLOBs(example);
if (list!=null && list.size()>0) {
TbItemParamItem paramItem=list.get(0);
return TaotaoResult.ok(paramItem);
}
return TaotaoResult.build(400, "無此商品規格");
}
}
前台是如何調用服務層的呢？
（1）取商品基本信息的的實現：注意url編寫：
這是頁面傳遞的url：
根據頁面的url來寫controller層的url：
service層：
商品的描述信息客戶端調用：
service層：
接收商品id，調用taotao-rest的服務根據商品id查詢商品描述信息。得到json數據。把json轉換成java對象從java對象中把商品描述取出來。返回商品描述字符串。
參數：商品id
返回值：字符串（商品描述的html片段）
/**
* 取商品描述
* <p>Title: getItemDescById</p>
* <p>Description: </p>
* @param itemId
* @return
* @see com.taotao.portal.service.ItemService#getItemDescById(java.lang.Long)
*/
@Override
public String getItemDescById(Long itemId) {
try {
//查詢商品描述
String json = HttpClientUtil.doGet(REST_BASE_URL + ITEM_DESC_URL + itemId);
//轉換成java對象
TaotaoResult taotaoResult = TaotaoResult.formatToPojo(json, TbItemDesc.class);
if (taotaoResult.getStatus() == 200) {
TbItemDesc itemDesc = (TbItemDesc) taotaoResult.getData();
//取商品描述信息
String result = itemDesc.getItemDesc();
return result;
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
取商品的規格參數：
按需加載。當用戶點擊規格參數tab頁時觸發一個單擊事件，在事件中異步加載規格參數信息。規格參數內容是html片段。返回字符串。
接收商品id，根據商品id查詢規格參數的數據，調用服務端的方法，返回json數據。把json轉換成java對象，根據java對象生成html片段，返回。
參數：商品id
返回值：字符串（規格參數html）
service層：
/**
* 根據商品id查詢規格參數
* <p>Title: getItemParam</p>
* <p>Description: </p>
* @param itemId
* @return
* @see com.taotao.portal.service.ItemService#getItemParam(java.lang.Long)
*/
@Override
public String getItemParam(Long itemId) {
try {
String json = HttpClientUtil.doGet(REST_BASE_URL + ITEM_PARAM_URL + itemId);
//把json轉換成java對象
TaotaoResult taotaoResult = TaotaoResult.formatToList(json, TbItemParamItem.class);
if (taotaoResult.getStatus() == 200) {
TbItemParamItem itemParamItem = (TbItemParamItem) taotaoResult.getData();
String paramData = itemParamItem.getParamData();
//生成html
// 把規格參數json數據轉換成java對象
List<Map> jsonList = JsonUtils.jsonToList(paramData, Map.class);
StringBuffer sb = new StringBuffer();
sb.append("<table cellpadding=\"0\" cellspacing=\"1\" width=\"100%\" border=\"0\" class=\"Ptable\">\n");
sb.append(" <tbody>\n");
for(Map m1:jsonList) {
sb.append(" <tr>\n");
sb.append(" <th class=\"tdTitle\" colspan=\"2\">"+m1.get("group")+"</th>\n");
sb.append(" </tr>\n");
List<Map> list2 = (List<Map>) m1.get("params");
for(Map m2:list2) {
sb.append(" <tr>\n");
sb.append(" <td class=\"tdTitle\">"+m2.get("k")+"</td>\n");
sb.append(" <td>"+m2.get("v")+"</td>\n");
sb.append(" </tr>\n");
}
}
sb.append(" </tbody>\n");
sb.append("</table>");
//返回html片段
return sb.toString();
}
} catch (Exception e) {
e.printStackTrace();
}
return "";
頁面的ajax請求Controller，請求的url://item/param/{itemId}.html
響應一個字符串。規格參數的片段。@ResponseBody
@RequestMapping(value="/item/param/{itemId}", produces=MediaType.TEXT_HTML_VALUE+";charset=utf-8")
@ResponseBody
public String getItemParam(@PathVariable Long itemId) {
String string = itemService.getItemParam(itemId);
return string;
}
總結：商品詳情頁面的顯示步驟：
（1）商品詳情頁面顯示主要是商品的基本信息，商品的詳細內容，商品的規格參數。這對應着數據庫的三張表，所以需要發布三個服務。
然后客戶端分別調用這三個服務，因為不同的服務具有不同的url。
客戶端的url是根據jsp頁面的顯示來設置的url，而rest的url是供客戶端調用的，利用httpclient的方法調用url+參數，調用服務。
所以要注意區分這兩個url的區別。