复习电商笔记-37-前台商品分类菜单

 

前台商品分类菜单

 

 

首页特殊的json结构

1. 一级分类结构：ItemCatData对象url+name+items（某个一级分类下的二级分类）
2. 二级分类结构：ItemCatData对象url+name+items（某个二级分类下的三级分类）
3. 三级分类结构：String字符串
   
    

 

 

注解改变json字段名称@JsonProperty

@JsonProperty("u")
	private String url;
	
	@JsonProperty("n")
	private String name;
	
	@JsonProperty("i")
	private List<?> items;

jackson转换java对象时默认按属性名称写，经过注解@JsonProperty配置，将名称改变。例如：属性为name，设置n后，形成的json串就为n。这样当name很多时，通过这样的映射就让整个json变短，从而减少网络的传输长度。

 

 

封装一条菜单信息ItemCatData

/jt-common/src/main/java/com/jt/common/vo/ItemCatData.java

package com.jt.common.vo;

import java.util.List;

import com.fasterxml.jackson.annotation.JsonProperty;

public class ItemCatData {
	//序列化成json数据时为 u
	@JsonProperty("u")
	private String url;
	
	@JsonProperty("n")
	private String name;
	
	@JsonProperty("i")
	private List<?> items;
	
	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<?> getItems() {
		return items;
	}
	public void setItems(List<?> items) {
		this.items = items;
	}
}

 

 

封装菜单集合信息ItemCatResult

/jt-common/src/main/java/com/jt/common/vo/ItemCatResult.java

package com.jt.common.vo;

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

import com.fasterxml.jackson.annotation.JsonProperty;
public class ItemCatResult {

    @JsonProperty("data")	//json序列化时指定字段名称
    private List<ItemCatData> itemCats = new ArrayList<ItemCatData>();

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

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

}

 

 

Service层实现代码

按照前台json串结构封装java对象，分别封装每层的数据。

package com.jt.manage.service;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.jt.common.service.RedisService;
import com.jt.common.vo.ItemCatData;
import com.jt.common.vo.ItemCatResult;
import com.jt.manage.mapper.ItemCatMapper;
import com.jt.manage.pojo.ItemCat;

@Service
public class ItemCatService extends BaseService<ItemCat> {

	@Autowired
	private ItemCatMapper itemCatMapper;
	private static final ObjectMapper MAPPER = new ObjectMapper();

	//为前台系统构建json串对象结构
	public ItemCatResult queryItemCatWebAll(){
		ItemCatResult result = new ItemCatResult();	//声明存储的对象
		List<ItemCat> cats = super.queryAll();		//查询所有3级菜单
		
		//获取当前菜单下的所有的子菜单，形成一个数组
		Map<Long,List<ItemCat>> map = new HashMap<Long,List<ItemCat>>();
for(ItemCat itemCat: cats){
			if(!map.containsKey(itemCat.getParentId())){
				//创建一个元素，元素内容
				map.put(itemCat.getParentId(), new ArrayList<ItemCat>());
			}
			map.get(itemCat.getParentId()).add(itemCat);
		}
		
		//构建3级菜单结构
		List<ItemCatData> list1 = new ArrayList<ItemCatData>();
		//为一级菜单构建它的所有子菜单
		for(ItemCat itemCat1 : map.get(0L)){		//遍历一级菜单
			ItemCatData data1 = new ItemCatData();
			data1.setUrl("/products/"+itemCat1.getId()+".html");
			data1.setName("<a href='/products/"+itemCat1.getId()+".html'>"+itemCat1.getName()+"</a>");
			
			//遍历二级菜单
			List<ItemCatData> list2 = new ArrayList<ItemCatData>();
			for(ItemCat itemCat2: map.get(itemCat1.getId())){
				ItemCatData data2 = new ItemCatData();
				data2.setUrl("/products/"+itemCat2.getId()+".html");
				data2.setName(itemCat2.getName());
				
				//遍历三级菜单
				//三级菜单只是一个字符串，和一级、二级结构不同
				List<String> list3 = new ArrayList<String>();
				for(ItemCat itemCat3 : map.get(itemCat2.getId())){
					list3.add("/products/"+itemCat3.getId()+".html|"+itemCat3.getName());
				}
				data2.setItems(list3);
				list2.add(data2);
			}
			data1.setItems(list2);
			list1.add(data1);
			
			//首页菜单要求只返回14条
			if(list1.size()>14){
				break;
			}
		}
		result.setItemCatDataList(list1);
		return result;
	}
}

 

 

Controller层实现代码

在后台为前台准备的Controller单独存放包路径controller.web

package com.jt.manage.controller.web;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.jt.common.vo.ItemCatResult;
import com.jt.manage.service.ItemCatService;

/**
 * 对外提供接口
 * 
 */
@RequestMapping("web/itemcat")
@Controller
public class ItemCatWebController {
    
    @Autowired
    private ItemCatService itemCatService;
    
    @RequestMapping("all")
    @ResponseBody
    public ItemCatResult queryAll(){
        return this.itemCatService.queryItemCatWebAll();
    }

}

 

 

前台js中发起jsonp请求

F12观察Chrome浏览器提交的请求，会发现有jsonp请求。

在commons/footer.jsp中77行加载了js/lib-v1.js。

在lib-v1.js的1173行定义的链接：

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

在1172行定义了category对象

    在1204行发起jsonp请求

$.getJSONP(this.URL_Serv, category.getDataService)

在1218行定义了getDataService方法

getDataService: function(a)。这里的a就是返回的json对象。