干货 | 携程动态表单DynamicForm的设计与实现

动态表单设计 自定一表单数据结构。内容展示如有必要行转列。前端根据题目类型自定义组件后端跟俊题目类型用策略模式校验各种类型这样有统计功能的简单动态问卷就可以了展示时可能某些场景需要行转列。大概估摸使用的话有可能kmic_form_data_detail表的记录数比较大,后期再考虑数据或者表迁移或拆分。 阅读详情

作者简介

 

Daryl,携程高级研发经理,关注业界大前端及高并发应用解决方案。

一、简介

在很多软件系统中,表单开发都是很重要的一个部分。在表单开发中,往往会遇到重复开发的问题,例如在页面搭建系统中,除了组件本身的逻辑,配置组件数据的表单通常也需要开发人员重复手动开发。这就导致开发人员不仅要维护组件本身的逻辑,还要维护组件的配置表单,严重影响组件的开发和迭代效率。

fd3550b1093ecc86e930372562f2f7e0.png

为了让开发人员更加专注于组件本身的逻辑处理,我们开发了DynamicForm动态表单配置系统,可以通过拖拽的方式,快速创建一个表单。

DynamicForm是由携程市场营销”活动平台”及”会员平台”共同设计的React表单组件,它包括表单可视化设计、校验、预览、渲染等功能。目前最重要的应用场景,是为乐高平台提供组件属性配置的动态化表单配置能力。

乐高平台是探索组件化构建页面的实际应用,期望通过归纳常规web组件和业务组件,归纳单一职责服务接口从而构建出通过配置自动生成h5页面的方案,以达到代码复用,逻辑复用,节省开发时间,经验积累,节省页面上线时间等目的。

二、乐高早期表单的实现

实现阶段1:手动开发

乐高最初完全使用定制化开发的形式来实现属性表单,这样做的好处是表单外观可以随心所欲,界面对于运营可以做的非常友好。当然,缺点也是显而易见的,定制化的开发无法满足快速迭代的活动运营要求,往往一个需求来了立马就要上线,这个时候定制化的开发和发布流程就会严重制约生产力。

实现阶段2:动态表单1.0

乐高表单第二版使用的是半自动化表单,支持动态配置表单控件类型和表单校验等。

配置面板如图:

68e611437503743fee02222c36ea0df7.png

此版本的表单不支持可视化拖拽,控件自上而下顺序排列。解决了需求快读迭代的问题,但因为无法自定义布局,随之带来了属性的臃肿以及运营人员操作复杂的问题。

因此我们开发了动态表单2.0(DynamicForm)。

DynamicForm在乐高平台的应用

为了应对乐高组件快速迭代的业务需求,必须研发出一种能够让组件属性快速得到应用的表单技术框架,这样以保证在组件新增属性时,无需进行新代码的开发,仅需通过简单的配置即可生成新的组件属性。

为了达到表单配置的灵活性,DynamicForm必须满足以下几个条件:

1)丰富的表单控件类型

DynamicForm包含了以下内容,满足了多样化的配置要求。

  • 通用控件:文本框、单选框、多选框、下拉选择、颜色选择、图片上传等

  • 自定义控件:组件可视化选择,热区定义,JSON可视化配置控件等。

2)DIY表单界面

运维人员可以通过对控件拖拽,实时编辑的形式,对表单进行自由设计,以达到理想的UI效果。

3)表单控件配置

可以对控件的默认值、是否必填、提示信息、控件宽度、正则匹配等进行自由配置,以达到理想效果。

4)表单数据关联

为了达到表单的属性项的关联,需配置数据关联,控制分组关联等。

配置界面示例见下图:

523926e08715c5fd166e2635fbcc7671.png

二、亮点

已实现的DynamicForm具有如下亮点:

  • 可视化:可视化搭建、修改和预览表单

  • 可拖拽布局:控件可在画布内拖拽至任意坐标,以搭建最佳布局

  • 可扩展:可二次开发,可扩展控件集

  • 可联动:某个控件可以控制别的控件的显示和隐藏

  • 支持复杂数据类型:支持对象结构以及对象数组结构等复杂数据类型(JSON)的配置

三、架构

DynamicForm架构设计的目的是降低表单的维护成本、降低开发人力,解决表单开发中常见的联动、校验、自定义展示等问题。

3.1 功能梳理

Dynamic的核心功能包括联动、校验、扩展、可视化等。

  • 联动:某个控件变化后,改变其他控件的显示和隐藏。

  • 校验:通过正则表达式(预留或者自定义)进行表单校验。

  • 扩展:支持自定义控件和校验。

  • 可视化:支持可视化拖拽和可视化编辑,节省开发表单时间,并降低运营的配置成本。

3.2 架构模块

246fb079d836cd390e19ee05d42ce7ed.png

渲染流程:

b8052eb132c4defaea622496c90b0e9a.png

系统有表单生成器编辑面板Form Generator,表单渲染入口Form Viewer两个主要模块。

这两个模块共用常规的基础组件如输入框,颜色选择等,还有一些基于业务扩展的复杂组件,例如热区选择,视频上传,数据聚合(JSON列表)等。

1bca06a4d2dba4ecfba25c85722266c4.png

动态表单一个比较重要的点是需要解决JSON可视化配置,为此表单也开发了table列表式的JSON列表组件,子项的配置就基于嵌套表单实现配置字段,并且能够增删改查条目,excel导入,导出数据。

66543300a1f6f8ddb6396398563ceb4f.png

其他复杂数据类型配置,如["a","b"]和["a","c"],表单提交数据结构即为{a:{b:"",c:""}} 

af997d223124ba3f2737335ffed72a33.png

da40568ab1d88b434833fb13072a81bf.png

另外一个功能点是解决动态属性间的联动问题,为此表单通过配置联动表达式解决了控件联动问题,例如控制显隐等。

20bde5d9015408ed6d64b8a88730a9b8.png

ba47617691d617e0734c5b811d326071.png

表单底层则依赖React(hooks),Ant Design的主题UI库,Mobx。

3.3 灵活的布局

  • 组件自由拖拽布局,自动对齐等

  • 组件可控制添加分组,从而批量操作布局

1ee1bcd207fbd67c92c0a1ca32276168.png

3.4 校验

提供预留的常规校验,如中文,英文校验等,以及可自定义扩展的校验配置。

6c2211404cd881b5f44c8535101d4247.png

四、后续计划

DynamicForm将作为独立的npm模块使用,为其他动态表单场景提供公共功能,打造泛应用动态表单。

DynamicForm代码开源,与社区共同交流与进步。

【推荐阅读】

ddd3a562ee17af28aa8cf2c5e046a8d8.png

 “携程技术”公众号

  分享,交流,成长

动态表单实现思路 表单模板设计:将表单拆分为表头属性、表单模板和数据存储三部分。表头属性包含表单的基本信息,如表单名称、描述等;表单模板定义表单的结构和字段,包括字段名称、类型、是否必填等;数据存储则用于保存用户提交的数据。字段配置:抽象出一般化的字段属性,如属性编码(保证唯一性)、属性名称、显示类型(如只读文本、输入框、下拉列表等)、输入类型(如数字、字符串、日期等)。这些属性可以通过后台管理系统进行配置,实现表单的灵活扩展。动态表单的实现思路是通过灵活配置表单模板和字段,结合前后端技术实现表单的动态渲染和交互。 阅读详情

相关推荐

Web开发中动态表单的实现与最佳实践

本文还有配套的精品资源,点击获取 简介:动态添加表单是在Web开发中实现用户自定义表单元素的关键功能,它能够提升用户交互体验。本文将介绍动态表单的核心概念、实现方法、技术栈以及最佳实践,包括如何使用HTML、JavaScript、前端框架、表单库和后端技术。文章还将通过实际项目案例,展示动态表单在增强Web应用交互性中的应用。 1. 动态表单定义与用户交互体验 ...

weixin_30299319的博客 2092

实现动态表单功能设计思路

实现动态表单功能设计思路 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录**实现动态表单功能设计思路**业务场景一、设计思路二、使用步骤1.引入库2.读入数据总结 业务场景 功能要求把人工记录的各种表单(XX使用记录、XX检查记录)通过系统录入保存并展示,当表单类型过多时不适合一一对应建表维护数据 一、设计思路 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下(示例): import numpy as

weixin_43881512的博客 1万+

动态表单系统设计与实现完整Demo项目

为了提升用户体验,验证系统应支持自定义错误消息,而非仅返回“格式错误”这类模糊提示。可通过扩展属性实现:"taxId": {"pattern": "税号格式应为:两位大写字母 + 六位数字 + 一位校验字母(如 AB123456X)"},"title": "纳税人识别号"在复杂表单中,多个字段之间存在依赖关系。例如,“国家”字段变化会影响“省份”下拉列表的内容;“是否已婚”为“是”时才显示“配偶姓名”字段。这种跨组件通信不应通过直接 DOM 操作或全局状态硬编码来实现,而应采用。

weixin_42372837的博客 1115

【开源】基于Vue.js的无代码动态表单系统的设计和实现

基于Vue+SpringBoot+MySQL的无代码平台的表单平台,包括了系统数据中心模块,用来存放管理系统通用的模块,另外分别设计了动态类型模块、动态文件模块、动态字段模块和动态值模块这四大模块,用于实现档案管理系统的核心表单逻辑。

askf01的博客 1661

动态表单系统设计与实现

动态表单系统设计与实现【硕士学位毕业论文

【论文精读】Latent Diffusion

Latent Diffusion

weixin_44934783的博客 4476

【转】动态表单设计与实现

  动态表单的意义  对于动态表单的探讨现在越来越多了。原因无非是表单在信息管理系统中的重要作用,基本上采用表单+流程就可以实现一个OA系统。然而数量众多的表单和易变动性让开发人员感到疲惫。为了让开发人员把注意力集中在业务流程上来,也可以让系统操作人员参与到表单的管理,就出现了动态表单技术。    通常情况下,表单加流程,就构成了一个信息管理系统。   在对信息管理系统的探索中我们发现,按业务...

学习笔记 1万+

亿佰特E77模块(STM32WLE5CCU6)LoRa通信实战指南:从配置到应用开发

本文详细介绍了亿佰特E77模块(STM32WLE5CCU6)的LoRa通信实战指南,从硬件配置到应用开发。基于ARM Cortex-M4内核的E77模块集成了LoRa射频前端,具备超低功耗和硬件级抗干扰特性,适用于智能农业、工业现场等场景。文章提供了开发环境搭建、LoRa参数配置、实战通信及性能优化等实用技巧,帮助开发者快速掌握LoRa通信技术。

weixin_29164185的博客 760

Vue实现动态表单

动态表单的核心是:根据用户在表单中的输入,自动调整后续表单项的显示内容。例如,用户在某个表单输入特定的值时,会显示下一个问题或选项,而如果用户输入不同的值,则会跳转到另外一套问题。这种交互使得表单流程更加智能和灵活。在本文中,我们将创建一个递归的动态表单,表单项之间通过逻辑相互连接。当某个表单项的值发生变化时,它将动态显示下一个表单项,或者结束表单流程。通过本文的讲解,我们一步一步构建了一个递归动态表单。使用 Vue 的响应式系统和递归组件,我们可以根据用户输入的内容动态展示后续表单项。

而世之奇伟、瑰怪,非常之观,常在于险远,而人之所罕至焉,故非有志者不能至也! 5326

InsightFace实战:如何在树莓派上部署轻量级人脸识别系统(附完整代码)

本文详细介绍了如何在树莓派上部署基于InsightFace框架的轻量级人脸识别系统。通过硬件选型、环境配置、模型优化(如MobileFaceNet)及完整代码实战,指导开发者构建本地化、低功耗的智能应用,如智能门铃,并提供了性能调优与系统服务化的进阶技巧。

weixin_29043895的博客 351

从CCD数据上报看wxHOOK的封号风险与规避

本文深入分析了微信CCD数据上报机制对wxHOOK的检测逻辑与封号风险,揭示了调试器路径暴露、非白名单DLL加载和内存校验失败等关键风险点。通过实战案例和规避方案,帮助开发者理解如何安全使用wxHOOK技术,避免封号风险,包括内存镜像欺骗、内核级隐蔽和硬件辅助方案等高级技巧。

weixin_27875131的博客 627

基于vue+element的动态表单的设计与实现(1)

动态表单的设计与实现实现功能基础结构的设计代码实现 备注:细节可能有误,主要提供思路 实现功能 目前主要实现了以下4个功能 表单的可配置化; 具体字段的实时监听(观察者模式); 一个字段控制另一个字段的是否可编辑(发布订阅模式); 支持三种模式:新建、更新、详情 基础结构的设计 首先定义我们需要解析的json配置,基础结构如下: [ { groupNo: "basic", groupName: "基本信息", fields: [ { compone

Soul_mate_61的博客 2813

【Bug已解决】zsh: command not found: claude 解决方案

方案适用场景推荐指数难度方案一:配置 npm 全局目录所有平台,长期使用⭐⭐⭐⭐⭐低方案二:修复 PATH 变量快速修复,不想改 npm 配置⭐⭐⭐⭐低方案三:重建软链接文件存在但链接断裂⭐⭐⭐中方案四:nvm 专属方案使用 nvm 管理多版本 Node.js⭐⭐⭐⭐低方案五:Windows 专属Windows 系统⭐⭐⭐⭐⭐低方案六:Homebrew 安装macOS 用户,npm 有问题⭐⭐⭐低根本原因。

博客 1万+

数据库到页面实现动态表单

del_flag: 逻辑删除标记(0显示,1隐藏),对应的mapper层方法deleteByLogic,生成的代码中,使用删除方法时,默认都是使用的物理删除delete方法,如果想使用逻辑删除deleteByLogic,请手动修改生成的Controller方法。Java属性名称:如果是基本类型(例如:int,string)使用字符串,如果是对象类型(例如User,Office,自定义java对象),请选择需要关联查询的字段,id必选,除了id之外还必须选择至少一个字段。创建单表时,推荐使用默认的字段配置。

m0_62164670的博客 1475

泛微OA自定义post接口和路径(无侵入)

泛微OA自定义post接口和路径(无侵入)

技术分享 3869

企业级OpenClaw部署实战:10个关键配置让你从“养虾“到“精通“

OpenClaw(社区昵称"小龙虾")作为2026年开源社区最活跃的AI Agent项目,凭借其多Agent协同架构和企业级安全隔离能力,已成为中大型企业的首选AI基础设施。本文基于真实企业部署经验,系统梳理了企业级OpenClaw部署的10个关键配置:用户ID消息隔离、群组ID消息隔离、多机器人配置、无限量Agent创建、机器人与Agent关联、Agent间调度、权限配置、Hooks任务、多模型切换及一键备份迁移。

program哲学 930

动态表单设计与实现_通过JsonSchema协助完成动态表单页面实现

动态表单页面一直是做中后台管理系统中让人头疼的部分,这里就记录一下自己在这一块实现过程中的一些架构方案吧。上图来自我们项目原型中的一小部分(实际项目中粗略估计大概有几百种筛选组合情况)。这种页面如果采用if...else去写的话,不说后期维护起来怎么做,就说开发过程中就能给人整懵逼了,所以在动笔(键盘?)之前我们需要先想好该采用怎样的架构模式去实现我们的页面。接下来就是我在实现过程中的一些思路分析...

weixin_39672680的博客 1796

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

实现vue图片缩放-拖拽组件

实现效果如下: 这几天做了个没做过的组件,以此记录下,需要的效果是在一个dom内,缩放拖拽图片。 封装的子组件imgbox.Vue。父组件中使用,需要在父组件中准备一个盒子用来装图片,在这个盒子中可以缩放拽拽图片。 父组件如下 父组件html部分 <!-- 普通方形盒子 --> <div class="box1"> <imgbox :config="data1" @enlarge="enlargeImg" @narrow="narrowImg" @changeIm

zhou15184409854的博客 2896

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

使用el-form组件生成动态表单

肯定是没问题的 但是想一下 如果这种表单 在一个页面同时出现N个类似的 或者在N个页面都需要这样的表单输入 怎么办呢 疯狂的定义el-form-item和校验规则疯狂的CV吗 肯定是不符合我们干完活想摸摸鱼的习惯了 此时此刻就可以看一下这个动态生成了。这里的关键内容是提前定义好一个el-form的HTML结构 然后准备一个json定义我们的表单内容 然后交给表单组件渲染就OK了。这里的JSON数据我使用了mixin的方法 嫌麻烦的同学也可以直接在data中写入。

qq_40673807的博客 2122

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

基于mongodb的动态表单实现

动态表单,代码自动生成,mongodb

KelvinLiu 4260

Form动态表单设计的开发

表单设计 1.应用场景   项目中往往需要动态的创建一个表单,或者添加一个新的数据模板,这时候因为需要在运行时动态的创建表以及动态的维护表字段甚至表关系 使得普通java解决方案变得困难重重。 2.实现工具   Struts2.x + mongodb + jquery   Struts2  作为控制层起到连接页面到后台的数据交互桥梁。   mongodb  做为nosql数据库,在

lzy_persist的专栏 2977

react实现页面动态表单设计器(自定义推拽表单)-含完整代码讲解

左侧多个表单控件,可自由选择拖拽至中间中间对推拽后的空间进行值的输入和选择右侧。

ll_883963的博客 3764

vue3+ Ant Design Vue实现动态表单+动态校验规则+动态验证

vue3+ Ant Design Vue实现动态表单+动态校验规则+动态验证 快速使用

mrorry的博客 4601

(一)vForm 动态表单设计器之使用

VForm是一款基于Vue 2/Vue 3的低代码表单,支持Element UI、iView两种UI库,定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能

刘一线的博客 1万+

动态表单(Dynamic Forms)

效果图如下: 主要文件dynamic.html,dynamic.js。 dynamic.html view sourceprint? 01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 02. 03. 0

zhangyabin_520的专栏 1435
上一篇: 携程Tech Girl:做勇敢的女孩
下一篇: 干货 | 用DDD(领域驱动设计)和ADT(代数数据类型)提升代码质量
携程技术
博客等级 码龄10年 3716粉丝 324原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值