CN112835576A - 一种页面封装方法 - Google Patents

一种页面封装方法 Download PDF

Info

Publication number
CN112835576A
CN112835576A CN202110061961.3A CN202110061961A CN112835576A CN 112835576 A CN112835576 A CN 112835576A CN 202110061961 A CN202110061961 A CN 202110061961A CN 112835576 A CN112835576 A CN 112835576A
Authority
CN
China
Prior art keywords
portal
column
page
main frame
packaging
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
Application number
CN202110061961.3A
Other languages
English (en)
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.)
Beijing Seeyon Internet Software Corp
Original Assignee
Beijing Seeyon Internet Software Corp
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 Beijing Seeyon Internet Software Corp filed Critical Beijing Seeyon Internet Software Corp
Priority to CN202110061961.3A priority Critical patent/CN112835576A/zh
Publication of CN112835576A publication Critical patent/CN112835576A/zh
Pending legal-status Critical Current

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

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)
  • Document Processing Apparatus (AREA)

Abstract

本发明公开了一种页面封装方法，通过将web页面拆分，形成不同的框架布局、元素，栏目布局、样式等形成不同的封装模板，本发明通过页面的拆分与封装技术，形成统一规范，成功解决了web页面0代码封装的难题，提升页面封装的效率，同时降低了页面封装的门槛。也可以通过不同的框架+栏目组合，预置不同的web页面模板，解决快速定制、封装页面的问题。

Description

一种页面封装方法
技术领域
本发明涉及页面封装技术领域，具体为一种页面封装方法。
背景技术
Web技术的发展，使得管理系统的开发更方便、功能更强大，在此系统的开发过程中，Web技术起了一个骨架式的支持作用；与此同时组件技术的发展为系统的开放性、集成性提供了便利，有效合理地引入组件技术是当前Web系统开发与发展的一个方向；通过对系统的开发进行建模，形象直观的图形化表示，可以显示系统的流程与功能。选择有效的建模方法，充分利用Web技术与组件技术，提高软件的开发效率，提高的软件的可靠性和可维护性，是每个软件开发人员所关心的问题。
目前的web页面使用体验感差，而且现有的web页面仍需要使用代码进行封装，封装效率低，因此，有必要进行改进。
发明内容
本发明的目的在于提供一种页面封装方法，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种页面封装方法,包括以下步骤：
A、首先将web页面拆分，形成不同的PC门户组成元素；
B、对不同的PC门户元素进行定义；
C、将PC门户元素进行整体封装，实现对Web页面的封装。
优选的，所述步骤A中PC门户组成元素包括主框架布局、主框架元素、栏目布局、栏目外框样式和栏目，所述PC门户各个组成元素形成不同的封装模板。
优选的，所述步骤B中主框架布局的定义：是指门户最外层的布局；主框架元素的定义：是指主框架中的元素，但不包含中间区域的栏目；栏目布局的定义：是指框架中间部分的布局，一般用几行几列来表达；栏目外框样式的定义：主要对栏目的标题，背景色进行描述；栏目的定义：栏目的内容。
优选的，所述主框架布局中，seeyonPortalLeft、seeyonPortalRight、seeyonPortalFooter是可选的，另外，用户可以设置seeyonPortalHeader的高度、seeyonPortalFooter的高度、seeyonPortalLeft的宽度，seeyonPortalRight的宽度，其中seeyonPortalLeft和seeyonPortalRight不能同时出现。
优选的，所述主框架元素指主框架中seeyonPortalHeader、seeyonPortalLeft、seeyonPortalRight、seeyonPortalFooter、seeyonPortalBody中要显示的页面元素；主框架元素主要由四部分内容组成：html模板、css样式、js动作、json数据。
优选的，所述栏目内容主要是包括栏目样式和栏目数据内容，以及对栏目内容的相关属性进行设置。
优选的，一种页面封装系统，包括web页面拆分模块、PC门户元素定义模块和web页面封装模块，所述web页面拆分模块用于将web页面拆分，形成不同的PC门户组成元素；所述PC门户元素定义模块用于对不同的PC门户元素进行定义；所述web页面封装模块将PC门户元素进行整体封装。
优选的，一种计算机存储介质，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得处理器执行上述所述页面封装方法的步骤。
与现有技术相比，本发明的有益效果是：本发明通过将web页面拆分，形成不同的框架布局、元素，栏目布局、样式等形成不同的封装模板，本发明通过页面的拆分与封装技术，形成统一规范，成功解决了web页面0代码封装的难题，提升页面封装的效率，同时降低了页面封装的门槛。也可以通过不同的框架+栏目组合，预置不同的web页面模板，解决快速定制、封装页面的问题。
附图说明
图1为本发明页面封装流程图；
图2为本发明PC门户示意图；
图3为本发明主框架布局示意图；
图4为本发明web页面封装示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在本发明的描述中，需要说明的是，术语“上”、“下”、“内”、“外”“前端”、“后端”、“两端”、“一端”、“另一端”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性。
在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“设置有”、“连接”等，应做广义理解，例如“连接”，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
请参阅图1-4，本发明提供一种技术方案：本发明提供如下技术方案：一种页面封装方法,包括以下步骤：
A、首先将web页面拆分，形成不同的PC门户组成元素；
B、对不同的PC门户元素进行定义；
C、将PC门户元素进行整体封装，实现对Web页面的封装。
本发明中，步骤A中PC门户组成元素包括主框架布局、主框架元素、栏目布局、栏目外框样式和栏目，所述PC门户各个组成元素形成不同的封装模板。
本发明中，步骤B中主框架布局的定义：是指门户最外层的布局，例如厂字型，网站型等；主框架元素的定义：是指主框架中的元素，但不包含中间区域的栏目，例如单位LOGO、名称、兼职切换；栏目布局的定义：是指框架中间部分的布局，一般用几行几列来表达；栏目外框样式的定义：主要对栏目的标题，背景色进行描述；栏目的定义：栏目的内容，比如已办栏目、待办栏目等。
本发明中，主框架布局中，seeyonPortalLeft、seeyonPortalRight、seeyonPortalFooter是可选的，另外，用户可以设置seeyonPortalHeader的高度、seeyonPortalFooter的高度、seeyonPortalLeft的宽度，seeyonPortalRight的宽度，其中seeyonPortalLeft和seeyonPortalRight不能同时出现。
本发明中，主框架元素指主框架中seeyonPortalHeader、seeyonPortalLeft、seeyonPortalRight、seeyonPortalFooter、seeyonPortalBody中要显示的页面元素；主框架元素主要由四部分内容组成：html模板、css样式、js动作、json数据。
本发明中，栏目内容主要是包括栏目样式和栏目数据内容，以及对栏目内容的相关属性进行设置，常见的栏目样式模板：比如列表、日历、棋盘等。
此外，本发明还公开了一种页面封装系统，包括web页面拆分模块、PC门户元素定义模块和web页面封装模块，所述web页面拆分模块用于将web页面拆分，形成不同的PC门户组成元素；所述PC门户元素定义模块用于对不同的PC门户元素进行定义；所述web页面封装模块将PC门户元素进行整体封装。
通过页面主框架+元素+栏目布局+栏目(内容+样式)的模式封装整体页面，形成web页面的封装技术。提供可视化web页面设计器，支持页面的可视化设计和封装，如图4所示。
本发明还公开了一种计算机存储介质，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得处理器执行上述所述页面封装方法的步骤。
综上所述，本发明通过将web页面拆分，形成不同的框架布局、元素，栏目布局、样式等形成不同的封装模板，本发明通过页面的拆分与封装技术，形成统一规范，成功解决了web页面0代码封装的难题，提升页面封装的效率，同时降低了页面封装的门槛。也可以通过不同的框架+栏目组合，预置不同的web页面模板，解决快速定制、封装页面的问题。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

Claims (8)

1.一种页面封装方法,其特征在于：包括以下步骤：
A、首先将web页面拆分，形成不同的PC门户组成元素；
B、对不同的PC门户元素进行定义；
C、将PC门户元素进行整体封装，实现对Web页面的封装。
2.根据权利要求1所述的一种页面封装方法，其特征在于：所述步骤A中PC门户组成元素包括主框架布局、主框架元素、栏目布局、栏目外框样式和栏目，所述PC门户各个组成元素形成不同的封装模板。
3.根据权利要求1所述的一种页面封装方法，其特征在于：所述步骤B中主框架布局的定义：是指门户最外层的布局；主框架元素的定义：是指主框架中的元素，但不包含中间区域的栏目；栏目布局的定义：是指框架中间部分的布局，一般用几行几列来表达；栏目外框样式的定义：主要对栏目的标题，背景色进行描述；栏目的定义：栏目的内容。
4.根据权利要求3所述的一种页面封装方法，其特征在于：所述主框架布局中，seeyonPortalLeft、seeyonPortalRight、seeyonPortalFooter是可选的，另外，用户可以设置seeyonPortalHeader的高度、seeyonPortalFooter的高度、seeyonPortalLeft的宽度，seeyonPortalRight的宽度，其中seeyonPortalLeft和seeyonPortalRight不能同时出现。
5.根据权利要求3所述的一种页面封装方法，其特征在于：所述主框架元素指主框架中seeyonPortalHeader、seeyonPortalLeft、seeyonPortalRight、seeyonPortalFooter、seeyonPortalBody中要显示的页面元素；主框架元素主要由四部分内容组成：html模板、css样式、js动作、json数据。
6.根据权利要求3所述的一种页面封装方法，其特征在于：所述栏目内容主要是包括栏目样式和栏目数据内容，以及对栏目内容的相关属性进行设置。
7.一种页面封装系统，其特征在于：包括web页面拆分模块、PC门户元素定义模块和web页面封装模块，所述web页面拆分模块用于将web页面拆分，形成不同的PC门户组成元素；所述PC门户元素定义模块用于对不同的PC门户元素进行定义；所述web页面封装模块将PC门户元素进行整体封装。
8.一种计算机存储介质，其特征在于，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得处理器执行权利要求1至6中任一项权利要求所述页面封装方法的步骤。
CN202110061961.3A 2021-01-18 2021-01-18 一种页面封装方法 Pending CN112835576A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110061961.3A CN112835576A (zh) 2021-01-18 2021-01-18 一种页面封装方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110061961.3A CN112835576A (zh) 2021-01-18 2021-01-18 一种页面封装方法

Publications (1)

Publication Number Publication Date
CN112835576A true CN112835576A (zh) 2021-05-25

Family

ID=75928445

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110061961.3A Pending CN112835576A (zh) 2021-01-18 2021-01-18 一种页面封装方法

Country Status (1)

Country Link
CN (1) CN112835576A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113419724A (zh) * 2021-06-28 2021-09-21 北京致远互联软件股份有限公司 一种可视化页面布局方法
CN113420248A (zh) * 2021-06-28 2021-09-21 北京致远互联软件股份有限公司 一种栏目外框样式定义方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101611399A (zh) * 2007-02-16 2009-12-23 罗凡 网页、网站建模和生成
CN101807209A (zh) * 2010-04-14 2010-08-18 深圳市同洲电子股份有限公司 网页制作的方法和系统，客户端、服务端
US7783967B1 (en) * 2005-10-28 2010-08-24 Aol Inc. Packaging web content for reuse
US20120198363A1 (en) * 2011-01-28 2012-08-02 Wells Fargo Bank Web Development System and Methodology
CN110059278A (zh) * 2019-03-12 2019-07-26 平安普惠企业管理有限公司 Web页面配置方法、服务器及计算机可读存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7783967B1 (en) * 2005-10-28 2010-08-24 Aol Inc. Packaging web content for reuse
CN101611399A (zh) * 2007-02-16 2009-12-23 罗凡 网页、网站建模和生成
CN101807209A (zh) * 2010-04-14 2010-08-18 深圳市同洲电子股份有限公司 网页制作的方法和系统，客户端、服务端
US20120198363A1 (en) * 2011-01-28 2012-08-02 Wells Fargo Bank Web Development System and Methodology
CN110059278A (zh) * 2019-03-12 2019-07-26 平安普惠企业管理有限公司 Web页面配置方法、服务器及计算机可读存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113419724A (zh) * 2021-06-28 2021-09-21 北京致远互联软件股份有限公司 一种可视化页面布局方法
CN113420248A (zh) * 2021-06-28 2021-09-21 北京致远互联软件股份有限公司 一种栏目外框样式定义方法

Similar Documents

Publication Publication Date Title
US8935602B2 (en) Hierarchical drag and drop structure editor for web sites
CN105373567B (zh) 页面生成方法及客户端
US7856596B2 (en) Method and system for separation of content and layout definitions in a display description
CN105740364B (zh) 页面处理方法及相关装置
CN112835576A (zh) 一种页面封装方法
CN102750148B (zh) 一种媒体信息显示方法及装置
US20120102392A1 (en) Method for displaying a data set
CN110297636B (zh) 一种基于页面配置文件的页面自动生成和参数管理方法、系统和装置
CN104380280A (zh) 动态转换网页的系统、方法以及计算机可读记录介质
CN108228180A (zh) 基于可视化界面设计的自动代码生成方法及系统
CN103279455B (zh) 电子表格的样式处理方法和装置
CN111881662A (zh) 表单生成方法、装置、处理设备及存储介质
CN104820589A (zh) 一种动态适配网页的方法及其装置
CN110825382A (zh) 一种前端大数据树形结构展示方法
CN107066244B (zh) 一种移动终端应用界面的生成方法和装置
CN110489117A (zh) 一种网页布局方法及装置
WO2015035319A1 (en) Method and apparatus of controlling page element
CN105956133B (zh) 智能终端上显示文件的方法及装置
CN111291533A (zh) 待显示句段的显示方法、装置、计算机设备和存储介质
CN104298489A (zh) 一种表单再现的实现方法
CN101236558B (zh) 一种基于web页的模拟IM客户端界面的方法和装置
CN113536179A (zh) 页面的生成方法、装置、电子设备和存储介质
US9158743B1 (en) Grid layout control for network site design
CN105335154A (zh) 一种面向多终端的自适应网页布局方法及装置
CN106780660A (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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210525