An overview of the

Generating readable code from visual interaction is the core requirement for this article. Instead of some of the business capabilities of the mid-level front end, the back-end people can simply operate in the interface and eventually generate readable code that can be incorporated into the project.

The preparatory work

  1. Requirement design A: Users (used users) B: Permissions (exports, high-level components) C: Projects (similar to project management concepts) D: Not limited to frameworks (vue, React, Angular,…)
  2. Base component library (company’s, Element’s, community’s) drag building blocks
  3. Business component library Strong business components based on the base component library extension (with bullets, that can not do some big killer)
  4. Custom components maintained by the community in the material market (there is always strength in numbers and someone will come up with unexpected ideas)
  5. Interface design

Drag and drop functionality

  1. Behavior analysis

    从On the left side of thePanel drag and drop the corresponding component,

    在In the middleThe canvas generates the corresponding component,

    在On the right sideThe panel generates the corresponding configuration for this component.
  2. Train of thought

    Left panel renders draggable component names (componentArr)

    Right panel Renders active component configuration items (Component [I])

    So we have global variablesActviePanel, dropPanel
  3. The difficulties in

    componentArrThe universality and extensibility of

    actviePanelGeneration over mouse (position calculation)

    The containerContainers can be nested indefinitely, so there needs to be an event stack, also known as a DOM stack. To deal with what stack the user is on, and then do the logic
  4. According to the component configuration dragged in on the left, go to the configuration list to traverse the corresponding configuration, and assign the value to the right panel

Code generation

  1. Depending on the drag-and-drop behavior, you can end up with a custom configurationpanelArray,
  2. Process the array to your own personalizationASTTree structure to facilitate subsequent generation of code
  3. After getting the AST tree structure, transform the class according to the code implemented, and call the corresponding plugin (vue/ React/Angular) to generate code blocks
  4. The process of generating code blocks, which is essentially going through the AST, breaking up the different code blocks, and finally combining them into the syntax that you want,
  5. When generating code, the variable name takes the component name + property name +index, similar totableLoading_1

implementation

  1. component-config
"Input" : {" AttributePanel ": [{" isParent" : true, "label" : "title", "key" : "label", "type" : "Input", "attrs" : {" value ": "Box"}}, {" label ":" placeholder hints ", "key" : "placeholder", "type" : "Input", "attrs" : {" value ":" please enter the text "}}, {" label ": "Disable ", "key": "disabled", "type": "BusinessSwitch", "attrs": {"value": false}}], "StylePanel": [], "SeniorPanel": []}Copy the code
  1. componentArr
[{" title ":" text Input box ", "the componentName" : "Input", "icon" : ""," smallIcon ":" "},]Copy the code
  1. Final generatedpanel

4. Preliminary AST

extension

  1. Access the Mock platform to implement back-end drag-and-drop pages. The Mock platform tests the interface, and then selects the required interface from the interface, exports the source code, and directly access the project.
  2. Use Severless, cloud services, etc. One-stop deployment can be achieved
  3. Exported files can cover directory structures rather than just single-page components
  4. The export code block to do a reasonable split combination, similar to the concept of public components
  5. Currently, only vUE export has been implemented. In the future, react can be supported
  6. Because of the time, a lot of things are very rough. Make it up when you have time.

link

auto-generate