CN113741896A - System and method for realizing configuration editing software based on componentization - Google Patents
System and method for realizing configuration editing software based on componentization Download PDFInfo
- Publication number
- CN113741896A CN113741896A CN202111020627.XA CN202111020627A CN113741896A CN 113741896 A CN113741896 A CN 113741896A CN 202111020627 A CN202111020627 A CN 202111020627A CN 113741896 A CN113741896 A CN 113741896A
- Authority
- CN
- China
- Prior art keywords
- component
- server
- client
- page
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to the technical field of configuration editing, in particular to a system and a method for realizing configuration editing software based on componentization; the page assembly is packaged through the configuration editor, the page assembly data is uploaded to the client, the client displays a corresponding page style according to the page assembly data, when the configuration editor is used, the page assembly is edited at the client, the operation logic data is uploaded to the server, the server stores the operation logic data and interacts with the client memorability data, and finally the client refreshes to obtain a latest updated page.
Description
Technical Field
The invention relates to the technical field of configuration editing, in particular to a system and a method for realizing configuration editing software based on componentization.
Background
In general, each time a web product page changes, a developer is required to write corresponding code.
However, as pages change frequently, developers need to change code frequently, which increases the labor intensity.
Disclosure of Invention
The invention aims to provide a system and a method for realizing configuration editing software based on componentization, and aims to solve the technical problem that in the prior art, with frequent change of pages, developers need to frequently change codes, so that the labor intensity of workers is increased.
In order to achieve the above object, the present invention employs an implementation system of configuration editing software based on componentization, which includes a configuration editor, a server and a client,
the configuration editor is connected with a client, and the client is connected with the server;
the configuration editor is used for packaging the page components and uploading page component data to the client;
the client is used for displaying a corresponding page style according to the set page component data, editing the page component and uploading operation logic data to the server;
and the server is used for receiving and storing the operation logic data and carrying out data interaction with the client.
Firstly, a page component is packaged in the configuration editor, then the client displays a page style corresponding to the page component, the page component is edited at the client, operation logic data are uploaded to the server, the server stores the operation logic data and performs data interaction with the client, so that the client acquires an updated page, the configuration editing method greatly reduces the requirements of professionals, the modification of the page can be completed on line only after an operation manual is read, and the manual labor intensity is reduced.
The client comprises a box component and a text component, the box component is connected with the server, and the text component is connected with the server;
the box assembly is used for setting a background, a color and a fillet pattern of a specified position size;
and the text component is used for displaying text content.
Dragging the box component, and then setting a style of a specified position, wherein the text component is used for displaying text content.
The client side further comprises a picture assembly and a switch assembly, the picture assembly is connected with the server, and the switch assembly is connected with the server;
the picture assembly is used for uploading and displaying pictures;
and the switch component is used for operating the data change of the specified value and updating the data change to the server.
The picture component is used for uploading and displaying pictures, and the switch component updates data change to the server.
The client side further comprises an interaction button assembly and a button assembly, the interaction button assembly is connected with the server, and the button assembly is connected with the server;
the interactive button component is used for sending requests to the server when a mouse is pressed down and released when the component is clicked, and parameters and values of each request can be configured in the component;
the button component is used for sending a request after clicking, sending an opposite value after clicking again, and modifying the background color and the picture of the component.
The interactive button component sends a request to the server, the button component sends a request to modify a background color and a picture of the component.
The client further comprises a selection frame component and a unit component, wherein the selection frame component is connected with the server, and the unit component is connected with the server;
the selection frame component is used for checking and sending a request with a value of true, and checking and sending a request with a value of false again;
and the unit component is used for displaying metric system or English system according to different settings.
The checkbox component sends a request for a determination of whether to proceed, and the units component displays metric and english.
The client further comprises a variable input assembly and an instrument panel assembly, the variable input assembly is connected with the server, and the instrument panel assembly is connected with the server;
the variable input component is used for changing an input value according to a set variable, updating the input value into the server, setting a gain value, inputting JSON codes to format data and setting a verification rule of a value;
the instrument panel assembly is used for displaying a semicircular progress bar, calculating the current progress according to the set variable value, and setting the maximum value, the minimum value and the formatting of the progress.
The variable input component changes an input value according to a set variable, and the instrument panel component is used for displaying a semicircular progress bar.
A method for realizing configuration editing software based on componentization comprises the following steps:
packaging a page component through a configuration editor, and uploading the page component data to a client;
the client displays a corresponding page style according to the set page component data, edits the page component and uploads operation logic data to a server;
the server receives and stores the operation logic data and performs data interaction with the client;
and the client side refreshes to obtain the latest updated page.
Firstly, the configuration editor encapsulates a page component and uploads the page component to the client, then the client displays a corresponding page style according to the page component, meanwhile, the page component is edited through the client, then operation logic data are uploaded to the server, the server stores the operation logic data and interacts with the client, and finally, the client refreshes to obtain an updated page.
According to the system and the method for realizing the configuration editing software based on the componentization, the configuration editor is used for packaging the page components, the page component data are uploaded to the client, the client displays the corresponding page styles according to the page component data, when the system is used, the client edits the page components, the operation logic data are uploaded to the server, the server stores the operation logic data and interacts with the client memorability data, and finally, the client refreshes to obtain the latest updated page.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a schematic structural diagram of an implementation system of the componentized-based configuration editing software according to the present invention.
Fig. 2 is a schematic structural diagram of a client according to the present invention.
FIG. 3 is a step diagram of the method for implementing the modular configuration editing software according to the present invention.
FIG. 4 is a flowchart of a method for implementing the modular configuration editing software according to the present invention.
1-configuration editor, 2-server, 3-client, 31-box component, 32-text component, 33-picture component, 34-switch component, 35-interactive button component, 36-button component, 37-selection box component, 38-unit component, 39-variable input component, 40-instrument panel component, 41-selector component, 42-graph component, 43-progress bar component, 44-variable translation component.
Detailed Description
Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are illustrative and intended to be illustrative of the invention and are not to be construed as limiting the invention.
In the description of the present invention, it is to be understood that the terms "length", "width", "upper", "lower", "front", "rear", "left", "right", "vertical", "horizontal", "top", "bottom", "inner", "outer", and the like, indicate orientations or positional relationships based on the orientations or positional relationships illustrated in the drawings, and are used merely for convenience in describing the present invention and for simplicity in description, and do not indicate or imply that the devices or elements referred to must have a particular orientation, be constructed in a particular orientation, and be operated, and thus, are not to be construed as limiting the present invention. Further, in the description of the present invention, "a plurality" means two or more unless specifically defined otherwise.
Referring to fig. 1 and fig. 2, the present invention provides a system for implementing configuration editing software based on componentization, which includes a configuration editor 1, a server 2 and a client 3,
the configuration editor 1 is connected with a client 3, and the client 3 is connected with the server 2;
the configuration editor 1 is configured to encapsulate a page component and upload page component data to the client 3;
the client 3 is used for displaying a corresponding page style according to the set page component data, editing the page component, and uploading operation logic data to the server 2;
and the server 2 is used for receiving and storing the operation logic data and performing data interaction with the client 3.
In this embodiment, firstly, a predetermined page component is packaged in the configuration editor 1, and the data of the page component is uploaded to the client 3, the client 3 displays a corresponding page style according to the data of the predetermined page component, and at the same time, the page component in the component editor is operated on the client 3 and the operation logic data is uploaded to the server 2, the server 2 receives and stores the operation logic data, so as to facilitate later tracing, and perform data interaction with the client 3, and finally, the configuration editor calls the client 3 to refresh to obtain a latest updated page.
Further, referring to fig. 2, the client 3 includes a box component 31 and a text component 32, the box component 31 is connected to the server 2, and the text component 32 is connected to the server 2;
the box assembly 31 is used for setting a background, a color and a fillet pattern of a specified position size;
the text component 32 is configured to display text content.
Further, referring to fig. 2, the client 3 further includes a picture module 33 and a switch module 34, the picture module 33 is connected to the server 2, and the switch module 34 is connected to the server 2;
the picture assembly 33 is used for uploading and displaying pictures;
the switch component 34 is used for operating the data change of the designated value and updating to the server 2.
Further, referring to fig. 2, the client 3 further includes an interaction button assembly 35 and a button assembly 36, the interaction button assembly 35 is connected to the server 2, and the button assembly 36 is connected to the server 2;
the interaction button component 35 is used for sending requests to the server 2 when a component is clicked, and parameters and values of each request can be configured in the component when a mouse is pressed down and released;
the button assembly 36, which is used to send a request after clicking, and send the opposite value after clicking again, can modify the background color and picture of the assembly.
Further, referring to fig. 2, the client 3 further includes a selection box component 37 and a unit component 38, the selection box component 37 is connected to the server 2, and the unit component 38 is connected to the server 2;
the selection frame component 37 is configured to check and send a request with a value of true, and check and send a request with a value of false again;
the unit component 38 is used to display metric or english according to different settings.
Further, referring to fig. 2, the client 3 further includes a variable input component 39 and a dashboard component 40, the variable input component 39 is connected to the server 2, and the dashboard component 40 is connected to the server 2;
the variable input module 39 is configured to change an input value according to a set variable, update the value to the server 2, set a gain value, input a JSON code to format data, and set a verification rule of a value;
the dashboard assembly 40 is used for displaying a semicircular progress bar, calculating the current progress according to the set variable value, and setting the maximum value, the minimum value and the formatting of the progress.
Further, referring to fig. 2, the client 3 further includes a selector component 41 and a graph component 42, the selector component 41 is connected to the server 2 component, and the graph component 42 is connected to the server 2 component;
the selector component 41 is configured to select a drop-down box list, and update the selected drop-down box list to the server 2 after selection, where the selected list may be a local value, or a value returned from an interface of the server 2, and support formatting;
the graph component 42 is used for rendering a graph by canvas and for rendering a curve by querying historical value data of variables, and supports setting of a set value, an upper limit value, a lower limit value and a curve color.
Further, referring to fig. 2, the client 3 further includes a progress bar component 43 and a variable translation component 44, wherein the progress bar component 43 is connected to the server 2, and the variable translation component 44 is connected to the server 2;
the progress bar component 43 is used for linearly displaying the progress, and can set colors, directions and automatically calculate scale display;
the variable translation component 44 is configured to display the corresponding content when the set data variable reaches a certain value.
In this embodiment, the client 3 operates the page component in the configuration editor 1 in a dragging manner, and can select one or more components, where the box component 31 is used to set a background, a color, and a fillet style of a specified position size; the text component 32 is for displaying textual content; the picture assembly 33 is used for uploading and displaying pictures; the switch component 34 is used for operating data change of a specified value and updating to the server 2; the interactive button assembly 35 is used for operating the set value of the data of the designated value and updating the value to the server 2, when the mouse is pressed and released, a request is sent, the style of the assembly can be changed in each operation, and the background color and the picture of the assembly can be modified; the interactive button group is that when a component is clicked, a request is sent to the server 2 when a mouse is pressed down and released, and parameters and values of each request can be configured in the component; the button assembly 36 sends a request after clicking, and sends an opposite value after clicking again, so that the background color and the picture of the assembly can be modified; after the selection frame component 37 checks, it will send a request with value true, and then check again and send a request with value false; the unit component 38 will display metric or imperial depending on the setting; the variable input module 39 changes the input value according to the set variable, updates the value into the server 2, sets the value of gain (conversion to english system), inputs JSON code to format data, and sets the verification rule of the value (only the value conforming to the rule can be input); the instrument panel assembly 40 is displayed in a semicircular progress bar form, the current progress is calculated according to the set variable value, and the maximum value and the minimum value of the progress can be set and formatted; the selector component 41, a component selected by the drop-down box list, is updated to the server 2 after selection, and the selected list may be a local value, or a value returned from the server 2 interface, and supports formatting; the graph component 42, a graph rendered by canvas, renders a curve by querying historical value data of variables, and supports setting of a set value, an upper limit value, a lower limit value and a curve color; the progress jumping component is a component for linearly displaying progress, and can set color, direction and automatically calculate scale display; the variable translation component 44 is used for displaying corresponding contents when the set data variable reaches a certain value; the operation is simple and convenient, the device can be used only by simple training, the requirement on software personnel is greatly reduced, and meanwhile, the labor intensity of workers is reduced.
Referring to fig. 3 and 4, a method for implementing configuration editing software based on componentization includes the following steps:
s101: packaging page components through a configuration editor 1, and uploading the page component data to a client 3;
s102: the client 3 displays a corresponding page style according to the set page component data, edits the page component and uploads operation logic data to the server 2;
s103: the server 2 receives and stores the operation logic data and performs data interaction with the client 3;
s104: and the client 3 refreshes to obtain the latest updated page.
In this embodiment, firstly, a predetermined page component is packaged in the configuration editor 1, and page component data is uploaded to the client 3, the client 3 displays a corresponding page style according to the page component data, meanwhile, the client 3 operates the page component in the configuration editor 1 and uploads operation logic data to the server 2, the server 2 stores the operation logic data, so as to facilitate later tracing, and meanwhile, data update interaction is performed with the client 3 according to the operation logic data, and finally, the client 3 is refreshed to obtain a latest updated page.
While the invention has been described with reference to a preferred embodiment, it will be understood by those skilled in the art that various changes in form and detail may be made therein without departing from the spirit and scope of the invention as defined by the appended claims.
Claims (7)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111020627.XA CN113741896A (en) | 2021-09-01 | 2021-09-01 | System and method for realizing configuration editing software based on componentization |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111020627.XA CN113741896A (en) | 2021-09-01 | 2021-09-01 | System and method for realizing configuration editing software based on componentization |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113741896A true CN113741896A (en) | 2021-12-03 |
Family
ID=78734633
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111020627.XA Pending CN113741896A (en) | 2021-09-01 | 2021-09-01 | System and method for realizing configuration editing software based on componentization |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113741896A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118296682A (en) * | 2024-06-05 | 2024-07-05 | 南京星基数字科技有限公司 | Digital twin construction method and system based on WEB configuration |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030023632A1 (en) * | 2001-06-29 | 2003-01-30 | Ries David E. | System and method for editing web pages in a client/server architecture |
| US20130238982A1 (en) * | 2010-11-23 | 2013-09-12 | Tencent Technology (Shenzhen) Company Limited | Methods and apparatus for editing an application webpage |
| CN106155673A (en) * | 2015-04-23 | 2016-11-23 | 阿里巴巴集团控股有限公司 | Realize the method for content of pages editing machine, device, server and subscriber equipment |
| CN106201489A (en) * | 2016-06-30 | 2016-12-07 | 乐视控股（北京）有限公司 | A kind of page editing method and apparatus |
| CN107368557A (en) * | 2017-07-05 | 2017-11-21 | 腾讯科技（深圳）有限公司 | page editing method and device |
| CN110908652A (en) * | 2019-10-31 | 2020-03-24 | 爱钱进(北京)信息科技有限公司 | Method and device for creating active page and compiling active page |
| CN110968316A (en) * | 2019-12-02 | 2020-04-07 | 山东有人信息技术有限公司 | Configuration editor and editing method based on browser |
| CN112000328A (en) * | 2020-09-04 | 2020-11-27 | 赞同科技股份有限公司 | A method, device and device for visual editing of pages |
| CN112486459A (en) * | 2020-11-27 | 2021-03-12 | 杭州大搜车汽车服务有限公司 | Activity page generation method and device, computer equipment and readable storage medium |
| CN112822232A (en) * | 2020-12-28 | 2021-05-18 | 浙江中控技术股份有限公司 | Batch recording system cooperative configuration realization method, device, equipment and storage medium |
-
2021
- 2021-09-01 CN CN202111020627.XA patent/CN113741896A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20030023632A1 (en) * | 2001-06-29 | 2003-01-30 | Ries David E. | System and method for editing web pages in a client/server architecture |
| US20130238982A1 (en) * | 2010-11-23 | 2013-09-12 | Tencent Technology (Shenzhen) Company Limited | Methods and apparatus for editing an application webpage |
| CN106155673A (en) * | 2015-04-23 | 2016-11-23 | 阿里巴巴集团控股有限公司 | Realize the method for content of pages editing machine, device, server and subscriber equipment |
| CN106201489A (en) * | 2016-06-30 | 2016-12-07 | 乐视控股（北京）有限公司 | A kind of page editing method and apparatus |
| CN107368557A (en) * | 2017-07-05 | 2017-11-21 | 腾讯科技（深圳）有限公司 | page editing method and device |
| CN110908652A (en) * | 2019-10-31 | 2020-03-24 | 爱钱进(北京)信息科技有限公司 | Method and device for creating active page and compiling active page |
| CN110968316A (en) * | 2019-12-02 | 2020-04-07 | 山东有人信息技术有限公司 | Configuration editor and editing method based on browser |
| CN112000328A (en) * | 2020-09-04 | 2020-11-27 | 赞同科技股份有限公司 | A method, device and device for visual editing of pages |
| CN112486459A (en) * | 2020-11-27 | 2021-03-12 | 杭州大搜车汽车服务有限公司 | Activity page generation method and device, computer equipment and readable storage medium |
| CN112822232A (en) * | 2020-12-28 | 2021-05-18 | 浙江中控技术股份有限公司 | Batch recording system cooperative configuration realization method, device, equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 张成等: "基于Web 发布的组态软件设计与实现", 《计算机软件开发与应用》, vol. 33, no. 1, 31 January 2018 (2018-01-31), pages 89 - 92 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118296682A (en) * | 2024-06-05 | 2024-07-05 | 南京星基数字科技有限公司 | Digital twin construction method and system based on WEB configuration |
| CN118296682B (en) * | 2024-06-05 | 2024-09-06 | 南京星基数字科技有限公司 | Digital twin construction method and system based on WEB configuration |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111475163B (en) | Method, device and equipment for generating code file of view template and storage medium | |
| CN112631580B (en) | Data processing method and device and computing equipment | |
| CN112464119B (en) | Web-end-based SCADA (supervisory control and data acquisition) online configuration editing method | |
| TWI476677B (en) | Method and system for developing web applications | |
| US9142192B2 (en) | Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same | |
| US9626351B2 (en) | Status viewer | |
| KR101530634B1 (en) | An apparatus and method for authoring experience-based learning content | |
| CN112068824A (en) | Web page development preview method, device and electronic device | |
| CN104572092B (en) | Webpage making method and apparatus | |
| US20170286068A1 (en) | Development support system | |
| CN105279222A (en) | Media editing and playing method and system | |
| Halliday | Vue. js 2 Design Patterns and Best Practices: Build enterprise-ready, modular Vue. js applications with Vuex and Nuxt | |
| US20250013440A1 (en) | Front-end user interface design tool and human readable code generator | |
| US20250021309A1 (en) | Ui design system with automatic front-end/back-end code generator | |
| JP5303116B2 (en) | Screen editing device and its program | |
| CN113741896A (en) | System and method for realizing configuration editing software based on componentization | |
| CN113326044A (en) | Development method, system and storage medium based on control library | |
| CN111796743A (en) | Business process modeling method and system | |
| KR102417862B1 (en) | the method for making the program simple | |
| CN112631587B (en) | Interface prototype design method, interface prototype operation method, and storage medium | |
| JP2017220142A (en) | Programming device | |
| CN113254008B (en) | Data processing method, device and equipment | |
| US20250123733A1 (en) | Interactive user-interface element overlay | |
| JP6795996B2 (en) | Sign language CG editing equipment and programs | |
| US20250284469A1 (en) | Method to display objects in a visible region |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20211203 |