级联样式表数据生成方法、系统、计算机设备及存储介质

技术领域

本发明涉及数据处理技术领域，尤其涉及一种级联样式表数据生成方法、系统、计算机设备及可读存储介质。

背景技术

CSS(CascadingStyleSheets，级联样式表)是一种样式设计语言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，做到网页表现与内容分离。但是CSS样式十分丰富，在开发过程中不仅需要熟记众多CSS样式属性、功能，还需要在开发中对字体、文字、颜色、背景等方便精确的控制，才可以使网页内容更加丰富多彩，工作量较大。

本发明创造的发明人在研究中发现，现有已经存在一些在线生成CSS代码工具，但是当前的代码生成工具样式选择比较单一，可自主生成的样式较少，生成的样式文件仅支持CSS格式，因此代码复用效率较低，适用性较差。

发明内容

本发明的目的是提供一种级联样式表数据生成方法、系统、计算机设备及可读存储介质，用于解决现有的当前代码生成工具样式选择比较单一，可自主生成的样式较少，生成的样式文件仅支持CSS格式，因此代码复用效率较低，适用性较差问题。

为实现上述目的，本发明提供一种级联样式表数据生成方法，应用于CSS平台服务器端，包括以下：

接收客户端发出的数据生成信号，获取待处理数据和目标模板数据；

识别所述待处理数据的数据类型，采用与所述数据类型对应的解析策略对所述待处理数据进行解析，生成目标级联样式表CSS代码；

基于所述目标级联样式表CSS代码进行提取，获得所述目标级联样式表CSS代码对应的语法树；

基于所述目标模板数据对所述目标级联样式表CSS代码对应的语法树进行遍历，获得目标结果并将所述目标结果发送至客户端。

进一步的，所述识别所述待处理数据的数据类型，采用与所述数据类型对应的解析策略对所述待处理数据进行解析，生成目标级联样式表CSS代码，包括以下：

判断所述待处理数据的数据类型；

当所述待处理数据的数据类型为预设控件集合，则根据预设代码模板和所述预设空间集合生成目标级联样式表CSS代码；

当所述待处理数据的数据类型为图片，则对所述待处理数据进行图像识别，并根据识别结果和预设编译规则生成目标级联样式表CSS代码；

当所述待处理数据的数据类型为自主编辑文本，则基于预设映射规则对待处理数据进行抽离，以生成目标级联样式表CSS代码。

进一步的，所述对所述待处理数据进行图像识别，并根据识别结果和预设编译规则生成目标级联样式表CSS代码，包括以下：

采用图形用户界面可区分编译器对所述待处理数据进行处理，获得HTML+CSS代码数据作为识别结果；

基于所述识别结果和预设CSS数据抽离正向规则生成目标级联样式表CSS代码；

将所述待处理数据及其对应的目标级联样式表CSS代码存储在预设图片数据库中。

进一步的，在所述采用图形用户界面可区分编译器对所述待处理数据进行处理前，还包括以下：

获取所述待处理数据，采用预设算法对所述待处理数据处理获得所述待处理数据对应的图片哈希值；

根据所述图片哈希值验证预设图片数据库中是否存在与所述待处理数据一致的图片数据；

若是，则从所述图片数据库中获取目标级联样式表CSS代码；

若否，则采用图形用户界面可区分编译器对所述待处理数据进行处理。

进一步的，在将所述目标结果发送至客户端后，还包括以下：

接收客户端发出的调整数据，其中，所述调整数据包括变量标识和变量参数。

基于所述调整数据对所述目标结果进行更新。

本发明还提供一种级联样式表数据生成方法，应用于CSS平台客户端，包括以下：

监控用户在前端页面上的第一操作，并根据所述第一操作生成数据生成信号、待处理数据和目标模板数据；

将所述数据生成信号、待处理数据和目标模板数据发送至服务器端；

接收服务器端发送的根据所述待处理数据和目标模板数据生成的目标结果，将所述目标结果展示在前端页面上。

进一步的，在将所述目标结果展示在前端页面上后，还包括以下：

实时监控用户在前端页面上的第二操作，并基于所述第二操作生成调整数据发送至服务器端；

接收服务器端发送的根据所述调整数据更新后的目标结果，并将更新后的目标结果展示在前端页面上。

为实现上述目的，本发明还提供一种级联样式表数据生成系统，包括服务器端和客户端：

所述服务端包括以下：获取模块，用于接收客户端发出的数据生成信号，获取待处理数据和目标模板数据；

解析模块，用于识别所述待处理数据的数据类型，采用与所述数据类型对应的解析策略对所述待处理数据进行解析，生成目标级联样式表CSS代码；

提取模块，用于基于所述目标级联样式表CSS代码进行提取，获得所述目标级联样式表CSS代码对应的语法树；

生成模块，用于基于所述目标模板数据对所述目标级联样式表CSS代码对应的语法树进行遍历，获得目标结果并将所述目标结果发送至客户端；

所述客户端包括以下：监控模块，用于监控用户在前端页面上的第一操作，并根据所述第一操作生成数据生成信号、待处理数据和目标模板数据；

发送模块，用于将所述数据生成信号、待处理数据和目标模板数据发送至服务器端；

接收模块，用于接收服务器端发送的根据所述待处理数据和目标模板数据生成的目标结果，将所述目标结果展示在前端页面上。

为实现上述目的，本发明还提供一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述级联样式表数据生成方法的步骤。

为实现上述目的，本发明还提供一种计算机可读存储介质，其包括多个存储介质，各存储介质上存储有计算机程序，所述多个存储介质存储的所述计算机程序被处理器执行时共同实现上述级联样式表数据生成方法的步骤。

本发明提供的级联样式表数据生成方法、装置、计算机设备及可读存储介质，本发明通过获取模块接收客户端监控用户操作发出的数据生成信号、待处理数据以及目标模板数据，根据待处理数据类型选择对应的解析策略，在待处理数据解析完成后，提取与CSS代码对应的语法树，最后遍历语法树生成与目标模板数据格式一致的目标结果并发送至客户端，通过与客户端配合，以及语法树的建立和遍历解决现有技术中CSS平台生成的样式文件样式单一，仅支持CSS格式，因此代码复用效率较低，适用性较差问题。

附图说明

图1为本发明所述级联样式表数据生成方法实施例的系统硬件图；

图2为本发明所述级联样式表数据生成方法实施例一的流程图；

图3为本发明所述级联样式表数据生成方法实施例一中识别所述待处理数据的数据类型，采用与所述数据类型对应的解析策略对所述待处理数据进行解析，生成目标级联样式表CSS代码的流程图；

图4为本发明所述级联样式表数据生成方法实施例一中所述对所述待处理数据进行图像识别，并根据识别结果和预设编译规则生成目标级联样式表CSS代码的流程图；

图5为本发明所述级联样式表数据生成方法实施例一中在将所述目标结果发送至客户端后的流程图；

图6为本发明所述级联样式表数据生成方法实施例二的流程图；

图7为本发明所述级联样式表数据生成方法实施例二中在将所述目标结果展示在前端页面上后的流程图；

图8为本发明所述级联样式表数据生成方法实施例三的流程图；

图9为本发明所述级联样式表数据生成装置实施例四的程序模块示意图；

图10为本发明计算机设备实施例五中计算机设备的硬件结构示意图。

附图标记：

7、级联样式表数据生成系统 711、获取模块 712、解析模块

713、提取模块 714、生成模块 715、第一更新模块

721、监控模块 722、发送模块 723、接收模块

724、第二更新模块 8、计算机设备 81、存储器

82、处理器 83、网络接口

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

本发明提供的级联样式表数据生成方法、装置、计算机设备及可读存储介质，适用于数据处理领域，为提供一种基于获取模块、解析模块、提取模块、生成模块的级联样式表数据生成方法。图1本发明提供的CSS系统的硬件图，其中，A为服务器端，B、C分别为不同的客户端，本发明服务器端(如图1中A)通过获取模块接收客户端(如图1中B或C)根据用户操作发出的数据生成信号、待处理数据以及目标模板数据，采用解析模块根据待处理数据类型选择对应的解析策略(如当所述待处理数据的数据类型为预设控件集合，则根据预设代码模板和所述预设控件集合生成目标级联样式表CSS代码；当所述待处理数据的数据类型为图片，则对所述待处理数据进行图像识别，并根据识别结果和预设编译规则生成目标级联样式表CSS代码；当所述待处理数据的数据类型为自主编辑文本，则基于预设映射规则对待处理数据进行抽离，以生成目标级联样式表CSS代码)，在待处理数据解析完成后，采用提取模块提取与CSS代码对应的语法树，最后通过生成模块遍历语法树生成与目标模板数据格式一致的目标结果，并发送至客户端，以便用户在客户端下载、粘贴等操作，通过上述过程解决现有技术中CSS平台生成的样式文件样式单一，仅支持CSS格式，因此代码复用效率较低，适用性较差问题除此之外，在客户端接收到目标结果并展示在前端页面后，还通过第二更新模块实时监控用于操作，并配合服务器端的第一更新模块实现目标的实时更新，以满足用户需求。

实施例一

请参阅图2，本实施例提供一种级联样式表数据生成方法，应用于CSS平台服务器端，包括以下步骤：

S100:接收客户端发出的数据生成信号，获取待处理数据和目标模板数据；

上述待处理数据和目标模板数据根据用户操作获得，具体作为举例的，根据用户选择CSS样式生成待处理数据，根据用户选择需要生成的目标文件格式从预设模板数据库中匹配目标模板数据。

S200：识别所述待处理数据的数据类型，采用与所述数据类型对应的解析策略对所述待处理数据进行解析，生成目标级联样式表CSS代码；

在本方案中，待处理数据类型包括预设控件集合、图片、自主编辑文本，预设控件集合为用户在前端页面上自主选择的所有预置的控件，在预设样式数据库中匹配被用户选择的控件参数，包括但不限于：常见的二维图形、三维图形、阴影效果、模糊效果、主题颜色、常用字体等样式css代码，；图片为用户上传，用户将需要识别的图片或者包含图层的设计稿文件上传即可；自主编辑文本通过嵌入在线css代码编辑器，用户可以直接编写符合css语法规范的代码生成自主编辑文本，在基本样式无法满足需求时，用户可以通过自定义编辑完成对应的样式生成，用户可以根据页面上提供的控件界面从零开始生成css代码，也可以根据平台提供的基本样式作为基础数据进行编辑。

具体的，识别所述待处理数据的数据类型，采用与所述数据类型对应的解析策略对所述待处理数据进行解析，生成目标级联样式表CSS代码，参阅图3，包括以下步骤：

S210：判断所述待处理数据的数据类型是否为预设控件集合；

在本方案中包含的数据类型如上所述，也可添加其他实质相同的数据类型，识别待处理数据的数据类型可通过文件后缀编码确定，也可通过接口来源确定，具体的例如，图片需要调用用户上传接口等。

S220-a：当所述待处理数据的数据类型为预设控件集合，则根据预设代码模板和所述预设控件集合生成目标级联样式表CSS代码；

在本方案中，在客户端前端页面上预置多个控件，每一控件均关联存储在预设样式模板数据库中唯一参数文件，当某一控件被选择，则可直接获取对应的参数文件，而后将参数文件对应写入预设代码模板则生成CSS代码。

S220-b：若否，则再次判断所述待处理数据的数据类型是否为图片；

S230：若是，则对所述待处理数据进行图像识别，并根据识别结果和预设编译规则生成目标级联样式表CSS代码；

在上述步骤中，当用户上传图片时，需要对图片进行识别，以抽取出对应的代码或关系结构，再进行编译才可获得CSS代码，因此上述对所述待处理数据进行图像识别，并根据识别结果和预设编译规则生成目标级联样式表CSS代码，参阅图4，包括以下步骤：

S231：采用图形用户界面可区分编译器对所述待处理数据进行处理，获得HTML+CSS代码数据作为识别结果；

在上述步骤中，采用Pix2Code工具完成图片识别生成对应的html+CSS代码，Pix2Code工具为一个图片转代码直出工具，通过该工具自动实现图片的识别，现有中其他图像识别工具可识别也可应用与此，也可与深度学习网络结合实现代码的识别。

S232：基于所述识别结果和预设CSS数据抽离正向规则生成目标级联样式表CSS代码；

在上述步骤中，上述CSS数据抽离正向规则为预先定义规则，根据上述工具识别后获得图片中的代码，对该代码进行数据抽离即生成目标级联样式表CSS代码，具体的，抽离可以通过函数调用抽取等。

S233：将所述待处理数据及其对应的目标级联样式表CSS代码存储在预设图片数据库中。

在上述步骤中，为了方便后续查看以及减少后续重复识别，对识别后生成的CSS代码进行存储，克服现有无法查询生成记录的问题。为了减少对同一图片进行重复识别的情况，在采用图形用户界面可区分编译器对所述待处理数据进行处理前，还包括以下步骤：

S230-1：获取所述待处理数据，采用预设算法对所述待处理数据处理获得所述待处理数据对应的图片哈希值；

在上述步骤中，上述预设算法包括但不限于均值哈希算法、感知哈希算法等，通过哈希值为图片的唯一标识，因此通过计算出图片哈希值来确定该图片被识别的次数，以避免重复识别的情况。

S230-2：根据所述图片哈希值验证预设图片数据库中是否存在与所述待处理数据一致的图片数据；

通过步骤S233将各个图片及其对应的目标级联样式表CSS代码关联存储在预设图片数据库中，进而查找是否存在一致的图片数据，若存在，则该图片被识别过，若不存在，则该图片未被识别过，且通过上述步骤S233还可不断更新预设图片数据库。

S230-3：若是，则从上述预设图片数据库中获取目标级联样式表CSS代码；

在上述步骤中，若预设图片数据库中包含与该图片哈希值一致的图片数据，则可直接获取历史生成的CSS代码，以大大缩短生成过程，进而减少生成过程的时间，提高工作效率。

S230-4：若否，则执行上述S231中采用图形用户界面可区分编译器对所述待处理数据进行处理。

在上述步骤中，若预设图片数据库中未包含与该图片哈希值一致的图片数据，则该图片未首次识别，需要基于上述步骤S231～S233对该图片进行处理。

S240：若否，则所述待处理数据的数据类型为自主编辑文本，则基于预设映射规则对待处理数据进行抽离，以生成目标级联样式表CSS代码。

在本方案中，自主编辑文本为用户通过该平台集成的在线css代码编辑器编写的符合CSS语法规范的代码，或者用户可以根据页面上提供的控件界面编辑后生成CSS代码，在接收到自主编辑文本后，服务器端会执行反向映射实现数据的抽离后反馈到浏览器由浏览器生成最终的CSS代码。

S300：基于所述目标级联样式表CSS代码进行提取，获得所述目标级联样式表CSS代码对应的语法树；

在本方案中，对CSS代码进行提取生成语法树通过css-tree(CSS树)工具实现，CSS树(Cache-Sensitive Search Trees)是一种缓存敏感的主存数据库索引，CSS树的实现包括：根据已有的有序数据a，生成一个索引数组b，这个数组b表示一棵完全m+1叉树(就像完全二叉树可以用一维数组来存储)，m是每个非叶子节点中索引项的个数，m个索引项自然就产生了m+1个间隙(包括两边)，每个索引项的值都是该索引项的左子树中数据项的最大值，用一个循环在左子树中不断获取最右的节点，达到叶子节点时，最右的节点即为最大值了，索引树的构建顺序，从最后一个索引项开始往前构建，一直到根节点为止，最后一个索引项位于最后一个内部节点(预先计算)中。通过上述构建CSS树方式即可生成与待处理数据对应的语法树，通过语法树即可实现CSS格式数据向其他格式数据(包括但不限于stylus/scss/sass/less/wxss格式等模板数据)的转换。

抽象出来的数据由于不存在特殊符号(如：.#),极其容易复用、压缩、压缩后的格式化和存储。并且具备清晰的嵌套层级，对于生成less、sass、stylus这些天生支持嵌套的预处理格式具有极其便利的支持，同时为了减少存储体积还可使用预设字典表的方式对各样式变量名进行了简化，在需要还原成对应的样式时只需要通过查找对应的字典表就可以找到对应的变量名。可作为示例的，[{"id":"fullContainer","props":{"c":"f00","fz":12,"h":20}}]。

S400：基于所述目标模板数据对所述目标级联样式表CSS代码对应的语法树进行遍历，获得目标结果并将所述目标结果发送至客户端。

在上述步骤中，对语法树的遍历与二叉遍历类似，在每个树的内部节点中对节点里面的索引项二分遍历(搜索)，找到接下来应该去的分支，到叶子节点时，再使用二分查找看叶子节点中数据即可。若查找或遍历过程中出现数据重复的现象时，CSS树指引是最左侧的，结合目标模板数据对语法树进行遍历，即可获得与目标模板数据格式一致的目标结果。

为了解决现有的将目标结果发送至客户端，用户只能查看而无法自主调整的问题，因此在将所述目标结果发送至客户端后，参阅图5，还包括以下：

S410：接收客户端发出的调整数据，其中，所述调整数据包括变量标识和变量参数。

具体的，上述调整数据包括但不限于修改主题颜色、常用字体等样式。

S420：基于所述调整数据对所述目标结果进行更新。

在上述步骤中，作为举例的，例如修改颜色color:#ff0000；color为变量名，变量参数为#ff0000，则根据变量名查找对应的变量参数，采用新的变量参数替换实现对目标结果的更新。

在上述步骤S300中为了减少存储体积还可使用预设字典表的方式对各样式变量名进行了简化，在上述步骤中还可参考预设字典表对变量标识进行匹配，以保证更新结果的准确性。

上述待处理数据和对应的目标数据可上传至区块链以便于后续作为参考样本或训练样本，上传至区块链可保证其安全性和对用户的公正透明性，用户设备可以从区块链中下载得该摘要信息，以便查证优先级列表是否被篡改，后续也可以从区块链中下载获得对应目标数据用于发送至客户端在前端页面展示，无需生成过程，有效提高语音处理效率。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本方案根据对不同类型的待处理数据(预置组件、图片、自主编辑文本)采用不同的处理策略处理，生成目标级联样式表CSS代码，而后基于该CSS代码进行语法树抽取，获得对应的语法树，最后集合预设模板数据对该语法树进行遍历，以获得与预设模板数据格式一致的目标结果，解决现有技术中不支持其他类型代码的问题，生成记录使得样式再次复用时，不需要再次编辑，可直接在记录中找取，方便操作使用。

实施例二：本实施例还提供一种级联样式表数据生成方法，应用于CSS平台服客户端，参阅图6，包括以下步骤：

S510：监控用户在前端页面上的第一操作，并根据所述第一操作生成数据生成信号、待处理数据和目标模板数据；

在上述步骤中，所述第一操作包括选择阈值的样式表，该CSS平台预先内置了常用的css组件，例如：跑马灯、2D轮播图、3D轮播图、switch组件等简单的纯css+html实现的组件，并且暴露了参数自定义界面，可以根据需求做具体的参数修改，根据用户的选择和参数修改生成待处理数据和目标模板数据。

S520：将所述数据生成信号、待处理数据和目标模板数据发送至服务器端；

在本方案中，在监控用户第一操作的过程中，还可设置权限验证，作为举例而非限定的，游客身份的用户可以使用完整的上述所有功能，注册身份的用户可以保存提交自己的CSS组件、常用的基础CSS样式、创作的CSS样式，并且支持对历史记录的查询、编辑、删除等操作。

S530：接收服务器端发送的根据所述待处理数据和目标模板数据生成的目标结果，将所述目标结果展示在前端页面。

在上述步骤中，服务器根据所述待处理数据和目标模板数据生成的目标结果为通过执行上述S100～S400而生成的目标数据，用户可以根据前端页面上展示的对目标结果进行下载复制等操作。

在将所述目标结果展示在前端页面上后，参阅图7，还包括以下步骤：

S531：实时监控用户在前端页面上的第二操作，并基于所述第二操作生成调整数据发送至服务器端；

在上述步骤中，用户查看展示在前端页面上的目标结果后，可对主题颜色、常用字体、阴影效果、模糊效果等进行修改，用户可在前端页面上执行第二操作，直接修改，克服现有的大多代码生成后无法修改的情况。

S532：接收服务器端发送的根据所述调整数据更新后的目标结果，并将更新后的目标结果展示在前端页面上。

在上述步骤中，更新后的目标结果与上述过程中一致的采用预设映射规则进行前端页面展示。

实施例三：本实施例还提供一种级联样式表数据生成方法，应用于CSS平台，包括服务器端和客户端，具体的，参阅图8，包括以下步骤：

S610：客户端监控用户在前端页面上的第一操作，并根据所述第一操作生成数据生成信号、待处理数据和目标模板数据，并将所述数据生成信号、待处理数据和目标模板数据发送至服务器端；

在上述步骤中，如上述实施例二中所述第一操作为用户在前端页面上的各个操作，包括但不限于选择预置组件及编辑参数、上传文件图片或自主编辑文本等，在用户选择目标模板类型并触发数据生成信号后，即根据用户操作生成待处理数据，用以自动生成目标结果。

S620：服务器端接收客户端发出的数据生成信号，并从客户端获取待处理数据和目标模板数据；

在上述步骤中，服务器端从客户端获取的待处理数据用于后续解析和提取，以生成目标数据。

S630：服务器端识别所述待处理数据的数据类型，采用与所述数据类型对应的解析策略对所述待处理数据进行解析，生成目标级联样式表CSS代码；

在上述步骤中，待处理数据的数据类型包括预设控件集合、图片以及自主编辑文本，对各个不同类型的待处理数据采用不同的解析策略，具体的如实施例以中步骤S220～S240所述。

S640：服务器端基于所述目标级联样式表CSS代码进行提取，获得与所述目标级联样式表CSS代码对应的语法树；

在本方案中，对CSS代码进行提取生成语法树通过css-tree(CSS树)工具实现，提取与所述目标级联样式表CSS代码对应的语法树，以便后续根据语法树对CSS代码实现格式转换，用于解决现有CSS代码生成器生成的代码格式单一而导致代码复用率较低。

S650：服务器端基于所述目标模板数据对所述目标级联样式表CSS代码对应的语法树进行遍历，获得目标结果并将所述目标结果发送至客户端；

上述步骤中，对语法树的遍历并按照目标模板数据写入，即可获得与用户选择的目标模板格式一致的目标结果。

S660：客户端接收服务器端发送的根据所述调整数据更新后的目标结果，并将更新后的目标结果展示在前端页面上。

在上述步骤S660后，为了解决现有的目标结果无法调整只能查看的问题，还包括以下步骤：

S671：客户端实时监控用户在前端页面上的第二操作，并基于所述第二操作生成调整数据发送至服务器端；

S672：服务器端接收客户端发出的调整数据后，基于所述调整数据对所述目标结果进行更新，并将更新后的目标结果发送至客户端；

S673：客户端接收服务器端发送的根据所述调整数据更新后的目标结果，并将更新后的目标结果展示在前端页面上。

通过上述步骤S671～S673，用户查看展示在前端页面上的目标结果后，不限于对主题颜色、常用字体、阴影效果、模糊效果等进行修改，用户可在前端页面上执行第二操作，直接修改，克服现有的大多代码生成后无法修改的情况。

本方案提供一个CSS操作平台(包括用户端和服务器端，用户可在用户端前端页面上执行操作，服务器端用于根据用户操作生成目标结果)，根据用户在前端页面的操作自主生成CSS代码，而后基于对该CSS存储并抽象以生成其他格式的目标数据，以解决现有技术中生成的CSS样式单一且不支持其他类型文件(包括但不限于stylus/scss/sass/less/wxss格式等模板数据)，代码复用率较低的问题。

实施例四：

请参阅图9，本实施例的一种级联样式表数据生成系统7，包括服务器端和客户端：所述服务端包括以下：

获取模块711，用于接收客户端发出的数据生成信号，获取待处理数据和目标模板数据；

解析模块712，用于识别所述待处理数据的数据类型，采用与所述数据类型对应的解析策略对所述待处理数据进行解析，生成目标级联样式表CSS代码；

提取模块713，用于基于所述目标级联样式表CSS代码进行提取，获得所述目标级联样式表CSS代码对应的语法树；

生成模块714，用于基于所述目标模板数据对所述目标级联样式表CSS代码对应的语法树进行遍历，获得目标结果并将所述目标结果发送至客户端；

所述服务器端还包括第一更新模块715，用于在将所述目标结果发送至客户端后，接收客户端发出的调整数据，基于所述调整数据对所述目标结果进行更新，其中，所述调整数据包括变量标识和变量参数。

所述客户端包括以下：监控模块721，用于监控用户在前端页面上的第一操作，并根据所述第一操作生成数据生成信号、待处理数据和目标模板数据；

发送模块722，用于将所述数据生成信号、待处理数据和目标模板数据发送至服务器端；

接收模块723，用于接收服务器端发送的根据所述待处理数据和目标模板数据生成的目标结果，将所述目标结果展示在前端页面上。

所述客户端还包括第二更新模块724，用于实时监控用户在前端页面上的第二操作，并基于所述第二操作生成调整数据发送至服务器端；接收服务器端发送的根据所述调整数据更新后的目标结果，并将更新后的目标结果展示在前端页面上。

本技术方案基于数据处理，通过客户端上的监控模块监控用户操作，当用户触发数据生成信号后，将待处理数据和用户选择的目标模板数据发送至服务器端，服务器端根据客户端发出的数据分别采用解析模块、提取模块以及生成模块对待处理数据进行解析、提取和生成目标结果，并将目标结果发送至客户端，客户端通过接收模块接收到目标结果后展示在前端页面上，以便于用户在前端页面上进行复制、下载等操作，以解决现有技术中生成的CSS样式单一。

在上述服务器端处理过程中，根据待处理数据类型选择对应的解析策略，如当所述待处理数据的数据类型为预设控件集合，则根据预设代码模板和所述预设控件集合生成目标级联样式表CSS代码；当所述待处理数据的数据类型为图片，则对所述待处理数据进行图像识别，并根据识别结果和预设编译规则生成目标级联样式表CSS代码；当所述待处理数据的数据类型为自主编辑文本，则基于预设映射规则对待处理数据进行抽离，以生成目标级联样式表CSS代码；在待处理数据解析完成后，采用提取模块提取与CSS代码对应的语法树，最后通过生成模块遍历语法树生成与目标模板数据格式一致的目标结果，通过生成语法树的方式解决现有技术中CSS平台生成的样式文件仅支持CSS格式，因此代码复用效率较低，适用性较差问题。

在上述生成目标结果并由客户端展示在前端页面上后，还可在客户端基于第二更新模块监控用户动作，并配合服务器端第一更新模块实现对目标结果的实时更新，减少现有的CSS代码生成后不可更改，调整则需要重新生成过程，耗时较长的问题，操作方便。

实施例五：

为实现上述目的，本发明还提供一种计算机设备8，该计算机设备可包括多个计算机设备，实施例二的级联样式表数据生成系统7的组成部分可分散于不同的计算机设备8中，计算机设备8可以是执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。本实施例的计算机设备至少包括但不限于：可通过系统总线相互通信连接的存储器81、处理器82、网络接口83以及级联样式表数据生成装置7，如图10所示。需要指出的是，图10仅示出了具有组件-的计算机设备，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

本实施例中，存储器81至少包括一种类型的计算机可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器81可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，存储器81也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器81还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，存储器81通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例一的级联样式表数据生成系统7的程序代码等。此外，存储器81还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器82在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器82通常用于控制计算机设备的总体操作。本实施例中，处理器82用于运行存储器81中存储的程序代码或者处理数据，例如运行级联样式表数据生成装置，以实现实施例一的级联样式表数据生成方法。

所述网络接口83可包括无线网络接口或有线网络接口，该网络接口83通常用于在所述计算机设备8与其他计算机设备8之间建立通信连接。例如，所述网络接口83用于通过网络将所述计算机设备8与外部终端相连，在所述计算机设备8与外部终端之间的建立数据传输通道和通信连接等。所述网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobile communication，GSM)、宽带码分多址(WidebandCode Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

需要指出的是，图10仅示出了具有部件81-83的计算机设备8，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器81中的所述级联样式表数据生成系统7还可以被分割为一个或者多个程序模块，所述一个或者多个程序模块被存储于存储器81中，并由一个或多个处理器(本实施例为处理器82)所执行，以完成本发明。

实施例六：

为实现上述目的，本发明还提供一种计算机可读存储介质，其包括多个存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器83执行时实现相应功能。本实施例的计算机可读存储介质用于存储级联样式表数据生成系统7，被处理器83执行时实现实施例一的级联样式表数据生成方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。