一、总述

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

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

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

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

二、前端部分

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

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

三、后端部分

模糊分页查询接口

接口：

java 复制代码

/**
     * 查询基本商品属性列表
     */
    @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;
    }

实现：

java 复制代码

/**
     * 分页查询商品基本属性列表
     * @param catId 分类id
     * @param pageParamsDto 分页参数
     * @return
     */
    @Override
    public 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的话，就拼接上属性id
                wrapper.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());
    }

新增属性接口

接口：

java 复制代码

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

实现：

java 复制代码

/**
     * 添加商品属性的详细信息，包含属性分组
     * @param attrVo
     * @return
     */
    @Transactional
    @Override
    public 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;
    }

修改属性接口

接口：

java 复制代码

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

实现：

java 复制代码

/**
     * 更新商品属性信息
     * @param attrVo
     * @return
     */
    @Transactional
    @Override
    public 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;
    }

删除属性接口

java 复制代码

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

四、总结

前端后端还是那些东西....

谷粒商城第十二天-基本属性&销售属性管理功能的实现

一、总述

二、前端部分

三、后端部分

四、总结