完成前台門戶頁面系統功能（十一）門戶頁面商品列表展示的功能

1.功能展示以及功能描述

首頁左側有一個商品分類。當鼠標分類上，需要展示出此分類下的子分類。

當鼠標滑動到連接上觸發mousemove事件。頁面做一個ajax請求，請求json數據包含分類信息，得到json數據后初始化分類菜單，展示。

 

應該在鼠標移到對應的位置的時候，在前台頁面jingxi-portal（8083） 就去調用jingxi-rest（8082）中的服務，

然而在這里就涉及到了跨域的問題。

1.1 跨域問題

什么是跨域？1.就是域名不同；2.就是域名相同，端口不同；

解決問題的方法：

第一種：使用httpclient來解決跨域的問題。

用戶請求數據的時候，直接去訪問jingxi-portal中對應的controller，在controller對應的sevice中通過httpclient去調用jingxi-rest中的方法

第二種：使用jsonp哎解決跨域的問題。

用戶在頁面請求的時候，直接通過jsonp去訪問jingxi-rest中的服務。

在這里我們采用的第二種方法，使用jsonp來實現。

 

1.2 有關jsonp

什么是jsonp？

Jsonp其實就是一個跨域解決方案。Js跨域請求數據是不可以的，但是js跨域請求js腳本是可以的。可以把數據封裝成一個js語句，做一個方法的調用。跨域請求js腳本可以得到此腳本。得到js腳本之后會立即執行。可以把數據做為參數傳遞到方法中。就可以獲得數據。從而解決跨域問題。

 

jsonp的實現原理：

瀏覽器在js請求中，是允許通過script標簽的src跨域請求，可以在請求的結果中添加回調方法名，在請求頁面中定義方法，既可獲取到跨域請求的數據。

1.3 jsp頁面jsonp使用

 

 

相當於在jingxi-portal頁面 跨域去請求一個js片段  然后請求獲得的js片段會馬上執行在jingxi-portal頁面的getDataService方法。

 

 2.代碼的實現

2.1 pojo類

package com.jingxi.rest.pojo;

import java.util.List;

import com.fasterxml.jackson.annotation.JsonProperty;

public class CatNode {
    @JsonProperty("n")
    private String name;
    @JsonProperty("u")
    private String url;
    @JsonProperty("i")
    private List<?> item;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public List<?> getItem() {
        return item;
    }
    public void setItem(List<?> item) {
        this.item = item;
    }
    
    
}

package com.jingxi.rest.pojo;

import java.util.List;

public class CatResult {

    private List<?> data;

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
    
    
}

 

 2.2 service層

package com.jingxi.rest.service;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.jingxi.common.util.JsonUtils;
import com.jingxi.mapper.TbItemCatMapper;
import com.jingxi.model.TbContent;
import com.jingxi.model.TbItemCat;
import com.jingxi.model.TbItemCatExample;
import com.jingxi.model.TbItemCatExample.Criteria;
import com.jingxi.rest.dao.JedisClient;
import com.jingxi.rest.pojo.CatNode;
import com.jingxi.rest.pojo.CatResult;

@Service
public class ItemCatServiceImp implements ItemCatService {

    @Autowired
    private TbItemCatMapper itemCatMapper;
    
    @Autowired
    private JedisClient jedisClient;
    
    private static final String INDEX_ITEMCAT_REDIS_KEY="INDEX_ITEMCAT_REDIS_KEY";
    
    @Override
    public CatResult getItemCatList() {
        CatResult catResult = new CatResult();
        //查詢分類列表
        catResult.setData(getCatList(0));
        //將parentid為0的查出來 然后放在catresult的data中
        return catResult;
    }
    /*** 查詢分類列表* 
     * <p>Title: getCatList</p>* 
     * <p>Description: </p>* 
     * @param parentId* @return
     * */
    
    private List<?> getCatList(long parentId) {
        /*//去緩存中取數據
        try{
            String result=jedisClient.hget(INDEX_ITEMCAT_REDIS_KEY, parentId+"");
            if(result!=null){
                List<TbItemCat> resultList=JsonUtils.jsonToList(result, TbItemCat.class);
                return resultList;
            }
        }catch(Exception e){
            e.printStackTrace();
        }*/
        
        //創建查詢條件
        TbItemCatExample example = new TbItemCatExample();
        Criteria criteria = example.createCriteria();
        criteria.andParentIdEqualTo(parentId);
        //執行查詢
        List<TbItemCat> list = itemCatMapper.selectByExample(example);
        //返回值list
        List resultList = new ArrayList<>();
        //向list中添加節點
        int count = 0;
        for (TbItemCat tbItemCat : list) {
            //判斷是否為父節點
            if (tbItemCat.getIsParent()) {
                CatNode catNode = new CatNode();
                if (parentId == 0) {
                    catNode.setName("<a "
                            + "href='/products/"+tbItemCat.getId()+".html'>"+tbItemCat.getName()+"</a>");
                    } else {
                        catNode.setName(tbItemCat.getName());
                    }
                        catNode.setUrl("/products/"+tbItemCat.getId()+".html");
                        catNode.setItem(getCatList(tbItemCat.getId()));
                        resultList.add(catNode);
                        count ++;
                        //第一層只取14條記錄
                        if (parentId == 0 && count >=14) {
                            break;
                            }
                        //如果是葉子節點
                        }else {
                            resultList.add("/products/"+tbItemCat.getId()
                            +".html|"                                  + tbItemCat.getName());
                            }
                        }
        /*//把數據放進緩存中
        try{
            //把list轉換成字符串
            String cacheString =JsonUtils.objectToJson(resultList);
            jedisClient.hset(INDEX_ITEMCAT_REDIS_KEY, parentId+"", cacheString);
        }catch(Exception e){
            e.printStackTrace();
        }*/
        
        return resultList;
            }
        
    }

    

 

 2.3 controller層

方法一：

方法二：

 

至此~ 門戶頁面商品列表展示的功能完成