Jsonshcema转前端表单

已于 2024-09-05 16:46:05 修改
阅读量775 收藏 3
点赞数 7
文章标签： node.js
于 2024-09-05 16:41:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43360895/article/details/141935125
版权

要将给定的 JSON Schema 转换为可视化的前端表单界面，首先需要解析 JSON Schema 的结构，然后动态生成相应的 HTML 表单元素。这涉及到以下几个步骤：

  1. 解析 JSON Schema：遍历 JSON Schema，识别其 type 和 properties。
  2. 动态生成表单元素：根据不同的 type（如 object、array、string 等）生成对应的表单元素，并根据 required 字段标识必填项。
  3. 处理嵌套结构：对于 object 和 array 类型的字段，需要递归生成子表单元素。

代码实现步骤

1. 解析 JSON Schema 并生成表单
function renderFormFromSchema(schema, parentContainer = document.getElementById('fieldsContainer')) {
    for (const [fieldName, fieldSchema] of Object.entries(schema.properties)) {
        const fieldContainer = document.createElement('div');
        fieldContainer.className = 'field-container';

        const isRequired = schema.required && schema.required.includes(fieldName);

        // 创建字段名称输入框
        const nameInput = document.createElement('input');
        nameInput.type = 'text';
        nameInput.className = 'field-name';
        nameInput.value = fieldName;
        nameInput.disabled = true; // 禁用字段名称输入框，用户不能修改
        fieldContainer.appendChild(createFieldLabel('字段名称: ', nameInput));

        // 创建字段类型选择框
        const typeSelect = document.createElement('select');
        typeSelect.className = 'field-type';
        typeSelect.disabled = true; // 禁用字段类型选择框，用户不能修改
        ['string', 'number', 'object', 'array', 'boolean'].forEach(type => {
            const option = document.createElement('option');
            option.value = type;
            option.text = type;
            if (type === fieldSchema.type) {
                option.selected = true;
            }
            typeSelect.appendChild(option);
        });
        fieldContainer.appendChild(createFieldLabel('字段类型: ', typeSelect));

        // 创建是否必填复选框
        const requiredCheckbox = document.createElement('input');
        requiredCheckbox.type = 'checkbox';
        requiredCheckbox.className = 'field-required';
        requiredCheckbox.checked = isRequired;
        requiredCheckbox.disabled = true; // 禁用必填复选框，用户不能修改
        fieldContainer.appendChild(createFieldLabel('是否必填: ', requiredCheckbox));

        // 处理嵌套字段
        if (fieldSchema.type === 'object' || fieldSchema.type === 'array') {
            const nestedContainer = document.createElement('div');
            nestedContainer.className = 'nested-container';
            nestedContainer.style.display = 'block';
            fieldContainer.appendChild(nestedContainer);

            const nestedBtn = document.createElement('button');
            nestedBtn.type = 'button';
            nestedBtn.className = 'nested-btn';
            nestedBtn.textContent = '添加嵌套字段';
            nestedBtn.style.display = 'block';
            nestedBtn.disabled = true; // 禁用添加嵌套字段按钮，用户不能操作
            fieldContainer.appendChild(nestedBtn);

            if (fieldSchema.type === 'object') {
                renderFormFromSchema(fieldSchema, nestedContainer);
            } else if (fieldSchema.type === 'array' && fieldSchema.items) {
                renderFormFromSchema({ type: 'object', properties: fieldSchema.items }, nestedContainer);
            }
        }

        parentContainer.appendChild(fieldContainer);
    }
}

function createFieldLabel(labelText, inputElement) {
    const label = document.createElement('label');
    label.textContent = labelText;
    const fieldLabel = document.createElement('div');
    fieldLabel.className = 'field-label';
    fieldLabel.appendChild(label);
    fieldLabel.appendChild(inputElement);
    return fieldLabel;
}
2. 调用 renderFormFromSchema 函数

假设你有一个 JSON Schema，如下所示：

{
  "type": "object",
  "properties": {
    "person": {
      "type": "object",
      "properties": {
        "name": { "type": "string" },
        "age": { "type": "number" },
        "address": {
          "type": "object",
          "properties": {
            "city": { "type": "string" },
            "zipcode": { "type": "string" }
          },
          "required": ["city"]
        }
      },
      "required": ["name", "address"]
    }
  },
  "required": ["person"]
}

你可以通过以下方式生成对应的前端表单：

const schema = {
  "type": "object",
  "properties": {
    "person": {
      "type": "object",
      "properties": {
        "name": { "type": "string" },
        "age": { "type": "number" },
        "address": {
          "type": "object",
          "properties": {
            "city": { "type": "string" },
            "zipcode": { "type": "string" }
          },
          "required": ["city"]
        }
      },
      "required": ["name", "address"]
    }
  },
  "required": ["person"]
};

document.addEventListener('DOMContentLoaded', () => {
    renderFormFromSchema(schema);
});
3. 结果解释

  • 禁用输入控件: 在生成的表单中，所有输入控件和选择框都被禁用（disabled），以显示 JSON Schema 的结构而不允许用户修改。这可以帮助用户直观地看到 JSON Schema 的定义。

  • 递归处理嵌套结构: 对于嵌套的 object 和 array，会递归生成其子结构的表单元素。

扩展功能

如果你希望允许用户修改表单元素以便更新 JSON Schema，可以移除 disabled 属性，并添加表单输入变化的事件处理逻辑。

这个示例只是一个基本的实现，你可以根据需要扩展它，添加更多的验证、样式和功能。
下面是一个完整的 HTML 页面代码示例，它可以根据给定的 JSON Schema 动态生成相应的表单结构，并显示在页面上。页面使用简单的 HTML 和 JavaScript 来解析和渲染 JSON Schema。

完整的前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Schema to Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .field-container {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }

        .field-label {
            margin-bottom: 10px;
        }

        .nested-container {
            margin-top: 20px;
            padding-left: 20px;
            border-left: 2px solid #ddd;
        }

        label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"], select {
            width: 100%;
            padding: 5px;
            margin-bottom: 10px;
        }

        input[type="checkbox"] {
            margin-left: 5px;
        }

        .nested-btn {
            display: block;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <h1>JSON Schema to Form</h1>
    <div id="fieldsContainer"></div>

    <script>
        function renderFormFromSchema(schema, parentContainer = document.getElementById('fieldsContainer')) {
            for (const [fieldName, fieldSchema] of Object.entries(schema.properties)) {
                const fieldContainer = document.createElement('div');
                fieldContainer.className = 'field-container';

                const isRequired = schema.required && schema.required.includes(fieldName);

                // 创建字段名称输入框
                const nameInput = document.createElement('input');
                nameInput.type = 'text';
                nameInput.className = 'field-name';
                nameInput.value = fieldName;
                nameInput.disabled = true; // 禁用字段名称输入框，用户不能修改
                fieldContainer.appendChild(createFieldLabel('字段名称: ', nameInput));

                // 创建字段类型选择框
                const typeSelect = document.createElement('select');
                typeSelect.className = 'field-type';
                typeSelect.disabled = true; // 禁用字段类型选择框，用户不能修改
                ['string', 'number', 'object', 'array', 'boolean'].forEach(type => {
                    const option = document.createElement('option');
                    option.value = type;
                    option.text = type;
                    if (type === fieldSchema.type) {
                        option.selected = true;
                    }
                    typeSelect.appendChild(option);
                });
                fieldContainer.appendChild(createFieldLabel('字段类型: ', typeSelect));

                // 创建是否必填复选框
                const requiredCheckbox = document.createElement('input');
                requiredCheckbox.type = 'checkbox';
                requiredCheckbox.className = 'field-required';
                requiredCheckbox.checked = isRequired;
                requiredCheckbox.disabled = true; // 禁用必填复选框，用户不能修改
                fieldContainer.appendChild(createFieldLabel('是否必填: ', requiredCheckbox));

                // 处理嵌套字段
                if (fieldSchema.type === 'object' || fieldSchema.type === 'array') {
                    const nestedContainer = document.createElement('div');
                    nestedContainer.className = 'nested-container';
                    nestedContainer.style.display = 'block';
                    fieldContainer.appendChild(nestedContainer);

                    const nestedBtn = document.createElement('button');
                    nestedBtn.type = 'button';
                    nestedBtn.className = 'nested-btn';
                    nestedBtn.textContent = '添加嵌套字段';
                    nestedBtn.style.display = 'block';
                    nestedBtn.disabled = true; // 禁用添加嵌套字段按钮，用户不能操作
                    fieldContainer.appendChild(nestedBtn);

                    if (fieldSchema.type === 'object') {
                        renderFormFromSchema(fieldSchema, nestedContainer);
                    } else if (fieldSchema.type === 'array' && fieldSchema.items) {
                        renderFormFromSchema({ type: 'object', properties: fieldSchema.items }, nestedContainer);
                    }
                }

                parentContainer.appendChild(fieldContainer);
            }
        }

        function createFieldLabel(labelText, inputElement) {
            const label = document.createElement('label');
            label.textContent = labelText;
            const fieldLabel = document.createElement('div');
            fieldLabel.className = 'field-label';
            fieldLabel.appendChild(label);
            fieldLabel.appendChild(inputElement);
            return fieldLabel;
        }

        // 示例 JSON Schema
        const schema = {
          "type": "object",
          "properties": {
            "person": {
              "type": "object",
              "properties": {
                "name": { "type": "string" },
                "age": { "type": "number" },
                "address": {
                  "type": "object",
                  "properties": {
                    "city": { "type": "string" },
                    "zipcode": { "type": "string" }
                  },
                  "required": ["city"]
                }
              },
              "required": ["name", "address"]
            }
          },
          "required": ["person"]
        };

        // 页面加载后渲染表单
        document.addEventListener('DOMContentLoaded', () => {
            renderFormFromSchema(schema);
        });
    </script>

</body>
</html>

代码解释

  1. HTML 结构:

    • 页面包含一个用于显示表单的 div，即 #fieldsContainer。
    • 采用了简单的样式，用来区分不同的字段和嵌套结构。

  2. JavaScript 功能:

    • renderFormFromSchema 函数递归解析 JSON Schema，动态生成对应的表单结构。
    • createFieldLabel 函数简化了标签和输入控件的创建过程。
    • 示例 JSON Schema 定义在脚本中，在页面加载完成后自动渲染到表单中。

  3. 禁用状态:

    • 表单元素被禁用（disabled），以展示 JSON Schema 的结构，而非供用户编辑。你可以通过移除 disabled 属性使其可编辑。

如何使用

  1. 打开页面:

    • 将上述代码保存为 index.html 文件，然后在浏览器中打开，即可看到生成的表单。

  2. 修改 JSON Schema:

    • 可以修改示例中的 schema 对象，以生成不同结构的表单。

这段代码为你提供了一个简单的框架，可以根据 JSON Schema 动态生成表单，并在页面上展示。你可以根据需要进一步扩展功能，比如增加编辑功能或保存修改后的 Schema。

Zz5-XDU
关注
【Web前端】表单
wosixiaokeai的博客
05-08 1142
method：表单提交到服务器的方法，主要用到。action：表单提交的服务器处理的。2.3.3.3 datalist标签。2.3.3.1 label标签。2.2 GET和POST方法。2.3.3.4 文本区域标签。2.3.1 input标签。2.3.2 input属性。2.3.3.5 域容器标签。2.3.3.2 下拉列表。2.1 form表签。2.3.3 其他标签。
JSON Schema&表单UI快速生成解析
Qlly
04-08 4620
一、JSON Schema ​ JSON（JavaScript Object Notation）是一种轻量&常见的数据交换格式，基本的数据的结构就是key-value，具有易于生成和解析的优点，通过JSON可以灵活地表达程序所需要的数据结构。 ​ 但JSON本身并没有特定的规范（本身结构也不支持注释），所以对于数据本身的描述是缺失的，比如说开发人员或者程序，就无法判断下面这份数据里面的age为string是否是符合预期的类型。 { "name": "John Doe", "mobile":
JSONSchemaDatabase从JSON格式动态生成表并插入数据
08-10
JSON Schema ➣ Database 从JSON格式动态生成表并插入数据
json-schema-form：表单构建的利器
最新发布
gitblog_00714的博客
04-02 610
json-schema-form：表单构建的利器 json-schema-form 项目地址: https://gitcode.com/gh_mirrors/jso/json-schema-form ...
JSON Schema动态表单配置规则应用
yangyanping20108的博客
08-24 3121
用 JSON Schema 来描述表单适合于低代码或者数据中台的快速开发。前端不需要维护 schema，schema 可以存在后端，随意分发动态渲染。
soform根据jsonschema自动渲染出对应表单组件vue插件
08-12
so-form 是一个自动双向数据绑定，可拓展，提供 json-schema 自动渲染出对应表单组件vue插件。so-form 对第三方组件库无侵入，提供了高度抽象能力解决繁琐的表单配置插件
JSON Schema与表单验证
weixin_34146805的博客
06-26 476
作者：神机算子，美团金融前端团队成员。喜欢简单，乐于编程，富有激情的前端开发者。 表单验证是一个前端常聊的问题，在这个问题上实际上已经有很多种方案了，大体来说有以下两种： 自己定义验证原语，进行简单封装，按需定制。这个方案好在对于简单的小表单上手快，几经提炼可以形成自己的验证库，也可以代码保持的精简。但是出现跨项目复用的时候，容易出现需要补充大量新场景的情况，而且稳定性也不容易保证。 使用市...
json与表单相互转化
hy840429的专栏
05-21 1715
html表单与js的json对应互换。(水平问题，文件类型域没有实现，有会的请指教指教。)。/** * 将form序列化成json字符串,本方法依赖于jquery.js * @param id表单的ID * @return json形式字符串 */function form2json(id){ var str = ""; var temp = new Array()
前端表单身份证验证js文件
01-04
前端表单身份证验证js文件
6个非常精美的Web前端表单提交以及搜索框（一）
08-18
在本文中，我们将深入探讨"6个非常精美的Web前端表单提交以及搜索框"这一主题，这是一份关于前端开发的重要资源，旨在提升用户体验和交互设计。通过提供的在线效果演示地址...
前端js，jQuery表单验证插件
03-22
前端js，jQuery表单验证插件
JSON生成Form表单的方法示例
10-17
JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，这篇文章主要介绍了JSON生成Form表单的方法示例,感兴趣的小伙伴们可以参考一下
react-plexusform采用JSONSchema的react动态表单组件
08-15
plexus-form - 采用JSON-Schema的react动态表单组件
nz-schema-form:基于JSON-Schema的ng-zorro-antd表单生成
04-26
停止维护， 提供一种更高效、更符合标准、更可靠的基于 JSON Schema的动态表单。 nz-schema-form form generation based on JSON-Schema. Links Troubleshooting Please follow this guidelines when reporting bugs and feature requests: Use board to report bugs and feature requests (not our email address) Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce
将form表单内容转换为json
11-23
将form表单内容转换为json将form表单内容转换为json将form表单内容转换为json
前端页面表单提交到google sheet的代码实现
02-15
1.实现了前端页面提交表单到Google Sheet收集数据的功能 2.资源内容:前端页面源码,手把手设置Google Sheet 的app script脚本过程 ,app script的源码 3.应用场景:用户页面提交表单到Google Sheet收集数据的功能
【开发备忘录】Json Schema 简介、编辑器、自动生成表单
还有很长很长的路
10-21 2863
1 定义 Json Schema是用来描述Json的语言。 Json Schema定义了一套词汇和规则，这套词汇和规则用来定义Json元数据，且元数据也是通过Json数据形式表达的。Json元数据定义了Json数据需要满足的规范，规范包括成员、结构、类型、约束等。 举个例子： 通过有右图的JsonSchema，来描述左图的Json。type规定了字段的类型 关键字-类型 Type type取值 参数说明 {“type” : “null”} 可选值：null {“type” : “b
动态表单设计与实现_通过JsonSchema协助完成动态表单页面实现
weixin_39672680的博客
11-25 1665
动态表单页面一直是做中后台管理系统中让人头疼的部分，这里就记录一下自己在这一块实现过程中的一些架构方案吧。上图来自我们项目原型中的一小部分（实际项目中粗略估计大概有几百种筛选组合情况）。这种页面如果采用if...else去写的话，不说后期维护起来怎么做，就说开发过程中就能给人整懵逼了，所以在动笔（键盘？）之前我们需要先想好该采用怎样的架构模式去实现我们的页面。接下来就是我在实现过程中的一些思路分析...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值