商品詳情頁面的顯示


當點擊商品圖片的時候,會跳轉到商品的詳情頁面,我們看下具體是如何實現的:

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的區別。

 

 

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2022 CODEPRJ.COM