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获取关联的属性
List < AttrEntity > getRelationAttr ( Long attrgroupId) ;
3.AttrServiceImpl.java 实现方法
@Override
public List < AttrEntity > getRelationAttr ( Long attrgroupId) {
List < AttrAttrgroupRelationEntity > relationEntities = attrAttrgroupRelationService. list ( new QueryWrapper < AttrAttrgroupRelationEntity > ( )
. eq ( "attr_group_id" , attrgroupId) ) ;
if ( relationEntities. isEmpty ( ) ) {
return null ;
}
List < Long > attrIds = relationEntities. stream ( ) . map ( AttrAttrgroupRelationEntity :: getAttrId ) . collect ( Collectors . toList ( ) ) ;
return attrDao. selectBatchIds ( attrIds) ;
}
4.AttrgroupController.java 根据路径参数传来的组id得到关联的所有属性信息
@RequestMapping ( "/{attrGroupId}/attr/relation" )
public R attrRelation ( @PathVariable ( "attrGroupId" ) Long 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 新增批量删除方法
void deleteRelation ( List < AttrAttrgroupRelationEntity > entities) ;
4.AttrServiceImpl.java 实现批量删除
@Override
public void deleteRelation ( List < AttrAttrgroupRelationEntity > entities) {
attrAttrgroupRelationDao. deleteBatchRelation ( entities) ;
}
2.分析前端请求
可以看到传入的是AttrAttrgroupRelationEntity类型的数组
1.AttrgroupController.java 编写接口
@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获取可以关联的属性
List < AttrEntity > getAttrRelation ( Long attrGroupId) ;
2.AttrServiceImpl.java 实现方法
@Override
public List < AttrEntity > getAttrRelation ( Long attrGroupId) {
Long categoryId = attrgroupDao. selectById ( attrGroupId) . getCategoryId ( ) ;
List < AttrEntity > allAttr = attrDao. selectList ( new QueryWrapper < AttrEntity > ( ) . eq ( "category_id" , categoryId) ) ;
List < AttrAttrgroupRelationEntity > relationEntities = attrAttrgroupRelationService. list ( ) ;
List < Long > attrIds = relationEntities. stream ( ) .
map ( AttrAttrgroupRelationEntity :: getAttrId ) . collect ( Collectors . toList ( ) ) ;
List < AttrEntity > noRelationAttr = allAttr. stream ( ) . filter ( attrEntity -> {
return ! attrIds. contains ( attrEntity. getAttrId ( ) ) && attrEntity. getAttrType ( ) == 1 ;
} ) . collect ( Collectors . toList ( ) ) ;
return noRelationAttr;
}
3.AttrgroupController.java 编写接口
@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获取可以关联的属性,并且分页
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) {
String key = ( String ) params. get ( "key" ) ;
int currentPage = Integer . parseInt ( params. getOrDefault ( "page" , "1" ) . toString ( ) ) ;
int pageSize = Integer . parseInt ( params. getOrDefault ( "limit" , "10" ) . toString ( ) ) ;
QueryWrapper < AttrEntity > queryWrapper = new QueryWrapper < > ( ) ;
if ( StringUtils . isNotBlank ( key) ) {
queryWrapper. and ( wrapper ->
wrapper. eq ( "attr_id" , key) . or ( ) . like ( "attr_name" , key)
) ;
}
Set < Long > relatedAttrIds = attrAttrgroupRelationService. list ( ) . stream ( )
. map ( AttrAttrgroupRelationEntity :: getAttrId )
. collect ( Collectors . toSet ( ) ) ;
if ( ! relatedAttrIds. isEmpty ( ) ) {
queryWrapper. notIn ( "attr_id" , relatedAttrIds) ;
}
if ( attrGroupId != null ) {
Long categoryId = attrgroupDao. selectById ( attrGroupId) . getCategoryId ( ) ;
if ( categoryId != null ) {
queryWrapper. eq ( "category_id" , categoryId) ;
queryWrapper. eq ( "attr_type" , 1 ) ;
}
}
Page < AttrEntity > page = new Page < > ( currentPage, pageSize) ;
IPage < AttrEntity > attrPage = attrDao. selectPage ( page, queryWrapper) ;
return new PageUtils ( attrPage) ;
}
3.分页结果工具类 PageUtils
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;
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即可
@RequestMapping ( "/attr/relation" )
public R relation ( @RequestBody AttrAttrgroupRelationEntity [ ] entities) {
attrAttrgroupRelationService. saveBatch ( Arrays . asList ( entities) ) ;
return R . ok ( ) ;
}
2.测试