商品级联类目的展示

huangjinnan 发布于2019-08-15 17:48 / 1915人阅读

摘要：一目标实现如图所示的商品类目的展示二思路第一列都是顶级的列表，红色的一列展示的是二级列表，最后展示的是叶子节点。

一.目标

实现如图所示的商品类目的展示

二.思路

1.第一列都是顶级的列表，红色的一列展示的是二级列表，最后展示的是叶子节点。所以数据库需要一个parent_id字段，当id为0时表示顶级列表，还需要一个字段is_parent来判断是否为父节点

数据格式如下图（一，二，三级目录分别标出来了）

2.通过jsonp调用服务端的数据（参考上一篇文章）https://segmentfault.com/a/11...
3.返回值的格式分析：
这里我们通过两个pojo来封装取出的数据，一个是对应每个节点的u n i，另一个是存放节点的list集合

public class CatNode {
    
    @JsonProperty("u")
    private String url;
    @JsonProperty("n")
    private String name;
    @JsonProperty("i")
    private Listitem;        
       
    ...

public class CatResult {
    
    private Listdata;

    ...

三.代码实现 1.service层

    @Override
    public CatResult getItemCatList() {
        CatResult catResult = new CatResult();
        //查询分类列表
        catResult.setData(getCatList(0));
        return catResult;
    }
    
    private List getCatList(long parentId) {
        //创建查询条件
        TbItemCatExample example = new TbItemCatExample();
        Criteria criteria = example.createCriteria();
        criteria.andParentIdEqualTo(parentId);
        //执行查询
        List list = itemCatMapper.selectByExample(example);
        //返回值list
        List resultList = new ArrayList<>();
        //向list中添加节点
        int count = 0;
        for (TbItemCat tbItemCat : list) {
            //判断是否为父节点
            if (tbItemCat.getIsParent()) {
                CatNode catNode = new CatNode();
                if (parentId == 0) {
                    catNode.setName(""+tbItemCat.getName()+"");
                } else {
                    catNode.setName(tbItemCat.getName());
                }
                catNode.setUrl("/products/"+tbItemCat.getId()+".html");
                catNode.setItem(getCatList(tbItemCat.getId()));
                
                resultList.add(catNode);
                count ++;
                //第一层只取14条记录
                if (parentId == 0 && count >=14) {
                    break;
                }
            //如果是叶子节点
            } else {
                resultList.add("/products/"+tbItemCat.getId()+".html|" + tbItemCat.getName());
            }
        }
        return resultList;
    }

2.controller层

@Controller
public class ItemCatController {
    
    @Autowired
    ItemCatService itemCatService;
    
    @RequestMapping("/itemcat/list")
    @ResponseBody
    public Object getItemCatList(String callback) {
        CatResult catResult = itemCatService.getItemCatList();
        MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
        mappingJacksonValue.setJsonpFunction(callback);
        return mappingJacksonValue;
    }
}

私有云海外云主机商品展示 jsp页面展示商品 js商品评价图片展示实验目的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/69458.html

Zent - 源自有赞微商城的 React 组件库

摘要：是有赞端规范的实现版本，提供了一整套基础的组件以及常用的业务组件。目前我们有组件，其中包括以及等实用的业务组件。一套有赞设计师绘制的图标库。为了解决这些问题，提供了一套自己的时间选择组件，包括日期选择周选择组件月选择以及时间区间选择。 Zent ( ˈzent ) 是有赞 PC 端 Web UI 规范的 React 实现版本，提供了一整套基础的 UI 组件以及常用的__业务组件__。通...

Corwien 2019-08-21 17:34 评论0 收藏0
电商参考架构第一部分：搭建一个灵活、可搜索、响应快速的产品目录系统

摘要：因为他们可能会有许多顾客对相同的商品目录进行多次请求。然而，对于我们的参考架构，我们想完全在中实现一个多方面搜索。本文源地址：http://www.mongoing.com/blog/retail-reference-architecture-part-1 如今，产品目录数据管理对零售商而言是一个非常复杂的问题。经过多年对多个庞大、由供应商提供的系统的依赖之后，零售商目前正在重新考...

VincentFF 2019-06-25 18:15 评论0 收藏0
电商参考架构第一部分：搭建一个灵活、可搜索、响应快速的产品目录系统

摘要：因为他们可能会有许多顾客对相同的商品目录进行多次请求。然而，对于我们的参考架构，我们想完全在中实现一个多方面搜索。本文源地址：http://www.mongoing.com/blog/retail-reference-architecture-part-1 如今，产品目录数据管理对零售商而言是一个非常复杂的问题。经过多年对多个庞大、由供应商提供的系统的依赖之后，零售商目前正在重新考...

Gemini 2019-06-26 16:52 评论0 收藏0
一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。欢迎访问我的个人网站：http://www.neroht.com/ 刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的...

tangr206 2019-06-26 17:34 评论0 收藏0