开源库form-render探索（一）

最新推荐文章于 2024-09-13 22:22:44 发布
最新推荐文章于 2024-09-13 22:22:44 发布
阅读量1.1w 收藏 4
点赞数 2
分类专栏： Web前端 React 编程浅谈
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ccaoee/article/details/103210068
版权
本文介绍了阿里巴巴开源的表单配置生成方案form-render，它基于React，适用于Ant Design和Fusion Design。文章探讨了form-render的优缺点，如通过JSON Schema生成表单、组件联动功能，但也指出其在复杂校验和框架兼容性上的不足。此外，文章预告了后续将讨论表单渲染和数据校验的内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

引

在2019年10月19号，看到一则新闻：

阿里巴巴可跨组件体系的表单配置生成方案 form-render 开源了：https://github.com/alibaba/form-render

正好这几天一直在研究表单生成器相关内容，遂一探究竟。

正

从GitHub的工程仓库中可看到package.json部分内容如下：

{
   
   "dependencies": {
   

    "moment": "^2.22.2",
    "pope": "^2.0.2",
    "prop-types": "^15.x",
    "rc-color-picker": &
最低0.47元/天 解锁文章
dynamic-form-render:`dynamic-form-render` 是基于`vue.js` ,`element-ui` 的前端动态表单渲染器，可通过配置文件快速的生成 form 表单
05-27
介绍 dynamic-form-render 是基于vue.js ,element-ui 的前端动态表单渲染器，可通过配置文件快速的生成 form 表单。 安装 npm i dynamic-form-render # or yarn add dynamic-form-render 快速使用 import Vue from 'vue' import dynamicFormRender from 'dynamic-form-render' Vue.use(dynamicFormRender) new Vue({ el: '#app', render: h => h(App) }); 详细文档见
配置化表单FormRender初尝试
大转转FE
11-03 1441
相信常常做中后台项目的同学都知道，中后台50%的场景和表单有关，并在可灵活配置要求很高，特别是搭建表单配置场景，如果能通过下发JSON配置来生成表单视图的方法，理论上可以提高开发效率。然而，我找到了一个非常好用的 表单 插件,就是通过下发JSON配置来生成表单视图的方法！！！！它就是 FormRender ，一站式中后台 表单解决方案它有什么优点？支持 Ant Design 和 Fusion De...
Vue 3.x 表单渲染库：vue-form-render完全指南
gitblog_00288的博客
08-16 1282
Vue 3.x 表单渲染库：vue-form-render完全指南 项目地址:https://gitcode.com/gh_mirrors/vu/vue-form-render 项目介绍 vue-form-render 是一个基于 Vue 3.x 的表单渲染器，旨在通过 JSON Schema 快速生成定制化的表单配置界面。它简化了后台表单开发，允许开发者用数据驱动的方式设计表单，避免重复的手动编...
基于 Vue 3.x 的 Form render
qq_32344993的博客
02-01 4685
github: vue form render 在线演示 简介 我们在写一些常规后台页面的时候，避免不了是需要经常和表单打交道。所以可以想偷懒的小伙伴可能会考虑有没有办法不去做表单工程师?用代码解决重复的人肉工作，没错，我们可以通过 JSON Schema 来描述我们的表单信息，这比重复的写表单控件可方便多了。 但是 JSON Schema 到表单的映射，则是需要我们去关注的，so… 业界有没有比较好的方案呢？答案是肯定的，比如以下几个表单渲染工具： Form Render Formliy … Form.
配个 json，表单就出来了？FormRender 初探。
程序员成长指北
02-13 913
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群相信常常做中后台项目的同学都知道，中后台50%的场景和表单有关，并在可灵活配置要求很高，特别是搭建表单配置场景，如果能通过下发JSON配置来生成表单视图的方法，理论上可以提高开发效率。然而，我找到了一个非常好用的 表单 插件,就是通过下发JSON配置来生成表单视图的方法！！！！它就是 FormRe...
react-Formik一种简单优雅的方式来处理React中的表单
08-15
Formik是由Jared Palmer创建的一个开源库，旨在简化React表单的构建和管理。它通过提供一套全面的API和生命周期方法，帮助开发者处理表单的状态、验证和提交，从而减轻编写表单代码的负担。 ### 2. Formik的主要...
逻辑编排在优酷可视化搭建中的实践（四） - 编排通用性方向探索
阿里文娱技术
11-15 2461
之前的文章讲过YOHO平台是因营销搭建平台的需求而诞生的，而后我们有了让它能够服务到更多平台的想法。三月底的时候，直播业务的同学找到我们，希望能够借助我们的平台实现编排。彼时的YOHO还不足以承接外来业务，所以在4月份开始了通用性的改造。 G6到X6 YOHO早前是基于G6开发的，逻辑编排对图形编辑的要求比较高，而G6更加侧重于图形展示、数据可视化，以及基于canvas的高性能。团队的小伙伴最初通过G6实现了一版编排，能力都没问题。后来想要不断优化画布能力的时候，就比较累心了。 无论是对齐还是连接线路径计
【深入探索Layui-laydate】：高级配置与定制技巧全解析
Layui-laydate作为一个轻量级的前端UI组件库，提供了丰富的日期时间选择功能，适用于各种Web项目的快速开发。本文详细介绍了Layui-laydate的基础配置方法，包括组件的基本设置以及高级配置技巧，如国际化设置、...
可视化UI库：探索Ant Design与Element UI
可视化UI库是一系列预先设计好的UI组件和样式集合，旨在帮助开发人员快速构建美观、易用的界面。这些UI库通常包含了各种常用的界面元素，如按钮、表单、菜单、消息框等，开发人员可以通过简单的引入和配置，快速搭建...
vue-form-render:基于Vue 3.x，使用JSON模式快速生成自定义表单配置界面
05-06
Vue形式呈现 基于Vue 3.x，使用JSON Schema快速生成自定义表单配置界面。 例子 安装 npm i vue3-form-render --save vue3 form render依赖于从item.so进行渲染，因此在使用vue3 form render我们需要安装Ant Design of Vue并将其导入到我们的项目中： import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue' ; import 'ant-design-vue/dist/antd.css' ; const app = createApp ( App ) ; app . use ( Antd ) ; app . mount ( '#app' ) ; 简易演示 < temp
Vue数据驱动表单渲染,轻松搞定form表单|angluo-javascript-266203.pdf
10-16
主要介绍了Vue数据驱动表单渲染,轻松搞定form表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue-form-render + vue3
qq_44792224的博客
01-15 864
JSON Schema是基于JSON的格式的规范，用于定义JSON数据的结构。它是根据2011年到期的IETF草案撰写的.JSON Schema。1.创建一个json文件，比如data.json，并保存在项目目录下的static文件夹里。注意：读取本地json文件时需要在开发环境下运行，因为静态文件只能在开发服务器中访问。完整的结构验证，对自动化测试很有用。完成结构验证，验证客户提交的数据。清晰，人性化和机器可读的文档。描述您现有的数据格式。
form-render的简单使用心得（FormRender现已升级到 XRende）
weixin_45942049的博客
11-24 8210
偶尔一次使用了form-render表单生成器，使用方便简单，通过简单的Schema就可以生成表单，很符合数据驱动这一理念，基本需求也都能满足。 但是作为新兴的react第三方包，缺点就是互联网上相关资料太少，在使用过程中想要熟悉一些API的使用，相关实例也较少。具体使用事例如下： 简单事例 // 首先写好完整的'数据' "schema": { "type": "object", "properties": { "string": { ...
配置可视化-基于form-render的无代码配置服务（一）
Qlly
02-14 747
有些业务场景需要产品或运营去配置JSON数据提供给开发去使用（后面有实际业务场景的说明），原有的业务流程，非开发人员（后面直接以产品指代）把数据交给开发，再由开发去更新JSON数据。对于产品来说，直接接触JSON数据并不友好，一是搞不懂JSON；二是容易出错，影响现网数据。
FormRender使用场景及原理简介
zhichaosong的博客
08-03 5071
schema 以国际标准的 JSON schema为基础，同时能够方便使用任何 antd 的 props通过bind字段，允许数据的双向绑定使用{{...}}书写表达式来完成简单的联动
探索与Vue 3.x的完美融合：vue-form-render
gitblog_00010的博客
06-02 421
探索与Vue 3.x的完美融合：vue-form-render vue-form-renderBase on Vue 3.x, Quickly generates custom form configuration interfaces using JSON Schema.项目地址:https://gitcode.com/gh_mirrors/vu/vue-form-render 在前端开发中，...
Vue Form Render 常见问题解决方案
gitblog_07777的博客
09-13 400
Vue Form Render 常见问题解决方案 vue-form-render Base on Vue 3.x, Quickly generates custom form configuration interfaces using JSON Schema. ...
el-form-renderer 使用指南
每天都要努力学习哦~~
05-01 1782
el-form-renderer是基于element的表单渲染器，动态渲染，数据驱动el-form-renderer是基于 element-ui 封装的表单渲染器，但不局限于 element-ui 组件。在完整继承了 element 的form表单属性的基础上进行了简单扩展，一些非表单组件或者封装的自定义组件，如图片上传、富文本等也可进行整合，从而用户能够通过使用一段预设的数据渲染出一个完整的表单。的type有限, 默认只能渲染普通的表单项, 假如现在要渲染一个上传组件,type就不够用了, 那怎么办呢?
Vue render渲染函数
qq_37635012的博客
08-23 1559
在使用render函数中，会使用到一个参数createElement，而这个createElement参数，本质上，也是一个函数，是vue中构建虚拟dom所使用的工具。render的性能较高，template性能较低。官网的这里示例中，使用组件，将相同的内容通过solt放进h1-h6的标签中，在使用传统方式时，代码不仅冗长，而且在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复。这样写在按钮少的时候没有问题，但是一旦按钮数量变多，这样写就会显得特别冗长，在这个时候，就需要render函数。
建议反馈系统开源代码
最新发布
01-05
### 开源反馈建议系统的探索 对于寻找用于构建反馈建议系统的开源代码，可以从多个方面考虑。一方面，在GitHub这样的平台上存在大量针对不同应用场景的反馈系统项目[^4]。这些项目的实现方式各异，有的专注于用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值