简化网页制作的通用方法及系统技术方案

本发明专利技术公开一种简化网页制作的通用方法及系统，该方法包括：定义数据标准、组件所需要的各种元素、需要暴露的属性；创建通用后台接口；在style.css中提前定义组件的各种样式；在custom.js中提前定义组件的各种特效；定义组件类别，包括布局组件和非布局组件；按照数据标准拖拽元素进行不同类别组件的组装；选择组件的接口、样式和特效；自定义布局组件对网页模板进行分割；拖拽非布局组件到分割后的网页模板内；根据定义的组件需要暴露的属性设置非布局组件的属性；根据编辑设置好的组件，通过创建的通用后台接口加载和渲染页面，预览、保存生成静态页。本发明专利技术不需要过多的专业知识，通过拖拽、配置组件等方式简化网页的制作。

【技术实现步骤摘要】
简化网页制作的通用方法及系统
本专利技术属于计算机
，涉及计算机网页模板引擎渲染页面，尤其涉及一种简化网页制作的通用方法及系统。
技术介绍
随着计算机技术的发展，各类网站、移动端应用如雨后春笋一般迅猛发展，越来越多的PC端网页、APP、微信的H5网页，要求能快速制作，并且越来越专业、快速、用户体验还要好，除了借助一些前端框架外，自建站技术（赵晓龙，基于Joomla的林业专题网站自主建站技术研究----以野生动植物保护网站为例[D]，北京林业大学，2017）满足了个性化的网页的需求，通过自定义配置、拖拽组件等方式也可以制作出精美的网页，而不需要一些专业人员知识做支撑，但自建站里可拖拽的组件的制作，往往还需要专业的人员进行参与，暴露可设置的属性项，然后再供用户进行自由的拖拽，渲染。这就需要一种更通用的方法，把可拖拽的组件的制作，变为普通人员都可以进行的工作，把可拖拽的组件的属性项、信息来源设置、返回的数据库的数据字段都可以进行自定义，而不需要后端工程师的参与。
技术实现思路
本专利技术针对现有自建站里可拖拽的组件的制作存在需要专业的人员进行参与，暴露可设置的属性项，然后再供用户进行自由的拖拽、渲染的问题，提出一种简化网页制作的通用方法及系统。为了实现上述目的，本专利技术采用以下技术方案：一种简化网页制作的通用方法，包括：步骤1：定义数据标准；所述数据标准包括前后台交互的标准及页面标准；步骤2：定义组件所需要的各种元素；所述元素包括文本框、下拉框、复选框、图片列表、文字列表；步骤3：定义组件需要暴露的属性；所述属性包括显示的字数、行数、是否显示日期、背景颜色、背景图片；步骤4：创建通用后台接口，根据接口输入参数和接口输出参数返回任意类型的数据；步骤5：在style.css中提前定义组件的各种样式；所述样式包括body的样式、外链的样式、DIV的样式、特定页面标签的结构对应的样式；步骤6：在custom.js中提前定义组件的各种特效；所述特效包括自动滚动特效、下拉框联动特效、同一区域的多标签特效；步骤7：定义组件类别；所述组件类别包括布局组件和非布局组件；所述布局组件用于对网页模板进行分割，以放入非布局类组件；所述非布局组件包括登录组件、搜索组件、分页组件、文字列表；步骤8：按照数据标准拖拽元素进行不同类别组件的组装；并根据创建的通用后台接口、style.css和custom.js选择组件的接口、样式和特效；步骤9：自定义布局组件对网页模板进行分割；步骤10：拖拽非布局组件到分割后的网页模板内；步骤11：根据定义的组件需要暴露的属性设置非布局组件的属性；步骤12：根据编辑设置好的组件，通过创建的通用后台接口加载和渲染页面，预览、保存生成静态页。进一步地，所述步骤1中，所述前后台交互的标准包括数据的类型、名称、传输格式的标准；所述页面标准包括HTML标签、CSS样式、JS特效的标准。进一步地，所述步骤2中，所述元素由HTML标签、CSS样式、JS特效组成。进一步地，所述步骤4中，所述接口输入参数为组件中内置的常量或通过用户自行输入的变量；所述接口输出参数为任意类型的数据，接口输出参数所代表的意义通过组件后台接口类的自定义注解返回给用户。进一步地，所述步骤7中，所述布局组件包含单行多列和多行多列两种形式。进一步地，所述步骤8还包括：对设置好的组件进行代码的编辑和预览。进一步地，所述网页模板具有全局唯一编号。一种简化网页制作的通用系统，包括：数据标准定义模块，用于定义数据标准；所述数据标准包括前后台交互的标准及页面标准；组件元素定义模块，用于定义组件所需要的各种元素；所述元素包括文本框、下拉框、复选框、图片列表、文字列表；组件属性定义模块，用于定义组件需要暴露的属性；所述属性包括显示的字数、行数、是否显示日期、背景颜色、背景图片；通用接口创建模块，用于创建通用后台接口，根据接口输入参数和接口输出参数返回任意类型的数据；样式定义模块，用于在style.css中提前定义组件的各种样式；所述样式包括body的样式、外链的样式、DIV的样式、特定页面标签的结构对应的样式；特效定义模块，用于在custom.js中提前定义组件的各种特效；所述特效包括自动滚动特效、下拉框联动特效、同一区域的多标签特效；组件类别定义模块，用于定义组件类别；所述组件类别包括布局组件和非布局组件；所述布局组件用于对网页模板进行分割，以放入非布局类组件；所述非布局组件包括登录组件、搜索组件、分页组件、文字列表；组件组装模块，用于按照数据标准拖拽元素进行不同类别组件的组装；并根据创建的通用后台接口、style.css和custom.js选择组件的接口、样式和特效；网页模板分割模块，用于自定义布局组件对网页模板进行分割；非布局组件添加模块，用于拖拽非布局组件到分割后的网页模板内；组件属性设置模块，用于根据定义的组件需要暴露的属性设置非布局组件的属性；网页生成模块，用于根据编辑设置好的组件，通过创建的通用后台接口加载和渲染页面，预览、保存生成静态页。与现有技术相比，本专利技术具有的有益效果：本专利技术通过定义数据标准、组件所需要的各种元素、需要暴露的属性；然后创建通用后台接口，在style.css和custom.js中分别提前定义组件的各种样式和特效；并定义组件类别，包括布局组件和非布局组件；按照数据标准拖拽元素进行不同类别组件的组装；然后根据创建的通用后台接口、style.css和custom.js选择组件的接口、样式和特效；自定义布局组件对网页模板进行分割；拖拽非布局组件到分割后的网页模板内；根据定义的组件需要暴露的属性设置非布局组件的属性；最终根据编辑设置好的组件，通过创建的通用后台接口加载和渲染页面，预览、保存生成静态页。通过本专利技术可以生成任意需要的网页；本专利技术中的组件设计部分，有效的降低了使用门槛，提高了自建站的灵活性和专业性；解决了现有自建站网站中，网页组件制作的专业性要求；解决了组件的后台数据获取需要后台开发工程师开发的问题。附图说明图1为本专利技术实施例一种简化网页制作的通用方法的基本流程图；图2为本专利技术实施例一种简化网页制作的通用方法的组件设计示例图；图3为本专利技术实施例一种简化网页制作的通用方法的网页模板设计、网页制作示例图；图4为本专利技术实施例一种简化网页制作的通用系统的架构示意图。具体实施方式下面结合附图和具体的实施例对本专利技术做进一步的解释说明：如图1所示，一种简化网页制作的通用方法，其中，步骤S101至步骤S108为网页组件设计部分，示例图如图2所示；步骤S109至步骤S112为网页模板设计、网页制作部分，示例图如图3所示；该方法具体包括：步骤S101：定义数据标准；所述数据标准包括前后台交互的标准及页面标准；具体地，所述前后台本文档来自技高网...

【技术保护点】
1.一种简化网页制作的通用方法，其特征在于，包括：/n步骤1：定义数据标准；所述数据标准包括前后台交互的标准及页面标准；/n步骤2：定义组件所需要的各种元素；所述元素包括文本框、下拉框、复选框、图片列表、文字列表；/n步骤3：定义组件需要暴露的属性；所述属性包括显示的字数、行数、是否显示日期、背景颜色、背景图片；/n步骤4：创建通用后台接口，根据接口输入参数和接口输出参数返回任意类型的数据；/n步骤5：在style.css中提前定义组件的各种样式；所述样式包括body的样式、外链的样式、DIV的样式、特定页面标签的结构对应的样式；/n步骤6：在custom.js中提前定义组件的各种特效；所述特效包括自动滚动特效、下拉框联动特效、同一区域的多标签特效；/n步骤7：定义组件类别；所述组件类别包括布局组件和非布局组件；所述布局组件用于对网页模板进行分割，以放入非布局类组件；所述非布局组件包括登录组件、搜索组件、分页组件、文字列表；/n步骤8：按照数据标准拖拽元素进行不同类别组件的组装；并根据创建的通用后台接口、style.css和custom.js选择组件的接口、样式和特效；/n步骤9：自定义布局组件对网页模板进行分割；/n步骤10：拖拽非布局组件到分割后的网页模板内；/n步骤11：根据定义的组件需要暴露的属性设置非布局组件的属性；/n步骤12：根据编辑设置好的组件，通过创建的通用后台接口加载和渲染页面，预览、保存生成静态页。/n...

【技术特征摘要】
1.一种简化网页制作的通用方法，其特征在于，包括：
步骤1：定义数据标准；所述数据标准包括前后台交互的标准及页面标准；
步骤2：定义组件所需要的各种元素；所述元素包括文本框、下拉框、复选框、图片列表、文字列表；
步骤3：定义组件需要暴露的属性；所述属性包括显示的字数、行数、是否显示日期、背景颜色、背景图片；
步骤4：创建通用后台接口，根据接口输入参数和接口输出参数返回任意类型的数据；
步骤5：在style.css中提前定义组件的各种样式；所述样式包括body的样式、外链的样式、DIV的样式、特定页面标签的结构对应的样式；
步骤6：在custom.js中提前定义组件的各种特效；所述特效包括自动滚动特效、下拉框联动特效、同一区域的多标签特效；
步骤7：定义组件类别；所述组件类别包括布局组件和非布局组件；所述布局组件用于对网页模板进行分割，以放入非布局类组件；所述非布局组件包括登录组件、搜索组件、分页组件、文字列表；
步骤8：按照数据标准拖拽元素进行不同类别组件的组装；并根据创建的通用后台接口、style.css和custom.js选择组件的接口、样式和特效；
步骤9：自定义布局组件对网页模板进行分割；
步骤10：拖拽非布局组件到分割后的网页模板内；
步骤11：根据定义的组件需要暴露的属性设置非布局组件的属性；
步骤12：根据编辑设置好的组件，通过创建的通用后台接口加载和渲染页面，预览、保存生成静态页。


2.根据权利要求1所述的简化网页制作的通用方法，其特征在于，所述步骤1中，所述前后台交互的标准包括数据的类型、名称、传输格式的标准；所述页面标准包括HTML标签、CSS样式、JS特效的标准。


3.根据权利要求2所述的简化网页制作的通用方法，其特征在于，所述步骤2中，所述元素由HTML标签、CSS样式、JS特效组成。


4.根据权利要求1所述的简化网页制作的通用方法，其特征在于，所述步骤4中，所述接口输入参数为组件中内置的常量或通过用户自行输入的变量；所述接口输出参数为任意类型的数据，接口输出参数所代表的意义通过组件后台接...

【专利技术属性】
技术研发人员：姚金龙，高军涛，谷晶中，张阳光，毕静静，
申请(专利权)人：山谷网安科技股份有限公司，
类型：发明
国别省市：河南;41