CN112416339A - 页面开发方法、装置、计算机设备 - Google Patents
页面开发方法、装置、计算机设备 Download PDFInfo
- Publication number
- CN112416339A CN112416339A CN202010097382.XA CN202010097382A CN112416339A CN 112416339 A CN112416339 A CN 112416339A CN 202010097382 A CN202010097382 A CN 202010097382A CN 112416339 A CN112416339 A CN 112416339A
- Authority
- CN
- China
- Prior art keywords
- page
- component
- node component
- tree
- node
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011161 development Methods 0.000 title claims abstract description 93
- 238000000034 method Methods 0.000 title claims abstract description 62
- 238000009877 rendering Methods 0.000 claims abstract description 29
- 238000004458 analytical method Methods 0.000 claims description 17
- 230000003993 interaction Effects 0.000 claims description 17
- 238000004590 computer program Methods 0.000 claims description 13
- 238000004806 packaging method and process Methods 0.000 claims description 7
- 238000006243 chemical reaction Methods 0.000 claims description 4
- 238000013461 design Methods 0.000 description 53
- 230000000694 effects Effects 0.000 description 15
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 10
- 230000008569 process Effects 0.000 description 8
- 230000008859 change Effects 0.000 description 6
- 238000012545 processing Methods 0.000 description 5
- 230000001960 triggered effect Effects 0.000 description 5
- 238000012856 packing Methods 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000006978 adaptation Effects 0.000 description 2
- 238000012217 deletion Methods 0.000 description 2
- 230000037430 deletion Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000010354 integration Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000012938 design process Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Abstract
本发明公开了一种页面开发方法、装置、计算机设备及可读存储介质，属于计算机技术领域。本发明的页面开发方法包括：接收目标页面的创建指令时，根据所述创建指令创建所述目标页面的基础配置参数以及预设的node组件树；根据所述基础配置参数在编辑窗口的页面编辑区加载对应的页面画布；获取用户在所述页面画布中对页面组件的编辑操作，并基于所述编辑操作生成所述页面组件的配置信息；将所述配置信息添加至所述node组件树对应的node节点组件，得到修改后的node组件树；对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件。本发明可以提高页面开发效率。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种页面开发方法、装置、计算机设备。
背景技术
随着互联网技术的发展，大量软件产品应运而生。页面开发是软件产品整个开发过程最为重要的环节之一，如APP页面、Web网页等的开发。页面通常由多个页面组件组成，比如按钮、图片、文本框等。传统的页面开发需要开发人员针对每一个页面组件编写对应的页面代码实现，如编写HTML(超文本标记语言)代码和CSS(层叠式样表)代码等。因而，传统的页面开发方法门槛较高，且开发效率较低。
发明内容
有鉴于此，现提供一种页面开发方法、装置、计算机设备及计算机可读存储介质，以解决传统的页面开发效率较低的问题。
本发明提供了一种页面开发方法，包括：
接收目标页面的创建指令时，根据所述创建指令创建所述目标页面的基础配置参数以及预设的node组件树；
根据所述基础配置参数在编辑窗口的页面编辑区加载对应的页面画布，其中，所述编辑窗口包括所述页面编辑区和组件预览区；
获取用户在所述页面画布中对页面组件的编辑操作，并基于所述编辑操作生成所述页面组件的配置信息；
将所述配置信息添加至所述node组件树对应的node节点组件，得到修改后的node组件树；
对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件。
可选地，所述页面开发方法还包括：
当接收到页面保存指令时，对当前的node组件树进行序列化，以将所述当前的node组件树转换为对应的JSON格式的数据；
将所述JSON格式的数据保存至预设的数据库中。
可选地，所述对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件包括：
对所述修改后的node组件树进行广度遍历解析；
在遍历解析到第i个node节点组件时，根据所述第i个node节点组件的配置信息中包含的组件标识信息加载对应的组件代码，其中，i为大于或者等于1的整数；
根据所述组件代码以及所述第i个node节点组件的配置信息进行页面渲染，以在所述页面画布中显示组件代码对应的页面组件。
本发明还提供了一种页面开发方法，包括：
从预设的数据库中获取JSON格式的数据，并对所述JSON格式的数据进行反序列化，得到对应的node组件树；
将所述node组件树中包含的css in js格式的组件样式数据转换为目标页面的css文件；
获取所述目标页面的页面模板代码，对所述node组件树进行解析，并将解析得到的代码数据添加至所述页面模板代码中，得到所述目标页面的页面代码；
将所述css文件以及所述页面代码进行打包上传至服务器。
可选地，所述页面开发方法还包括：
将所述node组件树中包含的冗余数据进行删除。
可选地，所述页面开发方法还包括：
根据所述页面代码以及所述node组件树中包含的各个页面组件的配置信息进行页面渲染，以显示所述目标页面。
可选地，在所述node组件树中包含的组件配置信息中包含组件交互信息时，则在对所述node组件树进行解析时，根据所述组件交互信息生成两个组件交互事件。
本发明还提供了一种页面开发装置，包括：
创建模块，用于接收目标页面的创建指令时，根据所述创建指令创建所述目标页面的基础配置参数以及预设的node组件树；
加载模块，用于根据所述基础配置参数在编辑窗口的页面编辑区加载对应的页面画布，其中，所述编辑窗口包括所述页面编辑区和组件预览区；
生成模块，用于获取用户在所述页面画布中对页面组件的编辑操作，并基于所述编辑操作生成所述页面组件的配置信息；
添加模块，用于将所述配置信息添加至所述node组件树对应的node节点组件，得到修改后的node组件树；
显示模块，用于对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件。
本发明还提供了一种页面开发装置，包括：
获取模块，用于从预设的数据库中获取JSON格式的数据，并对所述JSON格式的数据进行反序列化，得到对应的node组件树；
转换模块，用于将所述node组件树中包含的css in js格式的组件样式数据转换为目标页面的css文件；
解析模块，用于获取所述目标页面的页面模板代码，对所述node组件树进行解析，并将解析得到的代码数据添加至所述页面模板代码中，得到所述目标页面的页面代码；
上传模块，用于将所述css文件以及所述页面代码进行打包上传至服务器。
本发明还提供了一种计算机设备，所述计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。
上述技术方案的有益效果：
本发明实施例中的页面开发方法，在开发页面时，无需开发人员编写代码，只需要根据用户的编辑操作将页面组件放置在页面编辑区，即可以在页面编辑区将各个页面组件拼接成目标页面，从而可以提高页面开发的效率，降低页面开发的门槛。
附图说明
图1为本发明所述页面开发方法的系统框架图的一种实施例的框架图；
图2为本发明所述的页面开发方法的一种实施例的流程图；
图3为本发明一实施方式中的编辑窗口的界面示意图；
图4为本发明对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件的步骤细化流程图；
图5为本发明所述的页面开发方法的另一种实施例的流程图；
图6为本发明一实施方式中的目标页面的界面示意图；
图7为图6中的目标页面去除背景图片后的界面示意图；
图8为本发明所述的页面开发装置的一种实施例的模块图；
图9为本发明所述的页面开发装置的另一种实施例的模块图；
图10为本发明实施例提供的执行页面开发方法的计算机设备的硬件结构示意图。
具体实施方式
以下结合附图与具体实施例进一步阐述本发明的优点。
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
在本发明的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本发明及区别每一步骤，因此不能理解为对本发明的限制。
图1示意性示出了根据本申请实施例的页面开发方法的应用环境示意图。在示例性的实施例中，该应用环境的系统可包括设计终端102、开发终端106与服务器104。
其中，设计终端102与服务器104通过网络进行通信。开发终端106与服务器104通过网络进行通信。设计终端102与开发终端106可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。设计终端102上运行了页面设计工具。设计人员可以在设计终端102利用页面设计工具进行应用程序页面(以下称“目标页面”)的开发设计。
设计人员在设计目标页面时，首先启动页面设计工具，以在设计终端102的屏幕上展示目标页面编辑窗口，之后，设计人员可以基于设计终端102展示的页面编辑窗口触发目标页面创建指令，设计终端102接收对目标页面的创建指令，接收目标页面的创建指令时，根据所述创建指令创建所述目标页面的基础配置参数以及预设的node(节点)组件树。设计终端102根据所述基础配置参数在编辑窗口的页面编辑区加载对应的页面画布，其中，所述编辑窗口包括所述页面编辑区和组件预览区。设计终端102获取用户在所述页面画布中对页面组件的编辑操作，并基于所述编辑操作生成所述页面组件的配置信息，将所述配置信息添加至所述node组件树对应的node节点组件，得到修改后的node组件树，对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件。设计人员可以按照上述方式在页面编辑区对多个页面组件编辑，每当完成页面组件的编辑时，编辑操作会立刻反馈到node组件树上，监听到node组件树发生变化，就会触发重新解析、渲染操作，然后用户就看到修改后的界面变化，实现了可视化的目标页面的设计效果。当设计完成时，设计人员可以点击编辑窗口中的保存按钮。设计终端102在接收到页面保存指令时，对当前生成的node组件树进行序列化，以将所述当前的node组件树转换为对应的JSON(JavaScriptObject Notation,JS对象简谱)格式的数据，然后可以将JSON格式的数据进行本地存储或发送至服务器进行存储。上述页面设计过程，无需开发人员编写代码，只需要根据设计人员的编辑操作将页面组件设置在页面编辑区，即可以在页面编辑区将各个页面组件拼接成目标页面，从而可以提高页面开发的效率，降低页面开发的门槛。
本发明为解决传统的页面开发效率较低的问题，提出了一种页面开发方法。参阅图2，其为本发明一实施例的页面开发方法的流程示意图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。下面以该方法应用于图1中的设计终端为例进行示例性描述，本实施例中所提供的页面开发方法包括：
步骤S20、接收目标页面的创建指令时，根据所述创建指令创建所述目标页面的基础配置参数以及预设的node组件树。
具体地，设计终端上运行了用于生成目标页面的页面设计工具。该页面设计工具可以是面向接口编程的，以能够支持任意实现相应接口方法的技术框架，如React、Vue、Angular等UI(User Interface,用户界面)框架。
页面设计工具中部署了组件库。组件库中预设了各种页面组件的组件代码及各个页面组件的标识信息。组件代码及对应的标识信息可以来自系统组件与开发者上传。其中，组件库本身支持版本控制、在线运行、持续集成等特性，组件代码优选基于vuejs编写的。标识信息用于方便设计人员进行选择，可以是页面组件的图标，比如按钮、文本框、图片或表格等。标识信息也可以是页面组件的名称。组件代码是用于显示页面组件的基本逻辑代码。不同页面组件的代码不同。页面组件代码包括多种属性参数，如字体、颜色、尺寸或对齐方式等参数，可以实现相应的视图效果。在页面组件代码中每种属性参数的参数值可以是预设的默认值，设计人员可以自行编辑属性参数。
当需要开发某个目标页面时，设计人员可以在设计终端启动页面设计工具进行页面设计。具体地，设计终端接收设计人员通过启动操作触发的对页面设计工具的开启指令，根据开启指令展示编辑窗口。如图3所示，编辑窗口包括组件预览区、页面编辑区、功能菜单区等。功能菜单区包括多个功能按钮，如保存按钮，预览按钮等。页面编辑区用于容纳多个页面组件。组件预览区包括多个组件标识，以便区分各个页面组件，该组件标识可以为组件名称。
在开启页面设计工具之后，设计人员可以通过点击功能菜单区中的预设按钮触发目标页面的创建指令，比如，通过点击“新建”按钮。其中，该创建指令用于创建一个目标页面。在一实施方式中，当用户点击“新建”按钮时，可以弹出一个可视化窗口供设计人员填写目标页面的基础配置参数对应的参数值，其中，所述基础配置参数可以包括项目名称、页面发布地址、页面类型、页面对应的互跳地址、页面模版类型、页面标题、页面描述、页面关键词、画布宽度、画布高度等参数，其中，这些参数值中的一些参数可以为默认值，一些参数值由设计人员进行设定。在完成基础配置参数的参数值的填写之后，基于填写的参数值创建所述目标页面的基础配置参数。在本实施例中，基于创建指令还会生成一个预设的node(节点)组件树，该node组件树用于对目标页面的结构进行描述，该描述语句为JavaScript代码，该node组件树可以包括对目标页面的根组件、head组件、body组件、容器布局组件的描述数据。
步骤S21、根据所述基础配置参数在编辑窗口的页面编辑区加载对应的页面画布，其中，所述编辑窗口包括所述页面编辑区和组件预览区。
具体地，由于基础配置参数中包含有页面画布信息，因此，为了便于在开发目标页面的过程中可视化显示页面组件，可以根据基础配置参数中包含的页面画布信息在页面编辑区中加载对应的页面画布。在本实施例中，在加载页面画布后，可以根据页面对应的设备类型(电脑或手机等)，以及页面的基础布局的不同，使用不同的模版初始化页面画布。
步骤S22，获取用户在所述页面画布中对页面组件的编辑操作，并基于所述编辑操作生成所述页面组件的配置信息。
具体地，所述编辑操作可以为用户通过拖拽的方式将组件预览区中的某一个页面组件放置在页面画布中相应位置的操作或者为用户通过拖拽的方式将页面画布中的某个页面组件拖拽至相应位置的操作；所述编辑操作也可以为用户通过双击等方式将组件预览区中的某一个页面组件放置在页面画布中默认位置的操作；所述编辑操作也可以为用户通过输入框对页面画布中的某一个页面组件的参数进行修改的操作。
在获得所述编辑操作之后，设计终端即可以根据该编辑操作生成所述页面组件的配置信息，所述配置信息包括页面组件的标识信息以及页面组件的属性参数，其中，所述属性参数包括页面组件在目标页面中的位置信息、页面组件的字体参数信息、颜色参数信息、尺寸参数信息、组件类型信息等。在一实施方式中，该属性参数还包括一些特殊参数，比如，对于超链接组件，有跳转地址信息、是否在新窗口打开的参数信息。
步骤S23，将所述配置信息添加至所述node组件树对应的node节点组件，得到修改后的node组件树。
具体地，所述node组件树由多个node节点组件组成，在将配置信息添加至node组件树时，可以根据配置信息中包含的组件类型信息来确定配置信息添加的node节点组件。例如，若当前配置信息中包含的组件类型为内嵌组件，则将该配置信息添加至node组件树中属于该内嵌组件的嵌入组件对应的叶子节点的子节点中，若当前配置信息中包含的组件类型为不内嵌组件，则将该配置信息添加至node组件树中的叶子节点中。
步骤S24，对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件。
具体地，实时监测node组件树是否发生改变，当监测待node组件树发生改变时，触发对node组件树的解析、渲染操作，以在页面画布中显示所述页面组件。
在一实施方式中，在对node组件树进行解析渲染时，可以通过DSL(domainspecific language,领域专用语言)语法解析器将node组件树转换为页面组件。
本发明实施例中的页面开发方法，在开发页面时，无需开发人员编写代码，只需要根据用户的编辑操作将页面组件放置在页面编辑区，即可以在页面编辑区中实时显示当前的页面组件，从而可以可视化地观察到当前页面的开发效果。
在一实施方式中，当完成当前页面组件的添加之后，用户可以在页面画布上添加其他页面组件，直到完成对目标页面的其他页面组件的添加，得到最终的目标页面。在获取到用户完成的每次编辑操作之后，会重新执行上述步骤S22-S24，即设计终端每获取到编辑操作之后，都会重新触发组件的解析以及渲染操作，以便用户可以看到修改后的界面变化，实现了可视化的页面组件添加效果。
在一实施方式中，参照图4，所述对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件包括：
步骤S40，对所述修改后的node组件树进行广度遍历解析。
具体地，所述广度遍历指的对修改后的node组件树从根节点开始遍历，优先遍历其子节点，再从左至右的，依次遍历其孙子节点的，以此类推，直到完成整颗node组件树的遍历。在本实施例中，在遍历得到node组件树中的第i个node节点组件时，即对该节点组件进行解析，其中，该第i个node节点组件为node组件树中的其中一个node节点组件。
步骤S41，在遍历解析到第i个node节点组件时，根据所述第i个node节点组件的配置信息中包含的组件标识信息加载对应的组件代码，其中，i为大于或者等于1的整数。
具体地，每一个页面组件的组件代码与对应的组件标识进行关联，通过该组件标识可以获取到页面组件对应的组件代码。本发明实施例中，在遍历到第i个node节点组件时，可以根据该节点的配置信息来获取该节点组件关联的页面组件的组件代码，以进行组件代码的加载。在完成组件代码的加载之后，对加载了组件代码的node节点组件进行解析，以便将该node节点组件转换为HTML(HyperText Markup Language，超文本标记语言)代码数据。
步骤S42，根据所述组件代码以及所述第i个node节点组件的配置信息进行页面渲染，以在所述页面画布中显示组件代码对应的页面组件。
具体地，在完成对于node节点组件的解析之后，渲染器根据该配置信息以及组件代码即可以完成页面组件的渲染，并在在所述页面画布中显示组件代码对应的页面组件。
本发明实施例，通过在对node节点组件进行解析时，直接调用节点组件对应的组件代码，而不用编写代码，从而可以提高页面开发效率。
在一实施方式中，所述页面开发方法还包括：
步骤S25，当接收到页面保存指令时，对当前的node组件树进行序列化，以将所述当前的node组件树转换为对应的JSON格式的数据。
步骤S26，将所述JSON格式的数据保存至预设的数据库中。
具体地，在完成全部需求页面组件的添加后，目标页面设计完毕，设计人员可以通过点击编辑窗口中的保存按钮对目标页面进行保存。设计终端在接收到保存按钮点击操作对应的页面保存指令后，根据页面保存指令对当前的node组件树进行序列化，以将所述当前的node组件树转换为对应的JSON格式的数据，然后将JSON格式的数据保存至预设的数据库中。当设计人员下一次需要继续对目标页面进行编辑时，可以从数据库中获取该JSON格式的数据反序列化为node组件树，然后渲染到画布上。
其中，所述数据库的类型可以为关系型数据库，也可以为非关系型数据库，在本实施例中不作限定。
本发明实施例中，通过将node组件树转换为对应的JSON格式的数据，可以方便对node组件树进行保存，以及可以方便设计人员下一次对目标页面进行编辑。
进一步地，参照图5，在一实施方式中，提出一种页面开发方法，该页面开发方法应用于图1所示的开发终端，该方法包括：
步骤S50，从预设的数据库中获取JSON格式的数据，并对所述JSON格式的数据进行反序列化，得到对应的node组件树。
具体地，开发终端上也运行了页面设计工具，开发人员可以对设计人员设计的目标页面的基础上进行进一步地开发。当开发人员需要对通过设计终端设计的目标页面进行开发时，可以从数据库中获取预先保存的目标页面对应的JSON格式的数据，然后对该数据进行反序列化，也转换为node组件树。
步骤S51，将所述node组件树中包含的css in js格式的组件样式数据转换为目标页面的css文件。
具体地，node组件树中包含有css in js格式的组件样式数据，其中，该组件样式数据为组件描述参数中的宽高，背景色，坐标位置等是用来说明组件样式的数据，其中，cssin js指的是在组件内部使用JavaScript对CSS进行了抽象。
为了便于管理与维护这部分组件样式数据，可以将这部分数据转换成真正作用于目标页面的css(Cascading Style Sheets，层叠样式表)文件。
步骤S52，获取所述目标页面的页面模板代码，对所述node组件树进行解析，并将解析得到的代码数据添加至所述页面模板代码中，得到所述目标页面的页面代码。
具体地，所述页面模板代码为用于显示一个完整的目标页面的基本逻辑代码，可以包括页面布局与网站的公共配置脚本等代码。在本发明一实施方式中，该页面模板代码中还可以包括根据页面类型处理页面适配的代码段。
在本实施例中，对node组件树进行解析的具体过程可以参照上述实施例，在本实施例中不再赘述。
在解析得到node组件树对应的代码数据之后，即该代码数据添加至模板代码中，以组装成目标页面的完整页面代码。在本实施例中，该页面代码为目标页面的HTML代码。
在一实施方式中，在对node组件树进行解析前，为了减少目标页面对应的代码数据的数据量，可以对node组件树进行优化。具体地，可以将所述node组件树中包含的冗余数据进行删除，其中，所述冗余数据为仅在设计终端中使用的数据参数，在开发终端中而不需要的参数数据，比如标识页面组件是否可拖拽的参数数据，用于用户识别的页面组件的中文别名数据等。在对冗余数据进行删除时，可以通过开发一段冗余数据删除代码来实现，通过该代码可以自动识别中node组件树中包含的冗余数据，然后将其删除。
本发明实施例，通过删除冗余数据可以减少目标页面对应的代码量，进而可以节省存储目标页面代码数据的存储空间。
在一实施方式中，当所述node组件树中包含的组件配置信息中包含组件交互信息时，在对所述node组件树进行解析时，可以根据所述组件交互信息生成两个组件交互事件，以实现组件之间进行数据传递。具体实现时，可以创建一个eventbus(一种用于Android的事件发布-订阅总线)模块，然后根据组件信息生成两个组件交互的事件，并在第一个组件创建一个A事件订阅，这样，当第二个组件发布一个A事件时，通过eventbus模块即可以将第二个组件的数据传递给第一个组件，达到两个组件的交互效果。
在本发明另一实施方式中，在所述node组件树中包含的组件配置信息中包含动画的配置参数时，在对该动画的配置参数进行解析时，可以将该参数转换为Vue的指令与css3(是CSS技术的升级版本)的animation(动画)代码。
步骤S53，将所述css文件以及所述页面代码进行打包上传至服务器。
具体地，在得到目标页面的css文件以及所述页面代码之后，可以通过webpack(模块打包器)等构建工具将两者打包到一起，以方便对目标页面对应的代码进行管理。
在一实施方式中，在进行打包之前，还可以获取目标页面的JavaScript代码，然后将该JavaScript代码一起进行打包。
在本发明实施例中，为了节省存储空间，在完成打包之后，可以将打包后生成的数据进行压缩。
本发明实施例通过在通过设计终端设计目标页面之后，进一步通过开发终端对目标页面进行优化，从而可以效果更好的目标页面。
进一步地，在一实施方式中，所述页面开发方法，还包括：
步骤S54，根据所述页面代码以及所述node组件树中包含的各个页面组件的配置信息进行页面渲染，以显示所述目标页面。
具体地，为了可以在开发终端中可以看到最终的目标页面的显示效果，可以根据所述页面代码以及所述node组件树中包含的各个页面组件的配置信息进行页面渲染，以显示所述目标页面。在一具体场景中，所述目标页面如图6、7所示，其中，图7为图6对应的去除背景图片的目标页面示意图。
本实施例通过在开发终端中展示经优化后的目标页面，可以使得用户直观地观看到开发的目标页面的显示效果。
参阅图8所示，是本发明页面开发装置700一实施例的程序模块图。
本实施例中，所述页面开发装置700包括一系列的存储于存储器上的计算机程序指令，当该计算机程序指令被处理器执行时，可以实现本发明各实施例的页面开发方法功能。在一些实施例中，基于该计算机程序指令各部分所实现的特定的操作，页面开发装置700可以被划分为一个或多个模块。例如，在图8中，所述页面开发装置700可以被分割成创建模块701、加载模块702、生成模块703、添加模块704及显示模块705。其中：
创建模块701，用于接收目标页面的创建指令时，根据所述创建指令创建所述目标页面的基础配置参数以及预设的node组件树。
具体地，设计终端上运行了用于生成目标页面的页面设计工具。该页面设计工具可以是面向接口编程的，以能够支持任意实现相应接口方法的技术框架，如React、Vue、Angular等UI框架。
页面设计工具中部署了组件库。组件库中预设了各种页面组件的组件代码及各个页面组件的标识信息。组件代码及对应的标识信息可以来自系统组件与开发者上传。其中，组件库本身支持版本控制、在线运行、持续集成等特性，组件代码优选基于vuejs编写的。标识信息用于方便设计人员进行选择，可以是页面组件的图标，比如按钮、文本框、图片或表格等。，标识信息也可以是页面组件的名称。组件代码是用于显示页面组件的基本逻辑代码。不同页面组件的代码不同。页面组件代码包括多种属性参数，如字体、颜色、尺寸或对齐方式等参数，可以实现相应的视图效果。在页面组件代码中每种属性参数的参数值可以是预设的默认值，设计人员可以自行编辑属性参数。
当需要开发某个目标页面时，设计人员可以在设计终端启动页面设计工具进行页面设计。具体地，设计终端接收设计人员通过启动操作触发的对页面设计工具的开启指令，根据开启指令展示编辑窗口。如图3所示，编辑窗口包括组件预览区、页面编辑区、功能菜单区等。功能菜单区包括多个功能按钮，如保存按钮，预览按钮等。页面编辑区用于容纳多个页面组件。组件预览区包括多个组件标识，以便区分各个页面组件，该组件标识可以为组件名称。
在开启页面设计工具之后，设计人员可以通过点击功能菜单区中的预设按钮触发目标页面的创建指令，比如，通过点击“新建”按钮。其中，该创建指令用于创建一个目标页面。在一实施方式中，当用户点击“新建”按钮时，可以弹出一个可视化窗口供设计人员填写目标页面的基础配置参数对应的参数值，其中，所述基础配置参数可以包括项目名称、页面发布地址、页面类型、页面对应的互跳地址、页面模版类型、页面标题、页面描述、页面关键词、画布宽度、画布高度等参数，其中，这些参数值中的一些参数可以为默认值，一些参数值由设计人员进行设定。在完成基础配置参数的参数值的填写之后，基于填写的参数值创建所述目标页面的基础配置参数。在本实施例中，基于创建指令还会生成一个预设的node(节点)组件树，该node组件树用于对目标页面的结构进行描述，该描述语句为JavaScript代码，该node组件树可以包括对目标页面的根组件、head组件、body组件、容器布局组件的描述数据。
加载模块702，用于根据所述基础配置参数在编辑窗口的页面编辑区加载对应的页面画布，其中，所述编辑窗口包括所述页面编辑区和组件预览区。
具体地，由于基础配置参数中包含有页面画布信息，因此，为了便于在开发目标页面的过程中可视化显示页面组件，可以根据基础配置参数中包含的页面画布信息在页面编辑区中加载对应的页面画布。在本实施例中，在加载页面画布后，可以根据页面对应的设备类型(电脑或手机等)，以及页面的基础布局的不同，使用不同的模版初始化页面画布。
生成模块703，用于获取用户在所述页面画布中对页面组件的编辑操作，并基于所述编辑操作生成所述页面组件的配置信息。
具体地，所述编辑操作可以为用户通过拖拽的方式将组件预览区中的某一个页面组件放置在页面画布中相应位置的操作或者为用户通过拖拽的方式将页面画布中的某个页面组件拖拽至相应位置的操作；所述编辑操作也可以为用户通过双击等方式将组件预览区中的某一个页面组件放置在页面画布中默认位置的操作；所述编辑操作也可以为用户通过输入框对页面画布中的某一个页面组件的参数进行修改的操作。
在获得所述编辑操作之后，设计终端即可以根据该编辑操作生成所述页面组件的配置信息，所述配置信息包括页面组件的标识信息以及页面组件的属性参数，其中，所述属性参数包括页面组件在目标页面中的位置信息、页面组件的字体参数信息、颜色参数信息、尺寸参数信息、组件类型信息等。在一实施方式中，该属性参数还包括一些特殊参数，比如，对于超链接组件，有跳转地址信息、是否在新窗口打开的参数信息。
添加模块704，用于将所述配置信息添加至所述node组件树对应的node节点组件，得到修改后的node组件树。
具体地，所述node组件树由多个node节点组件组成，在将配置信息添加至node组件树时，可以根据配置信息中包含的组件类型信息来确定配置信息添加的node节点组件。例如，若当前配置信息中包含的组件类型为内嵌组件，则将该配置信息添加至node组件树中属于该内嵌组件的嵌入组件对应的叶子节点的子节点中，若当前配置信息中包含的组件类型为不内嵌组件，则将该配置信息添加至node组件树中的叶子节点中。
显示模块705，用于对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件。
具体地，实时监测node组件树是否发生改变，当监测待node组件树发生改变时，触发对node组件树的解析、渲染操作，以在页面画布中显示所述页面组件。
在一实施方式中，在对node组件树进行解析渲染时，可以通过DSL语法解析器将node组件树转换为页面组件。
本发明实施例中的页面开发方法，在开发页面时，无需开发人员编写代码，只需要根据用户的编辑操作将页面组件放置在页面编辑区，即可以在页面编辑区中实时显示当前的页面组件，从而可以可视化地观察到当前页面的开发效果。
在一实施方式中，当完成当前页面组件的添加之后，用户可以在页面画布上添加其他页面组件，直到完成对目标页面的其他页面组件的添加，得到最终的目标页面。在获取到用户完成的每次编辑操作之后，会重新执行上述操作，即设计终端每获取到编辑操作之后，都会重新触发组件的解析以及渲染操作，以便用户可以看到修改后的界面变化，实现了可视化的页面组件添加效果。
在一实施方式中，所述显示模块705，还用于对所述修改后的node组件树进行广度遍历解析。
具体地，所述广度遍历指的对修改后的node组件树从根节点开始遍历，优先遍历其子节点，再从左至右的，依次遍历其孙子节点的，以此类推，直到完成整颗node组件树的遍历。在本实施例中，在遍历得到node组件树中的第i个node节点组件时，即对该节点组件进行解析，其中，该第i个node节点组件为node组件树中的其中一个node节点组件。
所述显示模块705，还用于在遍历解析到第i个node节点组件时，根据所述第i个node节点组件的配置信息中包含的组件标识信息加载对应的组件代码，其中，i为大于或者等于1的整数。
具体地，每一个页面组件的组件代码与对应的组件标识进行关联，通过该组件标识可以获取到页面组件对应的组件代码。本发明实施例中，在遍历到第i个node节点组件时，可以根据该节点的配置信息来获取该节点组件关联的页面组件的组件代码，以进行组件代码的加载。在完成组件代码的加载之后，对加载了组件代码的node节点组件进行解析，以便将该node节点组件转换为HTML代码数据。
所述显示模块705，还用于根据所述组件代码以及所述第i个node节点组件的配置信息进行页面渲染，以在所述页面画布中显示组件代码对应的页面组件。
具体地，在完成对于node节点组件的解析之后，渲染器根据该配置信息以及组件代码即可以完成页面组件的渲染，并在在所述页面画布中显示组件代码对应的页面组件。
本发明实施例，通过在对node节点组件进行解析时，直接调用节点组件对应的组件代码，而不用编写代码，从而可以提高页面开发效率。
进一步地，在一实施方式中，所述页面开发装置700还包括：序列化模块以及保存模块。
所述序列化模块，用于当接收到页面保存指令时，对当前的node组件树进行序列化，以将所述当前的node组件树转换为对应的JSON格式的数据。
所述保存模块，用于将所述JSON格式的数据保存至预设的数据库中。
具体地，在完成全部需求页面组件的添加后，目标页面设计完毕，设计人员可以通过点击编辑窗口中的保存按钮对目标页面进行保存。设计终端在接收到保存按钮点击操作对应的页面保存指令后，根据页面保存指令对当前的node组件树进行序列化，以将所述当前的node组件树转换为对应的JSON格式的数据，然后将JSON格式的数据保存至预设的数据库中。当设计人员下一次需要继续对目标页面进行编辑时，可以从数据库中获取该JSON格式的数据反序列化为node组件树，然后渲染到画布上。
其中，所述数据库的类型可以为关系型数据库，也可以为非关系型数据库，在本实施例中不作限定。
本发明实施例中，通过将node组件树转换为对应的JSON格式的数据，可以方便对node组件树进行保存，以及可以方便设计人员下一次对目标页面进行编辑。
参阅图9所示，是本发明页面开发装置800另一实施例的程序模块图。
本实施例中，所述页面开发装置800包括一系列的存储于存储器上的计算机程序指令，当该计算机程序指令被处理器执行时，可以实现本发明各实施例的页面开发方法功能。在一些实施例中，基于该计算机程序指令各部分所实现的特定的操作，页面开发装置800可以被划分为一个或多个模块。例如，在图9中，所述页面开发装置800可以被分割成获取模块801、转换模块802、解析模块803、上传模块804。其中：
获取模块801，用于从预设的数据库中获取JSON格式的数据，并对所述JSON格式的数据进行反序列化，得到对应的node组件树。
具体地，开发终端上也运行了页面设计工具，开发人员可以对设计人员设计的目标页面的基础上进行进一步地开发。当开发人员需要对通过设计终端设计的目标页面进行开发时，可以从数据库中获取预先保存的目标页面对应的JSON格式的数据，然后对该数据进行反序列化，也转换为node组件树。
转换模块802，用于将所述node组件树中包含的css in js格式的组件样式数据转换为目标页面的css文件。
具体地，node组件树中包含有css in js格式的组件样式数据，其中，该组件样式数据为组件描述参数中的宽高，背景色，坐标位置等是用来说明组件样式的数据。
为了便于管理与维护这部分组件样式数据，可以将这部分数据转换成真正作用于目标页面的css文件。
解析模块803，用于获取所述目标页面的页面模板代码，对所述node组件树进行解析，并将解析得到的代码数据添加至所述页面模板代码中，得到所述目标页面的页面代码。
具体地，所述页面模板代码为用于显示一个完整的目标页面的基本逻辑代码，可以包括页面布局与网站的公共配置脚本等代码。在本发明一实施方式中，该页面模板代码中还可以包括根据页面类型处理页面适配的代码段。
在本实施例中，对node组件树进行解析的具体过程可以参照上述实施例，在本实施例中不再赘述。
在解析得到node组件树对应的代码数据之后，即该代码数据添加至模板代码中，以组装成目标页面的完整页面代码。在本实施例中，该页面代码为目标页面的HTML代码。
在一实施方式中，在对node组件树进行解析前，为了减少目标页面对应的代码数据的数据量，可以对node组件树进行优化。具体地，可以将所述node组件树中包含的冗余数据进行删除，其中，所述冗余数据为仅在设计终端中使用的数据参数，在开发终端中而不需要的参数数据，比如标识页面组件是否可拖拽的参数数据，用于用户识别的页面组件的中文别名数据等。在对冗余数据进行删除时，可以通过开发一段冗余数据删除代码来实现，通过该代码可以自动识别中node组件树中包含的冗余数据，然后将其删除。
本发明实施例，通过删除冗余数据可以减少目标页面对应的代码量，进而可以节省存储目标页面代码数据的存储空间。
在一实施方式中，当所述node组件树中包含的组件配置信息中包含组件交互信息时，在对所述node组件树进行解析时，可以根据所述组件交互信息生成两个组件交互事件，以实现组件之间进行数据传递。具体实现时，可以创建一个eventbus模块，然后根据组件信息生成两个组件交互的事件，并在第一个组件创建一个A事件订阅，这样，当第二个组件发布一个A事件时，通过eventbus模块即可以将第二个组件的数据传递给第一个组件，达到两个组件的交互效果。
在本发明另一实施方式中，在所述node组件树中包含的组件配置信息中包含动画的配置参数时，在对该动画的配置参数进行解析时，可以将该参数转换为Vue的指令与css3的animation代码。
上传模块804，用于将所述css文件以及所述页面代码进行打包上传至服务器。
具体地，在得到目标页面的css文件以及所述页面代码之后，可以通过webpack等构建工具将两者打包到一起，以方便对目标页面对应的代码进行管理。
在一实施方式中，在进行打包之前，还可以获取目标页面的JavaScript代码，然后将该JavaScript代码一起进行打包。
在本发明实施例中，为了节省存储空间，在完成打包之后，可以将打包后生成的数据进行压缩。
本发明实施例通过在通过设计终端设计目标页面之后，进一步通过开发终端对目标页面进行优化，从而可以效果更好的目标页面。
进一步地，在一实施方式中，所述页面开发装置，还包括：渲染模块。
所述渲染模块，用于根据所述页面代码以及所述node组件树中包含的各个页面组件的配置信息进行页面渲染，以显示所述目标页面。
具体地，为了可以在开发终端中可以看到最终的目标页面的显示效果，可以根据所述页面代码以及所述node组件树中包含的各个页面组件的配置信息进行页面渲染，以显示所述目标页面。在一具体场景中，所述目标页面如图6、7所示。
本实施例通过在开发终端中展示经优化后的目标页面，可以使得用户直观地观看到开发的目标页面的显示效果。
图10示意性示出了根据本申请实施例的适于实现页面开发方法的计算机设备2的硬件架构示意图。本实施例中，计算机设备2是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，可以是平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图10所示，计算机设备2至少包括但不限于：可通过系统总线相互通信链接存储器901、处理器902、网络接口903。其中：
存储器901至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器901可以是计算机设备2的内部存储模块，例如该计算机设备2的硬盘或内存。在另一些实施例中，存储器901也可以是计算机设备2的外部存储设备，例如该计算机设备2上配备的插接式硬盘，智能存储卡(SmartMedia Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，存储器901还可以既包括计算机设备2的内部存储模块也包括其外部存储设备。本实施例中，存储器901通常用于存储安装于计算机设备2的操作系统和各类应用软件，例如上述实施例中的页面开发方法的程序代码等。此外，存储器901还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器902在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器902通常用于控制计算机设备2的总体操作，例如执行与计算机设备2进行数据交互或者通信相关的控制和处理等。本实施例中，处理器902用于运行存储器901中存储的程序代码或者处理数据。
网络接口903可包括无线网络接口或有线网络接口，该网络接口903通常用于在计算机设备2与其他计算机设备之间建立通信链接。例如，网络接口903用于通过网络将计算机设备2与外部终端相连，在计算机设备2与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(GlobalSystem of Mobile communication，简称为GSM)、宽带码分多址(Wideband Code DivisionMultiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是，图10仅示出了具有部件901～903的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
在本实施例中，存储于存储器901中的页面开发方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器902)所执行，以完成本发明。
本申请实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现上述实施例中的页面开发方法的步骤。
本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如上述实施例中的页面开发方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到至少两个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域普通技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可获取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory，ROM)或随机存储记忆体(RandomAccessMemory，RAM)等。
最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。
Claims (10)
1.一种页面开发方法，其特征在于，包括：
接收目标页面的创建指令时，根据所述创建指令创建所述目标页面的基础配置参数以及预设的node组件树，其中，所述node组件树通过JavaScript代码编写；
根据所述基础配置参数在编辑窗口的页面编辑区加载对应的页面画布，其中，所述编辑窗口包括所述页面编辑区和组件预览区；
获取用户在所述页面画布中对页面组件的编辑操作，并基于所述编辑操作生成所述页面组件的配置信息；
将所述配置信息添加至所述node组件树对应的node节点组件，得到修改后的node组件树；
对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件。
2.根据权利要求1所述的页面开发方法，其特征在于，所述页面开发方法还包括：
当接收到页面保存指令时，对当前的node组件树进行序列化，以将所述当前的node组件树转换为对应的JSON格式的数据；
将所述JSON格式的数据保存至预设的数据库中。
3.根据权利要求1所述的页面开发方法，其特征在于，所述对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件包括：
对所述修改后的node组件树进行广度遍历解析；
在遍历解析到第i个node节点组件时，根据所述第i个node节点组件的配置信息中包含的组件标识信息加载对应的组件代码，其中，i为大于或者等于1的整数；
根据所述组件代码以及所述第i个node节点组件的配置信息进行页面渲染，以在所述页面画布中显示组件代码对应的页面组件。
4.一种页面开发方法，其特征在于，包括：
从预设的数据库中获取JSON格式的数据，并对所述JSON格式的数据进行反序列化，得到对应的node组件树；
将所述node组件树中包含的css in js格式的组件样式数据转换为目标页面的css文件；
获取所述目标页面的页面模板代码，对所述node组件树进行解析，并将解析得到的代码数据添加至所述页面模板代码中，得到所述目标页面的页面代码；
将所述css文件以及所述页面代码进行打包上传至服务器。
5.根据权利要求4所述的页面开发方法，其特征在于，所述页面开发方法还包括：
将所述node组件树中包含的冗余数据进行删除。
6.根据权利要求4所述的页面开发方法，其特征在于，所述页面开发方法还包括：
根据所述页面代码以及所述node组件树中包含的各个页面组件的配置信息进行页面渲染，以显示所述目标页面。
7.根据权利要求4所述的页面开发方法，其特征在于，在所述node组件树中包含的组件配置信息中包含组件交互信息时，则在对所述node组件树进行解析时，根据所述组件交互信息生成两个组件交互事件。
8.一种页面开发装置，其特征在于，包括：
创建模块，用于接收目标页面的创建指令时，根据所述创建指令创建所述目标页面的基础配置参数以及预设的node组件树，其中，所述node组件树通过JavaScript代码编写；
加载模块，用于根据所述基础配置参数在编辑窗口的页面编辑区加载对应的页面画布，其中，所述编辑窗口包括所述页面编辑区和组件预览区；
生成模块，用于获取用户在所述页面画布中对页面组件的编辑操作，并基于所述编辑操作生成所述页面组件的配置信息；
添加模块，用于将所述配置信息添加至所述node组件树对应的node节点组件，得到修改后的node组件树；
显示模块，用于对所述修改后的node组件树进行解析渲染，以在所述页面画布中显示所述页面组件。
9.一种页面开发装置，其特征在于，包括：
获取模块，用于从预设的数据库中获取JSON格式的数据，并对所述JSON格式的数据进行反序列化，得到对应的node组件树；
转换模块，用于将所述node组件树中包含的css in js格式的组件样式数据转换为目标页面的css文件；
解析模块，用于获取所述目标页面的页面模板代码，对所述node组件树进行解析，并将解析得到的代码数据添加至所述页面模板代码中，得到所述目标页面的页面代码；
上传模块，用于将所述css文件以及所述页面代码进行打包上传至服务器。
10.一种计算机设备，所述计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述的页面开发方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010097382.XA CN112416339A (zh) | 2020-02-17 | 2020-02-17 | 页面开发方法、装置、计算机设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010097382.XA CN112416339A (zh) | 2020-02-17 | 2020-02-17 | 页面开发方法、装置、计算机设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112416339A true CN112416339A (zh) | 2021-02-26 |
Family
ID=74844080
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010097382.XA Pending CN112416339A (zh) | 2020-02-17 | 2020-02-17 | 页面开发方法、装置、计算机设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112416339A (zh) |
Cited By (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113031947A (zh) * | 2021-03-05 | 2021-06-25 | 苏州帝博信息技术有限公司 | 在界面设计工具中使用的配置数据管理方法和装置 |
| CN113094561A (zh) * | 2021-05-08 | 2021-07-09 | 中国工商银行股份有限公司 | 网页生成方法、网页生成装置、电子设备以及存储介质 |
| CN113094049A (zh) * | 2021-04-29 | 2021-07-09 | 北京金山云网络技术有限公司 | 一种页面生成方法、页面展示方法、装置及电子设备 |
| CN113127791A (zh) * | 2021-05-19 | 2021-07-16 | 山东白令三维科技有限公司 | 一种运营页面配置方法、系统、装置及可读存储介质 |
| CN113419728A (zh) * | 2021-06-22 | 2021-09-21 | 康键信息技术（深圳）有限公司 | 营销页面的搭建方法、装置、设备及存储介质 |
| CN113553047A (zh) * | 2021-07-28 | 2021-10-26 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种将dsl转换为可视化页面的方法及装置 |
| CN113590119A (zh) * | 2021-07-29 | 2021-11-02 | 远光软件股份有限公司 | 页面创建方法、电子设备及存储介质 |
| CN113705177A (zh) * | 2021-08-23 | 2021-11-26 | 风变科技（深圳）有限公司 | 基于集成写稿环境的稿件录入方法、装置和计算机设备 |
| CN113760257A (zh) * | 2021-08-25 | 2021-12-07 | 成都摹客科技有限公司 | 基于主辅画板的产品原型设计方法、系统、介质及设备 |
| CN113779465A (zh) * | 2021-09-27 | 2021-12-10 | 腾讯科技（深圳）有限公司 | 一种页面预览的方法、相关装置及设备 |
| CN113778413A (zh) * | 2021-09-14 | 2021-12-10 | 销秘(重庆)云计算科技有限公司 | 页面开发方法、装置及存储介质 |
| CN113835701A (zh) * | 2021-09-22 | 2021-12-24 | 上海妙一生物科技有限公司 | 一种基于组件化的代码生成方法和装置 |
| CN114594939A (zh) * | 2022-03-22 | 2022-06-07 | 康键信息技术（深圳）有限公司 | 可视化页面构建方法、装置、计算机设备和存储介质 |
| CN115525852A (zh) * | 2021-10-28 | 2022-12-27 | 北京字节跳动网络技术有限公司 | 网页的渲染方法、装置、设备及存储介质 |
| WO2023123089A1 (zh) * | 2021-12-29 | 2023-07-06 | 深圳晶泰科技有限公司 | 内容管理系统、静态页面的管理方法、装置及存储介质 |
| CN116541009A (zh) * | 2023-07-07 | 2023-08-04 | 成都中科合迅科技有限公司 | 基于组件树的用户界面创建与更新方法和系统 |
| CN116627418A (zh) * | 2023-07-21 | 2023-08-22 | 之江实验室 | 一种基于递归算法的多级表单界面可视化生成方法及装置 |
| CN116931888A (zh) * | 2023-09-14 | 2023-10-24 | 大尧信息科技(湖南)有限公司 | 基于软件定义的教学实验构建方法、系统、设备和介质 |
| CN116931889A (zh) * | 2023-09-18 | 2023-10-24 | 浙江工企信息技术股份有限公司 | 一种基于对象树的软件建模方法及系统 |
| CN117234513A (zh) * | 2023-11-15 | 2023-12-15 | 腾讯科技（深圳）有限公司 | 页面的数据文件生成方法、装置、电子设备、介质及产品 |
Citations (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1235144A2 (en) * | 2000-12-22 | 2002-08-28 | Global Knowledge Network, Inc. | Methods and apparatus for grammar-based recognition of user-interface objects in HTML applications |
| WO2012068885A1 (zh) * | 2010-11-23 | 2012-05-31 | 腾讯科技（深圳）有限公司 | 一种编辑应用网页的方法及应用网页编辑装置 |
| WO2017041538A1 (zh) * | 2015-09-09 | 2017-03-16 | 深圳Tcl数字技术有限公司 | 终端用户界面的受控显示方法及装置 |
| CN106598574A (zh) * | 2016-11-25 | 2017-04-26 | 腾讯科技（深圳）有限公司 | 页面渲染的方法和装置 |
| CN107562423A (zh) * | 2017-07-27 | 2018-01-09 | 阿里巴巴集团控股有限公司 | Ui页面开发方法及装置 |
| CN107729005A (zh) * | 2017-10-12 | 2018-02-23 | 福建富士通信息软件有限公司 | 一种基于h5的可视化业务界面动态配置方法 |
| US20180210715A1 (en) * | 2017-01-25 | 2018-07-26 | Wal-Mart Stores, Inc. | Systems, method, and non-transitory computer-readable storage media for generating code for displaying a webpage |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN108446116A (zh) * | 2018-02-26 | 2018-08-24 | 平安普惠企业管理有限公司 | 应用程序页面的生成方法、装置、计算机设备和存储介质 |
| CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
| CN109299422A (zh) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | 可视化网页编辑方法、系统、设备及存储介质 |
| CN109582305A (zh) * | 2017-09-29 | 2019-04-05 | 阿里巴巴集团控股有限公司 | 用于移动应用页面元素的编码方法、装置及电子设备 |
| CN110007917A (zh) * | 2019-03-08 | 2019-07-12 | 国电南瑞科技股份有限公司 | 一种基于浏览器的可视化页面生成和浏览方法 |
| CN110083790A (zh) * | 2019-04-30 | 2019-08-02 | 珠海随变科技有限公司 | 页面编辑方法、页面输出方法、装置、计算机设备及介质 |
| CN110362308A (zh) * | 2019-06-20 | 2019-10-22 | 平安科技（深圳）有限公司 | 页面生成方法、装置、计算机设备和存储介质 |
| CN110445644A (zh) * | 2019-07-26 | 2019-11-12 | 广州鲁邦通物联网科技有限公司 | 页面和cli命令序列自动生成方法、页面生成的方法、设备端和页面管理系统 |
| US20200019418A1 (en) * | 2018-07-11 | 2020-01-16 | Sap Se | Machine learning analysis of user interface design |
-
2020
- 2020-02-17 CN CN202010097382.XA patent/CN112416339A/zh active Pending
Patent Citations (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1235144A2 (en) * | 2000-12-22 | 2002-08-28 | Global Knowledge Network, Inc. | Methods and apparatus for grammar-based recognition of user-interface objects in HTML applications |
| WO2012068885A1 (zh) * | 2010-11-23 | 2012-05-31 | 腾讯科技（深圳）有限公司 | 一种编辑应用网页的方法及应用网页编辑装置 |
| WO2017041538A1 (zh) * | 2015-09-09 | 2017-03-16 | 深圳Tcl数字技术有限公司 | 终端用户界面的受控显示方法及装置 |
| CN106598574A (zh) * | 2016-11-25 | 2017-04-26 | 腾讯科技（深圳）有限公司 | 页面渲染的方法和装置 |
| US20180210715A1 (en) * | 2017-01-25 | 2018-07-26 | Wal-Mart Stores, Inc. | Systems, method, and non-transitory computer-readable storage media for generating code for displaying a webpage |
| CN107562423A (zh) * | 2017-07-27 | 2018-01-09 | 阿里巴巴集团控股有限公司 | Ui页面开发方法及装置 |
| CN109582305A (zh) * | 2017-09-29 | 2019-04-05 | 阿里巴巴集团控股有限公司 | 用于移动应用页面元素的编码方法、装置及电子设备 |
| CN107729005A (zh) * | 2017-10-12 | 2018-02-23 | 福建富士通信息软件有限公司 | 一种基于h5的可视化业务界面动态配置方法 |
| CN108446116A (zh) * | 2018-02-26 | 2018-08-24 | 平安普惠企业管理有限公司 | 应用程序页面的生成方法、装置、计算机设备和存储介质 |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN108491205A (zh) * | 2018-03-22 | 2018-09-04 | 北京焦点新干线信息技术有限公司 | 一种基于组件树的前端网页开发方法及系统 |
| US20200019418A1 (en) * | 2018-07-11 | 2020-01-16 | Sap Se | Machine learning analysis of user interface design |
| CN109299422A (zh) * | 2018-09-20 | 2019-02-01 | 江苏满运软件科技有限公司 | 可视化网页编辑方法、系统、设备及存储介质 |
| CN110007917A (zh) * | 2019-03-08 | 2019-07-12 | 国电南瑞科技股份有限公司 | 一种基于浏览器的可视化页面生成和浏览方法 |
| CN110083790A (zh) * | 2019-04-30 | 2019-08-02 | 珠海随变科技有限公司 | 页面编辑方法、页面输出方法、装置、计算机设备及介质 |
| CN110362308A (zh) * | 2019-06-20 | 2019-10-22 | 平安科技（深圳）有限公司 | 页面生成方法、装置、计算机设备和存储介质 |
| CN110445644A (zh) * | 2019-07-26 | 2019-11-12 | 广州鲁邦通物联网科技有限公司 | 页面和cli命令序列自动生成方法、页面生成的方法、设备端和页面管理系统 |
Cited By (29)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113031947A (zh) * | 2021-03-05 | 2021-06-25 | 苏州帝博信息技术有限公司 | 在界面设计工具中使用的配置数据管理方法和装置 |
| CN113094049A (zh) * | 2021-04-29 | 2021-07-09 | 北京金山云网络技术有限公司 | 一种页面生成方法、页面展示方法、装置及电子设备 |
| CN113094561A (zh) * | 2021-05-08 | 2021-07-09 | 中国工商银行股份有限公司 | 网页生成方法、网页生成装置、电子设备以及存储介质 |
| CN113094561B (zh) * | 2021-05-08 | 2024-03-19 | 中国工商银行股份有限公司 | 网页生成方法、网页生成装置、电子设备以及存储介质 |
| CN113127791A (zh) * | 2021-05-19 | 2021-07-16 | 山东白令三维科技有限公司 | 一种运营页面配置方法、系统、装置及可读存储介质 |
| CN113419728A (zh) * | 2021-06-22 | 2021-09-21 | 康键信息技术（深圳）有限公司 | 营销页面的搭建方法、装置、设备及存储介质 |
| CN113553047A (zh) * | 2021-07-28 | 2021-10-26 | 湖南快乐阳光互动娱乐传媒有限公司 | 一种将dsl转换为可视化页面的方法及装置 |
| CN113590119A (zh) * | 2021-07-29 | 2021-11-02 | 远光软件股份有限公司 | 页面创建方法、电子设备及存储介质 |
| CN113705177A (zh) * | 2021-08-23 | 2021-11-26 | 风变科技（深圳）有限公司 | 基于集成写稿环境的稿件录入方法、装置和计算机设备 |
| CN113760257A (zh) * | 2021-08-25 | 2021-12-07 | 成都摹客科技有限公司 | 基于主辅画板的产品原型设计方法、系统、介质及设备 |
| CN113760257B (zh) * | 2021-08-25 | 2024-03-15 | 成都摹客科技有限公司 | 基于主辅画板的产品原型设计方法、系统、介质及设备 |
| CN113778413A (zh) * | 2021-09-14 | 2021-12-10 | 销秘(重庆)云计算科技有限公司 | 页面开发方法、装置及存储介质 |
| CN113835701A (zh) * | 2021-09-22 | 2021-12-24 | 上海妙一生物科技有限公司 | 一种基于组件化的代码生成方法和装置 |
| CN113835701B (zh) * | 2021-09-22 | 2024-04-02 | 上海妙一生物科技有限公司 | 一种基于组件化的代码生成方法和装置 |
| CN113779465A (zh) * | 2021-09-27 | 2021-12-10 | 腾讯科技（深圳）有限公司 | 一种页面预览的方法、相关装置及设备 |
| CN113779465B (zh) * | 2021-09-27 | 2024-01-30 | 腾讯科技（深圳）有限公司 | 一种页面预览的方法、相关装置及设备 |
| CN115525852A (zh) * | 2021-10-28 | 2022-12-27 | 北京字节跳动网络技术有限公司 | 网页的渲染方法、装置、设备及存储介质 |
| WO2023123089A1 (zh) * | 2021-12-29 | 2023-07-06 | 深圳晶泰科技有限公司 | 内容管理系统、静态页面的管理方法、装置及存储介质 |
| CN114594939A (zh) * | 2022-03-22 | 2022-06-07 | 康键信息技术（深圳）有限公司 | 可视化页面构建方法、装置、计算机设备和存储介质 |
| CN116541009B (zh) * | 2023-07-07 | 2023-09-08 | 成都中科合迅科技有限公司 | 基于组件树的用户界面创建与更新方法和系统 |
| CN116541009A (zh) * | 2023-07-07 | 2023-08-04 | 成都中科合迅科技有限公司 | 基于组件树的用户界面创建与更新方法和系统 |
| CN116627418B (zh) * | 2023-07-21 | 2023-10-03 | 之江实验室 | 一种基于递归算法的多级表单界面可视化生成方法及装置 |
| CN116627418A (zh) * | 2023-07-21 | 2023-08-22 | 之江实验室 | 一种基于递归算法的多级表单界面可视化生成方法及装置 |
| CN116931888A (zh) * | 2023-09-14 | 2023-10-24 | 大尧信息科技(湖南)有限公司 | 基于软件定义的教学实验构建方法、系统、设备和介质 |
| CN116931888B (zh) * | 2023-09-14 | 2023-12-01 | 大尧信息科技(湖南)有限公司 | 基于软件定义的教学实验构建方法、系统、设备和介质 |
| CN116931889A (zh) * | 2023-09-18 | 2023-10-24 | 浙江工企信息技术股份有限公司 | 一种基于对象树的软件建模方法及系统 |
| CN116931889B (zh) * | 2023-09-18 | 2023-12-12 | 浙江工企信息技术股份有限公司 | 一种基于对象树的软件建模方法及系统 |
| CN117234513A (zh) * | 2023-11-15 | 2023-12-15 | 腾讯科技（深圳）有限公司 | 页面的数据文件生成方法、装置、电子设备、介质及产品 |
| CN117234513B (zh) * | 2023-11-15 | 2024-03-08 | 腾讯科技（深圳）有限公司 | 页面的数据文件生成方法、装置、电子设备、介质及产品 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112416339A (zh) | 页面开发方法、装置、计算机设备 | |
| US10325012B2 (en) | Filtered stylesheets | |
| CN109918607B (zh) | 页面搭建方法及装置、介质和计算设备 | |
| RU2390834C2 (ru) | Способ и устройство для просмотра и взаимодействия с электронной таблицей из веб-браузера | |
| US20150286739A1 (en) | Html5-protocol-based webpage presentation method and device | |
| US7941746B2 (en) | Extended cascading style sheets | |
| US20170192877A1 (en) | Mobile application development and deployment | |
| WO2014197280A1 (en) | Animation editing | |
| JP2011159284A (ja) | ウェブサイトフォントのプレビュー | |
| CN103559184A (zh) | 表单页面的显示方法和装置 | |
| CN110968294B (zh) | 一种业务领域模型建立系统及方法 | |
| CN111078217A (zh) | 脑图生成方法、装置和计算机可读存储介质 | |
| KR101552914B1 (ko) | 웹 서버 어플리케이션 프레임워크 장치와 프레임워크를 이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는 컴퓨터로 읽을 수 있는 기록 매체 | |
| CN114564199A (zh) | 一种生成使用页面的方法、装置、设备及可读存储介质 | |
| US9727537B2 (en) | Application of a system font mapping to a design | |
| US20150067480A1 (en) | System and methods for designing artifacts associated with a webpage | |
| CN111736834B (zh) | 一种基于dsl的用户界面生成方法、装置及存储介质 | |
| CN114168875A (zh) | 一种页面程序的生成方法、装置、计算机设备及存储介质 | |
| JP7148804B2 (ja) | ソースファイル生成プログラム、ソースファイル生成方法、および情報処理装置 | |
| CN112015410A (zh) | 网页编辑方法、装置、系统以及计算机存储介质 | |
| CN112181396A (zh) | Rn代码自动生成系统、方法、设备及介质 | |
| CN111694723B (zh) | 产品在h5下运行时对节点及组件编辑的方法、存储介质 | |
| CN116911264B (zh) | 一种大型pdf批注方法及装置 | |
| CN112988136B (zh) | 一种用户界面编辑方法及装置 | |
| CN116009863A (zh) | 前端页面渲染方法、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |