电商系统设计之商品上架

近期根据客户的不同需求，定制开发了好几款电商系统，在这整个开发过程中，积攒了一些开发经验和心得，后期我会写一系列文章，来记录我对开发电商系统的理解，这其中会包含一些后台逻辑设计、数据库设计、小程序设计、小程序UI设计等。

在功能完善的电商系统中，商品上架是基本、基础的功能，所有商品的购买、订单的结算等，都是围绕商品上架这个核心功能进行的，所以，我们先来聊聊[商品上架]。

商品上架，也许有人会说这个很简单，不就是一些商品属性的入库操作吗？从大体范围来说，确实如此，但是，要设计出一个通用的、适合大部分商品上架的功能，是需要一些比较细的操作的。

一、商品基本属性

我们分析各移动端（PC端也是类似）的电商应用，上传商品的信息基本包括：

其中重点和难点是 [商品参数] 和 [商品规格和SKU]

二、商品参数

要做到通用大部分商品，那么 [商品参数] 就必须抽象出来，让不同的商家来定义他们自己的商品参数。

我们先来看看前端商品详情的效果图：

以上图片来自不同小程序（蛋糕配送定制  和  南昌鲜花预定配送）的不同商品，但是他们的后台商品上架系统却是同一套。

再来看看后台系统的具体操作：

后台演示系统：https://shop.uwenya.cc/develop/server/backend/web/

登录用户密码：（在公众号里回复 EchoShop 查看）

ER图：

如此，把商品参数抽象出一个实体，我们定义不同的商品不同的类型，就在商品参数中定义，然后商品上架时，选择不同的商品参数，输入对应的参数值即可，这样我们就做到了可以适配大部分的商品参数了。

三、多规格、多SKU

多规格、多SKU是在用户点击商品购买或加入购物车时使用到的，比如说，同一件商品，有不同的颜色、大小、尺码等，那么用户在选择适合自己商品的规格时，就会出现不同的预览效果图、价格和库存等，给用户一种非常好的购买体验（尤其是SKU预览图），小程序端的效果图：

来自小程序（长按小程序二维码）：

后台管理系统效果图：

要实现多规格，就需要解决如下问题：
【1】不同规格，如何在数据库中存储

【2】在后台管理系统中，如何实现，在不同的规格、不同规格值组合下，单价、库存、sku预览图不同？也就是说，如何根据规格的变化更新下面这张表：

解决问题1：不同规格，如何在数据库中存储

在分析各类电商系统后，商品规格的类型数量基本上有3中：
（1）单品，即，该商品没有其他规格属性，在购买时，只会选择购买的数量

（2）一种规格，即，该商品只有一种规格可选，比如衣服的颜色，或衣服大小等

（3）二种规格，即，该商品有两种规格可选，比如衣服的颜色和衣服的大小

除此之外，很少会有三种及以上的规格给用户选择（用户操作的复杂度增加了）

所以，在明确了规格类型数量后，数据库的设计也就相对比较好弄了，

解决问题2：后台管理系统如何实现：

（1）规格表数据，列的动态增减

（2）规格表数据，数据行是规格类型的笛卡尔积

之前在开发第一款电商系统时，后台管理系统使用的是PHP+HTML/JS混编方式，所以要实现一些特殊效果时，就需要写大量的js，以及在js里写入html，以达到页面控件/标签的增加或减少。

虽然这种方式几乎可以做到你想做的一切，但是，这种方式的代码非常的不好管理和维护，以及代码的复用：要么php与html/js交织在一起，要么js与html交织在一起，而且开发的复杂度还增加了。所以，在之后的开发过程中，我就没想过用这种方式，而是使用了 [vue + element + element admin]，为什么选择vue，后面我会写一篇文章在阐述。

vue非常方便地解决我上面的说的不同代码的混编问题，我只要关注要渲染的数据，其他的效果，在之前就已经处理好了。

所以，最后的问题，就转变成了，对js中Array的操作，然后交由vue自动渲染视图界面，非常的方便。（当然，在使用vue完成这些操作时，也还是花了一定的时间，但是总体比混编的成本低低多了）

以上就是一个商品上架的主要功能，如有疑问欢迎交流

个人公众号：