Page design method and device based on fund system, equipment and storage medium

Abstract

The invention provides a fund system-based page design method convenient to operate, and relates to the technical field of software page development, and the method comprises the following steps: in response to a page element review request, obtaining a target page, and classifying page elements of the target page; splitting the page elements into public components and business components according to the expansibility of the page elements; service components are developed through the design device; using the public component and the business component to develop a static page; and optimizing the static page, testing the static page, and repairing a test problem.

Description

Technical Field

[0001] The present invention relates to the technical field of software page design, and in particular to a page design method, device, equipment and storage medium based on a capital system. Background Art

[0002] Under the qi ankun.js micro-frontend architecture, the portal plus business module development model is adopted. Under the current development context, there are problems with large differences in business module initialization and business module development methods, resulting in poor page uniformity and low development efficiency.

[0003] The existing technology is based on a single module and a single page to complete the page design; there are few cross-module reuse page designs; cross-module reuse pages are mostly implemented by copying and pasting code; this leads to a large scale and requires the installation of various dependencies. Component debugging is more complicated than local debugging, has weaker stability, and requires long-term iteration. Summary of the invention

[0004] The purpose of the present invention is to provide a page design method, device, equipment and storage medium based on a capital system to solve the current problems of large scale, need to install various dependencies, component debugging is more complicated than local debugging, and poor stability.

[0005] To solve the above problems, the present invention first provides a page design method that is easy to operate based on a capital system, including the following steps: in response to a page element review request, obtaining a target page and classifying its page elements; according to the extensibility of the page elements, splitting the page elements into public components and business components; developing business components through a design device; developing static pages using public components and business components; optimizing the static pages, testing them, and fixing test problems.

[0006] Furthermore, developing business components through the design device includes: selecting technologies and frameworks according to needs, including React, Vue, and Angular, writing HTML, CSS, and JavaScript / TypeScript codes for development components, and performing page component development.

[0007] Furthermore, it also includes: publishing components, publishing the developed components to a corresponding component library or version control system.

[0008] Furthermore, it also includes operational documentation that records the installation, configuration, and usage of the released components.

[0009] The present invention also provides a page design device that is easy to operate based on a capital system, including: an inspection module, which conducts page element inspection, obtains a target page, and classifies its page elements; a component splitting module, which splits the page elements into common components and business components according to the extensibility of the page elements; a development module, which develops business components through a design device, and uses common components and business components to develop static pages; a debugging module, which optimizes the static page, tests it, and fixes test problems.

[0010] Furthermore, the development module also includes: selecting technologies and frameworks according to needs, including React, Vue, and Angula, writing HTML, CSS, and JavaScript / TypeScript codes for development components, and conducting page component development.

[0011] Furthermore, it also includes: a publishing module, which publishes the components developed by the development module to a corresponding component library or version control system.

[0012] Furthermore, the publishing module also includes operation documents that record the installation, configuration and usage methods of the published components.

[0013] The present invention also provides an electronic device, comprising: a processor, and a memory connected to the processor; the memory stores computer execution instructions; the processor executes the computer execution instructions stored in the memory to implement a page design method for easy operation based on a capital system as described in the above technical solution.

[0014] The present invention also provides a computer-readable storage medium, in which computer execution instructions are stored. When the computer execution instructions are executed, they are used to implement the page design method for easy operation based on the capital system as described in the above technical solution.

[0015] A page design method, device, equipment and storage medium based on a funding system provided in accordance with the present invention can ensure the unification of page interaction, reduce development costs, and improve development efficiency; reduce code redundancy in the development process, better reuse code, provide a public solution for the development process, and avoid repeated pitfalls. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0017] Figure 1 A flow chart of a page design method based on a funding system provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0018] In order to make the above-mentioned objects, features and advantages of the present invention more clearly understood, the specific embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0019] Example 1

[0020] This embodiment provides a method for designing a page that is easy to operate based on a funding system, including the following steps:

[0021] S1 responds to the page element review request, obtains the target page, and classifies its page elements;

[0022] S2 splits the page elements into common components and business components according to the extensibility of the page elements;

[0023] S3 develops business components by designing devices;

[0024] S4 uses common components and business components to develop static pages;

[0025] S5 optimizes the static pages, tests them, and fixes testing issues.

[0026] Example 2

[0027] This embodiment provides a method for designing a page that is easy to operate based on a capital system, including the following steps:

[0028] S1 responds to the page element review request, obtains the target page, and classifies its page elements, such as a drop-down box, an input box, and a selector;

[0029] S2: splitting the page element into a common component and a business component according to the extensibility of the page element, wherein the common component is applied globally and the business component is applied to a corresponding single business;

[0030] S3 develops business components through design devices, selects technologies and frameworks according to needs, including React, Vue, and Angular, writes HTML, CSS, and JavaScript / TypeScript codes for development components, and develops page components;

[0031] S4 uses common components and business components to develop static pages;

[0032] S5 optimizes the static page, tests it, and fixes test problems; writes unit tests for components to ensure that the components function properly, optimizes the performance of the components, and ensures loading speed and response speed;

[0033] S6 releases components. Publish the developed components to the corresponding component library or version control system, such as npm, GitHub, and manage the component versions in accordance with the Semantic Versioning specification; continuously improve and update components based on user feedback and new requirements;

[0034] S7 operation documentation, which records the installation, configuration, and usage of released components;

[0035] According to a page design method based on a capital system provided in an embodiment, the designer quickly completes page initialization, quickly completes page component splitting, and completes static page development, which can ensure the unification of design page interaction, reduce development costs, and improve development efficiency; reduce code redundancy in the development process, better reuse code, provide a public solution for the development process, and avoid repeated pitfalls.

[0036] Example 3

[0037] This embodiment provides a page design device that is easy to operate based on a capital system, including:

[0038] Review module, which reviews page elements, obtains the target page, and classifies its page elements;

[0039] A component splitting module, which splits the page elements into common components and business components based on the extensibility of the page elements;

[0040] Development module, develop business components through design devices, and use public components and business components to develop static pages; select technologies and frameworks according to needs, including React, Vue, and Angular, write HTML, CSS, and JavaScript / TypeScript codes for development components, and develop page components;

[0041] The debugging module optimizes the static pages, tests them, and fixes testing issues.

[0042] The release module releases the components developed by the development module to the corresponding component library or version control system; an operation document is written to record the installation, configuration and use methods of the released components;

[0043] Example 4

[0044] This embodiment provides an electronic device, including: a processor, and a memory connected to the processor; the memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory to implement a page design method that is easy to operate based on a capital system as provided in the above embodiment.

[0045] Example 5

[0046] This embodiment provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed, they are used to implement the page design method for facilitating operation based on the capital system as provided in the above embodiment.

[0047] In the description of this embodiment, it should be noted that those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment method can be implemented by instructing the control device through a computer program, and the program can be stored in a computer-readable storage medium. When the program is executed, it may include the processes of the above-mentioned method embodiments, wherein the storage medium may be a memory, a disk, an optical disk, etc.

[0048] Although the present invention is disclosed as above, the present invention is not limited thereto. Any person skilled in the art can make various changes and modifications without departing from the spirit and scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the scope defined by the claims.

[0049] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0050] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0051] The above description of the disclosed embodiments enables one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for designing a page that is easy to operate based on a capital system, characterized in that: The following steps are involved: In response to the page element review request, obtain the target page and classify its page elements; According to the extensibility of the page elements, the page elements are divided into common components and business components; Develop business components through design installations; Use common components and business components to develop static pages; Optimize said static pages, test them, and fix testing issues.

2. The method for designing a page that is easy to operate based on a capital system according to claim 1, characterized in that: Developing business components through design devices includes: Select technologies and frameworks according to needs, including React, Vue, and Angular, write HTML, CSS, and JavaScript / TypeScript code for development components, and perform component-based development of pages.

3. The method for designing a page that is easy to operate based on a capital system according to claim 2, characterized in that: Also includes: Publish components and publish the developed components to the corresponding component library or version control system.

4. The method for designing a page that is easy to operate based on a capital system according to claim 3, characterized in that: It also includes operational documentation that records how to install, configure, and use the released components.

5. A page design device based on a capital system that is easy to operate, characterized in that: include: Review module, which reviews page elements, obtains the target page, and classifies its page elements; A component splitting module, which splits the page elements into common components and business components based on the extensibility of the page elements; Development module, develop business components through design devices, and develop static pages using common components and business components; The debugging module optimizes the static pages, tests them, and fixes testing issues.

6. The page design device for easy operation based on the capital system according to claim 5, characterized in that: The development module also includes: Select technologies and frameworks according to needs, including React, Vue, and Angular, write HTML, CSS, and JavaScript / TypeScript code for development components, and perform component-based development of pages.

7. The page design device for easy operation based on the capital system according to claim 6, characterized in that: Also includes: The publishing module publishes the components developed by the development module to the corresponding component library or version control system.

8. The page design device for easy operation based on the capital system according to claim 7, characterized in that: The release module also includes operation documents, which record the installation, configuration and usage of the released components.

9. An electronic device, characterized in that: include: A processor, and a memory connected to the processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory to implement the page design method for facilitating operation based on a capital system as described in any one of claims 1 to 4.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, which, when executed, are used to implement the page design method for facilitating operation based on a capital system as claimed in any one of claims 1 to 4.

Images