Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合

1、前提介绍

表单场景一直都是前端中后台领域最复杂的场景，大部分的后台管理系统中百分之八十以上业务的表现形式是表单和表格，而且含有数不清的交互场景，也是业务需求最频繁改动的重灾区。

• 如何将字段与字段关联的复杂逻辑变得更简单

• 表单的人机交互行为中，会有更多地用户对数据进行输入场景，如何更好的转换数据

• 表单数据管理、表单值转换逻辑复杂

• ..........

上述的那么多问题，都是表单场景一直写过中台类型系统的人都知道，凡是涉及到组件相关的一些联动需求，项目的开发及排期一定特别久。而且在页面中的组件有了一些关系，又得花很多时间处理每次联动的更新、数据状态创建呀删除呀等，就会很容易出现联动后没更新或者是数据的Bug

本次开发实战将通过formily组件来演示与低代码的融合开发，先通过初阶入门的案例，我们看看如何更高效完成应用的开发，后续会持续更新表单的场景解决方案，也欢迎评论下方及社区提相关的issue

1、Formily

Formily 是一个数据+协议驱动的表单解决方案，构建了从基础表单到低代码领域的高性能通用基础能力，同时其配套的跨框架+跨终端组件生态体系，也能让开发人员更高效的开发日常业务表单，尽可能的减少了重复冗余的逻辑实现

​亮点：

• 可设计，借助Form Builder可以快速搭建表单

• 高性能，字段分布式渲染，大大减轻React渲染压力

• 支持Ant Design/Fusion Next组件体系

• JSX 标签化写法/JSON schema数据驱动方案无缝迁移过渡

• 副作用逻辑独立管理，涵盖各种复杂联动校验逻辑

• 支持各种表单复杂布局方案

2、PagePlug

开源的低代码产品，PagePlug与市面上其他的低代码（轻流、宜搭、微搭、简道云、轻流、活字格等等），后者更倾向于非编程人员使用，让业务线人员自行构建应用程序。而PagePlug这款低代码产品是面向To D研发人群使用的，它旨在加速开发人员的开发过程。

亮点：

• 更强大的可视化建模工具

• 更广泛的API支持

• 更完善的数据管理功能

• 更强大的扩展性

• 更好的安全性支持

​虽然PagePlug与其他无代码、低代码平台一样都是为了让人们更轻松地创建应用程序和自动化流程，但其支持API和数据管理功能的强大和灵活性更高，因此对于需要更高度定制和更广泛的操作的用户，PagePlug可能是更好的选择。

• PagePlug：面向研发使用，更快更全的低代码 -gitee

• PagePlug：面向研发使用，更快更全的低代码 -github

接下来分享一下，Formily与低代码的融合开发实战，如果有其他的idea和想法，欢迎加入社区或者在gitee、github上提issue

2、低代码与formily的实战开发—登录页

2.1构建表单

• 从左侧拖入一个formily表单组件

• 点击右侧设计表单，进入设计页面

• 拖入输入框组件和密码框组件

• 分别设置一下这两组件的字段标识、标题、默认值、是否必填，这里的字段标识很关键，设置成英文，后续获取该表单项的值时会用到

• 配置好这两个组件后，点击保存

2.2获取表单数据

• 留意组件的标识

注意这个名字，我们可以通过下面的方式获取到用户名的值

formily1.formData.username

密码同理，比如你给密码的字段标识是password，那么你就可以通过下面的方式获取到密码的值

formily1.formData.password

2.3连接数据库

• 本次案例使用的是mysql数据库（PagePlug支持连接大量数据库，Mongo、redis、postgreSQL等）

• 填写服务器主机，端口号、数据库名称、用户名、密码

connect mode用默认的就行，可读可写

• 填完信息之后，点击测试，页面显示连接成功后，点击保存

• 系统会显示数据源已经连接上

2.4组件绑定动作事件

• 选择表单后，在表单的提交事件上选择执行查询，当执行查询成功后，需要在查询的onSucces事件上绑定JS对象的函数，通知配置失败的消息提示

​js对象中可以通过Query1.data去获取查询的结果：

export default {
	myFun1: () => {
		//write code here
		if(Query1.data.length > 0){
			showAlert('登陆成功', 'success')
    } else {
			showAlert('无此账户，请确认账户密码是否正确', 'error')
		}
	}
}

查询语句如下：

SELECT * FROM admin WHERE username = {{formily1.formData.username}} AND password = {{formily1.formDaqa.password}}

这个开关要打开，打开可以使您的查询对SQL注入等不良事件具有弹性。但是，如果您的动态绑定包含任何SQL关键字，如“SELECT”，“WHERE”，“AND”等，则需要关闭。

2.5页面演示

• 点击提交，登陆成功（前提数据库有这个账户）

3、案例延伸

简单的一个登录demo，可以让大家对formily和低代码PagePlug大致熟悉下，后续继续更新formily与低代码在企业中的开发场景，也可以在文章下方留言想了解哪块的内容开发联动～～深度体验demo，可以点击下方，体验链接

Formily结合低代码，开发内部工程管理平台https://lowcode.methodot.com/applications/6322a1453892ca140cb874d5/pages/6322a1453892ca140cb874e3/?hmsr=G1&hmpl=A2

• 如果想一块探讨Formily的使用及通过PagePlug低代码来深度融合开发，欢迎加入社区一块讨论

PagePlug：面向研发使用，更快更全的低代码 -gitee

PagePlug：面向研发使用，更快更全的低代码 -github