使用jsonp形式跨域訪問實現電商平台的左側導覽列

標籤：管理系   組織   back   url   cts   sse   result   點資料   new   

電商平台有個具備的左側商品類目的導覽列的結構。

 

通過jsonp跨域訪問電商平台的後台管理系統商品分類。（主要實現後台Java代碼）

 實現基本步驟：

　　1、在後台管理系統中準備相應的json資料。

　　　　

 1 /** 2  * 前台需要的類目json資料 3  * @author Administrator 4  * 5  */ 6 public class ItemCatResult { 7     @JsonProperty("data") 8     private List<ItemCatData> itemCats = new ArrayList<ItemCatData>(); 9 10     public List<ItemCatData> getItemCats() {11         return itemCats;12     }13 14     public void setItemCats(List<ItemCatData> itemCats) {15         this.itemCats = itemCats;16     }17 }

 1 @Autowired 2 private ItemCatMapper itemCatMapper; 3 @Autowired 4 private RedisService redisService;    //注入redis偽service 5 private static final ObjectMapper MAPPER = new ObjectMapper(); 6  7 //為前台來準備資料 8 public ItemCatResult queryCats(){ 9     10     /* 步驟：11      * 1、擷取所有的資料12      * 2、一次迴圈擷取當前節點的所有的子節點13      * 3、三級遍曆組織資料14      */15     List<ItemCat> cats = itemCatMapper.select(null);16     //構建一個map，裡面存放當前節點下的，所有的子節點資料17     Map<Long,List<ItemCat>> map = new HashMap<Long,List<ItemCat>>();18     for(ItemCat cat : cats){19         //先判斷這個key是否存在20         if(!map.containsKey(cat.getParentId())){21             //不存在，建立key，並建立List22             map.put(cat.getParentId(), new ArrayList<ItemCat>());23         }24         map.get(cat.getParentId()).add(cat);25     }26     27     //一級菜單28     ItemCatResult result = new ItemCatResult();29     List<ItemCatData> list1 = new ArrayList<ItemCatData>();30     //遍曆一級菜單31     String url = "";32     String name = "";33     34     for(ItemCat cat1 : map.get(0L)){35         ItemCatData d1 = new ItemCatData();36         url = "/products/"+cat1.getId()+".html";37         d1.setUrl(url);38         name = "<a href=\""+url+"\">"+cat1.getName()+"</a>";39         d1.setName(name);40         41         //遍曆二級菜單42         List<ItemCatData> list2 = new ArrayList<ItemCatData>();43         for(ItemCat cat2 : map.get(cat1.getId())){44             ItemCatData d2 = new ItemCatData();45             url = "/products/"+cat2.getId()+".html";46             d2.setUrl(url);47             d2.setName(cat2.getName());48 49             //遍曆三級菜單50             List<String> list3 = new ArrayList<String>();51             for(ItemCat cat3 : map.get(cat2.getId())){52                 url = "/products/"+cat3.getId()+".html";53                 list3.add(url+"|"+cat3.getName());54             }55             d2.setiList(list3);56             list2.add(d2);57         }58         d1.setiList(list2);    //二級菜單59         list1.add(d1);60                 61         result.setItemCats(list1);62     }63     64     return result;65 }

 

　　2、前台發起跨域請求；

　　　　http://manage.jt.com/web/itemcat/all?callback=category.getDataService

　　3.解析json資料；

 

使用jsonp形式跨域訪問實現電商平台的左側導覽列