WO2018176814A1

WO2018176814A1 - Personalized component implementation method and device

Info

Publication number: WO2018176814A1
Application number: PCT/CN2017/107053
Authority: WO
Inventors: 刘富龙; 陈少杰; 张文明
Original assignee: 武汉斗鱼网络科技有限公司
Priority date: 2017-03-30
Filing date: 2017-10-20
Publication date: 2018-10-04
Also published as: CN107133029A

Abstract

A personalized component implementation method and device. The method comprises: customizing a personalized component interface, and providing the personalized component interface for a user by exposing an API (S301); receiving, by means of the personalized component interface, a component content code input by the user (S302); and performing compiling processing on the component content code to obtain a personalized component corresponding to the component content code input by the user (S303). The method and device can improve the efficiency of constructing a personalized page and website.

Description

Personalized component realization method and device

Technical field

The present invention relates to the field of Internet technologies, and in particular, to a method and an apparatus for implementing a personalized component.

Background technique

With the development of the Internet, various websites such as portal websites, e-commerce websites, and live broadcast websites have emerged in an endless stream. The rapid development of various types of company business has resulted in a large number of activity topic pages for attracting corporate users. Many companies have proposed self-help. Construction platform. In a self-service platform, component developers provide tools (templates or components) to the platform. Activity profile page developers can quickly develop high-quality event profiles based on the tools (templates or components) provided.

However, because the business requirements are more flexible, the components provided by the platform are based on the existing component libraries and common abstract components, which makes it impossible to build personalized pages.

If you want to build a personalized page, you need to research and develop it. Component developers need to develop a personalized component when it is not abstracted into common components for individual needs. Personalized components are often not reused for other needs or individual needs. The development time is high and the flexibility of the platform is poor.

Summary of the invention

In view of the above problems, the present invention has been made in order to provide a method and apparatus for implementing a personalized component that overcomes the above problems or at least partially solves the above problems.

According to an aspect of the present invention, a personalized component implementation method is provided, including: customizing a component interface, and providing a personalized component interface to a user by exposing an API; and receiving a user input component through a personalized component interface Content code; compiles the component content code to obtain a personalized component corresponding to the component content code input by the user.

Preferably, the personalized component interface includes one or more of an HTML interface, a CSS interface, and a Javascript interface; the component content code includes one or more of HTML code, CSS code, and Javascript code.

Preferably, the method further comprises: scrambling the component content code input by the user into an unordered character string, thereby performing confusion confusion on the component content code; and using an encoding algorithm to perform encoding operation on the obfuscated data.

Preferably, the method further comprises: storing the encoded data into a database, and, when generating the page, extracting the data content from the database and performing decoding processing.

Preferably, the method further comprises: performing an exception capture on the component content code input by the user; and removing the code having the exception from the component content code.

According to another aspect of the present invention, a personalized component implementing apparatus is further provided, including: a personalized component interface unit, configured to customize a personalized component interface, and provide a personalized component interface to the user by exposing an API; The code obtaining unit is configured to receive the component content code input by the user through the personalized component interface, and the encoding processing unit is configured to compile the component content code to obtain a personalized component corresponding to the component content code input by the user.

Preferably, the device further includes: a confusion scrambling processing unit, scrambling the component content code input by the user into an unordered character string, thereby performing confusion confusion on the component content code; wherein the encoding processing unit is configured to Confusing the disturbed data using an encoding algorithm for encoding operations.

Preferably, the device further includes: the decoding processing unit is configured to: when generating the page, extract the data content from the database pre-stored with the encoded data and perform decoding processing.

Preferably, the device further comprises: an exception capture unit configured to perform an exception capture on the component content code input by the user; and, culling the code having the exception from the component content code.

It can be seen that the embodiment of the present invention implements a solution by using a personalized component, which enables a page developer to directly input component code, and create a new personalized component (that is, a general abstract component that the platform cannot provide) anytime and anywhere, which can effectively reduce the developer's The cost of communication between the two can increase the efficiency of building a self-service platform.

The above description is merely an overview of the technical solutions of the present invention, and can be implemented in accordance with the contents of the specification in order to more clearly understand the technical means of the present invention, and in order to achieve the above and other objects of the present invention, The features and advantages are more apparent and understood, and specific embodiments of the invention are described below.

DRAWINGS

Various other advantages and benefits will become apparent to those skilled in the art from a The drawings are only for the purpose of illustrating the preferred embodiments and are not to be construed as limiting. Throughout the drawings, the same reference numerals are used to refer to the same parts. In the drawing:

FIG. 1 is a flowchart of a personalized page generation method according to an embodiment of the present invention;

FIG. 2 is a schematic diagram of a method for generating a personalized page according to an embodiment of the present invention; FIG.

FIG. 3 is a flowchart of a method for implementing a personalized component according to an embodiment of the present invention;

FIG. 4 is a schematic structural diagram of a personalized page generating apparatus according to an embodiment of the present invention;

FIG. 5 is a schematic structural diagram of a personalized component implementing apparatus according to an embodiment of the present invention.

detailed description

Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While the embodiments of the present invention have been shown in the drawings, the embodiments Rather, these embodiments are provided so that this disclosure will be more fully understood and the scope of the disclosure will be fully disclosed.

In order to solve the problem that the existing self-service website platform cannot meet the requirements of individualization, the present invention provides a personalized page generation method, which can effectively reduce the communication cost between developers and enhance self-service. The construction efficiency of the platform.

FIG. 1 is a flowchart of a method for generating a personalized page according to an embodiment of the present invention, where the method includes steps S101-S104.

S101: Providing a personalized component interface to the user, and receiving the component content code input by the user through the personalized component interface.

Those skilled in the art understand that any functional component is composed of HTML, CSS, and JavaScript. Among them, you can write different content of components for different code: HTML (Hyper Text Markup Language, hypertext markup language): used to write the structure of components; CSS (Cascading Style Sheets): used to write the style of components; Javascript: used to write the behavior of components.

Accordingly, in a preferred form, the personalization component interface includes one or more of an HTML interface, a CSS interface, and a Javascript interface; the component content code includes one or more of HTML code, CSS code, and Javascript code. It can be seen that, in the solution of the present invention, the personalized component provided can enable the user (page developer) to arbitrarily input HTML, CSS, and JavaScript. The page developer can use any of the personalized components provided by the present invention to perform any function development, and is not limited to the existing components of the self-service website platform.

Based on such a scheme, the present invention aims to provide other functional components while the self-service platform is provided, and only needs to provide a personalized component (custom component), the content of the component (ie, the HTML code of the input component, CSS code). , JavaScript code) are written by the activity topic page developers, you can temporarily complete a custom personalized component. Because of the non-reusability of personalized components, component developers are not required to re-develop personalized components, and only the active topic page developers use custom code to customize the individual requirements.

Providing a personalized component interface to the user can be achieved by exposing the API, for example, exposing three interfaces that are custom input and configured by the active feature page developer; in one specific example, three available feature pages The interfaces configured by the developer are: HTML interface, CSS interface, and JavaScript interface. Because each platform exposes component API interfaces in different ways, this article does not specifically limit this.

If all the custom code input by the developer is directly rendered to the page, it is risky. If any error occurs, it is likely to affect the execution result of the website. Based on this risk, the code needs to be captured for exception before it is subsequently decompiled and output to the page. Therefore, in a preferred manner, during the process of receiving the component content code input by the user through the personalized component interface, the component content code may be abnormally captured, and the abnormal code may be culled, thereby improving the accuracy of the code subsequent processing.

For example, for JavaScript code, there is a need for exception catching. Because, when the browser renders the page, it is a single-threaded loading page. When the user's code is rendered to the page, if the user's code input is wrong, the thread is blocked, and the page cannot be loaded normally, which will affect the self-service. The other functions of the platform are working, so you need to catch it abnormally, that is, when the developer enters the code, When there is an error. Intercept it so that it doesn't affect the operation of other functions. For example, you can use the try{}catch(e){} method provided by all major browser vendors to render the code input by the developer to try{ In the user code} module, if the code in try{} reports an error, the browser will intercept it and input the error message into catch(e){error message}. ), specifically, the following code can be used to achieve exception capture.

S102: Encode the component content code, and store the processed data content into a database.

In a preferred manner, in order to avoid the potential danger of attacking the script, the component content code input by the user may be scrambled into an unordered string to confuse the component content code; and the encoding algorithm is used to confuse the scrambled data. Perform the encoding operation.

This is because the user input contains HTML code, CSS code, and/or JavaScript code, and its data structure is more complicated than normal configuration parameters, except for special characters that contain data models and databases that are difficult to recognize (such as ":" In addition to "'", "/", "|", "\", "space", additional attack scripts may be included. If the script entered by the developer is the code used to affect the database, the relevant code input by the developer may not be saved in the database. To be safe, the code input by the developer needs to be confused.

In order to avoid affecting the preservation of the database, all content needs to be confused and disturbed. The so-called confusion disruption, that is, all the code input by the developer, upset into an unordered string, the database will only treat the code entered by the developer as an invalid string, the string will not produce any behavior that affects the database.

For example, you can use the native function encodeURIComponent() that comes with JavaScript for obfuscation and encoding.

An example is as follows:

SetState({

Html:encodeURIComponent(htmlStr)

});

The principles of CSS and JavaScript are the same as above.

Among them, SetState is a general method provided by JavaScript to save to the database. htmlStr: Here is the html code entered by the user.

S103: Extract the data content from the database and perform decoding processing.

When the HTML code, CSS code, and/or JavaScript code is taken out of the database and output to the page, because it has been encoded during the save process, if you directly input to the page, there will be no effect display, but a Heap garbled. Therefore, when extracting the data content, it is necessary to use a corresponding decoding method to decode (decompile) the data. For example, if you used to compile with the native encoding function encodeURIComponent() provided by JavaScript, you need to decompile with the corresponding decoding function decodeURIComponent().

S104: Render the decoded data content to the page to obtain a personalized page corresponding to the component content code input by the user.

Rendering the decompiled data content to the page presents a custom effect of the code entered by the developer.

Referring to FIG. 2, it is a schematic diagram corresponding to an example of the method of FIG. 1. In Figure 2, the user is first provided with a personalized component interface by exposing the API; then, the component content code input by the user is received through the personalized component interface, ie, the HTML code, the CSS code, and/or the JavaScript code are obtained; and then, the HTML is The code, CSS code, and/or JavaScript code are encoded and stored in the database; when the page is to be generated, the HTML code, CSS code, and/or JavaScript code are taken out for pre-rendering, and the fetched code is decoded; finally, the code is decoded The rendered data is rendered to the page to present a personalized page.

A typical application scenario of the solution of the present invention is: when a web developer uses a self-service website to build a platform, a simple topic page can be quickly constructed, but when it is encountered with more complicated or with the background In order to interact with some activity topic pages of data, the general self-service platform can't solve this problem. Generally, page developers and platform developers need to negotiate. How to provide platform developers with a special component to complete the construction of complex topic pages is a technical requirement. However, in the prior art, usually, such a special component cannot be abstracted and universally used, that is, it cannot be reused to other functions, and during the development, some communication costs, development costs of the platform developer, unnecessary operating costs, and the like are generated. If the platform developer provides a personalized component such as the one provided by the present invention, then when the page developer encounters a page building function that cannot be completed by the self-service website, the page developer can use the personalized component to quickly develop the desired one. Realize the functions, thus effectively reducing the related research and development costs.

It can be seen that the personalized page generation solution can enable the page developer to directly input the component code, and create a new personalized component (that is, a general abstract component that the platform cannot provide) anytime and anywhere, which can effectively reduce the developer's The cost of communication between the two can increase the efficiency of building a self-service platform.

The embodiment of the invention further provides a method for implementing a personalized component.

Referring to FIG. 3, a flowchart of a method for implementing a personalized component according to an embodiment of the present invention includes steps S301-S303.

S301: Customize the component interface and provide a personalized component interface to the user by exposing the API.

Those skilled in the art understand that any functional component is composed of HTML, CSS, and JavaScript. Specifically, you can write different components of the component for different code: HTML (Hyper Text Markup Language): used to write the structure of the component; CSS (Cascading Style Sheets): used to write the style of the component; Javascript: The behavior of writing components.

Based on this scheme, the present invention aims to provide the same functional components of the self-service platform. In addition, you only need to provide a personalized component (personalized component). The content of the component (that is, the HTML code of the input component, CSS code, JavaScript code) is written by the activity profile page developer, which can be temporarily fast. Complete a custom personalized component. Because of the non-reusability of personalized components, component developers are not required to re-develop personalized components, and only the active topic page developers use custom code to customize the individual requirements.

S302: Receive a component content code input by a user through a personalized component interface;

For example, for JavaScript code, there is a need for exception catching. Because, when the browser renders the page, it is a single-threaded loading page. When the user's code is rendered to the page, if the user's code input is wrong, the thread is blocked, and the page cannot be loaded normally, which will affect the self-service. The other functions of the platform are running, so you need to capture them abnormally, that is, when the code entered by the developer is reported. Intercept it so that it doesn't affect the operation of other functions. For example, you can use the try{}catch(e){} method provided by all major browser vendors to render the code input by the developer to try{ In the user code} module, if the code in try{} reports an error, the browser will intercept it and input the error message into catch(e){error message}. ), specifically, the following code can be used to achieve exception capture.

S303: Compile and process the component content code to obtain a personalized component corresponding to the component content code input by the user.

An example is as follows:

SetState({

Html:encodeURIComponent(htmlStr)

});

The principles of CSS and JavaScript are the same as above.

In a preferred manner, after the component content code is compiled and processed to obtain the personalized component, the method further comprises: storing the encoded data into the database, and, when generating the page, extracting and decoding the data content from the database. deal with.

This is because, when the HTML code, CSS code, and/or JavaScript code is taken out of the database and output to the page, since it has been encoded during the save process, if it is directly input to the page, there will be no effect display. Instead, there will be a bunch of garbled characters. Therefore, when extracting the data content, it is necessary to use a corresponding decoding method to decode (decompile) the data. For example, if you used to compile with the native encoding function encodeURIComponent() provided by JavaScript, you need to decompile with the corresponding decoding function decodeURIComponent().

Finally, the decoded data content is rendered to the page, resulting in a personalized page corresponding to the component content code entered by the user. Rendering the decompiled data content to the page presents a custom effect of the code entered by the developer.

Corresponding to the method of FIG. 1, the present invention also provides a personalized page generating apparatus. Referring to FIG. 4, it is a schematic structural diagram of a personalized page generating apparatus. The device includes:

The code obtaining unit 401 is configured to provide a personalized component interface to the user, and receive the component content code input by the user through the personalized component interface;

The encoding processing unit 402 is configured to perform encoding processing on the component content code, and store the processed data content into a database;

a decoding processing unit 403, configured to take out data content from a database, and perform decoding processing;

The rendering unit 404 is configured to render the decoded data content to the page to obtain a personalized page corresponding to the component content code input by the user.

Preferably, the apparatus further includes: a confusion scrambling processing unit 405, scrambling the component content code input by the user into an unordered character string, thereby performing confusion confusion on the component content code; wherein the encoding processing unit 402 is configured to: The encoding algorithm is used to encode the data after the confusion is disturbed.

Preferably, the decoding processing unit 403 is specifically configured to perform a decoding operation on the data content extracted from the database by using a decoding algorithm corresponding to the encoding algorithm.

Preferably, the apparatus further includes: an exception capture unit 406 for performing an exception capture on the component content code input by the user; and removing the code having the exception from the component content code.

Corresponding to the method of FIG. 3, the present invention also provides a personalized component implementing apparatus. Referring to FIG. 5, a structural diagram of a device for implementing a personalized component is shown. The device includes:

The personalization component interface unit 501 is configured to customize the personalized component interface, and provide a personalized component interface to the user by exposing the API;

The code obtaining unit 502 is configured to receive, by using the personalized component interface, a component content code input by the user;

The encoding processing unit 503 is configured to perform a compiling process on the component content code to obtain a personalized component corresponding to the component content code input by the user.

Preferably, the apparatus further includes: a confusion scrambling processing unit 504, scrambling the component content code input by the user into an unordered character string, thereby performing confusion confusion on the component content code; wherein the encoding processing unit 503 is configured to: The encoding algorithm is used to encode the data after the confusion is disturbed.

Preferably, the decoding processing unit 505 is specifically configured to: when generating the page, extract the data content from the database pre-stored with the encoded data and perform decoding processing.

Preferably, the device further comprises: an exception capture unit 506 for performing an exception capture on the component content code input by the user; and removing the code with the exception from the component content code.

The algorithms and displays provided herein are not inherently related to any particular computer, virtual system, or other device. Various general purpose systems can also be used with the teaching based on the teachings herein. The structure required to construct such a system is apparent from the above description. Moreover, the invention is not directed to any particular programming language. It is to be understood that the invention may be embodied in a variety of programming language, and the description of the specific language has been described above in order to disclose the preferred embodiments of the invention.

The various component embodiments of the present invention may be implemented in hardware, or in a software module running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that a microprocessor or digital signal processor (DSP) may be used in practice to implement some or all of the functionality of some or all of the components of the user morphing control system in accordance with embodiments of the present invention. The invention can also be implemented as a device or device program (e.g., a computer program and a computer program product) for performing some or all of the methods described herein. Such a program implementing the invention may be stored on a computer readable medium or may be in the form of one or more signals. Such signals may be downloaded from an Internet website, provided on a carrier signal, or provided in any other form.

It is to be noted that the above-described embodiments are illustrative of the invention and are not intended to be limiting, and that the invention may be devised without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as a limitation. The word "comprising" does not exclude the presence of the elements or steps that are not recited in the claims. The word "a" or "an" The invention can be implemented by means of hardware comprising several distinct elements and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means can be embodied by the same hardware item. The use of the words first, second, and third does not indicate any order. These words can be interpreted as names.

Claims

A personalized component implementation method, comprising:

Customize the component interface and provide the user with a personalized component interface by exposing the API;

Receiving a component content code input by a user through a personalized component interface;

The component content code is compiled and processed to obtain a personalized component corresponding to the component content code input by the user.
The method of claim 1 wherein said personalization component interface comprises one or more of an HTML interface, a CSS interface, and a Javascript interface; said component content code comprising HTML code, CSS code, and Javascript code One or more.
The method of claim 1 further comprising:

Disrupting the component content code by scrambling the component content code input by the user into an unordered string;

The encoding algorithm is used to encode the data after the confusion is disturbed.
The method of claim 3, further comprising:

The encoded data is stored in the database, and when the page is generated, the data content is taken out from the database and decoded.
The method of any of claims 1-4, wherein the method further comprises:

Abnormal capture of the component content code entered by the user;

An exception code is removed from the component content code.
A personalized component implementation device, comprising:

A personalized component interface unit for customizing the component interface and providing a personalized component interface to the user by exposing the API;

a code obtaining unit, configured to receive a component content code input by a user through a personalized component interface;

The encoding processing unit is configured to compile the component content code to obtain a personalized component corresponding to the component content code input by the user.
The apparatus of claim 6, wherein the personalization component interface comprises one or more of an HTML interface, a CSS interface, and a Javascript interface; the component content code comprises HTML code, CSS code, and Javascript code. One or more.
The device according to claim 6, wherein the device further comprises: a confusion scrambling processing unit that scrambles the component content code input by the user into an unordered character string, thereby performing confusion confusion on the component content code; The encoding processing unit is configured to perform an encoding operation by using an encoding algorithm on the data after the confusion is disturbed.
The device according to claim 8, wherein the device further comprises: the decoding processing unit is configured to: when generating the page, extract the data content from the database pre-stored with the encoded data and perform decoding processing.
The apparatus according to any one of claims 6 to 9, wherein the apparatus further comprises: an exception capturing unit configured to perform an exception capture on a component content code input by the user; and, culling from the component content code Exceptional code.