CN107085515A - 个性化页面生成方法及装置 - Google Patents

Abstract

本发明公开了一种个性化页面生成方法及装置，其中的方法包括：向用户提供个性化组件接口，并通过所述个性化组件接口接收用户输入的组件内容代码；对所述组件内容代码进行编码处理，并将处理过的数据内容存入到数据库；从数据库中取出数据内容，并进行解码处理；将解码的数据内容渲染至页面，得到与用户输入的组件内容代码对应的个性化页面。本发明可以提高构建个性化页面及网站的效率。

Description

个性化页面生成方法及装置

技术领域

本发明涉及互联网技术领域，具体涉及个性化页面生成方法及装置。

背景技术

随着互联网的发展，门户网站、电子商务网站、直播网站等各类网站层出不穷，各类公司业务的迅速发展，随之产生了大量活动专题页面的需求用于吸引公司用户，许多公司提出了自助式的建站平台。在自助式建站平台中，组件开发人员向平台提供工具(模板或组件)。活动专题页开发人员可根据提供的工具(模板或组件)，快速的开发出质量较高的活动专题页。

但是由于业务需求较灵活，而平台所提供的组件都是基于已有的组件库及可通用的抽象组件，从而导致无法搭建个性化的页面。

如果要搭建个性化页面，需要平台开发人员调研并开发。针对个性化的需求，不能够抽象为普通组件时，需要组件开发人员开发一种个性化组件。而个性化组件，通常又不能复用于其他需求或个性化需求。开发时间成本较高，并导致建站平台的灵活性较差。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的个性化页面生成方法及装置。

依据本发明的一个方面，提供一种个性化页面生成方法，包括：向用户提供个性化组件接口，并通过所述个性化组件接口接收用户输入的组件内容代码；对所述组件内容代码进行编码处理，并将处理过的数据内容存入到数据库；从数据库中取出数据内容，并进行解码处理；将解码的数据内容渲染至页面，得到与用户输入的组件内容代码对应的个性化页面。

优选的，所述个性化组件接口包括HTML接口、CSS接口和Javascript接口中的一个或多个；所述组件内容代码包括HTML代码、CSS代码和Javascript代码中的一种或多种。

优选的，将用户输入的组件内容代码打乱成无序的字符串，从而对组件内容代码进行混淆扰乱；对混淆扰乱后的数据采用编码算法进行编码操作。

优选的，对从数据库中取出的数据内容进行解码处理，包括：对于从数据库中取出的数据内容，采用与所述编码算法对应的解码算法进行解码操作。

优选的，所述方法还包括：对用户输入的组件内容代码进行异常捕获；从所述组件内容代码中剔除有异常的代码。

依据本发明的另一方面，还提供一种个性化页面生成装置，包括：代码获取单元，用于向用户提供个性化组件接口，并通过所述个性化组件接口接收用户输入的组件内容代码；编码处理单元，用于对所述组件内容代码进行编码处理，并将处理过的数据内容存入到数据库；解码处理单元，用于从数据库中取出数据内容，并进行解码处理；渲染单元，用于将解码的数据内容渲染至页面，得到与用户输入的组件内容代码对应的个性化页面。

优选的，所述个性化组件接口包括HTML接口、CSS接口和Javascript接口中的一个或多个；所述组件内容代码包括HTML代码、CSS代码和Javascript代码中的一种或多种。

优选的，所述装置还包括：混淆扰乱处理单元，将用户输入的组件内容代码打乱成无序的字符串，从而对组件内容代码进行混淆扰乱；其中，所述编码处理单元，用于对混淆扰乱后的数据采用编码算法进行编码操作。

优选的，所述解码处理单元具体用于，对于从数据库中取出的数据内容，采用与所述编码算法对应的解码算法进行解码操作。

优选的，所述装置还包括：异常捕获单元，用于对用户输入的组件内容代码进行异常捕获；以及，从组件内容代码中剔除有异常的代码。可见，本发明通过。

可见，本发明实施例通过个性化页面生成方案，可以使得页面开发人员直接输入组件代码，随时随地的创建新个性化组件(即平台无法提供的通用抽象组件)，不但能够有效的降低开发人员之间的沟通成本，并且可以提升自助式建站平台的构建效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明的一个实施例提供的个性化页面生成方法流程图；

图2示出了根据本发明一个实施例提供的个性化页面生成方法示意图；

图3示出了根据本发明的一个实施例提供的个性化组件实现方法流程图；

图4示出了根据本发明的一个实施例提供的个性化页面生成装置结构示意图；

图5示出了根据本发明的一个实施例提供的个性化组件实现装置结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

为了解决现有的自助式建站平台中，当遇到个性化需求无法快速搭建页面的问题，本发明提供一种个性化页面生成方法，能够有效的降低开发人员之间的沟通成本，提升自助式建站平台的构建效率。

参见图1，为本发明实施例提供的一种个性化页面生成方法流程图，该方法包括步骤S101-S104。

S101：向用户提供个性化组件接口，并通过个性化组件接口接收用户输入的组件内容代码。

本领域技术人员了解，任何功能组件都是由HTML,CSS,JavaScript构成。其中，具体可以针对不同代码编写组件的不同内容：HTML(Hyper Text Markup Language，超文本标记语言):用于编写组件的结构；CSS(Cascading Style Sheets):用于编写组件的样式；Javascript:用于编写组件的行为。

因此，在一种优选方式中，个性化组件接口包括HTML接口、CSS接口和Javascript接口中的一个或多个；组件内容代码包括HTML代码、CSS代码和Javascript代码中的一种或多种。可见，本发明方案中，提供的个性化组件可以使得用户(页面开发者)任意输入HTML、CSS、JavaScript。页面开发者使用本发明提供的个性化组件，可以完成任意功能开发，不受限于自助式建站平台的现有组件。

基于此种方案下，本发明旨在自助式建站平台提供了其他功能组件的同时，只需另外提供一种个性化组件(自定义组件)，组件的内容(即输入组件的HTML代码、CSS代码、JavaScript代码)皆由活动专题页开发人员自行配置编写，即可临时的快速的完成一个自定义的个性化组件。因为个性化组件的不可复用性，无须组件开发人员进行重新开发个性化组件，只需要活动专题页开发人员使用自定义代码，即可完成个性化需求的定制。

向用户提供个性化组件接口，可通过暴露API的方式实现，例如，暴露出三个接口，接口由活动专题页开发人员自定义输入并配置；在一个具体例子中，三个可供活动专题页开发人员配置的接口分别为：HTML接口，CSS接口，JavaScript接口。因为每个平台暴露组件API接口的方式各不相同，本文对此不作具体限制。

如果将开发人员输入的所有自定义代码直接渲染至页面上，是有风险的，如果出现任何报错，很有可能影响建站平台执行结果。基于此种风险，需要在对代码进行后续的反编译输出至页面上之前，对其进行异常捕获。因此，在一个优选方式中，通过个性化组件接口接收用户输入的组件内容代码过程中，可以对组件内容代码进行异常捕获，并将异常代码剔除掉，从而提高代码后续处理的准确度。

例如，对于JavaScript代码，更有必有进行异常捕获。因为，浏览器在渲染页面时，是单线程的加载页面，在将用户的代码渲染至页面时，如果用户的代码输入有误，线程产生阻塞，导致页面无法正常加载，便会影响到自助式建站平台的其他功能运转，所以要对其进行异常捕获，即当开发者输入的代码，有报错时。将其拦截，让其不至于影响到其他功能的运转，例如，在此可以使用各大浏览器厂商统一提供的try{}catch(e){}方法，将开发者输入的代码渲染至try{用户代码}模块中，如果try{}中的代码报错，那么浏览器就会将其拦截，并将报错信息输入到catch(e){报错信息}中。)，具体的，可以采用下述代码来实现异常捕获。

Try{

{{#js}}

}catch(e){

Console.log(‘当前输入的自定义代码有误，详情如下：’，e)

}

S102:对组件内容代码进行编码处理，并将处理过的数据内容存入到数据库。

在一种优选方式中，为了避免攻击脚本的潜在危险，可以将用户输入的组件内容代码打乱成无序的字符串，从而对组件内容代码进行混淆扰乱；对混淆扰乱后的数据采用编码算法进行编码操作。

这是因为，用户输入的内容，包含了HTML代码、CSS代码和/或JavaScript代码，其数据结构较普通的配置参数更为复杂，除了包含数据模型和数据库难以识别的特殊字符(例如“：”、“’”、“/”、“|”、“\”、“空格”)外，可能包含额外攻击脚本。如果开发者输入的脚本是用来影响数据库的代码，可能在数据库里无法将开发者输入的相关代码进行有效保存，为了保险起见，需要将开发者输入的代码进行混淆处理。

为了避免影响数据库的保存，需要将所有内容进行进行混淆扰乱。所谓混淆扰乱，即将开发者输入的所有代码，打乱成无序的字符串，数据库只会将开发者输入的代码当成无效的字符串来处理，字符串不会产生任何影响到数据库的行为。

例如，可以使用JavaScript自带的原生函数encodeURIComponent()进行混淆处理及编码。

示例如下:

SetState({

Html:encodeURIComponent(htmlStr)

})；

CSS和JavaScript保存原理同上。

其中，SetState是JavaScript提供的一个保存至数据库的通用方法。htmlStr：在此表示用户输入的html代码。

S103:从数据库中取出数据内容，并进行解码处理。

在将HTML代码、CSS代码和/或JavaScript代码从数据库中取出并输出到页面时，因为在保存过程时已经将其编码，如果直接输入至页面，将不会有任何效果展示，反而会出现一堆乱码。所以在取出数据内容时，需要采用相对应的解码方法，来对数据进行解码(反编译)。例如，如果之前是使用的JavaScript提供的原生编码函数encodeURIComponent()进行的编译，这里就需要使用对应的解码函数decodeURIComponent()进行反编译。

S104:将解码的数据内容渲染至页面，得到与用户输入的组件内容代码对应的个性化页面。

将反编译的数据内容渲染至页面，即可呈现出开发人员所输入代码的自定义效果。

参见图2，为图1方法一个示例所对应的示意图。图2中，首先通过暴露API的方式向用户提供个性化组件接口；然后，通过个性化组件接口接收用户输入的组件内容代码，即得到HTML代码、CSS代码和/或JavaScript代码；继而，对HTML代码、CSS代码和/或JavaScript代码进行编码后存入数据库；当要生成页面时，取出HTML代码、CSS代码和/或JavaScript代码准备预渲染，并对取出的代码进行解码处理；最后，将解码的数据渲染至页面，即可呈现出个性化页面。

本发明方案的一种典型应用场景为：页面开发者在使用自助式建站平台时，遇到简单专题页可以进行快速的搭建，但是当遇到与较复杂或者与后台需要交互数据的一些活动专题页，一般的自助式建站平台就无法解决这种问题，一般需要页面开发者与平台开发者，进行协商。如何向平台开发者提供一种特殊组件来完成复杂专题页的搭建，则是一个技术需求。但是现有技术中，通常这种特殊组件无法进行抽象通用，即不能够复用到其他功能，而且，开发期间则会产生一些沟通成本及平台开发者的开发成本，不必要的运营成本等。如果平台开发者提供了诸如本发明文案提供的个性化组件，那么页面开发者在遇到自助式建站平台无法完成的页面搭建功能时，就可以自己使用个性化组件，快速的开发出自己想要实现的功能，从而有效的降低相关的研发成本。

可见，本发明实施例通过个性化页面生成方案，可以使得页面开发人员直接输入组件代码，随时随地的创建新个性化组件(即平台无法提供的通用抽象组件)，不但能够有效的降低开发人员之间的沟通成本，并且可以提升自助式建站平台的构建效率。

本发明实施例还提供一种个性化组件的实现方法。

参考图3，为根据本发明的一个实施例提供的个性化组件实现方法流程图，该方法包括步骤S301-S303。

S301：自定义个性化组件接口，并通过暴露API的方式，向用户提供个性化组件接口。

本领域技术人员了解，任何功能组件都是由HTML,CSS,JavaScript构成。其中，具体可以针对不同代码编写组件的不同内容：HTML(Hyper Text Markup Language，超文本标记语言):用于编写组件的结构；CSS(Cascading Style Sheets):用于编写组件的样式；Javascript:用于编写组件的行为。

因此，在一种优选方式中，个性化组件接口包括HTML接口、CSS接口和Javascript接口中的一个或多个；组件内容代码包括HTML代码、CSS代码和Javascript代码中的一种或多种。可见，本发明方案中，提供的个性化组件可以使得用户(页面开发者)任意输入HTML、CSS、JavaScript。页面开发者使用本发明提供的个性化组件，可以完成任意功能开发，不受限于自助式建站平台的现有组件。

基于此种方案下，本发明旨在自助式建站平台提供了其他功能组件的同时，只需另外提供一种个性化组件(个性化组件)，组件的内容(即输入组件的HTML代码、CSS代码、JavaScript代码)皆由活动专题页开发人员自行配置编写，即可临时的快速的完成一个自定义的个性化组件。因为个性化组件的不可复用性，无须组件开发人员进行重新开发个性化组件，只需要活动专题页开发人员使用自定义代码，即可完成个性化需求的定制。

向用户提供个性化组件接口，可通过暴露API的方式实现，例如，暴露出三个接口，接口由活动专题页开发人员自定义输入并配置；在一个具体例子中，三个可供活动专题页开发人员配置的接口分别为：HTML接口，CSS接口，JavaScript接口。因为每个平台暴露组件API接口的方式各不相同，本文对此不作具体限制。

S302：通过个性化组件接口接收用户输入的组件内容代码；

如果将开发人员输入的所有自定义代码直接渲染至页面上，是有风险的，如果出现任何报错，很有可能影响建站平台执行结果。基于此种风险，需要在对代码进行后续的反编译输出至页面上之前，对其进行异常捕获。因此，在一个优选方式中，通过个性化组件接口接收用户输入的组件内容代码过程中，可以对组件内容代码进行异常捕获，并将异常代码剔除掉，从而提高代码后续处理的准确度。

例如，对于JavaScript代码，更有必有进行异常捕获。因为，浏览器在渲染页面时，是单线程的加载页面，在将用户的代码渲染至页面时，如果用户的代码输入有误，线程产生阻塞，导致页面无法正常加载，便会影响到自助式建站平台的其他功能运转，所以要对其进行异常捕获，即当开发者输入的代码，有报错时。将其拦截，让其不至于影响到其他功能的运转，例如，在此可以使用各大浏览器厂商统一提供的try{}catch(e){}方法，将开发者输入的代码渲染至try{用户代码}模块中，如果try{}中的代码报错，那么浏览器就会将其拦截，并将报错信息输入到catch(e){报错信息}中。)，具体的，可以采用下述代码来实现异常捕获。

Try{

{{#js}}

}catch(e){

Console.log(‘当前输入的自定义代码有误，详情如下：’，e)

}

S303：对组件内容代码进行编译处理，得到与用户输入的组件内容代码对应的个性化组件。

在一种优选方式中，为了避免攻击脚本的潜在危险，可以将用户输入的组件内容代码打乱成无序的字符串，从而对组件内容代码进行混淆扰乱；对混淆扰乱后的数据采用编码算法进行编码操作。

这是因为，用户输入的内容，包含了HTML代码、CSS代码和/或JavaScript代码，其数据结构较普通的配置参数更为复杂，除了包含数据模型和数据库难以识别的特殊字符(例如“：”、“’”、“/”、“|”、“\”、“空格”)外，可能包含额外攻击脚本。如果开发者输入的脚本是用来影响数据库的代码，可能在数据库里无法将开发者输入的相关代码进行有效保存，为了保险起见，需要将开发者输入的代码进行混淆处理。

为了避免影响数据库的保存，需要将所有内容进行进行混淆扰乱。所谓混淆扰乱，即将开发者输入的所有代码，打乱成无序的字符串，数据库只会将开发者输入的代码当成无效的字符串来处理，字符串不会产生任何影响到数据库的行为。

例如，可以使用JavaScript自带的原生函数encodeURIComponent()进行混淆处理及编码。

示例如下:

SetState({

Html:encodeURIComponent(htmlStr)

})；

CSS和JavaScript保存原理同上。

其中，SetState是JavaScript提供的一个保存至数据库的通用方法。htmlStr：在此表示用户输入的html代码。

在一个优选方式中，在对组件内容代码进行编译处理得到个性化组件之后，还包括：将编码的的数据存入到数据库中，以及，在生成页面时，从数据库中取出数据内容并进行解码处理。

这是因为，在将HTML代码、CSS代码和/或JavaScript代码从数据库中取出并输出到页面时，因为在保存过程时已经将其编码，如果直接输入至页面，将不会有任何效果展示，反而会出现一堆乱码。所以在取出数据内容时，需要采用相对应的解码方法，来对数据进行解码(反编译)。例如，如果之前是使用的JavaScript提供的原生编码函数encodeURIComponent()进行的编译，这里就需要使用对应的解码函数decodeURIComponent()进行反编译。

最后，将解码的数据内容渲染至页面，得到与用户输入的组件内容代码对应的个性化页面。将反编译的数据内容渲染至页面，即可呈现出开发人员所输入代码的自定义效果。

与图1方法相对应，本发明还提供一种个性化页面生成装置。参考图4，为一种个性化页面生成装置结构示意图。该装置包括：

代码获取单元401，用于向用户提供个性化组件接口，并通过所述个性化组件接口接收用户输入的组件内容代码；

编码处理单元402，用于对所述组件内容代码进行编码处理，并将处理过的数据内容存入到数据库；

解码处理单元403，用于从数据库中取出数据内容，并进行解码处理；

渲染单元404，用于将解码的数据内容渲染至页面，得到与用户输入的组件内容代码对应的个性化页面。

优选的，所述个性化组件接口包括HTML接口、CSS接口和Javascript接口中的一个或多个；所述组件内容代码包括HTML代码、CSS代码和Javascript代码中的一种或多种。

优选的，该装置还包括：混淆扰乱处理单元405，将用户输入的组件内容代码打乱成无序的字符串，从而对组件内容代码进行混淆扰乱；其中，所述编码处理单元402，用于对混淆扰乱后的数据采用编码算法进行编码操作。

优选的，所述解码处理单元403具体用于，对于从数据库中取出的数据内容，采用与所述编码算法对应的解码算法进行解码操作。

优选的，所述装置还包括：异常捕获单元406，用于对用户输入的组件内容代码进行异常捕获；以及，从组件内容代码中剔除有异常的代码。

与图3方法相对应，本发明还提供一种个性化组件实现装置。参考图5，为一种个性化组件实现装置结构示意图。该装置包括：

个性化组件接口单元501，用于自定义个性化组件接口，并通过暴露API的方式，向用户提供个性化组件接口；

代码获取单元502，用于通过个性化组件接口接收用户输入的组件内容代码；

编码处理单元503，用于对组件内容代码进行编译处理，得到与用户输入的组件内容代码对应的个性化组件。

优选的，所述个性化组件接口包括HTML接口、CSS接口和Javascript接口中的一个或多个；所述组件内容代码包括HTML代码、CSS代码和Javascript代码中的一种或多种。

优选的，该装置还包括：混淆扰乱处理单元504，将用户输入的组件内容代码打乱成无序的字符串，从而对组件内容代码进行混淆扰乱；其中，所述编码处理单元503，用于对混淆扰乱后的数据采用编码算法进行编码操作。

优选的，还包括：所述解码处理单元505具体用于，在生成页面时，从预先存入编码数据的数据库中取出数据内容并进行解码处理。

优选的，所述装置还包括：异常捕获单元506，用于对用户输入的组件内容代码进行异常捕获；以及，从组件内容代码中剔除有异常的代码。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的用户变身控制的系统中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (10)

1.一种个性化页面生成方法，其特征在于，包括：

向用户提供个性化组件接口，并通过所述个性化组件接口接收用户输入的组件内容代码；

对所述组件内容代码进行编码处理，并将处理过的数据内容存入到数据库；

从数据库中取出数据内容，并进行解码处理；

将解码的数据内容渲染至页面，得到与用户输入的组件内容代码对应的个性化页面。

2.如权利要求1所述的方法，其特征在于，所述个性化组件接口包括HTML接口、CSS接口和Javascript接口中的一个或多个；所述组件内容代码包括HTML代码、CSS代码和Javascript代码中的一种或多种。

3.如权利要求1所述的方法，其特征在于，还包括：

将用户输入的组件内容代码打乱成无序的字符串，从而对组件内容代码进行混淆扰乱；

对混淆扰乱后的数据采用编码算法进行编码操作。

4.如权利要求3所述的方法，其特征在于，对从数据库中取出的数据内容进行解码处理，包括：

对于从数据库中取出的数据内容，采用与所述编码算法对应的解码算法进行解码操作。

5.如权利要求1-4任一项所述的方法，其特征在于，所述方法还包括：

对用户输入的组件内容代码进行异常捕获；

从所述组件内容代码中剔除有异常的代码。

6.一种个性化页面生成装置，其特征在于，包括：

代码获取单元，用于向用户提供个性化组件接口，并通过所述个性化组件接口接收用户输入的组件内容代码；

编码处理单元，用于对所述组件内容代码进行编码处理，并将处理过的数据内容存入到数据库；

解码处理单元，用于从数据库中取出数据内容，并进行解码处理；

渲染单元，用于将解码的数据内容渲染至页面，得到与用户输入的组件内容代码对应的个性化页面。

7.如权利要求6所述的装置，其特征在于，所述个性化组件接口包括HTML接口、CSS接口和Javascript接口中的一个或多个；所述组件内容代码包括HTML代码、CSS代码和Javascript代码中的一种或多种。

8.如权利要求6所述的装置，其特征在于，所述装置还包括：混淆扰乱处理单元，将用户输入的组件内容代码打乱成无序的字符串，从而对组件内容代码进行混淆扰乱；其中，所述编码处理单元，用于对混淆扰乱后的数据采用编码算法进行编码操作。

9.如权利要求8所述的方法，其特征在于，所述解码处理单元具体用于，对于从数据库中取出的数据内容，采用与所述编码算法对应的解码算法进行解码操作。

10.如权利要求6-9任一项所述的装置，其特征在于，所述装置还包括：异常捕获单元，用于对用户输入的组件内容代码进行异常捕获；以及，从组件内容代码中剔除有异常的代码。