CN115756680A

CN115756680A - Component information display method and device, computer equipment and storage medium

Info

Publication number: CN115756680A
Application number: CN202211360475.2A
Authority: CN
Inventors: 王泽昊; 徐金; 葛伟鹏
Original assignee: Shanghai Pudong Development Bank Co Ltd
Current assignee: Shanghai Pudong Development Bank Co Ltd
Priority date: 2022-11-02
Filing date: 2022-11-02
Publication date: 2023-03-07

Abstract

The application relates to a component information display method, a component information display device, a computer device, a storage medium and a computer program product. The method comprises the following steps: acquiring a component package of a component to be displayed from a published remote warehouse package; acquiring a component description document corresponding to a component to be displayed and a component example code corresponding to the component to be displayed in a server of an online website; analyzing and executing the component example code based on the component package to generate a preview component; and displaying the preview component, the component description document and the component example code in real time in the online website based on a preset display template in the online website. By adopting the method, the component information display efficiency can be improved.

Description

Component information display method and device, computer equipment and storage medium

Technical Field

The present application relates to the field of computer application software technologies, and in particular, to a method and an apparatus for displaying component information, a computer device, a storage medium, and a computer program product.

Background

When the front-end component is formally released, a corresponding component document is often required to be developed to show component information, and the component information includes an interface description, a code example and an effect display of the component. The existing component information display method generally displays component information by writing static component documents. However, when the version of the component is updated, the usage and effect of the component are changed, a new function is added, or a defect is repaired, the component document needs to be updated in a system change manner, and the component information display method has a problem of low efficiency.

Disclosure of Invention

In view of the above, it is necessary to provide a component information display method, a component information display apparatus, a computer device, a computer readable storage medium, and a computer program product, which can improve component information display efficiency, for solving the problem of low component information display efficiency in the conventional technology.

In a first aspect, the present application provides a method for displaying component information. The method comprises the following steps:

acquiring a component package of a component to be displayed from a published remote warehouse package;

acquiring a component description document corresponding to a component to be displayed and a component example code corresponding to the component to be displayed in a server of an online website;

analyzing and executing the component example code based on the component package to generate a preview component;

and displaying the preview component, the component description document and the component example code in real time in the online website based on a preset display template in the online website.

In one embodiment, before obtaining the component package of the component to be exhibited from the published remote warehouse package, the method further comprises:

in response to a packaging instruction after the object writes the local component codes, packaging the local component codes into a component package to be issued through a component scaffold;

acquiring a target component package name, a target warehouse package name and a target warehouse package version number which are specified by a component package to be issued;

determining a target remote warehouse package which is consistent with the target warehouse package name and the target warehouse package version number in the remote warehouse;

and judging whether the name of each stored assembly package in the target remote warehouse package is consistent with the name of the target assembly package, if not, storing the assembly package to be released into the target remote warehouse package, and obtaining the released remote warehouse package.

In one embodiment, the method for displaying component information further comprises:

and under the condition that the stored component package with the name consistent with that of the target component package exists in the target remote warehouse package, deleting the stored component package with the name consistent with that of the target component package, and storing the component package to be issued into the target remote warehouse package to obtain the issued remote warehouse package.

In one embodiment, obtaining a component package of components to be exposed from a published remote warehouse package comprises:

after detecting the touch operation of the object on the component version selection area on the online website, displaying the version number of the remote warehouse package;

acquiring and displaying each component package under the version number selected by the object based on the version number selected by the object;

and taking the component package selected by the object as the component package of the component to be shown.

In one embodiment, the method for displaying the preview component, the component description document and the component example code in the online website in real time based on the preset display template in the online website comprises the following steps:

determining a component preview area, a document display area and a code display area in the online website based on a preset display template in the online website;

and displaying the real-time display preview component in the component preview area, displaying the component description document in the document display area in real time, and displaying the component example code in the code display area in real time.

acquiring a component code obtained by an object updating the component example code through an online website;

analyzing and executing the updated component codes based on the component package to generate an updated preview component;

and displaying the updated preview component and the updated component code in real time in the online website based on a preset display template in the online website.

In a second aspect, the application further provides a device for displaying component information. The device comprises:

the system comprises a first acquisition module, a second acquisition module and a display module, wherein the first acquisition module is used for acquiring a component package of a component to be displayed from a published remote warehouse package;

the second acquisition module is used for acquiring an assembly description document corresponding to the assembly to be displayed and an assembly example code corresponding to the assembly to be displayed in a server of the online website;

the execution module is used for analyzing and executing the component example code based on the component package to generate a preview component;

and the display module is used for displaying the preview component, the component description document and the component example code in the online website in real time based on a preset display template in the online website.

In a third aspect, the application also provides a computer device. The computer device comprises a memory storing a computer program and a processor implementing the following steps when executing the computer program:

and displaying the preview component, the component description document and the component example code in the online website in real time based on a preset display template in the online website.

In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of:

In a fifth aspect, the present application further provides a computer program product. The computer program product comprising a computer program which when executed by a processor performs the steps of:

According to the component information display method, the component information display device, the computer equipment, the storage medium and the computer program product, the component package of the component to be displayed is obtained from the issued remote warehouse package, the component description document corresponding to the component to be displayed and the component example code corresponding to the component to be displayed are obtained in the server of the online website, and the preview component analyzes, executes and generates the component example code based on the component package. Because the component packages of different components can be directly acquired from the published remote warehouse package, the component effects of different components can be previewed in real time without stopping the machine for acquisition, and the component display efficiency is improved. Meanwhile, the component description document and the component example code are acquired from a server of an online website, and are displayed in real time in an online network, so that the display efficiency of component information is improved.

Drawings

FIG. 1 is a diagram of an application environment of a method for presenting component information in one embodiment;

FIG. 2 is a flow diagram illustrating a method for presenting component information in one embodiment;

FIG. 3 is a flow chart illustrating a method for presenting component information in another embodiment;

FIG. 4 is a schematic diagram illustrating a sub-flow of S202 in one embodiment;

FIG. 5 is a schematic sub-flow chart of S208 in one embodiment;

FIG. 6 is a flowchart illustrating a method for presenting component information in another embodiment;

FIG. 7 is a block diagram that illustrates the components of the component information presentation system in one embodiment;

FIG. 8 is a flow diagram that illustrates a methodology for component publication in one embodiment;

FIG. 9 is a diagram that illustrates a component preview interface in one embodiment;

FIG. 10 is a block diagram showing the construction of a component information presentation device in one embodiment;

FIG. 11 is a diagram illustrating an internal structure of a computer device in one embodiment.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of and not restrictive on the broad application.

The component information display method provided by the embodiment of the application can be applied to the application environment shown in fig. 1. Wherein the terminal 102 communicates with the server 104 via a network. The data storage system may store data that the server 104 needs to process. The data storage system may be integrated on the server 104, or may be located on the cloud or other network server. The terminal 102 acquires a component package of the components to be displayed from the published remote warehouse package; acquiring a component description document corresponding to a component to be displayed and a component example code corresponding to the component to be displayed in a server of an online website; analyzing and executing the component example code based on the component package to generate a preview component; and displaying the preview component, the component description document and the component example code in the online website in real time based on a preset display template in the online website. The terminal 102 may be, but not limited to, various personal computers, notebook computers, smart phones, tablet computers, internet of things devices, and portable wearable devices, and the internet of things devices may be smart speakers, smart televisions, smart air conditioners, smart car-mounted devices, and the like. The portable wearable device can be a smart watch, a smart bracelet, a head-mounted device, and the like. The server 104 may be implemented as a stand-alone server or as a server cluster comprised of multiple servers.

In one embodiment, as shown in fig. 2, a method for displaying component information is provided, which is described by taking the method as an example for being applied to the terminal 102 in fig. 1, and includes the following steps:

s202, obtaining the component package of the component to be displayed from the published remote warehouse package.

Wherein the remote repository is a virtual software repository providing third party repository resources. The remote warehouse package is stored in the remote warehouse. Remote warehouse packages in the remote warehouse may be shared and reused after release. Illustratively, the remote warehouse Package may be an NPM (Node Package Manager) remote warehouse Package. A component refers to a user interface component. Common user interface components include buttons, lists, grids, panels, forms, dialog boxes, lists, and the like. In order to enable the component code to be used in various software environments, the component code is usually packaged into a standard file with a certain format specification, and the standard file with a certain format is a component package. Illustratively, the component package may be a UMD (Universal Module Definition) component package.

The remote warehouse bundle includes a bundle of components of at least one component. And uploading the component package of the component to a remote warehouse package in a remote warehouse to realize the release of the component. And the terminal acquires the component package of the component to be displayed from the published remote warehouse package. Namely, the terminal acquires the published component to be shown from the published remote warehouse package. In some embodiments, the component package of the component is released in the remote warehouse package, and when the component package is updated, the released remote warehouse package stores the updated component package, and the updated component package is acquired without stopping the acquisition.

S204, obtaining a component description document corresponding to the component to be displayed and a component example code corresponding to the component to be displayed in a server of the online website.

Wherein, the online website refers to an internet website in an online state. Illustratively, the online website may be a website developed by JavaScript (transliterated scripting language). The component description document is a document describing component information, and the component information described by the component description document includes functions of a component API (Application Programming Interface), a method of using the component API, and a dependency package description of component code. The component example code refers to application method example code of the component. The component description document for each component and the corresponding component instance code are stored in a server of the online site. When a new component is published in the remote warehouse package, a component description document of the corresponding component and component instance code of the corresponding component are published in a server of the online website at the same time.

Specifically, the terminal obtains a component description document corresponding to the component to be displayed and a component example code corresponding to the component to be displayed in a server of the online website.

And S206, analyzing and executing the component sample codes based on the component package to generate a preview component.

After the terminal acquires the component package, the component package is packaged to the system overall situation, and the overall application of the component package can be achieved. And the terminal analyzes and executes the component example code based on the component package to generate a preview component. The preview component is the component to be displayed obtained after the component example code is analyzed and executed.

And S208, displaying the preview component, the component description document and the component example code in the online website in real time based on a preset display template in the online website.

The preset display template is a user interface template which is pre-established in an online website and is used for displaying component information. The preset presentation template often has at least one region in the online website. Each area of the preset display template can be used for displaying corresponding content to be displayed.

And the terminal displays the preview component, the component description document and the component example code in real time in the online website based on a preset display template in the online website. Specifically, the terminal respectively displays the preview component, the component description document and the component example code in real time in at least one area of a preset display template in the online website. In some embodiments, the component instance code is editable in an area of the preset presentation template. And displaying the edited component example code in real time in the corresponding area of the preset display template.

In the component information display method, the component package of the component to be displayed is obtained from the published remote warehouse package, the component description document corresponding to the component to be displayed and the component example code corresponding to the component to be displayed are obtained in the server of the online website, and the preview component analyzes, executes and generates the component example code based on the component package. Because the component packages of different components can be directly acquired from the published remote warehouse package, the component effects of different components can be previewed in real time without stopping the machine, and the component display efficiency is improved. Meanwhile, the component description document and the component example code are acquired from a server of an online website, and are displayed in real time in an online network, so that the display efficiency of component information is improved.

In one embodiment, as shown in fig. 3, before obtaining the component package of the component to be exhibited from the published remote warehouse package, the method further includes:

s302, responding to the packaging instruction of the object after the local component codes are written, and packaging the local component codes into a component package to be issued through a component scaffold.

The component scaffold is a software development tool for realizing standardized configuration of component codes. Illustratively, component scaffolding can be created using VUE Cli (VUE Command-Line Interface, a Command Line Interface published by the VUE official network). The component scaffold can be used for quickly and automatically packaging the local component codes into the component package to be released. The packaging instruction refers to a packaging instruction for packaging the local component by the scaffold. The native component code is the component code of at least one component written locally by the object. The local component code comprises the component code of the component to be shown.

Specifically, after the object writes the local component codes, after receiving the packaging instruction, the terminal responds to the packaging instruction after the object writes the local component codes, and packages the local component codes into the component package to be issued through the component scaffold.

S304, acquiring the target component package name, the target warehouse package name and the target warehouse package version number which are appointed by the object to be published component package.

The target component package name refers to a unique identifier which is specified by the object for the component package to be issued and is used for distinguishing different component packages. The names of the respective component packages are different. The target repository package name refers to the name of the remote repository package that the object specifies for the component package to be published. The target warehouse package version number refers to the version number of the remote warehouse package specified by the object for the component package to be published. The same remote warehouse package may correspond to a different version number. Specifically, the terminal obtains a target component package name, a target warehouse package name and a target warehouse package version number, which are specified by the object as the component package to be published.

And S306, determining the target remote warehouse package which is consistent with the target warehouse package name and the target warehouse package version number in the remote warehouse.

Wherein, the remote warehouse comprises at least one remote warehouse packet. The target remote warehouse package is a remote warehouse package in the remote warehouse, the name of the target remote warehouse package is consistent with the name of the target warehouse package, and the version number of the target remote warehouse package is consistent with the version number of the target warehouse package. And the terminal determines the target remote warehouse packet which is consistent with the target warehouse packet name and the target warehouse packet version number in the remote warehouse.

S308, judging whether the name of each stored component package in the target remote warehouse package is consistent with the name of the target component package, if not, storing the component package to be released into the target remote warehouse package to obtain the released remote warehouse package.

Wherein the target remote repository package includes at least one stored component package. And the terminal compares the name of each stored component package in the target remote warehouse package with the name of the target component package, so as to judge whether the name of each stored component package in the target remote warehouse package is consistent with the name of the target component package. And under the condition that the name of each stored component package is inconsistent with the name of the target component package, the terminal stores the component package to be issued into the target remote warehouse package to obtain the issued remote warehouse package. The published remote warehouse packages comprise component packages to be published.

In the embodiment, the local component codes are packaged into the component package to be issued through the component scaffold by responding to the packaging instruction after the object writes the local component codes, and the component scaffold is adopted to package the local component codes into the standardized component package, so that the component package is suitable for various software environments, the application range of the component is improved, and the component information display efficiency is improved. The target component package name, the target warehouse package name and the target warehouse package version number which are specified by the object as the component package to be published are obtained, the target remote warehouse package which is consistent with the target warehouse package name and the target warehouse package version number is determined in the remote warehouse, the object can specify the component package to be published to publish the target remote warehouse package stored in the remote warehouse, and the publishing efficiency of the component package to be published is improved. Under the condition that the name of each stored component package in the target remote warehouse package is inconsistent with the name of the target component package, the fact that the target remote warehouse package does not release the component package to be released of the component is indicated, the component package to be released is stored in the target remote warehouse package, the released remote warehouse package is obtained, repeated component packages to be released can be prevented from being released, and therefore the display efficiency of component information is improved.

In one embodiment, the component information presentation method further comprises: and under the condition that the stored component package with the name consistent with that of the target component package exists in the target remote warehouse package, deleting the stored component package with the name consistent with that of the target component package, and storing the component package to be issued into the target remote warehouse package to obtain the issued remote warehouse package.

The terminal obtains the name of each stored component package in the target remote warehouse package. And if the name of any stored component package in the target remote warehouse package is consistent with the name of the target component package, determining that the stored component package consistent with the name of the target component package exists in the target remote warehouse package. And under the condition that the stored component package with the name consistent with that of the target component package exists in the target remote warehouse package, the terminal still needs to release the component to be released to the target remote warehouse package, the terminal deletes the stored component package with the name consistent with that of the target component package in the target remote warehouse package, and stores the component package to be released in the target remote warehouse package to obtain the released remote warehouse package.

In some embodiments, the component package to be published is an updated component package, and the component package before updating is already published in the target remote repository package, and then there is an existing component package in the target remote repository package, which is consistent with the name of the target component package. In this case, the terminal deletes the stored component package in the target remote warehouse package, which is consistent with the target component package in name, and stores the component package to be published in the target remote warehouse package to obtain the published remote warehouse package.

In other embodiments, the terminal deletes an existing component package in the target remote repository package that is consistent with the target component package name. Specifically, the terminal sets the target remote warehouse package to be in a waste state, deletes stored component packages consistent with the target component package in the target remote warehouse package in the waste state, stores the component packages to be published into the target remote warehouse package, and adjusts the state of the target remote warehouse package to be in a publishing state to obtain the published remote warehouse package.

In this embodiment, when an existing component package having a name that is consistent with that of the target component package exists in the target remote warehouse package, the existing component package having the name that is consistent with that of the target component package is deleted, and the component package to be published is stored in the target remote warehouse package, so that the published remote warehouse package is obtained. The component package can be guaranteed to be reissued in the target remote warehouse package, and the component package can be reissued to the target remote warehouse package through updating the component package under the condition that the component codes are modified. The updating iteration of the component is guaranteed to be realized without stopping the machine, the publishing efficiency of the component is improved, and the display efficiency of the component information is improved.

In one embodiment, as shown in fig. 4, obtaining a component package of components to be exposed from a published remote warehouse package comprises:

s402, after the touch operation of the object on the component version selection area on the online website is detected, the version number of the remote warehouse package is displayed.

The component version selection area refers to an independent area on a preset display template of the online website. The component version selection area is used for displaying the version number of the component to be displayed, wherein the version number of the component to be displayed is the version number of the remote warehouse package corresponding to the component to be displayed. And after the terminal detects the touch operation of the object on the component version selection area on the online website, displaying the version number of the remote warehouse package. In some embodiments, a component library of at least one component having the same function.

Illustratively, a button component library refers to a collection of components made up of at least one component having button functionality. The preset display template of the online website further comprises a component library selection area. In some embodiments, the component library selection area is of a combo box type, and the terminal automatically displays at least one component library in a drop-down box of the component library selection area after detecting a touch operation of an object on the component library selection area on the online website. The terminal determines and displays the name of the component library to be displayed after detecting the touch operation of the object on the area corresponding to any one of the at least one component library.

In some embodiments, the component version selection area is a combo box type, and the terminal automatically displays the version number of the remote warehouse package in a drop-down box of the combo box after detecting a touch operation of the object on the component version selection area on the online website. Therefore, the terminal determines the component library to be displayed selected by the object and the version number of the remote warehouse package corresponding to the component library to be displayed.

S404, based on the version number selected by the object, obtaining and displaying each component package under the version number selected by the object.

And the remote warehouse package corresponding to the version number selected by the object comprises at least one component package. After detecting the touch operation of the object on any version number, the terminal determines the version number selected by the object, and automatically displays the name of each component package under the version number in a drop-down box of the version number. And the terminal acquires and displays each component package under the version number selected by the object.

S406, the component package selected by the object is used as the component package of the component to be displayed.

After the terminal detects the touch operation of the object on any combination package in the selected version number, the combination package selected by the object is determined, and the component package selected by the object is used as the component package of the component to be displayed.

In this embodiment, after the touch operation of the object on the component version selection area on the online website is detected, the version number of the remote warehouse package is displayed, so that the version number selected by the object and the component package selected by the object are determined, and the component package selected by the object is used as the component package of the component to be displayed. The components to be displayed in the online website can be flexibly selected according to the requirements of the objects, the version number of the remote warehouse package is selected in the area corresponding to the preset display template, and then the component package under the version number is selected, so that the components to be displayed are determined, the display flexibility of the components to be displayed is improved, and the display efficiency of component information is improved.

In one embodiment, as shown in fig. 5, the real-time presentation of the preview component, the component description document and the component example code in the online website based on the preset presentation template in the online website includes:

s502, determining a component preview area, a document display area and a code display area in the online website based on a preset display template in the online website.

The preset display template in the online website comprises a component preview area, a document display area and a code display area. The terminal determines a component preview area, a document display area and a code display area in a preset display template in an online website.

S504, displaying the real-time display preview component in the component preview area, displaying the component description document in the document display area in real time, and displaying the component example code in the code display area in real time.

The terminal displays the preview component in real time in the component preview area, displays the component description document in real time in the document display area, and displays the component example code in real time in the code display area. Specifically, after the component package selected by the object is determined, the component package of the component to be displayed is determined, the component description document corresponding to the component to be displayed is displayed in the document display area in real time, the component example code corresponding to the component to be displayed is displayed in the code display area in real time, and the preview component corresponding to the component to be displayed is displayed in the component preview area in real time.

In the embodiment, the component preview area, the document display area and the code display area are determined in the preset display template of the online website, the real-time display preview component is displayed in the component preview area, the component description document is displayed in the document display area in real time, the component example code is displayed in the code display area in real time, after the component package selected by the object is determined, the preview component, the component description document and the component example code corresponding to the component to be displayed can be displayed in the corresponding area in real time, and the display efficiency of the component information can be improved.

In one embodiment, as shown in fig. 6, the method for presenting component information further includes:

s602, obtaining the component code obtained by the object through updating the component sample code through the online website.

Wherein the component instance code displayed in the online site can be edited and updated in real time in a code exhibition area in the online site. And the terminal acquires the component code obtained by updating the component sample code by the object through the online website. Specifically, the terminal obtains the updated component code when detecting the touch operation of the object on the code display area in the online website.

S604, analyzing and executing the updated component codes based on the component package, and generating the updated preview component.

The terminal mounts the component package to the system global, and then the global application of the component package can be realized. And the terminal analyzes and executes the updated component codes based on the component package to generate the updated preview component. The updated preview component is the updated component to be displayed, which is obtained after the updated component code is analyzed and executed. The analysis execution method may be to adopt an eval function to perform analysis execution on the updated component code, and generate an updated preview component. The eval function is a function which takes the character string as a parameter and analyzes the character string into JavaScript codes to be executed.

And S606, displaying the updated preview component and the updated component code in real time in the online website based on a preset display template in the online website.

The terminal determines a component preview area and a code display area in a preset display template in an online website, displays the updated preview component in the component preview area in real time, and displays the updated component code in the code display area in real time. When the object updates the component sample code through the online website to obtain the component code, the component description document is not changed. Therefore, the terminal determines a document display area in a preset display template in the online website, and displays the component description document in the document display area in real time.

In this embodiment, the component code obtained by updating the component instance code through the online website by the object is acquired, the updated component code is analyzed and executed based on the component package, the updated preview component is generated, and the updated preview component and the updated component code are displayed in real time in the online website based on a preset display template in the online website. The method and the device can ensure that the update component example code can be edited in the online website, and the preview component corresponding to the updated component code is displayed in real time, so that the effect of the preview component can be displayed in real time while the update component example code is edited by the object, the effect can be realized without stopping the update system, and the display efficiency of the component information is improved.

To explain the method and effect of displaying component information in this embodiment in detail, the following description is made with a most detailed embodiment:

and displaying the application scene aiming at the component information when the front-end component is released. The component information display method is applied to a component information display system. Fig. 7 is a schematic diagram of a component structure of the component information display system. The component information display system comprises a component library module, a component library management module and a component library scaffold module. The component library module comprises at least one component and is used for realizing front-end page business logic rendering and function interaction, developing component codes and providing a reusable component library. The component library scaffold module is associated with the component library module for customizing the component library project template, packaging the component code and publishing to a remote repository and local preview of the component. The component library management module is used for component preview, component release, authority management and component operation.

Specifically, the terminal responds to the packaging instruction of the object after the local component codes are written, and packages the local component codes into the component package to be issued through the component scaffold. And acquiring a target package name, a target warehouse package name and a target warehouse package version number which are specified by the object to be published package. And determining the target remote warehouse packet which is consistent with the target warehouse packet name and consistent with the target warehouse packet version number in the remote warehouse. And judging whether the name of each stored component package in the target remote warehouse package is consistent with the name of the target component package. And if the name of each stored component package in the target remote warehouse package is inconsistent with the name of the target component package, storing the component package to be released into the target remote warehouse package to obtain the released remote warehouse package. And under the condition that the stored component package with the name consistent with that of the target component package exists in the target remote warehouse package, deleting the stored component package with the name consistent with that of the target component package, and storing the component package to be issued into the target remote warehouse package to obtain the issued remote warehouse package. Fig. 8 is a flowchart illustrating a component information displaying method. When the object uses the component information display system for the first time, account registration needs to be performed first. And when the object logs in the component information display system, authority verification is carried out. The object with the common authority only has the functions of increasing, deleting, checking and modifying the components issued by the object or the team to which the object belongs, and meanwhile, the component issued by the object can be endowed with the right for other objects to view and download. The object with administrator rights can audit and manage the components issued by the object with ordinary rights. And after the component is issued, acquiring an auditing result of the object with the administrator authority, and determining that the component is successfully issued under the condition that the auditing result is passed.

And the terminal acquires the component package of the component to be displayed from the published remote warehouse package. Specifically, after detecting the touch operation of an object on a component version selection area on an online website, the terminal displays the version number of the remote warehouse package; acquiring and displaying each component package under the version number selected by the object based on the version number selected by the object; and taking the component package selected by the object as the component package of the component to be shown.

FIG. 9 is a diagram illustrating a component preview interface. And acquiring a component description document corresponding to the component to be displayed and a component example code corresponding to the component to be displayed in a server of the online website. And analyzing and executing the component example code based on the component package to generate a preview component. The terminal determines a component preview area, a document display area and a code display area in a preset display template in an online website. And displaying the real-time display preview component in the component preview area, displaying the component description document in the document display area in real time, and displaying the component example code in the code display area in real time.

In an online website, objects can also edit updated component code in the code presentation area. Specifically, the object is obtained to obtain the component code obtained by updating the component sample code through the online website. And analyzing and executing the updated component codes based on the component package to generate an updated preview component. And the terminal displays the updated preview component in the component preview area in real time, and displays the updated component code in the code display area in real time.

In some embodiments, a component library marketplace module is also included in the online website. And the terminal acquires the component package of the released component and displays the released component in the component library market module. The terminal can obtain the evaluation, collection and suggestion of the object to the component in the component library market module. The personal central unit in the component library duration module displays the components that the object has collected. The publishing of components may be on an individual basis or on a team basis. Aiming at the component issued on behalf of the individual, the terminal can obtain a first basic information modification result of the component of the individual object. The first basic information modification result may be obtained from an edit component library option in a published component library of the personal central unit. And aiming at the component nominally issued by the team, the terminal can acquire a second basic information modification result of the team manager object. The second basic information modification result may be obtained from a team component library of the individual center unit.

In other embodiments, for a component published on behalf of an individual, the terminal may acquire a touch operation of the individual object to publish the component, a new remote warehouse package version number specified by the individual object, a component description document published by the individual object, and an individual object-to-published component example code. For a component released on behalf of a team, the terminal can obtain a touch operation of the team administrator object for releasing the component, a new remote warehouse package version number specified by the team administrator object, a component description document released by the team administrator object, and an example code of the component released by the team administrator object.

In some embodiments, the component package to be published is an updated component package, and the component package before being published is already published in the target remote warehouse package, and then there is a stored component package in the target remote warehouse package which is consistent with the name of the target component package. In this case, the terminal deletes the stored component package in the target remote warehouse package, which is consistent with the target component package in name, and stores the component package to be published in the target remote warehouse package to obtain the published remote warehouse package.

According to the component information display method, the component package of the component to be displayed is obtained from the issued remote warehouse package, the component description document corresponding to the component to be displayed and the component example code corresponding to the component to be displayed are obtained in the server of the online website, and the preview component analyzes, executes and generates the component example code based on the component package. Because the component packages of different components can be directly acquired from the published remote warehouse package, the component effects of different components can be previewed in real time without stopping the machine for acquisition, and the component display efficiency is improved. Meanwhile, the component description document and the component example code are acquired from a server of an online website, and are displayed in real time in an online network, so that the display efficiency of component information is improved. Meanwhile, a third-party platform is not required to be accessed, and real-time preview of component information can be automatically realized. Compared with real-time preview realized by a third-party platform, the method is simple to operate, light in weight, high in response speed, free of manual compiling and running and capable of improving the experience degree of the object. For frequent iterative updating of the components, the object can only upload the updated component package or update the component example code in an online website, and the updating is not required to be stopped, so that the real-time updating effect is realized, and the effect of the updated components can be previewed in real time. Supporting document management of at least one component, the components can be configured personalizedly using examples for easy maintenance and development.

It should be understood that, although the steps in the flowcharts related to the embodiments described above are shown in sequence as indicated by the arrows, the steps are not necessarily performed in sequence as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least a part of the steps in the flowcharts related to the embodiments described above may include multiple steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, and the execution order of the steps or stages is not necessarily sequential, but may be rotated or alternated with other steps or at least a part of the steps or stages in other steps.

Based on the same inventive concept, the embodiment of the application also provides a component information display device for realizing the component information display method. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the method, so the specific limitations in one or more embodiments of the device for displaying component information provided below can be referred to the limitations in the method for displaying component information in the above, and are not described herein again.

In one embodiment, as shown in fig. 10, there is provided a component information presentation apparatus 100 including: a first obtaining module 120, a second obtaining module 140, an executing module 160, and a presentation module 180, wherein:

a first obtaining module 120, configured to obtain a component package of components to be displayed from the published remote warehouse package.

The second obtaining module 140 is configured to obtain, in a server of the online website, a component description document corresponding to the component to be presented and a component example code corresponding to the component to be presented.

And the execution module 160 is configured to parse and execute the component instance code based on the component package, and generate a preview component.

And the display module 180 is used for displaying the preview component, the component description document and the component example code in the online website in real time based on a preset display template in the online website.

According to the component information display device, the component package of the component to be displayed is obtained from the issued remote warehouse package, the component description document corresponding to the component to be displayed and the component example code corresponding to the component to be displayed are obtained in the server of the online website, and the preview component analyzes, executes and generates the component example code based on the component package. Because the component packages of different components can be directly acquired from the published remote warehouse package, the component effects of different components can be previewed in real time without stopping the machine, and the component display efficiency is improved. Meanwhile, the component description document and the component example code are acquired from a server of an online website, and are displayed in real time in an online network, so that the display efficiency of component information is improved.

In one embodiment, before obtaining the component package of the component to be displayed from the published remote warehouse package, the component information displaying apparatus 100 is further configured to: in response to a packaging instruction after the object writes the local component codes, packaging the local component codes into a component package to be issued through a component scaffold; acquiring a target component package name, a target warehouse package name and a target warehouse package version number which are specified by a component package to be issued; determining a target remote warehouse package which is consistent with the target warehouse package name and the target warehouse package version number in the remote warehouse; and judging whether the name of each stored component package in the target remote warehouse package is consistent with the name of the target component package, if not, storing the component package to be released into the target remote warehouse package, and obtaining the released remote warehouse package.

In one embodiment, the component information presentation device 100 is further configured to: and under the condition that the stored component package with the name consistent with that of the target component package exists in the target remote warehouse package, deleting the stored component package with the name consistent with that of the target component package, and storing the component package to be issued into the target remote warehouse package to obtain the issued remote warehouse package.

In one embodiment, in obtaining the component package of the component to be displayed from the published remote warehouse package, the first obtaining module 120 is further configured to: after detecting the touch operation of the object on the component version selection area on the online website, displaying the version number of the remote warehouse package; acquiring and displaying each component package under the version number selected by the object based on the version number selected by the object; and taking the component package selected by the object as the component package of the component to be shown.

In one embodiment, in presenting the preview component, the component description document, and the component instantiation code in real-time in the online website based on a preset presentation template in the online website, the presentation module 180 is further configured to: determining a component preview area, a document display area and a code display area in an online website based on a preset display template in the online website; and displaying the real-time display preview component in the component preview area, displaying the component description document in the document display area in real time, and displaying the component example code in the code display area in real time.

In one embodiment, the component information presentation device 100 is further configured to: acquiring a component code obtained by an object updating the component example code through an online website; analyzing and executing the updated component codes based on the component package to generate an updated preview component; and displaying the updated preview component and the updated component code in real time in the online website based on a preset display template in the online website.

The modules in the component information presentation apparatus described above may be implemented in whole or in part by software, hardware, and a combination thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.

In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as shown in fig. 11. The computer apparatus includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input device. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operating system and the computer program to run on the non-volatile storage medium. The input/output interface of the computer device is used for exchanging information between the processor and an external device. The communication interface of the computer device is used for communicating with an external terminal in a wired or wireless manner, and the wireless manner can be realized through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a component information presentation method. It will be appreciated by those skilled in the art that the configuration shown in fig. 11 is a block diagram of only a portion of the configuration associated with the present application, and is not intended to limit the computing device to which the present application may be applied, and that a particular computing device may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.

In one embodiment, a computer device is provided, comprising a memory and a processor, the memory having a computer program stored therein, the processor implementing the following steps when executing the computer program:

acquiring a component package of a component to be displayed from a published remote warehouse package; acquiring a component description document corresponding to a component to be displayed and a component example code corresponding to the component to be displayed in a server of an online website; analyzing and executing the component example code based on the component package to generate a preview component; and displaying the preview component, the component description document and the component example code in the online website in real time based on a preset display template in the online website.

In one embodiment, the processor, when executing the computer program, further performs the steps of:

in response to a packaging instruction after the object writes the local component codes, packaging the local component codes into a component package to be issued through a component scaffold; acquiring a target component package name, a target warehouse package name and a target warehouse package version number which are specified by a component package to be issued; determining a target remote warehouse package which is consistent with the target warehouse package name and the target warehouse package version number in the remote warehouse; and judging whether the name of each stored assembly package in the target remote warehouse package is consistent with the name of the target assembly package, if not, storing the assembly package to be released into the target remote warehouse package, and obtaining the released remote warehouse package.

In one embodiment, the processor when executing the computer program further performs the steps of:

after the touch operation of the object on the component version selection area on the online website is detected, the version number of the remote warehouse package is displayed; acquiring and displaying each component package under the version number selected by the object based on the version number selected by the object; and taking the component package selected by the object as the component package of the component to be shown.

determining a component preview area, a document display area and a code display area in the online website based on a preset display template in the online website; and displaying the real-time display preview component in the component preview area, displaying the component description document in the document display area in real time, and displaying the component example code in the code display area in real time.

acquiring a component code obtained by an object updating the component example code through an online website; analyzing and executing the updated component codes based on the component package to generate an updated preview component; and displaying the updated preview component and the updated component code in real time in the online website based on a preset display template in the online website.

In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when executed by a processor, performs the steps of:

In one embodiment, the computer program when executed by the processor further performs the steps of:

in response to a packaging instruction after the object writes the local component codes, packaging the local component codes into a component package to be issued through a component scaffold; acquiring a target component package name, a target warehouse package name and a target warehouse package version number which are specified by a component package to be issued; determining a target remote warehouse package which is consistent with the target warehouse package name and the target warehouse package version number in the remote warehouse; and judging whether the name of each stored component package in the target remote warehouse package is consistent with the name of the target component package, if not, storing the component package to be released into the target remote warehouse package, and obtaining the released remote warehouse package.

In one embodiment, a computer program product is provided, comprising a computer program which, when executed by a processor, performs the steps of:

It should be noted that, the user information (including but not limited to user equipment information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, etc.) referred to in the present application are information and data authorized by the user or sufficiently authorized by each party, and the collection, use and processing of the related data need to comply with the relevant laws and regulations and standards of the relevant country and region.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, database, or other medium used in the embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high-density embedded nonvolatile Memory, resistive Random Access Memory (ReRAM), magnetic Random Access Memory (MRAM), ferroelectric Random Access Memory (FRAM), phase Change Memory (PCM), graphene Memory, and the like. Volatile Memory can include Random Access Memory (RAM), external cache Memory, and the like. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM), for example. The databases referred to in various embodiments provided herein may include at least one of relational and non-relational databases. The non-relational database may include, but is not limited to, a block chain based distributed database, and the like. The processors referred to in the various embodiments provided herein may be, without limitation, general purpose processors, central processing units, graphics processors, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, or the like.

The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.

The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is specific and detailed, but not construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, and these are all within the scope of protection of the present application. Therefore, the protection scope of the present application shall be subject to the appended claims.

Claims

1. A method for displaying component information, the method comprising:

2. The method of claim 1, wherein prior to obtaining the package of components for the component to be displayed from the published remote warehouse package, the method further comprises:

acquiring a target component package name, a target warehouse package name and a target warehouse package version number which are specified by the component package to be issued;

determining a target remote warehouse package in the remote warehouse, wherein the target remote warehouse package is consistent with the target warehouse package name and consistent with the target warehouse package version number;

and judging whether the name of each stored component package in the target remote warehouse package is consistent with the name of the target component package, if not, storing the component package to be issued into the target remote warehouse package to obtain the issued remote warehouse package.

3. The method of claim 2, further comprising:

4. The method of claim 1, wherein obtaining the package of components to be displayed from the published remote warehouse package comprises:

5. The method according to claim 1, wherein the presenting the preview component, the component description document and the component instance code in the online website in real time based on a preset presentation template in the online website comprises:

and displaying the preview component in real time in a component preview area, displaying the component description document in real time in a document display area, and displaying the component example code in real time in a code display area.

6. The method according to any one of claims 1-5, further comprising:

acquiring a component code obtained by an object updating the component example code through the online website;

and displaying the updated preview component and the updated component code in the online website in real time based on a preset display template in the online website.

7. A component information presentation device, the device comprising:

8. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor, when executing the computer program, implements the steps of the method of any of claims 1 to 6.

9. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 6.

10. A computer program product comprising a computer program, characterized in that the computer program, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 6.