使用低代码实现一个表单页面 ------ XinBuilder

平台介绍

如果你不是一个前端开发,但是想要实现出一个前端页面。
那么就可以通过低代码的方式,拖拽和配置出你想要的页面。

而XinBuilder就是简单的一套低代码平台,你可以在上面拖拽出自己想要使用的组件并进行配置。使用方式也很简单。

这篇文章,就简单的实现出一个登录页面。通过低代码的方式,点击下面的链接。
第一次访问时间可能会稍微长一点。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

XinBuilder低代码平台

进入后你会看到一个登录页,放心,不需要注册,我来给你一个账号密码进行使用。

使用低代码实现一个表单页面 ------ XinBuilder_第1张图片

账号:admin
密码:666666

这里没有注册的入口(并不是博主懒,不想做。嗯,不是的!)如果想要一个新的账号,评论一下我给你弄一个(再次强调不是因为博主懒!)

创建页面

当你登录成功后,会有这样的一个界面:

使用低代码实现一个表单页面 ------ XinBuilder_第2张图片

我们选择新建页面,名字就叫表单页面。

使用低代码实现一个表单页面 ------ XinBuilder_第3张图片

现在,我们有了页面之后,就要开始进行配置了。也就是拖拽!!!
请点击编辑页面、

使用低代码实现一个表单页面 ------ XinBuilder_第4张图片

如果第一次点开编辑页面,加载时间可能会有一点点长。请耐心等待一下~~

设计页面

来到设计态后,我们首先需要用到的组件是,Form容器类型组件。

使用低代码实现一个表单页面 ------ XinBuilder_第5张图片

容器类型组件和其他组件的区别?
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
区别点在于:容器类型组件可以支持其他组件,拖拽到其内部。

所以,我们可以在Form组件里,拖入其他数据录入组件,我们既然要实现表单。就在里面托进几个输入框。

主要用到的组件有,输入框,日期框,数值框。

使用低代码实现一个表单页面 ------ XinBuilder_第6张图片

当我们确定好基本结构后,是不是觉得这个蓝色的框框很丑。如果不喜欢这个的话,可以通过给Form组件设置样式,来给它取消。

我们右键Form组件,然后选择设置样式。
使用低代码实现一个表单页面 ------ XinBuilder_第7张图片
这里只需要,给Form设置一下高度即可。请输入我下面的代码:

{
 "width":"400px"
}

使用低代码实现一个表单页面 ------ XinBuilder_第8张图片

点击确定后,这个蓝色边框就没有了。

现在,我们需要给表单中的输入框,进行属性配置。我们右键第一个输入框,然后选择设置属性。

使用低代码实现一个表单页面 ------ XinBuilder_第9张图片

这个时候,你就可以看到右侧属性面板已经出现配置信息了。
例如我给这个输入框,加上标签之后,它的签名就有了标签名:

使用低代码实现一个表单页面 ------ XinBuilder_第10张图片
OK,这里就可以简单试一下其他的属性,然后去观察每个属性是什么作用(如果有问题也可以在评论中提出)。

我就简单的配置一下,然后展示:
使用低代码实现一个表单页面 ------ XinBuilder_第11张图片

事件处理

正常来讲,我们是需要将表单中输入的数据,调接口传给后端的。
但是这一篇不涉及对应数据库的使用,所以我们只在控制台将对应的数据结构打印出来即可。

所以我们再拖入一个按钮,然后配置属性修改一下默认值。
使用低代码实现一个表单页面 ------ XinBuilder_第12张图片
我们下一步就是给按钮绑定事件了,我希望,点击按钮的时候,可以获取上面所有字段的值。
这里我就不全获取了,只获取前三个文本框的值,然后打印出来。
我先将代码贴出来:

console.log(xinCtx.XinForm436.childList.XinInput476.attributeValue)
console.log(xinCtx.XinForm436.childList.XinInput454.attributeValue)
console.log(xinCtx.XinForm436.childList.XinInput512.attributeValue)

简单理解一下,xinCtx就是全局对象,用来保存最外层的节点。

通过xinCtx.XinForm436拿到对应的Form组件,因为Form组件有子节点。
所以通过xinCtx.XinForm436.childList.XinInput454拿到对应的子节点,再通过attributeValue获取到对应组件的属性值

效果展示

现在我们可以返回到主页面,然后点击预览页面。
使用低代码实现一个表单页面 ------ XinBuilder_第13张图片
来到预览状态后,我们打开控制台。点击打印按钮。

使用低代码实现一个表单页面 ------ XinBuilder_第14张图片
正常打印,没有什么问题。

完结,撒花~

你可能感兴趣的:(低代码)