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 实现方法

    @Overridepublic List<AttrEntity> getRelationAttr(Long attrgroupId) {// 根据attrgroupId查询出所有的关联属性List<AttrAttrgroupRelationEntity> relationEntities = attrAttrgroupRelationService.list(new QueryWrapper<AttrAttrgroupRelationEntity>().eq("attr_group_id", attrgroupId));// 如果relationEntities为空，直接返回nullif (relationEntities.isEmpty()) {return null;}// 使用stream api获取所有的attrIdList<Long> attrIds = relationEntities.stream().map(AttrAttrgroupRelationEntity::getAttrId).collect(Collectors.toList());// 根据attrIds查询出所有的attrreturn 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">deletefrom `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 实现批量删除

    @Overridepublic void deleteRelation(List<AttrAttrgroupRelationEntity> entities) {// 批量删除关联关系，这里的entities只有attrId和attrGroupIdattrAttrgroupRelationDao.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 实现方法

    @Overridepublic List<AttrEntity> getAttrRelation(Long attrGroupId) {// 1. 根据属性组id，在属性组表中查询出对应的categoryIdLong 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.获取所有的attrIdList<Long> attrIds = relationEntities.stream().map(AttrAttrgroupRelationEntity::getAttrId).collect(Collectors.toList());// 5.过滤出没有关联的属性，并且attrType为1List<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封装返回结果

    @Overridepublic 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.获取已关联的属性IDSet<Long> relatedAttrIds = attrAttrgroupRelationService.list().stream().map(AttrAttrgroupRelationEntity::getAttrId).collect(Collectors.toSet());// 4.排除已关联的属性IDif (!relatedAttrIds.isEmpty()) {queryWrapper.notIn("attr_id", relatedAttrIds);}// 5.附加查询条件，根据attrGroupId查询出对应的categoryIdif (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.测试