为什么前端开发不能灵活些

[yidinghe]

以上面的图为例，前端在展示表单的时候不是把每个元素写死，而是先加载一个类似下面这样的 JSON 元数据：

{
    "ui-type": "form",
    "ui-element-id": "sms-query-form",
    "form-submit-path": "./sms-service/query",
    "fields": [{
        "field-name": "手机号码：",
        "field-type": "text"
    }, {
        "field-name": "发送时间：",
        "field-type": "time-range"
    }, {
        "field-name": "短信类型：",
        "field-type": "combo",
        "items": [{
            "key": "",
            "value": "全部"
        }, {
            "key": "0",
            "value": "注册"
        }, {
            "key": "1",
            "value": "修改密码"
        }, {
            "key": "2",
            "value": "找回密码"
        }]
    }, {
        "field-name": "发送状态：",
        "field-type": "combo-lazy-loading",
        "loading-path": "./enums/sms-send-status"
    }, {
        "field-name": "所属区域：",
        "field-type": "combo-lazy-loading",
        "loading-path": "./enums/busi-area"
    }]
}

然后按照 JSON 中的内容去动态组装表单。这样做的好处是如果查询条件有变化，这个 JSON 可以让后端开发直接改就可以了。

类似的表格也可以啊，虽然说请求次数和渲染时间可能增加，但作为后台系统是可以接受的。

[seki]

这一类方案已经有很多了，难以实现的都是一些不好描述的边角问题，比如文件上传，比如批量添加，比如数据校验

[seki]

还有表单的项目值互相依赖，这种关系不能用代码光用 json 来描述就很复杂

[hantsy]

类似方案太多，但是个人觉得比较适合做 Admin 界面，不适合最终用户端的个性化。

[murmur]

能啊，我们公司的移动端就这么做的，这个好处就是所有接口和工作量全甩给外包商，你只需要做你的框架就可以了

[connection]

很多内部系统的表单处理，已经是有这种类型的功能了。并不是新鲜事

[azh7138m]

你好，有的。
这轮子造了一套又一套（

[pengfei]

在用

[momocraft]

试图通过不可执行数据实现“灵活“的人总会在某个地方碰到怎么写 if/for/eval 的问题

能各种花样糊到 xml 里 (而且不造成大一倍的屎山) 已经是好的结果了

[VDimos]

可以做啊，我最近就在搞这个

[mcfog]

自用的话有 jsonschema 直接生成表单的轮子，真香
面向用户（包括 b 端用户）的话还是慎重吧

[jry]

我已经做出来了可以看 http://initadmin.net

[duan602728596]

做过 antd-schema-form，可以多层嵌套，使用 schema json 来配置生成表单，这个库，做起来真的很麻烦很麻烦。最麻烦的就是表单的回填，表单的取值，数组类型的处理。

[wunonglin]

天天造轮子

[daben1990]

现在项目有在用，产品把所有的输入项，类型，默认值整理成 excel，我用脚本转化为 json，然后匹配后端数据，展示和编辑功能都可以

[Torpedo]

这种实现多的是啊，楼主

[eason1874]

Vue.js 了解一下，别说几个表单元素了，这类引擎能实现整个网站页面模板随着 API 数据的变化而变化，缺点就是没经验的时候写起来比写传统页面费时。

[xuanbg]

这个就是前端页面配置化呀，早几十年就有了，当然辣么早不可能使用 JSON。我们现在后台项目的大部分页面也是通过配置自动装配出来的，只是这个配置是前端自己写文件放项目里面，而不是后端写好前端调接口获取。

[jorneyr]

由于需要自定义报名表单，设计了个动态表单编辑器，表单的模板数据像下面这样保存，不同业务选择不同的报名表单模板，然后再用模板生成 HTML:

[
{ label: '姓名', name: 'name', type: 'string', customized: false, required: false, span: 1, options: [] },
{ label: '性别', name: 'gender', type: 'select', customized: false, required: false, span: 1, options: ['未选', '女', '男'] },
{ label: '手机', name: 'mobile', type: 'string', customized: false, required: false, span: 1, options: [] },
{ label: '职务', name: 'title', type: 'string', customized: false, required: false, span: 1, options: [] },
{ label: '学历', name: 'education', type: 'string', customized: false, required: false, span: 1, options: [] },
{ label: '地址', name: 'address', type: 'address', customized: false, required: false, span: 2, options: [] },
{ label: '出生年月', name: 'birthday', type: 'date', customized: false, required: false, span: 1, options: [] },
];

[deepred]

这种只适合简单的表单，校验规则一旦复杂，表单联动之后，这种 json 配置还不如写死在页面上灵活

[ochatokori]

现在前端的 mvvm 框架都是这样干的啊…
区别在于这个 json 是写在代码里面还是接口请求的