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

栏目:影视资讯  时间:2022-11-07
手机版

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

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

  

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

  举报/反馈

上一篇:《悲伤逆流成河》电影版搬上荧幕
下一篇:又找到一个华而不实的钓具,新手以为捡到宝,老手不拿正眼看

最近更新影视资讯