Visual design method and device based on component metadata

Abstract

The invention discloses a visual design method and device based on component metadata, and relates to the technical field of computers. A specific embodiment of the method comprises the steps of obtaining metadata of a template component from a component metadatabase, and rendering the template component according to the metadata of the template component; instantiating the metadata of the template component to obtain metadata of a target component, and monitoring the metadata of the target component in real time; and when the metadata of the target component changes, re-rendering the templatecomponent according to the changed metadata of the target component to obtain the target component, thereby realizing visual design. According to the embodiment, a new component can be assembled based on an existing component, personalized customization of the component library is realized, and page building is completed flexibly and quickly.

Description

technical field [0001] The invention relates to the field of computer technology, in particular to a visual design method and device based on component metadata. Background technique [0002] The current development process of the front-end project is: first, the product manager outputs the PRD product requirement document (Product Requirement Document, product requirement document) and product prototype draft; then the UI (User Interface, user interface) designer uses Photoshop, Sketch and other tools to design The prototype is beautified and the UI design draft is produced; then, the front-end engineer cuts the UI design draft, then builds the page html (Hyper Text Markup Language, Hyper Text Markup Language) structure, and writes CSS (Cascading Style Sheets, Cascading Style Sheet) Style code, and strive to restore the design draft 100%; after restoring the design draft, finally implement the business logic of the page and interface with the backend to complete the develop...

AI Technical Summary

Problems solved by technology

[0004] (1) The existing visual editing device only supports dragging and dropping components from scratch to design, and cannot assemble new components based on existing components, and does not support personalized customization of component libraries;

[0005] (2) The page layout methods of existing visual editing devices are either based on a grid layout or require "pre-customized page templates", which are not flexible enough;

The page produced in this way cannot be immediately used as the actual page for secondary development on the basis of front-end development, because the product manager may need to continuously modify, and the UI designer will also beautify and adjust these initial design results. Secondary development above will lead to continuous rework of front-end development and rewriting of page code, which seriously affects the development efficiency and progress of front-end development;

[0007] (4) The existing visual reuse method can only drag and drop components to design pages, but cannot drag and drop multiple components to combine or aggregate into a new component, which is relatively closed in terms of reusability

Images