龙空技术网

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

网为科技 160

前言:

今天你们对“jsjson获取属性值”大概比较关注,各位老铁们都需要知道一些“jsjson获取属性值”的相关文章。那么小编也在网摘上网罗了一些有关“jsjson获取属性值””的相关资讯,希望同学们能喜欢,姐妹们快快来了解一下吧!

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

需求:

在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字段中的内容,呈现给前端用户。以下是#微信小程序的前端演示。

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

标签: #jsjson获取属性值