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

news2024/10/6 14:23:00

平台介绍

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

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

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

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

XinBuilder低代码平台

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

在这里插入图片描述

账号：admin
密码：666666

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

创建页面

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

设计页面

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

在这里插入图片描述

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

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

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

在这里插入图片描述

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

我们右键Form组件，然后选择设置样式。
在这里插入图片描述
这里只需要，给Form设置一下高度即可。请输入我下面的代码：

{
 "width":"400px"
}

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述
OK，这里就可以简单试一下其他的属性，然后去观察每个属性是什么作用（如果有问题也可以在评论中提出）。

我就简单的配置一下，然后展示：
在这里插入图片描述

事件处理

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

所以我们再拖入一个按钮，然后配置属性修改一下默认值。
在这里插入图片描述
我们下一步就是给按钮绑定事件了，我希望，点击按钮的时候，可以获取上面所有字段的值。
这里我就不全获取了，只获取前三个文本框的值，然后打印出来。
我先将代码贴出来：

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获取到对应组件的属性值