Next-Form 下一代表单数据动态配置平台

动态数据,快捷、高效、易操作是我们的追求!
以下是next-form的一些介绍.

有什么好处?

  • 性能好,依托于CDN,数据本身为一段json文件,脱离于服务器和后端服务,更稳定
  • 减少开发量,类似运营平台,只需配置一次数据模型

操作指南

一个实例

以天猫为例,天猫本身为一个应用,而图中的A,B,C为相应的模块,
第一步:我们需要建立一个属于自己的应用。
第二步:在应用下建立A,B,C三个模块。
第三步:分别配置A,B,C三个模块的数据格式。
第四步:在配置好的A,B,C三个模块中,上传对应的文案图片等数据。
第五步:前端/APP就可以访问相应json文件获取数据,进行页面绘制。

模板格式

  • // 配置模块格式
  • [
  •     {
  •         "type":"input",  // 普通文本 type 可取值参考下面:主要类型
  •         "dataKey":"test", // 键值设定
  •         "label":"测试1" // 自动化表单,提示文案
  •     }
  • ]

  • // 生成的json 生成 参考
  • {
  •     "test":"panda" // 此处的键值,对应上面的键值设定,内容为后台自行编辑保存
  • }

主要类型

type
说明备注额外字段说明
input
普通文本
textarea
长文本
select
选择器options:[ { value:'', title:'' } ] // 选择项设置
multiple多选器options:[ { value:'', title:'' } ] // 选择项设置
image
图片
switch开关
object对象children : [ ] // 格式同父级
array数组只支持一层嵌套children : [ ] // 格式同父级

Example

所有类型的配置参考
  • [
  •     {"type":"image","dataKey":"image","label":"图片"},
  •     {"type":"array","dataKey":"array","label":"数组",
  •         "children":[{"type":"input","dataKey":"arrayInput","label":"子内容"}]},
  •     {"type":"object","dataKey":"object","label":"对象",
  •         "children":[{"type":"input","dataKey":"arrayInput","label":"子内容"}]},
  •     {"type":"select","dataKey":"select","label":"选择器",
  •         "options":[{"title":"男","value":"1"},{"title":"女","value":"0"}]},
  •     {"type":"multiple","dataKey":"multiple","label":"选择器",
  •         "options":[{"title":"男","value":"1"},{"title":"女","value":"0"}]},
  •     {"type":"input","dataKey":"input","label":"普通文本"},
  •     {"type":"textarea","dataKey":"textarea","label":"长文本"},
  •     {"type":"switch","dataKey":"switch","label":"布尔值"}
  • ]
结果参考
  • {
  •   "array": [
  •     {
  •       "arrayInput": "1"
  •     },
  •     {
  •       "arrayInput": "2"
  •     }
  •   ],
  •   "object": {
  •     "arrayInput": "1213213"
  •   },
  •   "select": "1",
  •   "multiple": [
  •     "0",
  •     "1"
  •   ],
  •   "input": "213",
  •   "textarea": "213",
  •   "switch": false,
  •   "image": "http://data.shenzhepei.com/fdff1c3d-9c00-4970-9456-4ab049ec1fed.png"
  • }

联系我们

立即登录, 发表评论.
没有帐号? 立即注册