一、总述

前端的话，依旧是直接使用老师给的。

前端的话还是那些增删改查，业务复杂一点的话，无非就是设计到多个字段多个表的操作，当然这是后端的事了，前端这里不做深究，走一下流程，知道哪些数据，需要绑定哪些事件，哪些方法就行了。

其实我之前讲的前端开发的三步，是基于已经有了大致的代码，也就是已经提供了一份代码了，只需要我们去修改，理解一下就行了，如果我们单纯使用elementUI进行开发的话，需要对那些组件比较熟悉。然后再作修改，数据域，方法等。

这里后端的话其实还是那些CRUD，比较常规。

二、前端部分

前端部分，这里我不像之前那样一点一点解析了，说实话浪费时间，稍微理解一下就行了，这里我直接贴上前端相应的代码：

代码很长，我直接放到这篇博文对应的资源包下面了。

三、后端部分

1. 模糊分页查询接口

接口：

/*** 查询基本商品属性列表*/@ApiOperation("查询商品基本属性列表")//@PreAuthorize("@ss.hasPermi('product:attr:list')")@PostMapping("/{type}/list/{catId}")public TableDataInfo pageBaseList(@PathVariable("type") String type,@PathVariable("catId")Long catId, @RequestBody PageParamsDto pageParamsDto) {TableDataInfo tableDataInfo = attrService.pageList(type,catId,pageParamsDto);return tableDataInfo;}

实现：

/*** 分页查询商品基本属性列表* @param catId 分类id* @param pageParamsDto 分页参数* @return*/@Overridepublic TableDataInfo pageList(String type,Long catId, PageParamsDto pageParamsDto) {//1. 根据catId查询出基本属性LambdaQueryWrapper<Attr> wrapper = new LambdaQueryWrapper<>();if(catId!=0){wrapper.eq(Attr::getCatelogId,catId);}if("base".equalsIgnoreCase(type)){wrapper.eq(Attr::getAttrType,1L);} else if ("sale".equalsIgnoreCase(type)) {wrapper.eq(Attr::getAttrType,0L);}if(StringUtils.hasText(pageParamsDto.getKey())){if (NumberUtils.isParsable(pageParamsDto.getKey())) {//如果当前字符串是数字，也就是代表是属性id的话，就拼接上属性idwrapper.eq(Attr::getAttrId,Long.parseLong(pageParamsDto.getKey()));}else{wrapper.like(Attr::getAttrName,pageParamsDto.getKey());}}//2. 分页处理Page<Attr> page = new Page<>(pageParamsDto.getPage(),pageParamsDto.getLimit());page(page,wrapper);List<Attr> records = page.getRecords();List<AttrVo> attrVos = BeanCopyUtils.copyBean(records, AttrVo.class);attrVos.stream().forEach((item)->{//1. 获取属性对应的分类名Long catelogId = item.getCatelogId();Category category = categoryService.getById(catelogId);if (category != null) {item.setCatelogName(category.getName());}if("base".equalsIgnoreCase(type)){//2. 获取属性对应的分组id及分组名AttrAttrgroupRelation relation = attrAttrgroupRelationService.getOne(new LambdaQueryWrapper<AttrAttrgroupRelation>().eq(AttrAttrgroupRelation::getAttrId, item.getAttrId()));if (relation != null) {Long attrGroupId = relation.getAttrGroupId();AttrGroup group = groupService.getById(attrGroupId);if (group != null) {item.setAttrGroupId(attrGroupId);item.setGroupName(group.getAttrGroupName());}}}//3. 获取属性对应的分类id对应的路径Long[] path = categoryService.categoryPath(catelogId);item.setCatelogPath(path);});return new TableDataInfo(attrVos,(int)page.getTotal());}

2. 新增属性接口

接口：

/*** 新增商品属性*/@ApiOperation("新增商品属性")//@PreAuthorize("@ss.hasPermi('product:attr:add')")@Log(title = "商品属性", businessType = BusinessType.INSERT)@PostMappingpublic AjaxResult add(@RequestBody AttrVo attrVo) {return toAjax(attrService.saveDetail(attrVo));}

实现：

/*** 添加商品属性的详细信息，包含属性分组* @param attrVo* @return*/@Transactional@Overridepublic boolean saveDetail(AttrVo attrVo) {//1. 先新增自己本身Attr attr = BeanCopyUtils.copyBean(attrVo, Attr.class);boolean save = save(attr);if(attrVo.getAttrType().equals(ProductConstant.AttrTypeConstant.BASE_ATTR)){AttrAttrgroupRelation relation = new AttrAttrgroupRelation();relation.setAttrGroupId(attrVo.getAttrGroupId());relation.setAttrId(attr.getAttrId());//2. 添加上分组信息return attrAttrgroupRelationService.save(relation);}return save;}

3. 修改属性接口

接口：

/*** 修改商品属性*/@ApiOperation("修改商品属性")//@PreAuthorize("@ss.hasPermi('product:attr:edit')")@Log(title = "商品属性", businessType = BusinessType.UPDATE)@PutMappingpublic AjaxResult edit(@RequestBody AttrVo attrVo) {return toAjax(attrService.updateDetail(attrVo));}

实现：

/*** 更新商品属性信息* @param attrVo* @return*/@Transactional@Overridepublic boolean updateDetail(AttrVo attrVo) {//1. 先更新自己Attr attr = BeanCopyUtils.copyBean(attrVo, Attr.class);boolean update = updateById(attr);//2. 更新关联的分组信息if(attrVo.getAttrType().equals(ProductConstant.AttrTypeConstant.BASE_ATTR)){LambdaUpdateWrapper<AttrAttrgroupRelation> wrapper = new LambdaUpdateWrapper<>();wrapper.eq(AttrAttrgroupRelation::getAttrId,attrVo.getAttrId());wrapper.set(AttrAttrgroupRelation::getAttrGroupId,attrVo.getAttrGroupId());return attrAttrgroupRelationService.update(wrapper);}return update;}

4. 删除属性接口

/*** 删除商品属性*/@ApiOperation("删除商品属性")//@PreAuthorize("@ss.hasPermi('product:attr:remove')")@Log(title = "商品属性", businessType = BusinessType.DELETE)@DeleteMappingpublic AjaxResult remove(@RequestBody Long[] attrIds) {return toAjax(attrService.removeMore(Arrays.asList(attrIds)));}