The new day of the year of the ox, the boss excitedly walked into the office, three steps and made two steps came to my station: “master ah, I heard that now do XXX Admin, low code development platform fire do not do not drop, we must grasp to make a come out!” .

“We make a new wheel?” “The Master” with a black question mark…

‘No, let’s do something different!

“Like what?”

“We’re going to integrate the back-end interface, and we’re going to do full-stack development!”

“What else?

“Of course, there must be drag-and-drop form design, list design!”

“This is a little difficult to do ~~” “Master” heart beat a retreat…

“We also support custom extensions, support secondary development, support permission control, make no mistake, row-level data permission control!” The boss continued to dance, gushing, completely ignoring the master in the heart wow wow cool hurry Jio.

“How long does it take to do all these things?” Finally, I asked the question of the soul.

“A month, hurry up to do, certainly can make!”

“… …” I struggled to suppress the three words that were about to come out of my mouth.

“Do open source and raise some financing for the company.” As soon as the boss said that, he turned and walked away, leaving the master with glazed eyes and an untouchable look slumped in his chair.

But “master” after all, battling-seasoned, can not give up easily, after half a day of careful thinking, “master” revived, set foot on a month of the road to no return…

.

.

The following content is the real record of the “master” 1 month trip to the pit and some superficial experience (this article is a little longer, focus on open source children’s shoes directly to the back to see, is so sweet) :

0. What is the development platform?

The development platform (also called rapid development framework) is actually similar to the XXX Admin, background management system, and Low Code development platform. A standard Web development platform consists of forms, lists, navigation routes, user department organization structure, permission control, and back-end interfaces.

The development platform can save developers the time to build scaffolding, and the use of built-in encapsulated components can greatly improve the development efficiency. At the same time, developers can create custom components to reuse business logic, and freely write code to achieve product requirements.

Low-code platforms pursue higher-level component encapsulation, where business logic can be realized with as little or no code as possible, mainly for product designers or business people. Higher-level encapsulation and low code mean that extensibility and flexibility are limited.

1. Technology selection

Front end selection: Vue + Element UI + Vue.Draggable

In order to complete the development on schedule with less time (compatible with IE 11), we still choose the more mature and long Vue 2 (such as “master” learned Vue 3 to upgrade the clams and clams), the UI library uses the Element UI of Ele. me home, drag and drop components selected Vue.Draggable, the documentation is detailed and simple to use.

Next, start from the form design, strive for 2-3 articles to solve the battle, a comprehensive review of the development process of a development platform.

2. Form design scheme

Drawing on the popular drag-and-drop form design scheme, the general left-middle-right layout is adopted, as shown below:

The layout of the form is controlled by the four-layer structure Tab > Section > Row > Cell. A Row is divided into 24 grids (span=24) on average. The width of the Cell is controlled by the grid, and the maximum width of the Cell cannot exceed 24 grids.

With the biggest difference is that other form design field as the basic logic of form layout components, field have automatic data loading and storing capacity, do not need to design the database, do not need docking backend API, all this is done automatically, after all we have to do is a 1 day to build 100 form and list the whole stack of development platform.

3. Field type

To meet 99.9999% of service requirements, all basic field types must be supported. There are 14 field types: Boolean Boolean, Integer, Decimal, Percent, Money, Text, TextArea, Option, Tag, Date, Date Time, Picture, File, Reference.

Additional field types, such as static HTML, numeric sliders, Rate scores, and so on, can be extended as custom components.

4. Upload and download

With the powerful Upload component of Element UI, it is easy to Upload and download images and files, including limiting the type, size and number of uploaded files. For further understanding, you can read the source code of field-Widget. vue component.

The download of images/files depends on the back-end implementation. The back-end of this development platform implements local storage and download logic on the server. If you need to upload images or files to a special cloud storage platform, you need to write your own code (it is not difficult to implement because it connects to the API of the cloud storage platform).

5. Form validation logic

The required verification rule is built into all field types, and the number/amount type is built into number formatting verification rules and the maximum and minimum values verification rules.

In addition, most fields (except image and file fields) support custom validation rules. The functions of custom validation rules are derived from SRC /utils/validators.js. You can use existing functions to add more custom validation rules. All custom validation functions can be applied to field components, and multiple validation functions can be added together, as shown below:

In addition, you can also use the extraRules attribute of the form widget to append form validation rules. For details about the processing logic, read the source code of form-Widget. vue.

6. Slot

To meet the diversity of form design and the need for dynamic presentation, forms need to be able to embed slots. The form slot provides the possibility of dynamically adjusting the form at runtime. The form slot name must be unique in the current form, and if data is to be obtained within the slot, data fields (or multiple) need to be bound, as shown in the figure below:

7. Customize components

Custom components exist to make up for the deficiencies of built-in components in data presentation or logical interaction in certain scenarios. Custom components provide more possibilities for data presentation and logical interaction of rich forms. Users can achieve more advanced dynamic form functions by extending the custom form component library. For reference, the Variant Admin implements two custom form components: a rich text editor and a regional cascading selection component. By reading the source code of these components (SRC/Component/Custom /…) You can see how to implement your own form components.

This is a series of articles, more nonsense, space is limited, the first article first record here, thank you for reading, welcome to many points to criticize (seduce ~~).

8. Put what’s important last

Finally, for a hard dish, the front-end code has been open source on the world’s largest gay dating site, warehouse link:

Github.com/vdpAdmin/Va…

Domestic synchronous warehouse: gitee.com/vdpadmin/Va…

(The back-end code is about to open source, QQ communication group will notify the first time)

Online demo (form design from entity management into) : http://120.92.142.115:8080/

The finch documentation is still crude and is being refined:

www.yuque.com/variantdev/…

Technical exchange, please enter the group, Qiuqiu Group No. 836657858.