formily案例(登陆demo-mysql数据库)
1、demo收获(看完你就会)
- formily组件的简单使用
- 获取表单数据
- 连接mysql数据库
- mysql查询
- JS对象方法的调用
2、formily表单组件简单使用
2.1 设计表单
- 拉一个formily表单组件
- 选中它,在它右边点击设计表单
- 分别拖输入框和密码框进去
- 分别设置一下这两组件的字段标识、标题、默认值、是否必填,这里的字段标识很关键,设置成英文,后续获取该表单项的值时会用到
- 配置好这两个组件后,点击保存
然后你就可以看到
2.2获取表单数据
注意这个名字,我们可以通过 formily1.formData.username 获取到 用户名的值,密码同理,比如你给密码的字段标识是password,那么你就可以通过 formily1.formData.password 获取到密码的值
2.3连接mysql数据库
- 在数据源那点击 + ,然后选择mysql
connect mode用默认的就行,可读可写
- 填写服务器主机,端口号、数据库名称、用户名、密码
其它选项暂时不用写
- 填完信息之后,点击测试,页面显示连接成功后,点击保存
- 保存之后你可以看到
2.4 账号查询
- 选择表单后,在表单的提交事件上选择执行查询,当执行查询成功后,需要在查询的onSucces事件上绑定JS对象的函数,通知配置失败的消息提示
- 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”等,则需要关闭。
- 点击提交,登陆成功(数据库有这个账户)