关于Amazon-Listing刊登项目记录Amazo平台全面转向基于JSON 的SP-API。为保障刊登业务的连续性，

去年下半年主要的主要工作就是完成Amazon-Listing刊登项目，由于之前Amazon所提供基于文件或XML格式刊登接口将于今年3月停用(实际好像7月才停用)，需要改用新的接口，也就是基于JSON格式的刊登。一直没有时间总结，今天花点时间，将从前端的视角记录一下做了哪些，也希望可能对有需要的人产生一些帮助。

项目背景

刊登属于是电商领域非常常见的一项业务了，那为了更高效的进行刊登、管理以及数据的应用等方面的考量，很多公司都会通过ERP系统来进行该业务的操作和管理，其中的一些益处就不多提了。

目标

实现基于 JSON Schema 的动态表单渲染
支持字段级联动、条件展示、实时校验
提供高可用、可维护、可扩展的表单系统
优化刊登流程，提升操作效率与数据准确性

好处与挑战

这里就不提以前基于文件或XML上传的接口了，那基于JSON格式的刊登有什么好处以及对于开发人员有哪些挑战呢？

好处

提交前验证刊登数据的可用性
减少输入错误等交互情况
有更好的反馈机制
上传速度更快

挑战

基于JSON Schema生成便利的刊登操作页面
根据规则实时进行联动和校验
以往不规范的刊登数据处理(可真是个大麻烦)
速率限制可能导致的问题(后端同学处理)

JSON Schema规范

JSON Schema 是用于验证 JSON 数据结构的强大工具，Schema可以理解为模式或者规则。具体的介绍可以看这个链接，JSON Schema 规范

JSON Schema生成表单

首先，小团队，水平一般，这项目前端就我一个人负责，去手搓一个表单生成器，显然是不靠谱，就算搓出来，估计也是又臭又硬的代码。所以当时，拿到Amazon的JSON Schema数据(几万行)，第一步就是去找有没有合适的开源框架，可以拿来使用。

选择合适的框架

当时应该是看了好几款相关的，最终选择了Formily这一款，凭借着支持JSON Schema渲染，高性能，可动态渲染、全面性、赢的了我的选择。下面是Formily上介绍的竞品对比，具体可看 Formily官网

能力	Ant Design Form	Fusion Form	Formik	React Final Form	React Schema Form	React Hook Form	Formily1.x	Formily2.x
自定义组件接入成本	4.x接入成本低	高	低	低	高	高	低	低
性能	4.x性能较好	差	差	较好	差	好	非常好	非常好
是否支持动态渲染	否	否	否	否	是	否	是	是
是否开箱即用	是	是	否	否	是	否	是	是
是否支持跨端	否	否	否	否	否	否	是	是
开发效率	一般	一般	一般	一般	低	一般	高	高
学习成本	低	低	低	高	高	低	很高	高
视图代码可维护性	低	低	低	低	高	低	高	高
场景化封装能力	无	无	无	无	有	无	有	有
是否支持表单预览态	否	是	否	否	否	否	是	是

在进行一通框框对比的技术选型后，开始按照 Formily 的文档，使用的是Vue3+Elment Plus的路线,参照Formily的JSNO Schema模式,进行表单的渲染，递归处理Amazon提供的JSON Schema即可轻松的生成表单，直接大功告成.........了吗？

具体的UI组件选用如下图

Pasted image 20250910160712.png

表单分组

我们目前按照业务需求以及没有副作用的字段分成若干组即若干个表单，这几个表单间几乎没有联动且没有动态要求，比如描述信息：标题、产品描述、卖点、关键词为一组；图片等为一组、制造商、是否豁免等为一组....

当然也可以不切分为多个表单，比如你需要整个表单的联动，只用一个表单进行内部分组，使用type: 'void',包裹需要放在一起的字段即可；又或者你需要联动的表单也渲染多余的字段，但是字段设置为不显示保留值的模式，这种性能上就没有那么好，但是也可以实现。

表单校验

在经过上面一顿框框的编码，也是终于见到了希望，看到了渲染后的表单

Pasted image 20250910161855.png

最初的想法，就是提交的时候，递归删除空的数据，通过ajv校验器，删除额外的属性、转换数据格式等，校验一下数据，通过就提交，不通过则提示用户修改。这样行不行，那指定是不行的，这样糟糕的用户体验，谁会用啊，没有用户愿意看这样的提示，所以ajv只能用作删除额外的属性、转换数据格式并且作为最后的兜底校验方案。ajv

表单联动

还是回到Amazon的Schema中来，我们会看到 allOf中有着大量的字段要求，我们需要理解其中的规则，并按照Formily的Reaction来完成

Pasted image 20250910163438.png

这个就非常的复杂了，也是花了最多时间的一项，需要遍历 schema.allOf 中的每个条件对于每个 if-then 条件，properties进行处理，根据字段类型和条件创建相应的反应规则。总的来说分为下面几项处理

了解if/then/not/contains等表达
对required的处理
对enum的处理
对properties限制处理
- minItems、maxItems
- minimum、maximum
- multipleOf

最终实现联动校验，用户才能用的明白

录屏2025-08-12 16.16.30.gif

展示Amazon刊登信息

当把刊登数据提交给Amazon后，会较快的得到反馈的信息，但由于也是JSON格式的，此时如果用户直接查看也是比较不好看，这里可以使用JSON的格式化预览工具来优化一下。json-view

其他

Listing刊登的相关项目，并没有那么简单，他要求开发人员有较深的业务理解和开发基础，上面说的仅仅只是单体刊登的一部分，还有很多比如说

多变体刊登
新增/跟卖
合并/拆分
上架/下架
调价等等

以及和ERP系统其他模块的交互，比如物料、图片、模版、违禁词、等等

就先说那么多，有时间再把相关的业务记录一下

关于Amazon-Listing刊登项目记录