首页商品分类展示——淘淘商城（十四）

需求

分析

• 前端通过jsonp跨域调用服务层的服务，获得包含商品分类信息，并使用回到函数显示分类信息。注意，该出直接使用 $.getJSONP，写法不同于https://blog.csdn.net/qq_40369829/article/details/79667682
  
  
  
• 显示商品类目：
  

总结

• 请求url：http://127.0.0.1:8081/rest/itemcat/all?callback=category.getDataService
• 请求参数：查询字符串中的回调函数名称。
• 响应参数：以商品类目json作为参数的回调函数js语句，json格式在商品分类数据格式.txt中。

{
  "data": [
    {
      "u": "/products/1.html",
      "n": "<a href='/products/1.html'>图书、音像、电子书刊</a>",
      "i": [
        {
          "u": "/products/2.html",
          "n": "电子书刊",
          "i": [
            "/products/3.html|电子书",
            "/products/4.html|网络原创",
            "/products/5.html|数字杂志",
            "/products/6.html|多媒体图书"
          ]
        },
        {
          "u": "/products/7.html",
          "n": "音像",
          "i": [
            "/products/8.html|音乐",
            "/products/9.html|影视",
            "/products/10.html|教育音像"
          ]
        },
        {
          "u": "/products/11.html",
          "n": "英文原版",
          "i": [
            "/products/12.html|少儿",
            "/products/13.html|商务投资",
            "/products/14.html|英语学习与考试",
            "/products/15.html|小说",
            "/products/16.html|传记",
            "/products/17.html|励志"
          ]
        },
 ......

Service层

• taotao-rest的com.taotao.rest.pojo包下创建商品分类的节点类CatNode，和商品类目查询结果CatResult。
  
  • CatNode中可以使用 @JsonProperty 注解注释用jackson转化为json后变量的名称。
  • 子节点可能为String也可能为CatNode,所以items类型为?,data的类型也为?。

public class CatNode {

    @JsonProperty("u")
    private String url;

    @JsonProperty("n")
    private String name;

    /**
     * 子节点。子节点若为叶节点则为String，若非叶节点则为CatNode
     */
    @JsonProperty("i")
    private List<?> items;

    public CatNode(String url, String name, List<?> items) {
        this.url = url;
        this.name = name;
        this.items = items;
    }

    public String getUrl() {
        return url;
    }

    public String getName() {
        return name;
    }

    public List<?> getItems() {
        return items;
    }
}

public class CatResult {

    private List<?> data;

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
}

• 创建ItemCatService和实现类，查询所有商品分类列表。
  
  • 商品分类列表需要使用递归查询。

public interface ItemCatService {

    CatResult getItemCatList();
}

@Service
public class ItemCatServiceImpl implements ItemCatService {

    @Autowired
    private TbItemCatMapper itemCatMapper;

    @Override
    public CatResult getItemCatList() {
        CatResult result = new CatResult();
        List<?> list = getListByParentId(0);
        result.setData(list);
        return result;
    }

    /**
     * 递归获得商品类目
     */
    private List<?> getListByParentId(long parentId) {
        List list = new ArrayList<>();

        //查询条件
        TbItemCatExample example = new TbItemCatExample();
        Criteria criteria = example.createCriteria();
        criteria.andParentIdEqualTo(parentId);

        List<TbItemCat> itemCatList = itemCatMapper.selectByExample(example);
        for (TbItemCat itemCat : itemCatList) {
            if (itemCat.getIsParent()) {
                String url = "/products/" + itemCat.getId() + ".html";
                String name = null;
                if (parentId == 0) {
                    name = "<a href='/products/" + itemCat.getId() + ".html'>" + itemCat.getName() + "</a>";
                } else {
                    name = itemCat.getName();
                }
                List<?> items = getListByParentId(itemCat.getId());
                list.add(new CatNode(url, name, items));
            } else {
                String s = "/products/" + itemCat.getId() + ".html|" + itemCat.getName();
                list.add(s);
            }
        }

        return list;
    }
}

Controller层

• 接受回调参数名，返回商品类目信息的json作为参数的js字符串。
  
  • 返回类型为 “application/json;charset=UTF-8”， 否则会乱码。
  • 受前端界面限制，只选取前14类商品（也可修改前端页面显示全部商品，但是逻辑较复杂，省略）。

@Controller
public class ItemCatController {

    @Autowired
    private ItemCatService itemCatService;

    /**
     * @param callback 回调函数名称
     */
    @RequestMapping(value = "itemcat/all", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    @ResponseBody
    public String getItemCatList(String callback) {
        CatResult catResult = itemCatService.getItemCatList();

        //选取前14类商品
        List newData = new ArrayList<>(14);
        List<?> data = catResult.getData();
        for (int i = 0; i < 14; i++) {
            newData.add(data.get(i));
        }
        catResult.setData(newData);

        return callback + "(" + JsonUtils.objectToJson(catResult) + ")";
    }
}