CN111158677A - 一种用于多平台的页面布局数据处理方法和系统 - Google Patents
一种用于多平台的页面布局数据处理方法和系统 Download PDFInfo
- Publication number
- CN111158677A CN111158677A CN201811325603.3A CN201811325603A CN111158677A CN 111158677 A CN111158677 A CN 111158677A CN 201811325603 A CN201811325603 A CN 201811325603A CN 111158677 A CN111158677 A CN 111158677A
- Authority
- CN
- China
- Prior art keywords
- page
- layout
- client
- page layout
- platforms
- 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
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
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q30/00—Commerce
- G06Q30/06—Buying, selling or leasing transactions
- G06Q30/0601—Electronic shopping [e-shopping]
- G06Q30/0641—Shopping interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Business, Economics & Management (AREA)
- Accounting & Taxation (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Finance (AREA)
- Human Computer Interaction (AREA)
- Development Economics (AREA)
- Economics (AREA)
- Marketing (AREA)
- Strategic Management (AREA)
- General Business, Economics & Management (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种用于多平台的页面布局数据处理方法和系统，所述方法包括以下步骤：获取第一客户端的输入数据；根据第一客户端的输入数据，得到页面布局数据；根据页面布局数据，生成多个平台对应的页面布局代码；获取第二客户端的页面请求；根据页面请求向第二客户端发送所述多个平台中的一个平台对应的页面布局代码。本发明可以根据第一客户端的输入数据，生成多个平台对应的页面布局代码，并在第二客户端发起页面请求时，根据页面请求返回相应的平台对应的页面布局代码，因此，商家只需要进行一次页面布局的编辑，即可适用于不同的平台，提升了商家的工作效率。本发明可以广泛应用于网页技术。
Description
技术领域
本发明涉及网页技术，尤其是一种用于多平台的页面布局数据处理方法和系统。
背景技术
随着电商的发展，有很多中小企业都逐渐发展了自己在互联网上的宣传和销售渠道，这些渠道多种多样。同时，这些渠道的展示形式也是多种多样，企业所需要展示的页面的载体可能是WAP页面、PC页面、公众号、小程序或者APP等。但是目前，每个系统都是孤立的，即每一个系统都具有其独立的后台。例如，在APP后台做好的页面，不能直接拿到小程序里面用，需要在小程序的后台进行重新的调整。这样使得工作效率低下，并不利于人手紧缺的中小企业开展业务。
发明内容
为解决上述技术问题，本发明的目的在于：提供一种能够提升工作效率的用于多平台的页面布局数据处理方法和系统。
本发明所采取的第一种技术方案是：
一种用于多平台的页面布局数据处理方法，包括以下步骤：
获取第一客户端的输入数据；
根据第一客户端的输入数据，得到页面布局数据；
根据页面布局数据，生成多个平台对应的页面布局代码；
获取第二客户端的页面请求；
根据页面请求向第二客户端发送所述多个平台中的一个平台对应的页面布局代码。
进一步，所述获取第一客户端的输入数据，其具体为：
获取第一客户端采集的点击位置和拖拽轨迹。
进一步，所述根据第一客户端的输入数据，得到页面布局数据，其具体包括：
根据第一客户端采集的点击位置，得到用户选取的布局元素；
根据拖拽轨迹，得到所述布局元素在页面中的位置。
进一步，所述根据页面布局数据，生成多个平台对应的页面布局代码，其具体包括：
根据页面布局数据，得到页面中的所有布局元素；
查找页面中的所有布局元素在多个平台分别对应的前端代码；
根据页面中的所有布局元素在多个平台分别对应的前端代码，生成多个平台对应的页面布局代码。
进一步，所述多个平台包括WAP页面、PC页面、APP、公众号和小程序。
本发明所采取的第二种技术方案是：
一种用于多平台的页面布局数据处理系统，包括：
输入数据获取模块，用于获取第一客户端的输入数据；
页面布局数据获取模块，用于根据第一客户端的输入数据，得到页面布局数据；
生成模块，用于根据页面布局数据，生成多个平台对应的页面布局代码；
页面请求获取模块，用于获取第二客户端的页面请求；
发送模块，用于根据页面请求向第二客户端发送所述多个平台中的一个平台对应的页面布局代码。
进一步，所述输入数据获取模块具体用于：获取第一客户端采集的点击位置和拖拽轨迹。
进一步，页面布局数据获取模块包括：
布局元素选择单元，用于根据第一客户端采集的点击位置，得到用户选取的布局元素；
位置获取单元，用于根据拖拽轨迹，得到所述布局元素在页面中的位置。
进一步，所述生成模块包括：
布局元素获取单元，用于根据页面布局数据，得到页面中的所有布局元素；
前端代码查找单元，用于查找页面中的所有布局元素在多个平台分别对应的前端代码；
生成单元，用于根据页面中的所有布局元素在多个平台分别对应的前端代码，生成多个平台对应的页面布局代码。
进一步，所述多个平台包括WAP页面、PC页面、APP、公众号和小程序。
本发明的有益效果是：本发明根据第一客户端的输入数据得到页面布局数据，并根据所述页面布局数据生成多个平台的页面布局代码，使得商家可以通过第一客户端进行页面布局的编辑；在商家完成页面布局的编辑后，如果有普通用户通过第二客户端发起页面请求，本发明可以根据页面请求，返回不同平台的页面布局代码；因此，商家只需要进行一次页面布局的编辑，即可适用于不同的平台，提升了商家的工作效率。
附图说明
图1为本发明一种具体实施例的用于多平台的页面布局数据处理方法的流程图；
图2为本发明一种具体实施例的第一客户端的界面示意图。
具体实施方式
下面结合说明书附图和具体的实施例对本发明进行进一步的说明。
参照图1，一种用于多平台的页面布局数据处理方法，本方法主要应用于页面布局管理系统的服务器端。
所述包括以下步骤：
S1、获取第一客户端的输入数据；所述第一客户端可以指商家的客户端或者后台等。
S2、根据第一客户端的输入数据，得到页面布局数据。参照图2，第一客户端的操作界面包括编辑区域100和工具栏200，工具栏中包括若干个布局元素201，商家可以从工具栏200中通过单击和拖拽的方式，将某个布局元素201移动到编辑区域100的某个位置。所述布局元素201包括但不限于：搜索框、图片、视频、菜单、文章和标题等布局元素。
S3、根据页面布局数据，生成多个平台对应的页面布局代码。本步骤可以针对不同的平台预先在后台设置各个布局元素的前端代码，当获取页面的布局数据后，可以根据页面布局数据，获取布局元素的前端代码，从而得到多个平台对应的页面布局代码。使得商家可以一次布局后就在不同的平台中实现。同时，针对不同的平台或者硬件，其分辨率可能有所不同，本实施例中的前端代码可以采用相对像素实现。
S4、获取第二客户端的页面请求。当商家完成布局页面部署到生产环境后，普通用户可能通过其客户端获取商家的页面。所述第二客户端可以是浏览器、微信或者商家的APP等客户端。
S5、根据页面请求向第二客户端发送所述多个平台中的一个平台对应的页面布局代码。本步骤会首先根据页面请求识别第二客户端所要求获取的是哪个类型的页面，例如是WAP页面。然后再根据页面请求的类型返回相应的页面布局代码，然后第二客户端在本地对布局代码进行解析，向用户呈现页面效果。
作为优选的实施例，为了便于商家对页面进行编辑，本实施例通过收集商家点击和拖拽的数据的方式，实现页面布局的编辑，所述步骤S1具体为：
获取第一客户端采集的点击位置和拖拽轨迹。
作为优选的实施例，所述步骤S2具体包括：
S21、根据第一客户端采集的点击位置，得到用户选取的布局元素；根据用户的点击位置可以确定用户所选取的布局元素，该布局元素可以是在工具栏里面的布局元素，也可以是被用户拖拽到编辑区域内的布局元素。
S22、根据拖拽轨迹，得到所述布局元素在页面中的位置。
通过本实施例，商家可以通过点击和拖拽等操作完成对页面的编辑。进一步提升了商家的工作效率。
作为优选的实施例，所述步骤S3具体包括：
S31、根据页面布局数据，得到页面中的所有布局元素。所述页面布局数据里面包含若干个布局元素的编号以及其位置，因此通过布局元素的编号可以获取页面中所有的布局元素。
S32、查找页面中的所有布局元素在多个平台分别对应的前端代码。本步骤中的前端代码是预先写好存储在服务器中的，并且每个布局元素对应多个平台有不同的表现形式，即不同的代码。
S33、根据页面中的所有布局元素在多个平台分别对应的前端代码，生成多个平台对应的页面布局代码。本步骤根据预先设定的生成规则，将同一个平台的前端代码组合到一起，生成该平台的页面布局代码。
作为优选的实施例，所述多个平台包括WAP页面、PC页面、APP、公众号和小程序。
一种与图1中方法对应的用于多平台的页面布局数据处理系统，包括：
输入数据获取模块，用于获取第一客户端的输入数据；所述第一客户端可以指商家的客户端或者后台等。
页面布局数据获取模块，用于根据第一客户端的输入数据，得到页面布局数据。参照图2，第一客户端的操作界面包括编辑区域100和工具栏200，工具栏中包括若干个布局元素201，商家可以从工具栏200中通过单击和拖拽的方式，将某个布局元素201移动到编辑区域100的某个位置。所述布局元素201包括但不限于：搜索框、图片、视频、菜单、文章和标题等布局元素。
生成模块，用于根据页面布局数据，生成多个平台对应的页面布局代码；本模块可以针对不同的平台预先在后台设置各个布局元素的前端代码，当获取页面的布局数据后，可以根据页面布局数据，获取布局元素的前端代码，从而得到多个平台对应的页面布局代码。使得商家可以一次布局后就在不同的平台中实现。同时，针对不同的平台或者硬件，其分辨率可能有所不同，本实施例中的前端代码可以采用相对像素实现。
页面请求获取模块，用于获取第二客户端的页面请求；当商家完成布局页面部署到生产环境后，普通用户可能通过其客户端获取商家的页面。所述第二客户端可以是浏览器、微信或者商家的APP等客户端。
发送模块，用于根据页面请求向第二客户端发送所述多个平台中的一个平台对应的页面布局代码。本模块会首先根据页面请求识别第二客户端所要求获取的是哪个类型的页面，例如是WAP页面。然后再根据页面请求的类型返回相应的页面布局代码，然后第二客户端在本地对布局代码进行解析，向用户呈现页面效果。
作为优选的实施例，为了便于商家对页面进行编辑，本实施例通过收集商家点击和拖拽的数据的方式，实现页面布局的编辑，所述输入数据获取模块具体用于：获取第一客户端采集的点击位置和拖拽轨迹。
作为优选的实施例，页面布局数据获取模块包括：
布局元素选择单元，用于根据第一客户端采集的点击位置，得到用户选取的布局元素；根据用户的点击位置可以确定用户所选取的布局元素，该布局元素可以是在工具栏里面的布局元素，也可以是被用户拖拽到编辑区域内的布局元素。
位置获取单元，用于根据拖拽轨迹，得到所述布局元素在页面中的位置。
通过本实施例，商家可以通过点击和拖拽等操作完成对页面的编辑。进一步提升了商家的工作效率。
作为优选的实施例，所述生成模块包括：
布局元素获取单元，用于根据页面布局数据，得到页面中的所有布局元素。所述页面布局数据里面包含若干个布局元素的编号以及其位置，因此通过布局元素的编号可以获取页面中所有的布局元素。
前端代码查找单元，用于查找页面中的所有布局元素在多个平台分别对应的前端代码。本实施例中的前端代码是预先写好存储在服务器中的，并且每个布局元素对应多个平台有不同的表现形式，即不同的代码。
生成单元，用于根据页面中的所有布局元素在多个平台分别对应的前端代码，生成多个平台对应的页面布局代码。本单元根据预先设定的生成规则，将同一个平台的前端代码组合到一起，生成该平台的页面布局代码。
作为优选的实施例，所述多个平台包括WAP页面、PC页面、APP、公众号和小程序。
对于上述方法实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。
以上是对本发明的较佳实施进行了具体说明，但本发明并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。
Claims (10)
1.一种用于多平台的页面布局数据处理方法，其特征在于：包括以下步骤：
获取第一客户端的输入数据；
根据第一客户端的输入数据，得到页面布局数据；
根据页面布局数据，生成多个平台对应的页面布局代码；
获取第二客户端的页面请求；
根据页面请求向第二客户端发送所述多个平台中的一个平台对应的页面布局代码。
2.根据权利要求1所述的一种用于多平台的页面布局数据处理方法，其特征在于：所述获取第一客户端的输入数据，其具体为：
获取第一客户端采集的点击位置和拖拽轨迹。
3.根据权利要求2所述的一种用于多平台的页面布局数据处理方法，其特征在于：所述根据第一客户端的输入数据，得到页面布局数据，其具体包括：
根据第一客户端采集的点击位置，得到用户选取的布局元素；
根据拖拽轨迹，得到所述布局元素在页面中的位置。
4.根据权利要求3所述的一种用于多平台的页面布局数据处理方法，其特征在于：所述根据页面布局数据，生成多个平台对应的页面布局代码，其具体包括：
根据页面布局数据，得到页面中的所有布局元素；
查找页面中的所有布局元素在多个平台分别对应的前端代码；
根据页面中的所有布局元素在多个平台分别对应的前端代码，生成多个平台对应的页面布局代码。
5.根据权利要求1-4任一项所述的一种用于多平台的页面布局数据处理方法，其特征在于：所述多个平台包括WAP页面、PC页面、APP、公众号和小程序。
6.一种用于多平台的页面布局数据处理系统，其特征在于：包括：
输入数据获取模块，用于获取第一客户端的输入数据；
页面布局数据获取模块，用于根据第一客户端的输入数据，得到页面布局数据；
生成模块，用于根据页面布局数据，生成多个平台对应的页面布局代码；
页面请求获取模块，用于获取第二客户端的页面请求；
发送模块，用于根据页面请求向第二客户端发送所述多个平台中的一个平台对应的页面布局代码。
7.根据权利要求6所述的一种用于多平台的页面布局数据处理系统，其特征在于：所述输入数据获取模块具体用于：获取第一客户端采集的点击位置和拖拽轨迹。
8.根据权利要求7所述的一种用于多平台的页面布局数据处理系统，其特征在于：页面布局数据获取模块包括：
布局元素选择单元，用于根据第一客户端采集的点击位置，得到用户选取的布局元素；
位置获取单元，用于根据拖拽轨迹，得到所述布局元素在页面中的位置。
9.根据权利要求8所述的一种用于多平台的页面布局数据处理系统，其特征在于：所述生成模块包括：
布局元素获取单元，用于根据页面布局数据，得到页面中的所有布局元素；
前端代码查找单元，用于查找页面中的所有布局元素在多个平台分别对应的前端代码；
生成单元，用于根据页面中的所有布局元素在多个平台分别对应的前端代码，生成多个平台对应的页面布局代码。
10.根据权利要求6-9任一项所述的一种用于多平台的页面布局数据处理系统，其特征在于：所述多个平台包括WAP页面、PC页面、APP、公众号和小程序。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811325603.3A CN111158677A (zh) | 2018-11-08 | 2018-11-08 | 一种用于多平台的页面布局数据处理方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811325603.3A CN111158677A (zh) | 2018-11-08 | 2018-11-08 | 一种用于多平台的页面布局数据处理方法和系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111158677A true CN111158677A (zh) | 2020-05-15 |
Family
ID=70554900
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811325603.3A Pending CN111158677A (zh) | 2018-11-08 | 2018-11-08 | 一种用于多平台的页面布局数据处理方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111158677A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112115394A (zh) * | 2020-08-28 | 2020-12-22 | 长沙市到家悠享网络科技有限公司 | 数据展示方法、服务器、终端和介质 |
| CN114168215A (zh) * | 2021-11-17 | 2022-03-11 | 广东太平洋互联网信息服务有限公司 | 一种多个小程序功能模块插件化处理方法、系统及介质 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103777967A (zh) * | 2012-10-17 | 2014-05-07 | 阿里巴巴集团控股有限公司 | 页面返回方法、页面生成方法和装置 |
| CN108228180A (zh) * | 2017-12-27 | 2018-06-29 | 顺丰科技有限公司 | 基于可视化界面设计的自动代码生成方法及系统 |
-
2018
- 2018-11-08 CN CN201811325603.3A patent/CN111158677A/zh active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103777967A (zh) * | 2012-10-17 | 2014-05-07 | 阿里巴巴集团控股有限公司 | 页面返回方法、页面生成方法和装置 |
| CN108228180A (zh) * | 2017-12-27 | 2018-06-29 | 顺丰科技有限公司 | 基于可视化界面设计的自动代码生成方法及系统 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112115394A (zh) * | 2020-08-28 | 2020-12-22 | 长沙市到家悠享网络科技有限公司 | 数据展示方法、服务器、终端和介质 |
| CN114168215A (zh) * | 2021-11-17 | 2022-03-11 | 广东太平洋互联网信息服务有限公司 | 一种多个小程序功能模块插件化处理方法、系统及介质 |
| CN114168215B (zh) * | 2021-11-17 | 2024-03-19 | 广东太平洋互联网信息服务有限公司 | 一种多个小程序功能模块插件化处理方法、系统及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10148776B2 (en) | Clickstream visual analytics based on maximal sequential patterns | |
| US8650492B1 (en) | System and method for page navigation visualization and analysis | |
| US8122011B1 (en) | Identifying sibling queries | |
| US20070055939A1 (en) | Methods and apparatus for automatically generating presentations | |
| US20130339337A1 (en) | Auto tagging method and system | |
| US20090299964A1 (en) | Presenting search queries related to navigational search queries | |
| CN103959314A (zh) | 用于注释图像的系统和方法 | |
| CN105335423B (zh) | 一种网页的用户反馈的收集处理方法及装置 | |
| US20090064007A1 (en) | Generating and organizing references to online content | |
| US9148475B1 (en) | Navigation control for network clients | |
| CN104699841A (zh) | 提供搜索结果的列表摘要信息的方法和装置 | |
| CN102231152B (zh) | 基于移动终端ip地址进行精确查询的搜索方法 | |
| CN103365876B (zh) | 基于关系图谱生成网络操作辅助信息的方法与设备 | |
| US7797311B2 (en) | Organizing scenario-related information and controlling access thereto | |
| CN111158677A (zh) | 一种用于多平台的页面布局数据处理方法和系统 | |
| CN110264283A (zh) | 一种推广资源展示方法及装置 | |
| CN106257451A (zh) | 网站访问的方法及装置 | |
| CN103793453A (zh) | 用于web导航跟踪的方法和系统 | |
| CN105450460B (zh) | 网络操作记录方法及系统 | |
| CN105868299A (zh) | 一种数据搜索方法和装置 | |
| CN110287394B (zh) | 网站资源的爬取方法、装置、计算机设备和存储介质 | |
| EP2126817A1 (en) | Using scenario-related metadata to direct advertising | |
| US11256853B2 (en) | Parameterizing network communication paths | |
| CN104050174B (zh) | 一种个性化页面生成方法及装置 | |
| US10878054B2 (en) | Data processing method and apparatus |
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 |