CN103034731A - 一种生成Web前端交互页面的方法 - Google Patents
一种生成Web前端交互页面的方法 Download PDFInfo
- Publication number
- CN103034731A CN103034731A CN2012105602709A CN201210560270A CN103034731A CN 103034731 A CN103034731 A CN 103034731A CN 2012105602709 A CN2012105602709 A CN 2012105602709A CN 201210560270 A CN201210560270 A CN 201210560270A CN 103034731 A CN103034731 A CN 103034731A
- Authority
- CN
- China
- Prior art keywords
- page
- interface
- assembly
- described step
- source code
- 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
Links
Images
Abstract
本发明涉及一种生成Web前端交互页面的方法，包括：1、采用前端AJAX技术选择页面框架，并存入Cookie模块；2，构建标准化界面组件，将其排列界面设计器上方，并选择相应组件布置到界面设计器下方的界面设计区；3，对选中的组件进行参数配置，得到需要的交互组件；4，采用CSS技术为页面框架和交互组件设计若干皮肤文件；5，从Cookie模块中获取页面框架，并采用JavaScript技术获取交互组件源代码和当前皮肤文件；6，将页面框架、交互组件源代码和当前皮肤文件上传送至服务器端，生成Web前端交互页面。本发明将用户与界面源代码隔离开，可高效地实现前端交互页面的生成，出错率低，且配置时间短。
Description
技术领域
本发明涉及计算机应用技术领域，特别是涉及一种生成Web前端交互页面的方法。
背景技术
Web前端交互页面的制作不同于普通前端页面，不仅需要HTML文件，还需要相关控件的JS与CSS（Cascading Style Sheet，级联样式表）文件，只有将这三种文件结合使用才能生成完整的前端交互页面。现有技术下通常通过人工组合三种文件来生成Web前端交互页面，其生成效率较低，且人工组合页面时的出错率较高，配置时候也相对比较长。
发明内容
本发明所要解决的技术问题是提供一种生成Web前面交互页面的方法，用于解决现有技术中人工组合生成Web前端交互页面时存在的效率低、出错率高、配置时间长等问题。
本发明解决上述技术问题的技术方案如下：一种生成Web前端交互页面的方法，包括：
步骤1，采用前端AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）技术选择页面框架，并将页面框架存入Cookie模块；
步骤2，构建一套标准化界面组件，将其排列在基于浏览器的界面设计器上方，并从标准化界面组件中选择相应组件布置到界面设计器下方的界面设计区；
步骤3，对界面设计区的组件进行参数配置，得到需要的交互组件；
步骤4，采用CSS技术为页面框架和交互组件设计若干皮肤文件；
步骤5，从Cookie模块中获取页面框架，并采用JavaScript技术从界面设计区得到交互组件源代码和当前皮肤文件；
步骤6，将页面框架、交互组件源代码和当前皮肤文件上传送至服务器端，在服务器端生成Web前端交互页面。
在上述技术方案的基础上，本发明还可以做如下改进。
进一步，所述步骤1中的页面框架是预定义的一整套页面布局的集合。
进一步，所述步骤1中的页面框架采用HTML、CSS和JavaScript技术进行封装。
根据权利要求1所述的方法，其特征在于，所述步骤2中采用HTML、CSS和JavaScript技术构建标准化界面组件。
进一步，所述步骤2中的标准化界面组件包括导航、按钮、列表、弹出层、选项卡、折叠菜单、滑动框、表单元素和／或日期选择器。
进一步，所述步骤2中还为构建的标准化界面组件提供了组件效果图。
进一步，所述步骤3中对选中的组件进行参数配置时，其配置的参数包括大小、链接地址、是否圆角和/或是否自动打开。
进一步，所述步骤4中的每套皮肤文件对应的结构和选择器相同。
进一步，所述步骤4中还包括：为每套皮肤文件提供一个相应的效果图。
进一步，所述步骤5中还包括：使用自定义过滤函数将源代码过滤为符合规则的可用代码。
本发明的有益效果是：本发明将用户与界面源代码隔离开，可高效地实现前端交互页面的生成，出错率低，且配置时间短；通过界面设计器及组件效果图，能实现所见即所得的设计效果；根据对组件的参数配置，可实现组件的个性化需求；通过多套皮肤设计，易于实现为界面换肤，且为每套皮肤设计了相应的效果图，易于辨识。
附图说明
图1为本发明所述生成Web前端交互页面的方法的流程示意图。
具体实施方式
以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
实施例一是一种生成Web前端交互页面的方法，主要包括：
步骤1，采用前端AJAX技术选择页面框架，并将页面框架存入Cookie模块。
具体地，页面框架是预定义的一整套页面布局的集合，采用HTML、CSS和JavaScript技术封装常用的页面框架，并通过前端AJAX技术让用户选择页面框架，用户可以根据自身需求选择适合的页面框架，并将用户的选择存入Cookie模块中。
步骤2，构建一套标准化界面组件，将其排列在基于浏览器的界面设计器上方，并从标准化界面组件中选择相应组件布置到界面设计器下方的界面设计区。
在实质上是用户选择交互控件的过程，具体包括：使用HTML、CSS和JavaScript构建一套标准化界面组件并提供组件效果图，组件包括导航、按钮、列表、弹出层、选项卡、折叠菜单、滑动框、表单元素、日期选择器等等；为用户提供一个基于浏览器的界面设计器，设计器上方排列标准化组件，下方为界面设计区，用户可以通过拖拽，插入组件效果等动作将所选交互组件布置到设计区中，由此实现所见即所得的设计效果，将用户与界面源代码隔离开，提高效率且避免出错。
步骤3，对界面设计区的组件进行参数配置，得到需要的交互组件。
具体地，根据不同组件的特性，为每个组件提供特性参数配置，如大小、链接地址、是否圆角、自动打开等等，参数因组件不同而不同。用户在选中界面设计区的某个组件后，可对选中组件进行参数配置（配置方式为选择预定值或输入），从而实现组件的个性化需求。
步骤4，采用CSS技术为页面框架和交互组件设计若干皮肤文件。
具体地，为页面框架和标准组件，提供至少3套（或更多）皮肤，皮肤文件使用CSS文件，每套皮肤文件中的结构和选择器均相同，但具体规则不同。每套皮肤提供一个效果图供用户辨识，然后点击某个效果图后，即调用对应的皮肤文件，从而实现换肤。
步骤5，从Cookie模块中获取页面框架，并采用JavaScript技术从界面设计区得到交互组件源代码和当前皮肤文件。
步骤6，将页面框架、交互组件源代码和当前皮肤文件上传送至服务器端，在服务器端生成Web前端交互页面。
具体地，从Cookie中获取用户选择的页面框架；使用JavaScript获取界面设计区的源代码，使用自定义过滤函数将源代码过滤为符合规则的可用代码；使用JavaScript判断用户当前使用的皮肤文件。将页面框架、源代码和皮肤文件传送至服务器端，服务器端使用程序语言（如PHP，Java等）在服务器上生成这些文件，并按照标准目录整合打包，生成Web前端交互页面。
以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.一种生成Web前端交互页面的方法，其特征在于，包括：
步骤1，采用前端AJAX技术选择页面框架，并将页面框架存入Cookie模块；
步骤2，构建一套标准化界面组件，将其排列在基于浏览器的界面设计器上方，并从标准化界面组件中选择相应组件布置到界面设计器下方的界面设计区；
步骤3，对界面设计区的组件进行参数配置，得到需要的交互组件；
步骤4，采用CSS级联样式表技术为页面框架和交互组件设计若干皮肤文件；
步骤5，从Cookie模块中获取页面框架，并采用JavaScript技术从界面设计区得到交互组件源代码和当前皮肤文件；
步骤6，将页面框架、交互组件源代码和当前皮肤文件上传送至服务器端，在服务器端生成Web前端交互页面。
2.根据权利要求1所述的方法，其特征在于，所述步骤1中的页面框架是预定义的一整套页面布局的集合。
3.根据权利要求1所述的方法，其特征在于，所述步骤1中的页面框架采用HTML超文本标记语言、CSS级联样式表和JavaScript技术进行封装。
4.根据权利要求1所述的方法，其特征在于，所述步骤2中采用HTML、CSS和JavaScript技术构建标准化界面组件。
5.根据权利要求1所述的方法，其特征在于，所述步骤2中的标准化界面组件包括导航、按钮、列表、弹出层、选项卡、折叠菜单、滑动框、表单元素和／或日期选择器。
6.根据权利要求1所述的方法，其特征在于，所述步骤2中还为构建的标准化界面组件提供了组件效果图。
7.根据权利要求1所述的方法，其特征在于，所述步骤3中对选中的组件进行参数配置时，其配置的参数包括大小、链接地址、是否圆角和/或是否自动打开。
8.根据权利要求1所述的方法，其特征在于，所述步骤4中的每套皮肤文件对应的结构和选择器相同。
9.根据权利要求1所述的方法，其特征在于，所述步骤4中还包括：为每套皮肤文件提供一个相应的效果图。
10.根据权利要求1所述的方法，其特征在于，所述步骤5中还包括：使用自定义的过滤函数将源代码过滤为符合规则的可用代码。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210560270.9A CN103034731B (zh) | 2012-12-20 | 2012-12-20 | 一种生成Web前端交互页面的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210560270.9A CN103034731B (zh) | 2012-12-20 | 2012-12-20 | 一种生成Web前端交互页面的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103034731A true CN103034731A (zh) | 2013-04-10 |
| CN103034731B CN103034731B (zh) | 2016-12-28 |
Family
ID=48021625
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210560270.9A Active CN103034731B (zh) | 2012-12-20 | 2012-12-20 | 一种生成Web前端交互页面的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103034731B (zh) |
Cited By (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103176804A (zh) * | 2013-04-19 | 2013-06-26 | 中国海洋大学 | 一种用户界面实现方法 |
| CN103955364A (zh) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | 一种适用于手机的前端组件方法 |
| CN104461580A (zh) * | 2014-12-30 | 2015-03-25 | 北京经开投资开发股份有限公司 | 一种Web用户界面实现方法 |
| CN104573069A (zh) * | 2015-01-26 | 2015-04-29 | 四川中电启明星信息技术有限公司 | 企业门户前端渲染引擎 |
| CN104598465A (zh) * | 2013-10-30 | 2015-05-06 | 腾讯科技（深圳）有限公司 | 一种浏览器内嵌地址栏的实现方法及装置 |
| CN104598230A (zh) * | 2015-01-12 | 2015-05-06 | 北京中交兴路车联网科技有限公司 | 一种车辆运营系统的前端页面生成方法 |
| CN104978194A (zh) * | 2015-06-25 | 2015-10-14 | 北京京东尚科信息技术有限公司 | 一种网页前端开发方法及装置 |
| CN105893014A (zh) * | 2015-12-08 | 2016-08-24 | 乐视云计算有限公司 | 用于前端的项目开发方法及系统 |
| WO2016131308A1 (zh) * | 2015-07-30 | 2016-08-25 | 中兴通讯股份有限公司 | web界面生成控制方法及装置 |
| CN105930166A (zh) * | 2016-05-09 | 2016-09-07 | 统通信（苏州）有限公司 | 一种基于web界面弹出层的方法 |
| CN106648555A (zh) * | 2015-10-28 | 2017-05-10 | 阿里巴巴集团控股有限公司 | 一种页面的生成方法及装置 |
| CN107133035A (zh) * | 2017-04-25 | 2017-09-05 | 东莞中国科学院云计算产业技术创新与育成中心 | 响应式网页生成方法和装置 |
| CN108170416A (zh) * | 2017-12-28 | 2018-06-15 | 北京云杉世纪网络科技有限公司 | 一种构建web前端的方法及系统 |
| CN108646963A (zh) * | 2018-04-16 | 2018-10-12 | 北京酷我科技有限公司 | 一种列表滑动删除的实现方法 |
| CN109002281A (zh) * | 2018-07-17 | 2018-12-14 | 中国建设银行股份有限公司 | 基于平台组件的项目开发方法、装置及用户终端 |
| CN109086114A (zh) * | 2018-07-26 | 2018-12-25 | 郑州云海信息技术有限公司 | 一种生成web前端交互界面的方法、装置及终端 |
| CN110020316A (zh) * | 2017-12-22 | 2019-07-16 | 航天信息股份有限公司 | 一种列表的显示方法及装置 |
| CN110968302A (zh) * | 2018-09-28 | 2020-04-07 | 北京嘀嘀无限科技发展有限公司 | 前端开发方法、装置及电子设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1959679A (zh) * | 2006-09-25 | 2007-05-09 | 北京爱笛星科技有限公司 | 网页微内容提取、聚合和自动更新系统的方法 |
| WO2008132706A1 (en) * | 2007-04-26 | 2008-11-06 | Markport Limited | A web browsing method and system |
| CN101989290A (zh) * | 2009-08-04 | 2011-03-23 | 英业达股份有限公司 | 以使用者的登录信息主动登录的系统及其方法 |
-
2012
- 2012-12-20 CN CN201210560270.9A patent/CN103034731B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1959679A (zh) * | 2006-09-25 | 2007-05-09 | 北京爱笛星科技有限公司 | 网页微内容提取、聚合和自动更新系统的方法 |
| WO2008132706A1 (en) * | 2007-04-26 | 2008-11-06 | Markport Limited | A web browsing method and system |
| CN101989290A (zh) * | 2009-08-04 | 2011-03-23 | 英业达股份有限公司 | 以使用者的登录信息主动登录的系统及其方法 |
Non-Patent Citations (1)
| Title |
|---|
| 李晶晶: "WEB2.0下富客户端框架的设计与实现", 《CNKI数据库》 * |
Cited By (24)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103176804B (zh) * | 2013-04-19 | 2017-06-20 | 中国海洋大学 | 一种用户界面实现方法 |
| CN103176804A (zh) * | 2013-04-19 | 2013-06-26 | 中国海洋大学 | 一种用户界面实现方法 |
| CN104598465A (zh) * | 2013-10-30 | 2015-05-06 | 腾讯科技（深圳）有限公司 | 一种浏览器内嵌地址栏的实现方法及装置 |
| CN104598465B (zh) * | 2013-10-30 | 2019-04-12 | 腾讯科技（深圳）有限公司 | 一种浏览器内嵌地址栏的实现方法及装置 |
| CN103955364A (zh) * | 2014-04-15 | 2014-07-30 | 南威软件股份有限公司 | 一种适用于手机的前端组件方法 |
| CN103955364B (zh) * | 2014-04-15 | 2017-06-20 | 南威软件股份有限公司 | 一种适用于手机的前端组件方法 |
| CN104461580A (zh) * | 2014-12-30 | 2015-03-25 | 北京经开投资开发股份有限公司 | 一种Web用户界面实现方法 |
| CN104598230A (zh) * | 2015-01-12 | 2015-05-06 | 北京中交兴路车联网科技有限公司 | 一种车辆运营系统的前端页面生成方法 |
| CN104573069A (zh) * | 2015-01-26 | 2015-04-29 | 四川中电启明星信息技术有限公司 | 企业门户前端渲染引擎 |
| CN104978194A (zh) * | 2015-06-25 | 2015-10-14 | 北京京东尚科信息技术有限公司 | 一种网页前端开发方法及装置 |
| WO2016131308A1 (zh) * | 2015-07-30 | 2016-08-25 | 中兴通讯股份有限公司 | web界面生成控制方法及装置 |
| CN106648555A (zh) * | 2015-10-28 | 2017-05-10 | 阿里巴巴集团控股有限公司 | 一种页面的生成方法及装置 |
| CN105893014A (zh) * | 2015-12-08 | 2016-08-24 | 乐视云计算有限公司 | 用于前端的项目开发方法及系统 |
| CN105930166B (zh) * | 2016-05-09 | 2019-01-25 | 统一通信（苏州）有限公司 | 一种基于web界面弹出层的方法 |
| CN105930166A (zh) * | 2016-05-09 | 2016-09-07 | 统通信（苏州）有限公司 | 一种基于web界面弹出层的方法 |
| CN107133035A (zh) * | 2017-04-25 | 2017-09-05 | 东莞中国科学院云计算产业技术创新与育成中心 | 响应式网页生成方法和装置 |
| CN110020316A (zh) * | 2017-12-22 | 2019-07-16 | 航天信息股份有限公司 | 一种列表的显示方法及装置 |
| CN108170416A (zh) * | 2017-12-28 | 2018-06-15 | 北京云杉世纪网络科技有限公司 | 一种构建web前端的方法及系统 |
| CN108646963A (zh) * | 2018-04-16 | 2018-10-12 | 北京酷我科技有限公司 | 一种列表滑动删除的实现方法 |
| CN108646963B (zh) * | 2018-04-16 | 2021-06-11 | 北京酷我科技有限公司 | 一种列表滑动删除的实现方法 |
| CN109002281A (zh) * | 2018-07-17 | 2018-12-14 | 中国建设银行股份有限公司 | 基于平台组件的项目开发方法、装置及用户终端 |
| CN109086114A (zh) * | 2018-07-26 | 2018-12-25 | 郑州云海信息技术有限公司 | 一种生成web前端交互界面的方法、装置及终端 |
| CN110968302A (zh) * | 2018-09-28 | 2020-04-07 | 北京嘀嘀无限科技发展有限公司 | 前端开发方法、装置及电子设备 |
| CN110968302B (zh) * | 2018-09-28 | 2024-01-05 | 北京嘀嘀无限科技发展有限公司 | 前端开发方法、装置及电子设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103034731B (zh) | 2016-12-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103034731A (zh) | 一种生成Web前端交互页面的方法 | |
| CN107357665A (zh) | 一种可视化编辑云菜谱的烹饪控制系统 | |
| CN102360291B (zh) | 面向服务的基于业务规则引擎的业务规则设计方法 | |
| CN106228338B (zh) | 一种配电工程智能化设计综合服务系统及使用方法 | |
| CN102214098A (zh) | 一种基于WebKit浏览器引擎的动态页面数据采集方法 | |
| CN104049978A (zh) | 一种实现代码可视化编辑组合的方法及系统 | |
| EP2066142A3 (en) | Configuring and optimizing a wireless mesh network | |
| CN102236734B (zh) | 火电厂电源系统设计自动成图的方法 | |
| CN105141441B (zh) | 一种ip网络图形化配置的方法 | |
| CN107291462A (zh) | 交互式数据系统自定义编排方法、系统及编译、运行方法 | |
| CN104267966B (zh) | 软件的程序代码的生成方法及装置 | |
| CN105739963A (zh) | 生成网页的方法和装置 | |
| CN108170416A (zh) | 一种构建web前端的方法及系统 | |
| CN106709778A (zh) | 一种服饰定制方法和装置 | |
| CN105488305A (zh) | 一种基于图模一体化的智能变电站scd文件配置方法 | |
| CN104391703B (zh) | 快速完成页面布局的装置和方法 | |
| CN103577048A (zh) | 一种桌面图标智能整理系统及方法 | |
| CN108268260A (zh) | 一种基于一体化支撑技术的快速微应用组装方法 | |
| CN104461548B (zh) | 代码片段的添加方法和装置 | |
| CN104503769B (zh) | 一种基于xml配置文件的字符点阵液晶界面实现方法 | |
| CN105930166B (zh) | 一种基于web界面弹出层的方法 | |
| CN103746458A (zh) | 一种电网运行状况的实时表示方法 | |
| CN103294463A (zh) | 一种编辑系统及方法 | |
| CN103761395A (zh) | 智能变电站虚端子动态报表生成方法 | |
| CN111708529A (zh) | 一种基于angular通过拖拽生成表单的实现方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant |