CN111966351A - 一种非模板化快速生成平台的实施方法 - Google Patents

一种非模板化快速生成平台的实施方法 Download PDF

Info

Publication number
CN111966351A
CN111966351A CN202010733208.XA CN202010733208A CN111966351A CN 111966351 A CN111966351 A CN 111966351A CN 202010733208 A CN202010733208 A CN 202010733208A CN 111966351 A CN111966351 A CN 111966351A
Authority
CN
China
Prior art keywords
page
user
elements
templated
generation platform
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.)
Granted
Application number
CN202010733208.XA
Other languages
English (en)
Other versions
CN111966351B (zh
Inventor
陈彬
余欢
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangdong Syni Communications Co ltd
Original Assignee
Guangdong Syni Communications Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Guangdong Syni Communications Co ltd filed Critical Guangdong Syni Communications Co ltd
Priority to CN202010733208.XA priority Critical patent/CN111966351B/zh
Publication of CN111966351A publication Critical patent/CN111966351A/zh
Application granted granted Critical
Publication of CN111966351B publication Critical patent/CN111966351B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种非模板化快速生成平台的实施方法，包括以下步骤：根据需要生成的非模板化页面的用途及场景分析出中页面中所需存在的元素类型；将分析出来所需的各种类型的元素做成固定的元件，提前实现好各个元件生成时的样式；将各个元件逐一添加到快速生成平台的元件库中，以供用户使用；用户通过选择拖拽自己想要的页面元素到预览区，从而实现增删页面元素及改变其在页面的位置；用户通过使用元件库中不同的元件，实现整个非模板化页面的配置；用户通过点击快速生成平台的生成按钮，即可快速生成配置好的非模板化页面。运用本发明，不再需要预先开发出大量的固定化样式模板，节省了大量的人力成本和时间成本。

Description

一种非模板化快速生成平台的实施方法
【技术领域】
本发明涉及数据模块生成技术领域，具体涉及到一种非模板化快速生成平台的实施方法。
【背景技术】
目前市面上有很多快速生成页面的工具或平台，可以实现零代码快速生成各种页面。但是其实现的方式都是预先开发好固定样式模板的页面，在快速生成页面时仅可对已提前开发好的固定模板进行选择生成，页面自由度很低，没办法做到随意增删页面元素及改变元素在页面的位置。要生成没有预先开发好模板的页面时，只能再重新对整个页面进行定制化开发，需要投入大量的时间及人力成本。
【发明内容】
为解决上述问题，本发明提出了一种非模板化快速生成平台的实施方法。
本发明的技术方案如下：
一种非模板化快速生成平台的实施方法，包括以下步骤；
(1)根据需要生成的非模板化页面的用途及场景分析出中页面中所需存在的元素类型；例如在需要生成营销活动页面的非模板化快速生成平台中，所需存在的元素类型包括图片元素、文字元素、按钮元素、音频元素、大转盘抽奖元素、九宫格抽奖元素、刮刮卡等抽奖元素、我的奖品列表元素、中奖名单列表元素；此步骤需要根据需要生成的非模板化页面的用途及场景具体情况具体分析；
(2)将分析出来所需的各种类型的元素做成固定的元件，提前实现好各个元件生成时的样式；这里要根据各种元素给其定义好对应的属性配置项；例如以图片元素为例，做成元件所需的配置项包括图片的宽度、高度、xy坐标值；生成元件时根据用户拖拉的效果生成对应的配置值，再通过css样式对各个配置项进行赋值即可；
(3)将各个元件逐一添加到快速生成平台的元件库中，以供用户使用。在快速生成平台中，我们用一组js对象来存储元件库中所有的元件，每种不同的元件均对应一个特定的js对象，根据其包含的配置项设定对应的属性值；图片元件对应的属性值包括：图片id、父节点对象id、图片宽度、图片高度、图片所处位置的x坐标、图片所处位置的y坐标、图片的链接共七项。
(4)用户通过选择拖拽自己想要的页面元素到预览区，从而实现增删页面元素及改变其在页面的位置。用户添加的所有元件，我们会统一存放到一个数组里面，每个元素都存成一个对象，每个对象的基本属性都包含有自己唯一的id和其父节点对象的id，而这个数组就是由各个对象组成，各个对象之间以父与子的关系进行关联；
(5)用户通过使用元件库中不同的元件，实现整个非模板化页面的配置。此步骤可以按用户想要生成页面的样式进行配置，无具体的限制，所有元件库的元件都可以随意搭配重复添加使用，每个元件所处的位置也可以通过拖拉方式改变。在用户对元件进行拖拉时，快速生成平台通过改变元件的xy坐标的值从而实现元件位置的改变；元件的xy坐标值设置范围没有具体限制，但须设置大于0，否则元件在页面中会显示不全；用户通过重复步骤(4)实现将多个不同的元件添加到页面上，每添加一个元件到页面就会生成一个新的对象，最终将所有添加到页面的对象保存到一个js集合里面；
(6)用户通过点击快速生成平台的生成按钮，即可快速生成配置好的非模板化页面。当用户点击生成按钮时，快速生成平台会根据用户添加元件时保存下来的元件对象数组，生成对应配置的各个页面以及对配置的图片进行下载，最后生成一个包含页面html、images文件夹、js文件夹、css文件夹组成的HTML5页面文件压缩包，用户解压后可以直接打开其中的html文件浏览生成的非模板化页面。
进一步地，步骤(2)中固化元件时需要提前实现好该元件在页面上展现的形态样式，用户拖拉元件移动时，改变的是元件xy坐标值这两个配置项，在页面上展现时通过控制元素css样式的top和left属性实现元素位置的改变。用户拖拉元件放大缩小时，改变的是元件的宽高属性这两个配置项，在页面上展现时通过控制元素css样式的height和width属性实现元素大小的改变。在css样式中top、left是没有范围限制的，height和width是用来控制元素高度和宽度的，所以限制需要设置大于0。
进一步地，步骤(3)中元件库的每一个元件都包含不同的属性，其中元件id、父节点id、元件x坐标，元件y坐标为必须属性项，所有元件都必需包含这几个属性，其他包含高度、宽度、图片链接这些为非必须属性项，需要根据实际添加的元件是否拥有这些属性值进行判断是否需要设置这些属性项。
进一步地，当用户将一个元件拖拉到页面中某个位置时，此时页面中就会根据该元件新增一个对象，该对象包含一个随机生成的id，父节点id自动保存为该页面对象的id。此时用户可以通过对该对象进行拖拉改变其xy坐标值，通过拖拽其大小改变其宽高属性值。
进一步地，生成HTML5页面文件压缩包时，需要对步骤(5)形成的js集合进行解析转化，遍历集合里面的每一个元素对象，将其xy坐标值转化为css样式中的top和left属性，宽高属性值转化为css样式中的height和width属性，转化后形成一个css文件，从而通过css样式控制每个元素的位置和大小。
为了解决在生成页面时只能选择预先开发好的固定模板，不能随意增删页面元素及改变元素位置的问题，本方法通过将所有页面元素元件化的方式，实现了一个快速生成平台。在该平台中用户可以随意增删页面各种元素，对所有的页面元素进行拖拉改变其在页面的位置，从而实现了零开发快速生成非模板化页面的方法。运用本发明，可以通过快速生成平台零代码快速生成出任意样式的非模板化页面，不再需要预先开发出大量的固定化样式模板，节省了大量的人力成本和时间成本。
【附图说明】
图1为快速生成平台的操作流程图；
图2为快速生成平台部分功能页面展示图；
【具体实施方式】
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处描述的具体实施例仅用于解释本发明，并不用于限定本发明。
一种非模板化快速生成平台的实施方法，包括以下步骤；
(1)根据需要生成的非模板化页面的用途及场景分析出中页面中所需存在的元素类型；
例如：在需要生成抽奖活动页面的非模板化快速生成平台中，所需存在的元素类型包括图片元素、文字元素、按钮元素、音频元素、大转盘抽奖元素、九宫格抽奖元素、刮刮卡等抽奖元素、我的奖品列表元素、中奖名单列表元素；在需要生成宣传海报页面的非模板化快速生成平台中，所需存在的元素类型包括图片元素、文字元素、宣传二维码元素；在需要生成拼图游戏页面的非模板化快速生成平台中，所需存在的元素类型包括按钮元素、图片元素、文字元素、拼图元素；此步骤需要根据需要生成的非模板化页面的用途及场景具体情况具体分析；
(2)将分析出来所需的各种类型的元素做成固定的元件，提前实现好各个元件生成时的样式；这里要根据各种元素给其定义好对应的属性配置项；
例如以图片元素为例，做成元件所需的配置项包括图片的宽度、高度、xy坐标值、图片的链接；以按钮元素为例，做成元件所需的配置项包括按钮的宽度、高度、xy坐标值、按钮的圆角度；以文字元素为例，做成元件所需的配置项包括文字的大小、xy坐标值、文字的字体颜色、文字的内容；以音频元素为例，做成元件所需的配置项包括音频符合的大小、xy坐标值、音频的链接；生成元件时根据用户拖拉的效果或输入的值生成对应的配置值，再通过css样式对各个配置项进行赋值即可；
(3)将各个元件逐一添加到快速生成平台的元件库中，以供用户使用。在快速生成平台中，我们用一组js对象来存储元件库中所有的元件，每种不同的元件均对应一个特定的js对象，根据其包含的配置项设定对应的属性值；
例如：图片元件对应的属性值包括：图片id、父节点对象id、图片宽度、图片高度、图片所处位置的x坐标、图片所处位置的y坐标、图片的链接共七项。按钮元件对应的属性值包括：按钮id、父节点对象id、按钮宽度、按钮高度、按钮所处位置的x坐标、按钮所处位置的y坐标、按钮的圆角度共七项。文字元件对应的属性值包括：文字id、父节点对象id、字体大小、字体颜色、文字所处位置的x坐标、文字所处位置的y坐标、文字的内容共七项。音频元件对应的属性值包括：音频id、父节点对象id、音频图标的宽度、音频图标的高度、音频图标所处位置的x坐标、音频图标所处位置的y坐标、音频的链接共七项。
(4)用户通过选择拖拽自己想要的页面元素到预览区，从而实现增删页面元素及改变其在页面的位置。用户添加的所有元件，我们会统一存放到一个数组里面，每个元素都存成一个对象，每个对象的基本属性都包含有自己唯一的id和其父节点对象的id，而这个数组就是由各个对象组成，各个对象之间以父与子的关系进行关联；
(5)用户通过使用元件库中不同的元件，实现整个非模板化页面的配置。此步骤可以按用户想要生成页面的样式进行配置，无具体的限制，所有元件库的元件都可以随意搭配重复添加使用，每个元件所处的位置也可以通过拖拉方式改变。在用户对元件进行拖拉时，快速生成平台通过改变元件的xy坐标的值从而实现元件位置的改变；元件的xy坐标值设置范围没有具体限制，但须设置大于0，否则元件在页面中会显示不全；用户通过重复步骤(4)实现将多个不同的元件添加到页面上，每添加一个元件到页面就会生成一个新的对象，最终将所有添加到页面的对象保存到一个js集合里面；
(6)用户通过点击快速生成平台的生成按钮，即可快速生成配置好的非模板化页面。当用户点击生成按钮时，快速生成平台会根据用户添加元件时保存下来的元件对象数组，生成对应配置的各个页面以及对配置的图片进行下载，最后生成一个包含页面html、images文件夹、js文件夹、css文件夹组成的HTML5页面文件压缩包，用户解压后可以直接打开其中的html文件浏览生成的非模板化页面。
进一步地，步骤(2)中固化元件时需要提前实现好该元件在页面上展现的形态样式，用户拖拉元件移动时，改变的是元件xy坐标值这两个配置项，在页面上展现时通过控制元素css样式的top和left属性实现元素位置的改变。用户拖拉元件放大缩小时，改变的是元件的宽高属性这两个配置项，在页面上展现时通过控制元素css样式的height和width属性实现元素大小的改变。在css样式中top、left是没有范围限制的，height和width是用来控制元素高度和宽度的，所以限制需要设置大于0。
进一步地，步骤(3)中元件库的每一个元件都包含不同的属性，其中元件id、父节点id、元件x坐标，元件y坐标为必须属性项，所有元件都必需包含这几个属性，其他包含高度、宽度、图片链接这些为非必须属性项，需要根据实际添加的元件是否拥有这些属性值进行判断是否需要设置这些属性项。
进一步地，当用户将一个元件拖拉到页面中某个位置时，此时页面中就会根据该元件新增一个对象，该对象包含一个随机生成的id，父节点id自动保存为该页面对象的id。此时用户可以通过对该对象进行拖拉改变其xy坐标值，通过拖拽其大小改变其宽高属性值。
进一步地，生成HTML5页面文件压缩包时，需要对步骤(5)形成的js集合进行解析转化，遍历集合里面的每一个元素对象，将其xy坐标值转化为css样式中的top和left属性，宽高属性值转化为css样式中的height和width属性，转化后形成一个css文件，从而通过css样式控制每个元素的位置和大小。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (5)

1.一种非模板化快速生成平台的实施方法，其特征在于：包括以下步骤；
(1)根据需要生成的非模板化页面的用途及场景分析出中页面中所需存在的元素类型；
(2)将分析出来所需的各种类型的元素做成固定的元件，提前实现好各个元件生成时的样式；这里要根据各种元素给其定义好对应的属性配置项；
(3)将各个元件逐一添加到快速生成平台的元件库中，以供用户使用；
在快速生成平台中，我们用一组js对象来存储元件库中所有的元件，每种不同的元件均对应一个特定的js对象，根据其包含的配置项设定对应的属性值；
(4)用户通过选择拖拽自己想要的页面元素到预览区，从而实现增删页面元素及改变其在页面的位置；
用户添加的所有元件，我们会统一存放到一个数组里面，每个元素都存成一个对象，每个对象的基本属性都包含有自己唯一的id和其父节点对象的id，而这个数组就是由各个对象组成，各个对象之间以父与子的关系进行关联；
(5)用户通过使用元件库中不同的元件，实现整个非模板化页面的配置；
此步骤可以按用户想要生成页面的样式进行配置，无具体的限制，所有元件库的元件都可以随意搭配重复添加使用，每个元件所处的位置也可以通过拖拉方式改变；在用户对元件进行拖拉时，快速生成平台通过改变元件的xy坐标的值从而实现元件位置的改变；元件的xy坐标值设置范围没有具体限制，但须设置大于0，否则元件在页面中会显示不全；用户通过重复步骤(4)实现将多个不同的元件添加到页面上，每添加一个元件到页面就会生成一个新的对象，最终将所有添加到页面的对象保存到一个js集合里面；
(6)用户通过点击快速生成平台的生成按钮，即可快速生成配置好的非模板化页面；
当用户点击生成按钮时，快速生成平台会根据用户添加元件时保存下来的元件对象数组，生成对应配置的各个页面以及对配置的图片进行下载，最后生成一个包含页面html、images文件夹、js文件夹、css文件夹组成的HTML5页面文件压缩包，用户解压后可以直接打开其中的html文件浏览生成的非模板化页面。
2.根据权利要求1所述的一种非模板化快速生成平台的实施方法，其特征在于，步骤(2)中固化元件时需要提前实现好该元件在页面上展现的形态样式，用户拖拉元件移动时，改变的是元件xy坐标值这两个配置项，在页面上展现时通过控制元素css样式的top和left属性实现元素位置的改变。用户拖拉元件放大缩小时，改变的是元件的宽高属性这两个配置项，在页面上展现时通过控制元素css样式的height和width属性实现元素大小的改变。在css样式中top、left是没有范围限制的，height和width是用来控制元素高度和宽度的，所以限制设置大于0。
3.根据权利要求1所述的一种非模板化快速生成平台的实施方法，其特征在于，步骤(3)中元件库的每一个元件都包含不同的属性，其中元件id、父节点id、元件x坐标，元件y坐标为必须属性项，所有元件都必需包含这几个属性，其他包含高度、宽度、图片链接这些为非必须属性项，需要根据实际添加的元件是否拥有这些属性值进行判断是否需要设置这些属性项。
4.根据权利要求1所述的一种非模板化快速生成平台的实施方法，其特征在于，步骤(4)中：当用户将一个元件拖拉到页面中某个位置时，此时页面中就会根据该元件新增一个对象，该对象包含一个随机生成的id，父节点id自动保存为该页面对象的id。此时用户可以通过对该对象进行拖拉改变其xy坐标值，通过拖拽其大小改变其宽高属性值。
5.根据权利要求1中所述的一种非模板化快速生成平台的实施方法，其特征在于，步骤(6)中：生成HTML5页面文件压缩包时，需要对步骤(5)形成的js集合进行解析转化，遍历集合里面的每一个元素对象，将其xy坐标值转化为css样式中的top和left属性，宽高属性值转化为css样式中的height和width属性，转化后形成一个css文件，从而通过css样式控制每个元素的位置和大小。
CN202010733208.XA 2020-07-27 2020-07-27 一种非模板化快速生成平台的实施方法 Active CN111966351B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010733208.XA CN111966351B (zh) 2020-07-27 2020-07-27 一种非模板化快速生成平台的实施方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010733208.XA CN111966351B (zh) 2020-07-27 2020-07-27 一种非模板化快速生成平台的实施方法

Publications (2)

Publication Number Publication Date
CN111966351A true CN111966351A (zh) 2020-11-20
CN111966351B CN111966351B (zh) 2022-03-22

Family

ID=73363117

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010733208.XA Active CN111966351B (zh) 2020-07-27 2020-07-27 一种非模板化快速生成平台的实施方法

Country Status (1)

Country Link
CN (1) CN111966351B (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101025738A (zh) * 2006-02-21 2007-08-29 广州保税区天懋数码电子商务有限公司 一种免模板动态网站生成方法
CN103019684A (zh) * 2012-11-20 2013-04-03 北京思特奇信息技术股份有限公司 一种基于动态模板的配置业务页面的方法
CN105242928A (zh) * 2015-10-10 2016-01-13 苏州工业园区凌志软件股份有限公司 一种基于模块工厂的快速开发平台方法
CN108549533A (zh) * 2018-04-11 2018-09-18 上海百事灵多媒体科技有限公司 一种epg页面可视化开发中添加自定义控件的方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101025738A (zh) * 2006-02-21 2007-08-29 广州保税区天懋数码电子商务有限公司 一种免模板动态网站生成方法
CN103019684A (zh) * 2012-11-20 2013-04-03 北京思特奇信息技术股份有限公司 一种基于动态模板的配置业务页面的方法
CN105242928A (zh) * 2015-10-10 2016-01-13 苏州工业园区凌志软件股份有限公司 一种基于模块工厂的快速开发平台方法
CN108549533A (zh) * 2018-04-11 2018-09-18 上海百事灵多媒体科技有限公司 一种epg页面可视化开发中添加自定义控件的方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
冯燕等: "网页页面布局动态生成方法", 《科学家》 *

Also Published As

Publication number Publication date
CN111966351B (zh) 2022-03-22

Similar Documents

Publication Publication Date Title
US11003422B2 (en) Methods and systems for visual programming using polymorphic, dynamic multi-dimensional structures
TWI808393B (zh) 頁面處理方法、裝置、設備及儲存媒體
US6792575B1 (en) Automated processing and delivery of media to web servers
US5845299A (en) Draw-based editor for web pages
US20020188632A1 (en) Table editor for web pages
WO2016200448A1 (en) Generating layout for content presentation structures
CA2817554A1 (en) Mobile content management system
AU2005202722A1 (en) Common charting using shapes
CN113032708A (zh) 一种无代码Web开发系统
CN104820589A (zh) 一种动态适配网页的方法及其装置
CN112686015A (zh) 图表生成方法、装置、设备及存储介质
CN106776994B (zh) 一种工程符号在工程报表和网页中的应用方法及系统
CN109634610B (zh) 一种界面标注数据的生成方法及装置
CN111258434A (zh) 在聊天界面插入图片的方法、装置、设备及存储介质
CN111367514A (zh) 页面卡片的开发方法和装置、计算设备和存储介质
CN114564131A (zh) 一种内容发布方法、装置、计算机设备及存储介质
Verou CSS Secrets: Better Solutions to Everyday Web Design Problems
US20080082924A1 (en) System for controlling objects in a recursive browser system
CN111966351B (zh) 一种非模板化快速生成平台的实施方法
US8655865B1 (en) Method and apparatus for indexing rich internet content using contextual information
Moreto et al. Bootstrap 4–responsive web design
CN111782740A (zh) 座位数据处理方法、计算设备及存储介质
CN110928540A (zh) 一种页面生成方法及装置
CN111782309B (zh) 显示信息的方法、装置及计算机可读存储介质
CN112804347B (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
GR01 Patent grant
GR01 Patent grant