Platform Introduction
If you are not a front-end developer, but want to implement a front-end page.
Then you can drag and configure the page you want in a low-code way.
XinBuilder is a simple low-code platform on which you can drag and drop the components you want to use and configure them. The usage is also very simple.
This article simply implements a login page. To do it the low-code way, click on the link below.
The first visit may take a little longer.
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
After entering, you will see a login page. Don't worry, there is no need to register. I will give you an account and password to use.
Price: admin
Secret: 666666
There is no registration entrance here (it’s not because the blogger is lazy and doesn’t want to do it. Well, no!) If you want a new account, leave a comment and I will get one for you (again, it’s not because the blogger is lazy!)
Create page
When you log in successfully, there will be an interface like this:
We choose to create a new page, called the form page.
Now that we have the page, we need to start configuring it. That is dragging! ! !
Please click the edit page,
If you click on the edit page for the first time, the loading time may be a little long. Please wait patiently~~
design page
After coming to the design state, the first component we need to use is the Form container type component.
What is the difference between container type components and other components?
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
The difference is: container type components can support Other components, drag and drop them inside.
Therefore, we can drag in other data entry components in the Form component, since we want to implement the form. Just put a few input boxes in it.
The main components used are input boxes, date boxes, and value boxes.
After we determine the basic structure, do you think this blue frame is ugly? If you don't like this, you can cancel it by setting styles on the Form component.
We right-click the Form component and select Set Style.
All you need here is to set the height of the Form. Please enter my code below:
{
"width":"400px"
}
After clicking OK, the blue border will disappear.
Now, we need to configure attributes for the input boxes in the form. We right-click on the first input box and select Set Properties.
At this time, you can see that the configuration information has appeared in the properties panel on the right.
For example, after I add a label to this input box, its signature will have a label name:
OK, here you can simply try other attributes, and then observe what each attribute does (if you have any questions, you can also ask them in the comments).
I will simply configure it and then show it:
event handling
Normally speaking, we need to transfer the data entered in the form to the backend through the interface.
However, this article does not involve the use of the corresponding database, so we only print out the corresponding data structure on the console.
So we drag in another button and configure the properties to change the default value.
Our next step is to bind events to the button. I hope that when the button is clicked, the values of all the fields above can be obtained.
I won’t get them all here, only get the values of the first three text boxes, and then print them out.
I will post the code first:
console.log(xinCtx.XinForm436.childList.XinInput476.attributeValue)
console.log(xinCtx.XinForm436.childList.XinInput454.attributeValue)
console.log(xinCtx.XinForm436.childList.XinInput512.attributeValue)
To understand simply, xinCtx is the global object, used to save the outermost node.
Get the corresponding Form component through xinCtx.XinForm436, because the Form component has child nodes.
So get the corresponding child node through xinCtx.XinForm436.childList.XinInput454, and then get the attribute value of the corresponding component through attributeValue
Show results
Now we can return to the main page and click on the preview page.
After reaching the preview state, we open the console. Click the print button.
Print normally, no problem.
Finished, scatter flowers~