Python 如何从 json-schema 创建表单？

How to Create a form from a json-schema?

提问by eegloo

How to create form from JSON Schema?

如何从 JSON Schema 创建表单？

I am writing code in JavaScript and jquery. With this template part like Form I am creating this with haml and adding this in js file. For backend I am using python. I am using Django framework.

我正在用 JavaScript 和 jquery 编写代码。使用这个模板部分，如 Form 我正在用haml创建它并将其添加到js文件中。对于后端，我正在使用 python。我正在使用 Django 框架。

So I got some links for create form from JSON Schema.

所以我从 JSON Schema 得到了一些创建表单的链接。

Reference link : http://neyric.github.io/inputex/examples/json-schema.html

参考链接：http: //neyric.github.io/inputex/examples/json-schema.html

In my Form : Input elemets : textboxes, textarea, select list, submit and cancel buttons are present.

在我的表单中：输入元素：存在文本框、文本区域、选择列表、提交和取消按钮。

So I want to ask is creating form with JSON schema is feasible or not? If yes then, can you provide some good links?

所以我想问一下用JSON模式创建表单是否可行？如果是的话，你能提供一些好的链接吗？

采纳答案by Hitham S. AlQadheeb

jsonform - Build forms from JSON Schema. Easily template-able. Compatible with Twitter Bootstrap out of the box.

jsonform - 从 JSON 模式构建表单。易于模板化。开箱即用与 Twitter Bootstrap 兼容。

https://github.com/joshfire/jsonform

https://github.com/joshfire/jsonform

回答by muenchdo

Just stumbled upon this question and wanted to add this new option:

刚刚偶然发现这个问题并想添加这个新选项：

JSONForms extends the AngularJS view model approach by eliminating the need to write HTML templates in order to create forms by leveraging the capabilities of JSON and JSON schema.

JSONForms 扩展了 AngularJS 视图模型方法，无需编写 HTML 模板即可利用 JSON 和 JSON 模式的功能创建表单。

GitHub: JSONForms(Demo)

GitHub：JSONForms（演示）

回答by idelvall

Form generation from JSON Schema is a common practice, specially for automatically generated user interfaces.

从 JSON Schema 生成表单是一种常见的做法，特别是对于自动生成的用户界面。

In your case, if you are only interested in creating ONE form, maybe it will be better to directly code it.

在您的情况下，如果您只对创建一个表单感兴趣，那么直接对其进行编码可能会更好。

Here is a library I have created that hopefully you find interesting:

这是我创建的一个库，希望你会觉得有趣：

json-forms:

json 形式：

JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided

JSON 模式到 HTML 表单生成器，支持动态子模式（即时解析）。具有零依赖性的可扩展和可定制的库。提供 Bootstrap 插件

Live demo at http://brutusin.org/json-forms

现场演示http://brutusin.org/json-forms

回答by Michael Uzquiano

You are looking for Alpaca Forms. http://www.alpacajs.org

您正在寻找羊驼毛表格。 http://www.alpacajs.org

JSON Schema driven forms using jQuery with layout engines for Bootstrap, jQuery UI / Mobile. It's very extensible and pretty decked out.

JSON 模式驱动的表单，使用 jQuery 和用于 Bootstrap、jQuery UI/Mobile 的布局引擎。它非常具有可扩展性，而且非常漂亮。

Apache 2.0 licensed and awesome community (I am a code committer).

Apache 2.0 许可且很棒的社区（我是代码提交者）。

回答by Ognjen

I've been looking for the same, and turns out there are some good options. These are the best libraries I could find on GitHub:

我一直在寻找相同的东西，结果发现有一些不错的选择。这些是我在 GitHub 上能找到的最好的库：

• JSON Editor(plain JS) (demo)

• Angular Schema Form(AngularJS) (demo)

• React JSONSchema Form(React) (demo)

• JSON 编辑器（纯 JS）（演示）

• Angular Schema Form(AngularJS)（演示）

• React JSONSchema 表单（React）（演示）

回答by Michael

Another option is "json-schema-js-gui-model". It converts the json schema into a gui model that you can easily use in any web framework to create a custom form. For detailed advice on the last step, the angular 2 docshas a recipe for creating a dynamic form from a gui model.

另一种选择是“ json-schema-js-gui-model”。它将 json 模式转换为 gui 模型，您可以轻松地在任何 web 框架中使用它来创建自定义表单。有关最后一步的详细建议，angular 2 文档提供了从 gui 模型创建动态表单的方法。

回答by Mohsen Mirshahreza

Look at this project https://github.com/mirshahreza/json-edit

看这个项目 https://github.com/mirshahreza/json-edit

A jquery plugin to turn json schema to form It may be helpful in your scenario

将 json 模式转换为表单的 jquery 插件在您的场景中可能会有所帮助

回答by Yavin5

Have a look at this demo of ngx-schema-form:

看看这个ngx-schema-form 的演示：

http://guillotina.io/ngx-schema-form/dist/ngx-schema-form/json

http://guillotina.io/ngx-schema-form/dist/ngx-schema-form/json

• Takes a JSON schema file
• Generates that into a fully working editable web page form
• Saves changes to the JSON model as a Javascript object
• Allows adding custom validator code for any section

• 采用 JSON 模式文件
• 将其生成为完全有效的可编辑网页表单
• 将 JSON 模型的更改保存为 Javascript 对象
• 允许为任何部分添加自定义验证器代码

This works really well for me (I only found it a couple of days ago). I use it with the latest Angular, and it is working exactly as documented. The examples source is here:

这对我来说非常有效（我几天前才发现它）。我将它与最新的 Angular 一起使用，它的工作方式与文档完全一致。示例来源在这里：

https://github.com/guillotinaweb/ngx-schema-form/tree/master/src/app/json-schema-example

https://github.com/guillotinaweb/ngx-schema-form/tree/master/src/app/json-schema-example

回答by BuGless

Or... you could take a look at outperform. It's a small javascript form generator library that I recently wrote to support my own projects because I got fed up by the fact that all the form generators that I looked at either had a ton of dependencies, or were distinctly larger than my single page web-application.

或者...你可以看看outperform。这是一个小型 javascript 表单生成器库，我最近编写了它来支持我自己的项目，因为我厌倦了这样一个事实，即我看到的所有表单生成器要么有大量的依赖项，要么明显比我的单页网页大-应用。

I mean, let's face it: if my SPA is like 20KB unminified but gzipped, then I expect library routines which do something simple as generating a form to be significantly smaller. Its main features would be:

我的意思是，让我们面对现实：如果我的 SPA 像 20KB 未缩小但经过 gzip 压缩一样，那么我希望库例程可以做一些简单的事情，例如生成一个表单会明显更小。它的主要特点是：

• Zero dependencies.
• Less filling (unminified but gzipped: <2KB).
• Native HTML5/browser validation support for all HTML5+ input types.
• Custom validation seemlessly integrated.
• Supports all web frameworks out there (including Bootstrap).
• Autorefills half-filled forms when reloading a page in all browsers.
• JSON set/get for all form values.

• 零依赖。
• 填充较少（未缩小但已压缩：<2KB）。
• 原生 HTML5/浏览器验证支持所有 HTML5+ 输入类型。
• 自定义验证无缝集成。
• 支持所有的 Web 框架（包括 Bootstrap）。
• 在所有浏览器中重新加载页面时，自动重新填充半填充的表单。
• JSON 设置/获取所有表单值。