springcloud_07_商品中心—(sku属性)

前言

此篇博客是与商品相关的部分

一、商品的相关概念

1、商品含义及相关属性

就是参与买卖的东西

（1）、常规属性

名称,副名称,商品(图文详情)详情(一般都是图片)

（2）、媒体属性

介绍商品的视频…

（3）、规格属性

又称之为显示属性，不影响价格属性

（4）、sku属性

影响价格和库存的属性,叫sku属性(销售属性)

2、sku属性的概念

（1）、sku属性的含义

SKU=Stock Keeping Unit(库存量单位)。能确定有多少库存及什么价格。等同于条形码。一个sku确定一个商品。一个商品能有多个sku属性

（2）、sku属性及选项

一个商品有多个sku属性，每一个sku属性有多个属性值。一个sku属性能确定商品的库存及价格。sku的组成是由多个sku属性及它们的sku属性选项进行组合产生.

• 图示
  
• 复杂及简单组合
  

3、数据库优化之分表

（1）水平分表

一张表的数据比较多，就用水平分表。分成多张表，每张表的字段完全一样。可以根据id分表，也可以根据时间分表。

• 问题1：如何确定数据插入到了哪一张表中?
  总数据除以规定的每张表的条数，看有无余数，就能分析出来。每张数据库表取名就为：比如t_user_xx
• 问题2：删除和更新操作怎么确定表名?
  和上面一样，也是根据id去算。
• 问题3：批量插入，如果在两张或者更多表时怎么办?
  尽量都插入到一张表中，设置插入的条数限制，避免影响数据库性能。要么就牺牲性能，多发几条sql语句，将数据分别放入不同的表中

（1）垂直分表

一张表的某些字段多，就用垂直分表。按列分，那么每一个表的列不同，那么就通过外键关联起来

二、商品模块设计

1、数据库优化之分表

（1）水平分表

一张表的数据比较多，就用水平分表。分成多张表，每张表的字段完全一样。可以根据id分表，也可以根据时间分表。

• 问题1：如何确定数据插入到了哪一张表中?
  总数据除以规定的每张表的条数，看有无余数，就能分析出来。每张数据库表取名就为：比如t_user_xx
• 问题2：删除和更新操作怎么确定表名?
  和上面一样，也是根据id去算。
• 问题3：批量插入，如果在两张或者更多表时怎么办?
  尽量都插入到一张表中，设置插入的条数限制，避免影响数据库性能。要么就牺牲性能，多发几条sql语句，将数据分别放入不同的表中

（2）垂直分表

一张表的某些字段多，就用垂直分表。按列分，那么每一个表的列不同，那么就通过外键关联起来

• 图示
  

2、商品设计——表设计

（1）、整体结构图

（2）、结合数据库的字段分析

（3）、商品后台页面展示效果

三、商品管理后台代码实现

1、生成后台代码。商品类product、商品扩展类ProductExt

mybatisPlus代码生成，通过原项目生产需要的代码

2、启动7001、6699、8002、9527服务

使用swagger测试是否成功

四、商品中心扩展功能

1、商品分类树状图的下拉框

之前使用axios发送异步请求到了数据，然后直接用绑定的方式用于希下拉框显示数据

2、商品品牌的下拉框

vue的双向绑定

3、npm安装富文本编辑组件

（1）、先运行下载命令

npm install vue-quill-editor -save

（2）、具体实现

在components组件文件夹中创建editor.vue组件，具体代码如下

• 结构
  

<template> <div> <script id="editor" type="text/plain"></script> </div> </template> <script>
    export default {
        name: 'UE',
        data () {
            return {
                editor: null
            }
        },
        props: {
            defaultMsg: {
                type: String
            },
            config: {
                type: Object
            }
        },
        mounted() {
            const _this = this;
            this.editor = UE.getEditor('editor', this.config); // 初始化UE
            this.editor.addListener("ready", function () {
                _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
            });
        },
        methods: {
            getUEContent() { // 获取内容方法
                return this.editor.getContent()
            }
        },
        destroyed() {
            this.editor.destroy();
        }
    }
</script>

（3）、页面要使用富文本编辑器

1）先引入编辑器组件

2）然后还要样式引入

3）然后使用部分

<el-form-item label="详情" prop="productExt.richContent">
	<div class="edit_container">
		<quill-editor v-model="form.productExt.richContent" ref="myQuillEditor" class="editer"
					  :options="editorOption" @ready="onEditorReady($event)"></quill-editor>
	</div>
</el-form-item>

4）js部分

（4）、最后展示

在新增操作中增加了富文本编辑器

（5）后台代码部分

1）主表product商品的domain类

增加从表商品扩展类的对象

2）主表product商品类的service层实现类

只需要覆写父类serviceImpl的insert方法。
进行主表(商品表)t_product和从表(商品扩展表)t_product_ext的保存操作。

@Service
public class ProductServiceImpl extends ServiceImpl<ProductMapper, Product> implements IProductService {

    //注入商品扩展类mapper
    @Autowired
    private ProductExtMapper productExtMapper;

    //覆写父类的insert方法，完成自己的业务实现
    @Override
    public boolean insert(Product entity) {
        //1.先保存主表：mybatis保存后，可以设置获取主键？？？？面试题
        entity.setCreateTime(new Date().getTime());
        //1.1保存到主表product商品表
        boolean result = super.insert(entity);

        //2.再保存关联表：注意观察数据库表中主表与从表的关联
        //2.1先获取关联表对象。主表product的（domain）实体类提供了关联表的字段
        ProductExt productExt = entity.getProductExt();
        //2.2拿到自己的id，并设置给关联对象
        Long productId = entity.getId();
        productExt.setProductId(productId);
        //2.3保存从表商品扩展表productExt
        productExtMapper.insert(productExt);
        return result;
    }
}

（6）流程图

（7）结果图

五、