谷粒商城--获得属性分组和分组详细信息

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

接口开发流程

根据接口需求开发接口，

开发需求，就像在线接口文档如下https://easydoc.net/s/78237135/ZUqEdvA4/OXTgKobR这里一样， 别人告诉你需要什么功能，需要返回什么样的数据，你就通过接口的形式把他们呢实现出来即可！

这一部分都是CRUD相关的代码，所以要好好练好好写！！！

开发接口就是开发Controller、service、dao

以后工作了也是这种形式，主要是开发接口为多，前端其实不用写太多，能看懂即可！！！

获得属性分组

（1）接口功能

接口地址：/product/attrgroup/list/{catelogId}

​ 请求参数： {   page: 1,//当前页码   limit: 10,//每页记录数   sidx: 'id',//排序字段   order: 'asc/desc',//排序方式   key: '华为'//检索关键字 }

响应数据 { "msg": "success", "code": 0, "page": { "totalCount": 0, "pageSize": 10, "totalPage": 0, "currPage": 1, "list": [{ "attrGroupId": 0, //分组id "attrGroupName": "string", //分组名 "catelogId": 0, //所属分类 "descript": "string", //描述 "icon": "string", //图标 "sort": 0 //排序 "catelogPath": [2,45,225] //分类完整路径 }] } }

（2）controller

这里使用的是@RequestMapping注解 后面会根据需求进行更改如@getmaping、requestmaping

    @RequestMapping("/list/{catelogId}")
    public R list(@RequestParam Map<String, Object> params,
                  @PathVariable("catelogId") Long catelogId){
//        PageUtils page = attrGroupService.queryPage(params);
​
        PageUtils page = attrGroupService.queryPage(params, catelogId);
        return R.ok().put("page", page);
    }

（3）service

这里注意，前端有两个查询按钮

查询和查询全部

这两个都要有模糊查询的功能！

代码详细解释都写在注释里了！

PageUtils queryPage(Map<String, Object> params, Long catelogId);
​
​
@Override
public PageUtils queryPage(Map<String, Object> params, Long catelogId) {
    //多条件查询
    String key = (String) params.get("key");
    QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<>();
    if (!StringUtils.isEmpty(key)) {
        wrapper.and((obj) -> {
            obj.eq("attr_group_id",key).or().like("attr_group_name",key);
        });
    }
    if (catelogId == 0) {
        //如果是默认的是查全部的一级分类
        IPage<AttrGroupEntity> page = this.page(
            new Query<AttrGroupEntity>().getPage(params),
            wrapper);
        return new PageUtils(page);
    } else {
        wrapper.eq("catelog_id", catelogId);
        IPage<AttrGroupEntity> page = this.page(
            new Query<AttrGroupEntity>().getPage(params), wrapper);
        return new PageUtils(page);
    }
}

属性分组详情

（1）实现三级联动的效果

获取三级联动框

<el-cascader
v-model="value"
:options="options"
@change="handleChange">
</el-cascader>

数据绑定

categorys: [], //三级菜单数据
props: { children: "children", label: "name", value: "catId" }, //cascader的设置属性

至此，会出现一个bug，返回children默认为[]时，vue也渲染出了子选框

在children字段加上@JsonInclude去空字段

@TableField(exist = false)
@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<CategoryEntity> children;

（2）三级联动回显

通过数组封装路径

@TableField(exist = false)
private Long[] catelogPath;

（3）controller

/**
 * 信息
 */
@RequestMapping("/info/{attrId}")
public R info(@PathVariable("attrId") Long attrId){
    AttrEntity attr = attrService.getById(attrId);
​
    Long catelogId = attr.getCatelogId();
    Long[] path = categoryService.findCatelogPath(catelogId);
    attr.setCatelogPath(path);
​
    return R.ok().put("attr", attr);
}

（4）service

//找到catelogId的完整路径:[父/子/孙]

@Override
public Long[] findCatelogPath(Long catelogId) {
    ArrayList<Long> list = new ArrayList<>();
    List<Long> parentPath = findParentPath(catelogId, list);
​
    Collections.reverse(parentPath);
    return (Long[]) list.toArray(new Long[parentPath.size()]);
}
​
private List<Long> findParentPath(Long catelogId,ArrayList<Long> list){
    list.add(catelogId);
    CategoryEntity entity = this.getById(catelogId);
    if (entity.getParentCid()!=0){
        findParentPath(entity.getParentCid(),list);
    }
    return list;
}