完成商品属性分组和商品属性关联维护

1.前端页面搭建

1.复制attrgroup-attr-relation.vue到src/views/modules/commodity下

2.加入超链接和引入组件 src/views/modules/commodity/attrgroup.vue

1.加入超链接

<el-button type="text" size="small" @click="relationAttrHandle(scope.row.id)">关联</el-button>

2.引入组件

3.数据池加入变量

4.使用组件

1.引用组件

2.添加方法

    //处理分组与属性的关联
    relationAttrHandle(groupId) {
      this.relationVisible = true;
      console.log(groupId)
      this.$nextTick(() => {
        this.$refs.relationUpdate.init(groupId);
      });
    }

3.测试，点击关联，会输出当前的id

5.修改请求，将attrgroup-attr-relation.vue的请求修改成环境变量 + 资源路径的形式

6.解析

1.点击关联按钮，会将这行的id传到relationAttrHandle方法中

2.这个方法，首先显示对话框，然后调用组件的init方法

3.init方法向后端发送请求，返回当前属性组已经关联的商品属性（基本属性）的数据

2.第六次部署

1.后端部署

1.由于只修改了sunliving-commodity模块，所以不需要区分多环境

2.将sunliving-commodity模块设置成prod

3.maven打包

4.target目录测试jar包执行

5.ctrl + c 退出，部署到服务器

2.前端部署

1.由于所有请求都是环境变量 + 资源路径，所以不需区分多环境

2.根目录npm run build

3.nvm切换到node16，dist目录下执行serve，模拟线上环境

4.验证码没出来503服务不可用，原因是Nacos将这些服务下线了，全部上线即可，然后重启前端

5.测试无误

6.将dist目录下的文件部署到服务器

7.测试无误

2.点击关联按钮，可以看到该组关联的所有商品属性

1.后端 sunliving-commodity 模块

1.分析资源路径写法

2.AttrService.java 新增方法 根据属性组id获取关联的属性

    /**
     * 根据属性组id获取关联的属性
     * @param attrgroupId
     * @return
     */
    List<AttrEntity> getRelationAttr(Long attrgroupId);

3.AttrServiceImpl.java 实现方法

    @Override
    public List<AttrEntity> getRelationAttr(Long attrgroupId) {
        // 根据attrgroupId查询出所有的关联属性
        List<AttrAttrgroupRelationEntity> relationEntities = attrAttrgroupRelationService.list(new QueryWrapper<AttrAttrgroupRelationEntity>()
                .eq("attr_group_id", attrgroupId));
        // 如果relationEntities为空，直接返回null
        if (relationEntities.isEmpty()) {
            return null;
        }
        // 使用stream api获取所有的attrId
        List<Long> attrIds = relationEntities.stream().map(AttrAttrgroupRelationEntity::getAttrId).collect(Collectors.toList());
        // 根据attrIds查询出所有的attr
        return attrDao.selectBatchIds(attrIds);
    }

4.AttrgroupController.java 根据路径参数传来的组id得到关联的所有属性信息

    /**
     * 获取属性分组关联的属性
     */
    @RequestMapping("/{attrGroupId}/attr/relation")
    // @RequiresPermissions("commodity:attrgroup:list")
    public R attrRelation(@PathVariable("attrGroupId") Long attrGroupId) {
        // 根据attrGroupId查询关联的属性
        List<AttrEntity> relationAttr = attrService.getRelationAttr(attrGroupId);
        return R.ok().put("data", relationAttr);
    }

5.测试

2.前端 attrgroup-attr-relation.vue

1.接受数据

2.测试

3.删除某个商品属性分组关联的商品属性，支持批量删除

1.梳理表之间的关系

2.后端 sunliving-commodity模块

1.AttrAttrgroupRelationDao.java 新增批量删除方法

	// 批量删除关联关系
    void deleteBatchRelation(@Param("entities") List<AttrAttrgroupRelationEntity> entities);

2.AttrAttrgroupRelationDao.xml 实现批量删除

    <delete id="deleteBatchRelation">
        delete
        from `commodity_attr_attrgroup_relation`
        where
        <foreach collection="entities" item="item" separator="or">
            (attr_id = #{item.attrId} and attr_group_id = #{item.attrGroupId})
        </foreach>
    </delete>

3.AttrService.java 新增批量删除方法

    /**
     * 批量删除关联关系
     * @param entities
     */
    void deleteRelation(List<AttrAttrgroupRelationEntity> entities);

4.AttrServiceImpl.java 实现批量删除

    @Override
    public void deleteRelation(List<AttrAttrgroupRelationEntity> entities) {
        // 批量删除关联关系，这里的entities只有attrId和attrGroupId
        attrAttrgroupRelationDao.deleteBatchRelation(entities);
    }

2.分析前端请求

• 可以看到传入的是AttrAttrgroupRelationEntity类型的数组

1.AttrgroupController.java 编写接口

    /**
     * 移除关联
     * @param entities
     * @return
     */
    @RequestMapping("/attr/relation/delete")
    public R deleteRelation(@RequestBody AttrAttrgroupRelationEntity[] entities) {
        attrService.deleteRelation(Arrays.asList(entities));
        return R.ok();
    }

2.后端测试

3.前端测试

4.查询某个商品的属性分组可以关联的商品属性（支持分页）

思路分析图

1.分析前端请求 attrgroup-attr-relation.vue

1.点击新建关联

2.调用getDataList方法

3.发送请求，携带attrGroupId

2.后端 sunliving-commodity 模块（先不分页）

1.AttrService.java 添加方法 根据属性组id获取可以关联的属性

    /**
     * 根据属性组id获取可以关联的属性
     * @param attrGroupId
     * @return
     */
    List<AttrEntity> getAttrRelation(Long attrGroupId);

2.AttrServiceImpl.java 实现方法

    @Override
    public List<AttrEntity> getAttrRelation(Long attrGroupId) {
        // 1. 根据属性组id，在属性组表中查询出对应的categoryId
        Long categoryId = attrgroupDao.selectById(attrGroupId).getCategoryId();
        // 2.根据这个id去属性表中查询出所有的属性
        List<AttrEntity> allAttr = attrDao.selectList(new QueryWrapper<AttrEntity>().eq("category_id", categoryId));
        // 3.查询关联表的所有数据，不加条件
        List<AttrAttrgroupRelationEntity> relationEntities = attrAttrgroupRelationService.list();
        // 4.获取所有的attrId
        List<Long> attrIds = relationEntities.stream().
                map(AttrAttrgroupRelationEntity::getAttrId).collect(Collectors.toList());
        // 5.过滤出没有关联的属性，并且attrType为1
        List<AttrEntity> noRelationAttr = allAttr.stream().filter(attrEntity -> {
            return !attrIds.contains(attrEntity.getAttrId()) && attrEntity.getAttrType() == 1;
        }).collect(Collectors.toList());

        return noRelationAttr;
    }

3.AttrgroupController.java 编写接口

    /**
     * 根据属性组id获取可以关联的属性
     *
     * @param attrGroupId
     * @return
     */
    @RequestMapping("{attrGroupId}/noattr/relation")
    public R noattrRelation(@PathVariable("attrGroupId") Long attrGroupId) {
        List<AttrEntity> attrRelation = attrService.getAttrRelation(attrGroupId);
        return R.ok().put("page", attrRelation);
    }

4.测试并分析结果

1.请求携带属性组参数为1，此时返回了一个可关联的属性

2.首先从属性组表中查找id为1的categoryId为301

3.然后从属性表中查找是基本属性的，并且categoryId为301的发现有12，14，21符合要求

4.最后从关联表中查询是否属性id已经存在，发现12，21已经被关联，所以最终只返回id为14的属性

3.后端 sunliving-commodity 模块（支持分页，包含分页模板！！！）

1.AttrService.java 添加方法 根据属性组id获取可以关联的属性，并且分页

    /**
     * 根据属性组id获取可以关联的属性，并且分页
     * @param params
     * @param attrGroupId
     * @return
     */
    PageUtils  queryPageAttrRelation(Map<String, Object> params, Long attrGroupId);

2.AttrServiceImpl.java 实现方法（也相当于分页模板）

• 前端传入的参数一般为
  • key：查询的key
  • page：当前页
  • limit：页面大小
• 进行分页查询的步骤
  • 获取关键字和分页参数
  • 使用QueryWrapper构建查询条件
  • 创建Page对象，传入page和limit
  • 对Page对象进行处理
  • 处理后，使用PageUtils封装返回结果

    @Override
    public PageUtils queryPageAttrRelation(Map<String, Object> params, Long attrGroupId) {
        // 1.获取关键字和分页参数
        String key = (String) params.get("key");
        int currentPage = Integer.parseInt(params.getOrDefault("page", "1").toString());
        int pageSize = Integer.parseInt(params.getOrDefault("limit", "10").toString());

        // 2.构建基本查询条件，根据key进行查询
        QueryWrapper<AttrEntity> queryWrapper = new QueryWrapper<>();
        if (StringUtils.isNotBlank(key)) {
            queryWrapper.and(wrapper ->
                    wrapper.eq("attr_id", key).or().like("attr_name", key)
            );
        }

        // 3.获取已关联的属性ID
        Set<Long> relatedAttrIds = attrAttrgroupRelationService.list().stream()
                .map(AttrAttrgroupRelationEntity::getAttrId)
                .collect(Collectors.toSet());

        // 4.排除已关联的属性ID
        if (!relatedAttrIds.isEmpty()) {
            queryWrapper.notIn("attr_id", relatedAttrIds);
        }

        // 5.附加查询条件，根据attrGroupId查询出对应的categoryId
        if (attrGroupId != null) {
            Long categoryId = attrgroupDao.selectById(attrGroupId).getCategoryId();
            if (categoryId != null) {
                queryWrapper.eq("category_id", categoryId);
                queryWrapper.eq("attr_type", 1);  // 只包括类型为1的属性
            }
        }

        // 6.执行分页查询
        Page<AttrEntity> page = new Page<>(currentPage, pageSize);
        IPage<AttrEntity> attrPage = attrDao.selectPage(page, queryWrapper);

        // 7.使用PageUtils封装返回结果
        return new PageUtils(attrPage);
    }

3.分页结果工具类 PageUtils

/**
 * 分页工具类
 *
 * @author Mark sunlightcs@gmail.com
 */
public class PageUtils implements Serializable {
	private static final long serialVersionUID = 1L;
	/**
	 * 总记录数
	 */
	private int totalCount;
	/**
	 * 每页记录数
	 */
	private int pageSize;
	/**
	 * 总页数
	 */
	private int totalPage;
	/**
	 * 当前页数
	 */
	private int currPage;
	/**
	 * 列表数据
	 */
	private List<?> list;
	
	/**
	 * 分页
	 * @param list        列表数据
	 * @param totalCount  总记录数
	 * @param pageSize    每页记录数
	 * @param currPage    当前页数
	 */
	public PageUtils(List<?> list, int totalCount, int pageSize, int currPage) {
		this.list = list;
		this.totalCount = totalCount;
		this.pageSize = pageSize;
		this.currPage = currPage;
		this.totalPage = (int)Math.ceil((double)totalCount/pageSize);
	}

	/**
	 * 分页
	 */
	public PageUtils(IPage<?> page) {
		this.list = page.getRecords();
		this.totalCount = (int)page.getTotal();
		this.pageSize = (int)page.getSize();
		this.currPage = (int)page.getCurrent();
		this.totalPage = (int)page.getPages();
	}

	public int getTotalCount() {
		return totalCount;
	}

	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}

	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	public int getTotalPage() {
		return totalPage;
	}

	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}

	public int getCurrPage() {
		return currPage;
	}

	public void setCurrPage(int currPage) {
		this.currPage = currPage;
	}

	public List<?> getList() {
		return list;
	}

	public void setList(List<?> list) {
		this.list = list;
	}
	
}

4.测试

5.新建属性和属性组之间的关联（支持批量添加）

1.分析前端请求 attrgroup-attr-relation.vue

1.点击确认新增

2.调用submitAddRealtion方法

3.可以得到新增的基本属性的数据

4.可以看到，将attrId和attrGroupId组成的js对象数组传递给了后端

2.后端 sunliving-commodity 模块

1.直接写controller即可

    /**
     * 批量增加关联
     *
     * @param entities
     * @return
     */
    @RequestMapping("/attr/relation")
    public R relation(@RequestBody AttrAttrgroupRelationEntity[] entities) {
        attrAttrgroupRelationService.saveBatch(Arrays.asList(entities));
        return R.ok();
    }

2.测试