使用jsonp形式跨域访问实现电商平台的左侧导航栏

电商平台有个具备的左侧商品类目的导航栏的结构。

通过jsonp跨域访问电商平台的后台管理系统商品分类。（主要实现后台Java代码）

实现基本步骤：

　　1、在后台管理系统中准备相应的json数据。

　　　　

pojo：

public class ItemCatData {
    @JsonProperty("u")
    private String url;
    @JsonProperty("n")
    private String name;
    @JsonProperty("i")
    private List<?> iList;

    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public List<?> getiList() {
        return iList;
    }
    public void setiList(List<?> iList) {
        this.iList = iList;
    }

}

 /**
  * 前台需要的类目json数据
  * @author Administrator
  *
  */
 public class ItemCatResult {
     @JsonProperty("data")
     private List<ItemCatData> itemCats = new ArrayList<ItemCatData>();

     public List<ItemCatData> getItemCats() {
         return itemCats;
     }

     public void setItemCats(List<ItemCatData> itemCats) {
         this.itemCats = itemCats;
     }
 }

 service：
　　
　　@Autowired
 private ItemCatMapper itemCatMapper;
 @Autowired
 private RedisService redisService;    //注入redis伪service
 private static final ObjectMapper MAPPER = new ObjectMapper();

 //为前台来准备数据
 public ItemCatResult queryCats(){

     /* 步骤：
      * 1、获取所有的数据
      * 2、一次循环获取当前节点的所有的子节点
      * 3、三级遍历组织数据
      */
     List<ItemCat> cats = itemCatMapper.select(null);
     //构建一个map，里面存放当前节点下的，所有的子节点数据
     Map<Long,List<ItemCat>> map = new HashMap<Long,List<ItemCat>>();
     for(ItemCat cat : cats){
         //先判断这个key是否存在
         if(!map.containsKey(cat.getParentId())){
             //不存在，创建key，并创建List
             map.put(cat.getParentId(), new ArrayList<ItemCat>());
         }
         map.get(cat.getParentId()).add(cat);
     }

     //一级菜单
     ItemCatResult result = new ItemCatResult();
     List<ItemCatData> list1 = new ArrayList<ItemCatData>();
     //遍历一级菜单
     String url = "";
     String name = "";

     for(ItemCat cat1 : map.get(0L)){
         ItemCatData d1 = new ItemCatData();
         url = "/products/"+cat1.getId()+".html";
         d1.setUrl(url);
         name = "<a href=\""+url+"\">"+cat1.getName()+"</a>";
         d1.setName(name);

         //遍历二级菜单
         List<ItemCatData> list2 = new ArrayList<ItemCatData>();
         for(ItemCat cat2 : map.get(cat1.getId())){
             ItemCatData d2 = new ItemCatData();
             url = "/products/"+cat2.getId()+".html";
             d2.setUrl(url);
             d2.setName(cat2.getName());

             //遍历三级菜单
             List<String> list3 = new ArrayList<String>();
             for(ItemCat cat3 : map.get(cat2.getId())){
                 url = "/products/"+cat3.getId()+".html";
                 list3.add(url+"|"+cat3.getName());
             }
             d2.setiList(list3);
             list2.add(d2);
         }
         d1.setiList(list2);    //二级菜单
         list1.add(d1);

         result.setItemCats(list1);
     }

     return result;
 }

Controller：

public class WebItemController {

    @Autowired
    private ItemCatService itemCatService;
    @Autowired
    private ItemService itemService;
    /**
     * 前台类目json数据
     * @param id
     * @return
     */
    @RequestMapping("/web/itemcat/all")
    @ResponseBody
    public Object toItem(String callback){
        MappingJacksonValue mjv = new MappingJacksonValue(itemCatService.queryCats());
        mjv.setJsonpFunction(callback);

        return mjv;
    }
}

　　2、前台发起跨域请求；

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

　　3.解析json数据；