接口开发流程
根据接口需求开发接口，
开发需求，就像在线接口文档如下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; }
