前台商品分类菜单
首页特殊的json结构
- 一级分类结构:ItemCatData对象url+name+items(某个一级分类下的二级分类)
- 二级分类结构:ItemCatData对象url+name+items(某个二级分类下的三级分类)
- 三级分类结构: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对象。