产品的规格属性功能如何开发？JS动态增减和Json格式数据实践

　　一直想把产品模型这块优化一下，今天终于有时间了，忙了一个大早，终于更线上线！

　　在OneAdmin的信息管理中，为产品模型新增一个“产品属性和参数”的功能。这是一个公司的展示型功能模块，而我们在做的商城中已经有SKU模式了，因此该功能不需要SKU那么复杂，只需要有产品的属性参数展示就可以了。

　　1、每个属性由名称和内容构成，成对出现，即2个1组；

　　2、每个产品的属性不同，需要可以随时变化；

　　3、每个产品的属性数量不同，需要可以随时变化；

　　

　　在产品模型中，使用动态增加的方式，同时增加一组（两个）文本输入框：一个输入属性名称，一个输入属性内容；

　　之后，使用json_encode()方法将属性名称和属性内容转化为Json格式，然后数据存储到数据库中；读取时，再通过json_decode()方法将其转化为普通的数组，进而方便前端呈现。

　　在数据库，product表中创建一个名为“spec”的json格式字段，用于该功能的数据存储；

　　给后台的前端增加一个动态输入框的界面样式，并将form表单中的此字段命名为spec；

　　

　　十分要注意的是，后台前端传值的name名称，应当定名为 spec[].name和spec[].value，以确保传递到控制器时，有关键的下标键值。此时，传递过来的数组是一个二维数组。如图：

　　

　　撰写后台前端的“增加”、“删除”功能，同时动态操作绑定js控制；

　　

　　然后，后台控制器中接收传值、验证数据，并对数据进行整理之后，存储到数据中；

　　一般，在控制器中判断是否为get请求。如果是的时候，将读取spec字段，并转化为数组形式。

　　

　　此时，数据库中有存在spec这个json数据了，基本算完成了。

　　

　　表单最后阶段，分两种情况：

　　1、新增产品时，spec字段是没有数据的；

　　如果是get请求，且spec不存在的情况下，为表单初始化一组输入框；

　　2、编辑产品时，spec字段是有数据的；

　　如果是get请求，且spec存在的情况下，为表单初始化相应组的输入框，并在输入框中显示相应的值。

　　此时，还需要加一个判断，判断spec的数组下标为1时，显示增加；不为1时，显示移除；

　　其中，volist可以将数组的key读取出来，因此使用volist进行模板渲染。

　　

　　在Api中读取spec字段，并将spec字段中的内容，呈现给前端用户。以下是#微信小程序的前端演示。

　　

　　综上，基本实现了产品属性的自定义添加功能，快来试试吧！

　　举报/反馈