电商项目中的SKU设计，前端后端数据逻辑

电商商品中常常能看到

其中，Color, 与Size，就是所谓的商品属性； 

1.数据库如何设计

（1）商品表：goods

         这个表很简单，根据需求来设计

（2）规格表：goods_attr

 

（3）规格属性：goods_attr_vals

（4）商品SKU：goods_sku

到这里数据库，基本上设计完了

2.给前端接口中的数据结构

我的做法是后端处理好结构返回数据

（1）商品信息：info

 

（2）商品属性：attr

（3）商品SKU：sku

 （4）有效属性：tags

 

解释：

info，商品信息，就没什么要求，反正需要显示的。

attr，是商品的规格，用来循环属性名称，以及属性下的子属性值，id 与 SKU中的 “k1_4_9”关联

tags，作用是，从goods_sku中的 attr_group分解读出。id与id之间的关联。（就类似，选中白色,S，和8G 的id 就会有关联），这个方便前端点击规格后，那些关联规格高亮(就是有效)

sku，最后通过选择每个属性中的一个具体子属性值，selected = {0:1,1:4,2:9}(这是前端选择属性时，组成的一个当前选中属性值对象。序号0,1,2代表3个规格attr的序号,1，4，9，代表选中对应的id)，最后通过组成 "k1_4_9"。可在sku中找到对应sku数据。

3.前端如何处理多个规格中，点击其中一个，其余高亮

我的思路是，一个商品，goods_attr_vals属性值是以id做主键，所以必然不会重复。

tags数据结构，当选中1时，所有子属性值中，id = “1，4，9”高亮。

当选中，4时[1,2,4,9,10]，与[1,4,9]取交集，结果是[1,4,9]。依次类推。便可得出。

其中没有说到的，

每次点击时，根据 selected 来值来判断，初始selected = {}，当选中某个规格时，selected = {0:1} 或者 selected = {1:4}。

然后循环selected 来查看tags 中 对应的数组值，将其进行取交集便可得出

代码：

    /**
     * 选中规格
     */  
     onAttr(i, k) {
      if (this.selected[i] === k) {
        delete this.selected[i];
      } else {
        this.selected[i] = this.attr[i][k].id;
      }
   /**
     * 判断交集规格
     */
    hasAttr() {
      let temp = [];
      const arr = this.tags;
      for (let i in this.selected) {
        const id = this.selected[i];
        if(temp.length == 0){
          temp = [].concat(arr[id]);
        }else{
          temp = temp.filter((item) => arr[id].indexOf(item) > -1);
        }
      }
      return temp;
    },