使用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数据；