[发明专利]简化网页制作的通用方法及系统

说明书

本发明公开一种简化网页制作的通用方法及系统，该方法包括：定义数据标准、组件所需要的各种元素、需要暴露的属性；创建通用后台接口；在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：根据编辑设置好的组件，通过创建的通用后台接口加载和渲染页面，预览、保存生成静态页。