一种前端页面代码敏捷开发的方法技术

本发明专利技术公开了一种前端页面代码敏捷开发的方法，包括以下步骤：S1、首先对常见的组件进行设计，构建带有不同组件元素的前端页面组件数据库；S2、根据预设的模板、根据不同业务填充内容；S3、上传模板，根据文件解析规则解析，生成模板数据；S4、业务实时数据根据模板自动生成页面JSON数据；S5、根据调用请求调取不同的JSON数据拼接到页面。本发明专利技术采用动态拼接页面的方式，根据模板进行完成页面编写，解决了代码生成效率低、工作量大的技术问题。工作量大的技术问题。工作量大的技术问题。

【技术实现步骤摘要】
一种前端页面代码敏捷开发的方法


[0001]本专利技术属于前端页面代码开发
，具体涉及一种前端页面代码敏捷开发的方法。

技术介绍

[0002]前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。
[0003]近年来，随着企业数字化转型的深入，应用类软件对于敏捷开发、快速交付的要求越来越高，目前前端代码的生成方式存在重复劳动部分，导致代码生成效率低、工作量大的技术问题。

技术实现思路

[0004]本专利技术的目的在于提供一种前端页面代码敏捷开发的方法，本专利技术采用动态拼接页面的方式，根据模板进行完成页面编写，解决了代码生成效率低、工作量大的技术问题，以解决上述
技术介绍
中提出现有技术中的问题。
[0005]为实现上述目的，本专利技术采用了如下技术方案：
[0006]一种前端页面代码敏捷开发的方法，包括以下步骤：
[0007]S1、首先对常见的组件进行设计，构建带有不同组件元素的前端页面组件数据库；
[0008]S2、根据预设的模板、根据不同业务填充内容；
[0009]S3、上传模板，根据文件解析规则解析，生成模板数据；
[0010]S4、业务实时数据根据模板自动生成页面JSON数据；
[0011]S5、根据调用请求调取不同的JSON数据拼接到页面。
[0012]优选的，所述S1中，组件元素包括组件的元素、样式、名称、默认值、数据类型和校验规则等常见规则，通过对业务开发场景的深入理解和实践，对页面开发模式进行抽象总结，并集成到开发工具中，开发人员基于开发工具提供的向导能够快速、低门槛的完成前端页面的开发。
[0013]优选的，所述S2中，利用自定义模板建立新项目，实现对封装后的数据进行后续处理对接。
[0014]优选的，所述S5中，根据用户的不同需求，针对不同环境配置不同参数的脚本，实现一键部署。
[0015]优选的，所述S5中，形成的前端页面中组件的在线维护支持高级用户根据自身需要，按照既有接口调整现有组件，包括增加、修改、删除、启用和停用组件响应设置。
[0016]优选的，所述S5中，JSON数据拼接支持单页面和多页面两种模式，其中单页面用于
静态资源可视化呈现，多页面用于动态应用网站可视化构建。
[0017]优选的，所述S1中，对组件设计完成后形成组件库可用于可视化设计自定义组件，上传组件图标、组件代码，定义组件事件基本属性以及预览组件。
[0018]优选的，所述S5中，使用可视化UI设计工具自动生成html页面和对应的js文件，这些生成的静态资源会部署在HTTP Server中，当用户请求页面时，它通过一个url访问Http Server上的静态资源，只有当用户请求后台操作时，才会对服务器发出请求，这样就避免了频繁的对服务器进行请求，达到了静态资源和服务器资源的分离。
[0019]优选的，所述S5中，用户在请求调取不同JSON数据时，访问页面时会将第一次访问的资源加载到客户端缓存，之后的页面访问不会再重复加载已缓存的页面资源，避免了使用非单帧模式下的资源重复加载。
[0020]本专利技术的技术效果和优点：本专利技术提出的一种前端页面代码敏捷开发的方法，与现有技术相比，具有以下优点：
[0021]本专利技术通过先通过对常见组件进行设计和总结构建前端页面组件数据库，根据不同预设模板和业务填充内容生产模板数据，在实际构建前端是，用户根据不同需求调取不同JSON数据拼接到页面，再对页面进行编辑即可，本专利技术采用动态拼接页面的方式，根据模板进行完成页面编写，解决了代码生成效率低、工作量大的技术问题。
附图说明
[0022]图1为本专利技术的结构示意图。
具体实施方式
[0023]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0024]本专利技术提供了如图1所示的一种前端页面代码敏捷开发的方法，包括以下步骤：
[0025]S1、首先对常见的组件进行设计，构建带有不同组件元素的前端页面组件数据库；
[0026]S2、根据预设的模板、根据不同业务填充内容；
[0027]S3、上传模板，根据文件解析规则解析，生成模板数据；
[0028]S4、业务实时数据根据模板自动生成页面JSON数据；
[0029]S5、根据调用请求调取不同的JSON数据拼接到页面。
[0030]S1中，组件元素包括组件的元素、样式、名称、默认值、数据类型和校验规则等常见规则，通过对业务开发场景的深入理解和实践，对页面开发模式进行抽象总结，并集成到开发工具中，开发人员基于开发工具提供的向导能够快速、低门槛的完成前端页面的开发。
[0031]S2中，利用自定义模板建立新项目，实现对封装后的数据进行后续处理对接。
[0032]S5中，根据用户的不同需求，针对不同环境配置不同参数的脚本，实现一键部署。
[0033]S5中，形成的前端页面中组件的在线维护支持高级用户根据自身需要，按照既有接口调整现有组件，包括增加、修改、删除、启用和停用组件响应设置。
[0034]S5中，JSON数据拼接支持单页面和多页面两种模式，其中单页面用于静态资源可视化呈现，多页面用于动态应用网站可视化构建。
[0035]S1中，对组件设计完成后形成组件库可用于可视化设计自定义组件，上传组件图标、组件代码，定义组件事件基本属性以及预览组件。
[0036]S5中，使用可视化UI设计工具自动生成html页面和对应的js文件，这些生成的静态资源会部署在HTTP Server中，当用户请求页面时，它通过一个url访问Http Server上的静态资源，只有当用户请求后台操作时，才会对服务器发出请求，这样就避免了频繁的对服务器进行请求，达到了静态资源和服务器资源的分离。
[0037]S5中，用户在请求调取不同JSON数据时，访问页面时会将第一次访问的资源加载到客户端缓存，之后的页面访问不会再重复加载已缓存的页面资源，避免了使用非单帧模式下的资源重复加载。
[0038]本专利技术通过先通过对常见组件进行设计和总结构建前端页面组件数据库，根据不同预设模板和业务填充内容生产模板数据，在实际构建前端是，用户根据不同需本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端页面代码敏捷开发的方法，其特征在于：包括以下步骤：S1、首先对常见的组件进行设计，构建带有不同组件元素的前端页面组件数据库；S2、根据预设的模板、根据不同业务填充内容；S3、上传模板，根据文件解析规则解析，生成模板数据；S4、业务实时数据根据模板自动生成页面JSON数据；S5、根据调用请求调取不同的JSON数据拼接到页面。2.根据权利要求1所述的一种前端页面代码敏捷开发的方法，其特征在于：所述S1中，组件元素包括组件的元素、样式、名称、默认值、数据类型和校验规则等常见规则，通过对业务开发场景的深入理解和实践，对页面开发模式进行抽象总结，并集成到开发工具中，开发人员基于开发工具提供的向导能够快速、低门槛的完成前端页面的开发。3.根据权利要求1所述的一种前端页面代码敏捷开发的方法，其特征在于：所述S2中，利用自定义模板建立新项目，实现对封装后的数据进行后续处理对接。4.根据权利要求1所述的一种前端页面代码敏捷开发的方法，其特征在于：所述S5中，根据用户的不同需求，针对不同环境配置不同参数的脚本，实现一键部署。5.根据权利要求1所述的一种前端页面代码敏捷开发的方法，其特征在于：所述S5中，形成的前端页面中组件的在线维护支持高级用户根据自身需要，按照既有接口调整...

【专利技术属性】
技术研发人员：董俊磊，孙玉敏，刘伯艳，卢春光，宋一帆，
申请(专利权)人：河南职业技术学院，
类型：发明
国别省市：