Method and apparatus for multiplexing saas platform web components

Abstract

Embodiments of the present disclosure disclose a method and device for multiplexing SaaS platform webpage components. A specific implementation of the method includes: receiving a compressed package sent by a client for generating a custom component, wherein the compressed package includes a configuration file and a script file. Decompressing the compressed package, and parsing attribute configuration of the custom component according to the configuration file and behavior interface exposed by the custom component according to the script file; generating a visual editing interface according to the attribute configuration and the behavior interface; saving the visual editing interface into an object storage server, so that a user uses the custom component through the visual editing interface. The implementation retains the easy-to-use and easy-to-operate characteristics of the visual editor, solves the problem that the traditional visual webpage editing platform can only drag and drop preset components and has poor flexibility, and meets the individualized needs of cloud computing services.

Description

TECHNICAL FIELD

[0001] Embodiments of the present disclosure relate to the field of computer technology, and in particular, to a method and device for multiplexing SaaS platform webpage components. BACKGROUND

[0002] The current mainstream visual webpage SaaS (Software-as-a-Service) editing platform usually has a function mode of providing preset components and allowing users to change the positions and animations of the components in the editor, and finally publishing the user-edited configuration as a page that can be browsed online.

[0003] Such a traditional solution can enable users without programming foundation to quickly generate and publish accessible pages through visual operation, but its limitation is that the users can only operate limited components provided by the platform, and it is very difficult for the users to construct some content that cannot be covered by the default components of the platform.

[0004] For example, assuming that a visual webpage editing platform provides picture, text and form components, but does not provide a video uploading function, when a user needs to make a page containing picture, text, form components and only needs to insert a ten-second small video, the user cannot complete his own demand only by using the webpage editing platform.

[0005] The publication output of the visual webpage editing platform is usually a static HTML page, and if personalized secondary extension development needs to be performed on the page generated by the platform, the usual practice is to directly export the source code of the output page and modify the source code to achieve the purpose.

[0006] The webpage after secondary modification cannot be returned to the SaaS platform and needs to be deployed separately by finding a server, losing the convenience of one-key deployment of the SaaS platform, and the exported code is usually not friendly to secondary development, resulting in that secondary modification is also quite difficult. SUMMARY

[0007] Embodiments of the present disclosure propose a method and device for multiplexing SaaS platform webpage components.

[0008] In a first aspect, embodiments of this disclosure provide a method for reusing web page components of a SaaS platform, comprising: receiving a compressed package sent by a client for generating a custom component, wherein the compressed package includes: a configuration file and a script file; decompressing the compressed package, parsing the attribute configuration of the custom component according to the configuration file, and parsing the behavioral interfaces exposed by the custom component according to the script file; generating a visual editing interface according to the attribute configuration and behavioral interfaces; and saving the visual editing interface to an object storage server for users to use the custom component through the visual editing interface.

[0009] In some embodiments, the compressed package further includes a style sheet file; and the method further includes: attaching the style sheet file to a visual editing interface.

[0010] In some embodiments, the compressed package further includes thumbnails; and the method further includes displaying the thumbnails in a menu of a visual editing interface.

[0011] In some embodiments, the method further includes: generating an online code editor and saving it to an object storage server so that the client can load the source code of the custom component for modification and debugging; and in response to receiving the modified code sent by the client, regenerating the visual editing interface based on the modified code.

[0012] In some embodiments, a visual editing interface is generated based on attribute configuration and behavior interface, including: generating an attribute editing panel for the visual editing interface based on attribute configuration; and generating an event triggering configuration panel for the visual editing interface in the form of a drop-down list based on behavior interface, so that users can configure the triggering of component behaviors in the visual editing interface by selecting from the drop-down list.

[0013] Secondly, embodiments of this disclosure provide an apparatus for reusing web page components of a SaaS platform, comprising: a receiving unit configured to receive a compressed package sent by a client for generating a custom component, wherein the compressed package includes: a configuration file and a script file; a parsing unit configured to decompress the compressed package and parse out the attribute configuration of the custom component according to the configuration file, and parse out the behavior interface exposed by the custom component according to the script file; a generation unit configured to generate a visual editing interface according to the attribute configuration and the behavior interface; and a saving unit configured to save the visual editing interface to an object storage server for users to use the custom component through the visual editing interface.

[0014] In some embodiments, the compressed package also includes a style sheet file; and the generation unit is further configured to attach the style sheet file to the visual editing interface.

[0015] In some embodiments, the compressed package further comprises a thumbnail image; and the generating unit is further configured to display the thumbnail image in a menu of the visual editing interface.

[0016] In some embodiments, the apparatus further comprises a debugging unit configured to generate an online code editor and save it into an object storage server for loading by the client to modify the source code of the custom component for debugging; and in response to receiving the modified code sent by the client, regenerate the visual editing interface according to the modified code.

[0017] In some embodiments, the generating unit is further configured to generate an attribute editing panel of the visual editing interface according to the attribute configuration; and generate a drop-down list in the event trigger configuration panel of the visual editing interface according to the behavior interface, so as to allow the user to configure the trigger of the behavior of the component in the visual editing interface by selecting in the drop-down list.

[0018] In a third aspect, embodiments of the present disclosure provide an electronic device for multiplexing SaaS platform web components, comprising: one or more processors; a storage device having one or more programs stored thereon, when the one or more programs are executed by the one or more processors, the one or more processors implement the method of any one of the first aspect.

[0019] In a fourth aspect, embodiments of the present disclosure provide a computer readable medium having a computer program stored thereon, wherein the program is executed by a processor to implement the method of any one of the first aspect.

[0020] The method and apparatus for multiplexing SaaS platform web components provided by the embodiments of the present disclosure retain the easy-to-use and easy-to-operate characteristics of the visual editor, solve the problem of poor flexibility of the traditional visual web editing platform that can only drag and drop the pre-installed components, and enable the user to enjoy the convenience of visual editing while utilizing the expansion function to achieve personalized needs that the platform cannot meet. BRIEF DESCRIPTION OF DRAWINGS

[0021] Other features, objects, and advantages of the present disclosure will become more apparent from the following detailed description of non-limiting embodiments made with reference to the attached drawings:

[0022] Figure 1 is an exemplary system architecture diagram to which one embodiment of the present disclosure can be applied;

[0023] Figure 2 is a flowchart of one embodiment of the method for multiplexing SaaS platform web components according to the present disclosure;

[0024] Figure 3a 、 3bis a schematic diagram of one application scenario of a method for multiplexing SaaS platform web page components according to the present disclosure;

[0025] Figure 4 is a flow chart of yet another embodiment of a method for multiplexing SaaS platform web page components according to the present disclosure;

[0026] Figure 5 is a structural schematic diagram of one embodiment of an apparatus for multiplexing SaaS platform web page components according to the present disclosure;

[0027] Figure 6 is a structural schematic diagram of a computer system of an electronic device suitable for implementing embodiments of the present disclosure. DETAILED DESCRIPTION

[0028] The present disclosure will be further described below in conjunction with the drawings and embodiments. It can be understood that the specific embodiments described herein are only used to explain the related application, and not to limit the application. In addition, it should be noted that only parts related to the application are shown in the drawings for ease of description.

[0029] It should be noted that the embodiments in the present disclosure and the features in the embodiments can be combined with each other without conflict. The present disclosure will be described in detail below with reference to the drawings and in conjunction with the embodiments.

[0030] Figure 1 An exemplary system architecture 100 in which embodiments of a method for multiplexing SaaS platform web page components or an apparatus for multiplexing SaaS platform web page components of the present disclosure can be applied is shown.

[0031] As shown in Figure 1 , the system architecture 100 can include terminal devices 101, 102, 103, a SaaS platform 104. The terminal devices 101, 102, 103 and the SaaS platform 104 communicate through a network. The network can include various connection types, such as wired, wireless communication links or fiber optic cables, etc.

[0032] A user can use the terminal devices 101, 102, 103 to interact with the SaaS platform 104 through the network to receive or send messages, etc. Various communication client applications can be installed on the terminal devices 101, 102, 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0033] Terminal devices 101, 102, and 103 can be either hardware or software. When terminal devices 101, 102, and 103 are hardware, they can be various electronic devices with a display screen and support web browsing, including but not limited to smartphones, tablets, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 players (Moving Picture Experts Group Audio Layer IV), laptops, and desktop computers, etc. When terminal devices 101, 102, and 103 are software, they can be installed in the aforementioned electronic devices. They can be implemented as multiple software programs or software modules (e.g., to provide distributed services) or as a single software program or software module. No specific limitations are imposed here.

[0034] SaaS platform 104 can be a server providing various services, such as a backend web server supporting the web pages displayed on terminal devices 101, 102, and 103. The backend web server can analyze and process received data such as compressed packages used to generate custom components, and feed back the processing results (such as a visual editing interface) to the terminal devices.

[0035] It should be noted that a SaaS platform can be either hardware or software. When a SaaS platform is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When a SaaS platform is software, it can be implemented as multiple software programs or software modules (e.g., multiple software programs or software modules used to provide distributed services), or as a single software program or software module. No specific limitations are made here.

[0036] It should be noted that the method for reusing web page components of a SaaS platform provided in the embodiments of this disclosure is generally executed by the SaaS platform 104, and correspondingly, the apparatus for reusing web page components of a SaaS platform is generally disposed in the SaaS platform 104.

[0037] It should be understood that Figure 1 The number of terminal devices, networks, and SaaS platforms shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and SaaS platforms can be included.

[0038] Continue to refer to Figure 2 The diagram illustrates a flow 200 of an embodiment of a method for reusing web page components of a SaaS platform according to the present disclosure. The method for reusing web page components of a SaaS platform includes the following steps:

[0039] Step 201, receiving the compressed package for generating the custom component sent by the client.

[0040] In this embodiment, the execution subject of the method for multiplexing SaaS platform web components (for example Figure 1 The SaaS platform shown can receive the compressed package for generating the custom component from the terminal used by the user to edit the custom component through wired or wireless connection, wherein the compressed package includes: configuration file, script file.

[0041] The code of a reusable component consists of the following parts

[0042] 1. Configuration file describing configurable items, including behavior interface description exposed to the outside, which cannot be defaulted and can set a fixed name schema.json

[0043] 2. JavaScript script file, used to implement the creation and specific logic behavior of the component, which cannot be defaulted and can set a fixed name vendor.js

[0044] 3. CSS style sheet, used to describe the default style of the component, which can be defaulted and can set a fixed name vendor.css

[0045] 4. Thumbnail for display in the menu, which can set a fixed name icon.png / icon.svg

[0046] When developing a custom component, the developer needs to write the code of files 1-3 according to the specification and provide a screenshot file in the format described in 4. Among them, 3 and 4 are optional. The developer uploads the compressed package (such as zip compressed package) of the edited files to the SaaS platform.

[0047] The detailed component writing specification is as follows:

[0048]

[0049]

[0050]

[0051]

[0052] The ordinary CSS style sheet file will be directly attached to the page, which will be the default style of the component created in vendor.js.

[0053] Step 202, decompress the compressed package, and parse the attribute configuration of the custom component according to the configuration file, and parse the behavior interface exposed by the custom component according to the script file.

[0054] In the embodiment, the configuration file and the script file can be decompressed from the compressed package. The style sheet file and the thumbnail can also be decompressed. Then, the attribute configuration of the custom component is parsed according to the configuration file, for example, the default width, height, title and the like of the component. The behavior interface exposed by the custom component is parsed according to the script file, for example, the function executed after the position of the custom component is dragged.

[0055] In step 203, the visual editing interface is generated according to the attribute configuration and the behavior interface.

[0056] In the embodiment, the attribute editing panel of the visual editing interface is generated according to the attribute configuration, and the behavior option of the visual editing interface is generated according to the behavior interface.

[0057] Taking a successfully uploaded and imported counter component as an example, the display effect of the component in the editor is as follows Figure 3a 、 3b Among them

[0058] The right “edit” panel corresponds to the description of the properties and editor fields in the schema.json, and the optional behaviors in the “event” panel drop-down list correspond to the description of the interfaces field in the schema.json.

[0059] In step 204, the visual editing interface is saved to the object storage server, so that the user can use the custom component through the visual editing interface.

[0060] In the embodiment, the generated visual editing interface is finally saved to the object storage server for publishing. The user can log in to the visual editing interface through a webpage. The user can see the custom components uploaded by the developer under the “my components” list, and can add the component to the editor canvas by clicking the component icon to preview the effect.

[0061] The method provided by the above embodiments of the disclosure can be used to upload the code of the custom reusable component written by the user to the SaaS platform, and then loaded and published by the SaaS platform, so that the behavior provided by the component can be configured through the editing interface. While retaining the easy-to-use and easy-to-operate characteristics of the visual editor, the method solves the problem of poor flexibility of the traditional visual web editing platform that can only drag and drop the preset components, so that the user can enjoy the convenience of the visual editing while using the extended functions to realize the personalized needs that cannot be met by the platform.

[0062] Further reference is made to Figure 4Fig. 4 shows a flow 400 of another embodiment of the method for reusing SaaS platform webpage components. The flow 400 of the method for reusing SaaS platform webpage components comprises the following steps:

[0063] Step 401, receiving a compressed package for generating a custom component sent by a client.

[0064] Step 402, decompressing the compressed package, and parsing the attribute configuration of the custom component according to the configuration file, and parsing the behavior interface exposed by the custom component according to the script file.

[0065] Step 403, generating a visual editing interface according to the attribute configuration and the behavior interface.

[0066] Step 404, saving the visual editing interface to an object storage server, so that a user uses the custom component through the visual editing interface.

[0067] Steps 401-404 are basically the same as steps 201-204, and thus will not be described again.

[0068] Step 405, generating an online code editor and saving it to an object storage server, so that a client loads the source code of the custom component to modify and debug.

[0069] In this embodiment, the online code editor can be generated according to the source code of the compressed package of the custom component.

[0070] Step 406, in response to receiving the modified code sent by the client, regenerating the visual editing interface according to the modified code.

[0071] In this embodiment, the component developer can remotely load the component source code on the object storage server through the webpage window of this code editor, save the modified code, and the code will be synchronized to the remote object storage server. At this time, refreshing the visual editing interface can load the latest component code and test the effect in the visual editing interface.

[0072] As can be seen from Figure 4 , compared with the embodiment corresponding to Figure 2 , the flow 400 of the method for reusing SaaS platform webpage components in this embodiment embodies the step of debugging the custom component. Therefore, the scheme described in this embodiment can improve the convenience of component development, and facilitate code maintenance and upgrading.

[0073] Further referring to Figure 5 , as an implementation of the method shown in the above figures, the present disclosure provides an embodiment of an apparatus for reusing SaaS platform webpage components. The apparatus embodiment is corresponding to Figure 2The method embodiments shown correspondingly, the device can be applied to various electronic devices.

[0074] As Figure 5 The device 500 for multiplexing SaaS platform web page components in the embodiment shown includes a receiving unit 501, an analyzing unit 502, a generating unit 503, and a saving unit 504. The receiving unit 501 is configured to receive a compressed package for generating a custom component sent by a client, wherein the compressed package includes a configuration file and a script file. The analyzing unit 502 is configured to decompress the compressed package, and parse attribute configurations of the custom component according to the configuration file, and parse behavior interfaces exposed by the custom component according to the script file. The generating unit 503 is configured to generate a visual editing interface according to the attribute configurations and the behavior interfaces. The saving unit 504 is configured to save the visual editing interface into an object storage server, so that a user uses the custom component through the visual editing interface.

[0075] In the embodiment, the specific processing of the receiving unit 501, the analyzing unit 502, the generating unit 503, and the saving unit 504 of the device 500 for multiplexing SaaS platform web page components can refer to the steps 201, 202, 203, and 204 in the corresponding embodiment. Figure 2

[0076] In some optional implementations of the embodiment, the compressed package further includes a style sheet file, and the generating unit is further configured to attach the style sheet file in the visual editing interface.

[0077] In some optional implementations of the embodiment, the compressed package further includes a thumbnail, and the generating unit is further configured to display the thumbnail in a menu of the visual editing interface.

[0078] In some optional implementations of the embodiment, the device 500 further includes a debugging unit (not shown in the figure) configured to generate an online code editor and save it into the object storage server, so that the client loads the source code of the custom component to modify and debug; and in response to receiving the modified code sent by the client, regenerate the visual editing interface according to the modified code.

[0079] In some optional implementations of the embodiment, the generating unit 503 is further configured to generate an attribute editing panel of the visual editing interface according to the attribute configurations, and generate an event trigger configuration panel in the form of a drop-down list in the visual editing interface according to the behavior interfaces, so that the user configures the trigger of the component behavior in the visual editing interface through the way of selecting in the drop-down list.

[0080] The following refers to Figure 6 ​It illustrates an electronic device suitable for implementing embodiments of the present disclosure (e.g., Figure 1 A structural diagram of the SaaS platform (600). Figure 6 The SaaS platform shown is merely an example and should not be construed as limiting the functionality and scope of use of the embodiments disclosed herein.

[0081] like Figure 6 As shown, electronic device 600 may include a processing device (e.g., a central processing unit, a graphics processor, etc.) 601, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 602 or a program loaded from storage device 608 into random access memory (RAM) 603. RAM 603 also stores various programs and data required for the operation of electronic device 600. Processing device 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0082] Typically, the following devices can be connected to I / O interface 605: input devices 606 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 607 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 608 including, for example, magnetic tapes, hard disks, etc.; and communication devices 609. Communication device 609 allows electronic device 600 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 An electronic device 600 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively. Figure 6 Each box shown can represent a device or multiple devices as needed.

[0083] In particular, according to embodiments of the present disclosure, the processes described above with reference to the flowcharts can be implemented as a computer software program. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a computer readable medium, the computer program comprising program code for performing the methods illustrated by the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via the communication device 609, or installed from the storage device 608, or installed from the ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the methods of embodiments of the present disclosure are performed. It should be noted that the computer readable medium of embodiments of the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. The computer readable storage medium may, for example, be, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or any suitable combination of the above. More specific examples of the computer readable storage medium can include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In embodiments of the present disclosure, the computer readable storage medium can be any tangible medium that contains or stores a program that can be used by or in connection with an instruction execution system, apparatus or device. In embodiments of the present disclosure, the computer readable signal medium can include a data signal carried in a baseband or as part of a carrier wave, in which the computer readable program code is carried. Such a propagated data signal can take any of a variety of forms, including but not limited to electro-magnetic, optical, or any suitable combination thereof. The computer readable signal medium can also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate or transport a program for use by or in connection with an instruction execution system, apparatus or device. Program code contained in the computer readable medium can be transmitted by any suitable medium, including but not limited to wire, cable, RF, etc., or any suitable combination of the above.

[0084] The computer readable medium can be included in the electronic device; or can exist separately from the electronic device. The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to receive a compressed package for generating a custom component sent by a client, where the compressed package includes a configuration file and a script file, decompress the compressed package, and parse a property configuration of the custom component according to the configuration file and an action interface exposed by the custom component according to the script file; generate a visual editing interface according to the property configuration and the action interface; and save the visual editing interface to an object storage server, so that a user uses the custom component through the visual editing interface.

[0085] Computer program code for carrying out operations of embodiments of the present disclosure can be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C++ or the like, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code can execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the latter scenario, the remote computer can be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or the connection can be made to an external computer (for example, through the Internet using an Internet Service Provider).

[0086] The flow diagrams and the block diagrams in the drawings are illustrations of architectures, functionalities, and operations of possible implementations of systems, methods, and computer program products according to various embodiments of present disclosure. In this regard, each block in the flow diagrams or block diagrams can represent a module, a procedure, or a portion of code, which comprises one or more executable instructions for implementing the specific logical functions specified for the block. It should also be noted that in some alternative implementations, the functions noted in the blocks can occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently or in the reverse order, depending on the functionality involved. It will also be noted that each block of the block diagrams and / or flow diagrams, and combinations thereof, can be implemented by a dedicated hardware-based system that carries out specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0087] The units described in the embodiments of the present disclosure can be implemented in the form of software, or can be implemented in the form of hardware. The described units can also be arranged in a processor, for example, can be described as: a processor includes a receiving unit, an analysis unit, a generation unit and a saving unit. Among them, the name of these units does not constitute a limitation to the units themselves in some cases, for example, the receiving unit can also be described as "a unit for receiving the compression package sent by the client for generating the customized component".

[0088] The above description is merely preferred embodiments of the present disclosure and a description of the principles of the technology used. Those skilled in the art should understand that the scope of the application involved in the present disclosure is not limited to the technical solutions formed by the specific combinations of the above technical features, and should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the inventive concept. For example, the above features are replaced with each other to form a technical solution with similar functions disclosed in the present disclosure (but not limited to).

Claims

1. A method for reusing web page components of a SaaS platform, comprising: Receive a compressed package sent by the client for generating custom components, wherein the compressed package includes: configuration file, script file, CSS stylesheet and thumbnail; Unzip the compressed package, parse the attribute configuration of the custom component according to the configuration file, and parse the behavior interface exposed by the custom component according to the script file. The attribute configuration includes at least one of the following: the default width, height, and title of the component. The behavior interface includes the function executed when the attribute changes in the editor. A visual editing interface is generated based on the attribute configuration and the behavior interface; The visual editing interface is saved to an object storage server for publication, so that users can log in to the visual editing interface via a webpage to use the custom components; An online code editor is generated from the source code of the compressed package of the custom component and saved to the object storage server so that the client can load the source code of the custom component for modification and debugging. In response to receiving the modified code sent by the client, the visual editing interface is regenerated based on the modified code. The source code on the object storage server is remotely loaded through the web window of the code editor, modified, and saved. The modified code is synchronized to the remote object storage server. The visual editing interface is refreshed to load the modified code and test the effect in the visual editing interface.

2. The method according to claim 1, wherein, The compressed package also includes style sheet files; and The method further includes: Attach the style sheet file to the visual editing interface.

3. The method according to claim 1, wherein, The compressed file also includes thumbnails; and The method further includes: The thumbnail is displayed in the menu of the visual editing interface.

4. The method according to claim 1, wherein, The step of generating a visual editing interface based on the attribute configuration and the behavior interface includes: Generate a visual editing panel for the attribute configuration; The event trigger configuration panel of the visual editing interface is generated in the form of a drop-down list based on the behavior interface, so that users can configure the triggering of component behaviors in the visual editing interface by selecting from the drop-down list.

5. An apparatus for reusing web page components of a SaaS platform, comprising: The receiving unit is configured to receive a compressed package sent by the client for generating custom components, wherein the compressed package includes: configuration files, script files, CSS style sheets, and thumbnails; The parsing unit is configured to decompress the compressed package, parse out the attribute configuration of the custom component according to the configuration file, and parse out the behavior interface exposed by the custom component according to the script file. The attribute configuration includes at least one of the following: the default width, height, and title of the component, and the behavior interface includes a function executed when the attribute changes in the editor. The generation unit is configured to generate a visual editing interface based on the attribute configuration and the behavior interface; The storage unit is configured to save the visual editing interface to an object storage server for publication, so that users can log in to the visual editing interface via a webpage to use the custom components; The debugging unit is configured to: generate an online code editor based on the source code of the compressed package of the custom component and save it to an object storage server, so that the client can load the source code of the custom component for modification and debugging; in response to receiving the modified code sent by the client, regenerate the visual editing interface based on the modified code, wherein the source code on the object storage server is remotely loaded through the web window of the code editor, the source code is modified and saved, the modified code is synchronized to the remote object storage server, the modified code is loaded by refreshing the visual editing interface, and the effect is tested in the visual editing interface.

6. The apparatus according to claim 5, wherein, The compressed package also includes style sheet files; and The generation unit is further configured to: Attach the style sheet file to the visual editing interface.

7. The apparatus according to claim 5, wherein, The compressed file also includes thumbnails; and The generation unit is further configured to: The thumbnail is displayed in the menu of the visual editing interface.

8. The apparatus according to claim 5, wherein, The generation unit is further configured to: Generate a visual editing panel for the attribute configuration; The event trigger configuration panel of the visual editing interface is generated in the form of a drop-down list based on the behavior interface, so that users can configure the triggering of component behaviors in the visual editing interface by selecting from the drop-down list.

9. An electronic device for reusing web page components of a SaaS platform, comprising: One or more processors; Storage device, on which one or more programs are stored, When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-4.

10. A computer-readable medium having a computer program stored thereon, wherein, When the program is executed by the processor, it implements the method as described in any one of claims 1-4.

Images