章节目录
1、操作界面
2、菜单权限配置
3、数据库表模型
4、列表展示前端代码
5、列表后端API代码
6、规格值格式转换并界面显示
例如同一款苹果12手机，他的属性还包括内存（64g，128g），颜色（红色，蓝色，白色），所以同一个商品都包含多个规格，那么我们在系统上面抽象设计成为规格，在创建商品的时候，需要设置规格。
1、操作界面
2、菜单权限配置
3、数据库表模型
CREATE TABLE `yx_store_product_rule` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`rule_name` varchar(32) NOT NULL COMMENT '规格名称',
`rule_value` json NOT NULL COMMENT '规格值',
`create_time` datetime DEFAULT NULL,
`update_time` datetime DEFAULT NULL,
`is_del` tinyint(1) DEFAULT '0',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='商品规则值(规格)表';如上述数据库记录，规格值通过json的数据格式进行存储
[{"value": "纸张", "detail": ["A4", "A3"]}, {"value": "颜色", "detail": ["白色", "红色"]}]其中value就是规格值，detail就是具体的规格数据
效果如下截图
4、列表展示前端代码
代码路径：
如下图是列表布局界面
const defaultCrud = CRUD({ title: 'sku规则', url: 'api/yxStoreProductRule', sort: 'id,desc', crudMethod: { ...crudYxStoreProductRule }})如上述代码，定义了后端列表接口url: 'api/yxStoreProductRule'
5、列表后端API代码
@GetMapping
@Log("查询sku规则")
@ApiOperation("查询sku规则")
@PreAuthorize("@el.check('admin','yxStoreProductRule:list')")
public ResponseEntity<Object> getYxStoreProductRules(YxStoreProductRuleQueryCriteria criteria, Pageable pageable){
return new ResponseEntity<>(yxStoreProductRuleService.queryAll(criteria,pageable),HttpStatus.OK);
}业务逻辑是：读取yx_store_product_rule表的数据返回给前端。
@Override
//@Cacheable
public Map<String, Object> queryAll(YxStoreProductRuleQueryCriteria criteria, Pageable pageable) {
getPage(pageable);
PageInfo<YxStoreProductRule> page = new PageInfo<>(queryAll(criteria));
Map<String, Object> map = new LinkedHashMap<>(2);
map.put("content", page.getList());
map.put("totalElements", page.getTotal());
return map;
}业务逻辑：
1、getPage函数：设置分页
2、queryAll(criteria)：调用baseMapper.selectList函数。查询数据库比并返回数据。
@Override
//@Cacheable
public List<YxStoreProductRule> queryAll(YxStoreProductRuleQueryCriteria criteria){
return baseMapper.selectList(QueryHelpPlus.getPredicate(YxStoreProductRule.class, criteria));
}6、规格值格式转换并界面显示
因为数据库存储规格值内容是一个json数据格式，界面需要做数据处理才能正常显示，在界面显示效果如下：
所以程序程序上需要如下处理：
<el-table-column v-if="columns.visible('ruleValue')" prop="ruleValue" label="规格值" >
<template slot-scope="scope">
<div v-for="(item, index) in scope.row.ruleValue">
{{ item.value }} : {{ item.detail.join(',')}}
</div>
</template>
</el-table-column>计划
1、ruoyi-flowable-plus工作流拆解
2、ruoyi-flowable-plus如何快速开发
3、电商项目源代码拆解
4、JEECG低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。运行不起来可以联系我