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

來源:互聯網
上載者:User

標籤:管理系   組織   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形式跨域訪問實現電商平台的左側導覽列

相關關鍵詞:
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.