一种前端页面生成方法和系统技术方案

本发明专利技术提供一种前端页面生成方法和系统，根据预设格式模板规定的格式上传编写的代码片段；将代码片段自动插入前端预置模板中形成前端页面。用于按照要求的格式上传代码片段，代码片段自动插入模板中形成前端页面，提高页面开发效率，降低页面开发的繁琐性，降低页面开发的错误率。开发的错误率。开发的错误率。

【技术实现步骤摘要】
一种前端页面生成方法和系统


[0001]本专利技术涉及网页开发
，尤其涉及一种前端页面生成方法和系统。

技术介绍

[0002]在日常开发图表类界面的过程中，常常需要开发人员人工书写图表代码，并将其逻辑严丝合缝地找到逻辑段的上下文位置，把接入数据的地方开放给其父级组件，以及配合好父组件的样式和逻辑，使得整个页面完整且自洽。这一过程会随着界面复杂程度的增加而愈发繁琐和重复，特别是面对一个具有较多图表的页面的开发任务的时候，开发效率较低，且容易出错。

技术实现思路

[0003]基于上述问题，本专利技术提供一种前端页面生成方法和系统，旨在解决现有技术中页面开发效率低且容易出错等技术问题。
[0004]一种前端页面生成方法，包括：
[0005]步骤A1，根据预设格式模板规定的格式上传编写的代码片段；
[0006]步骤A2，将代码片段自动插入前端预置模板中形成前端页面。
[0007]进一步的，预设格式模板预留有数据钩子；
[0008]前端预置模板预留有代码接收位置和上下文代码；
[0009]步骤A2包括：
[0010]步骤A21，根据预留的代码接收位置接收代码片段；
[0011]步骤A22，根据数据钩子使代码片段连接前端预置模板中的上下文代码，形成前端页面。
[0012]进一步的，在步骤A1之后并且步骤A2之前还包括：
[0013]步骤B1，将上传的代码片段进行封装；
[0014]步骤A2包括：将封装后的代码片段插入前端预置模板中。
[0015]进一步的，在步骤A1之后并且步骤A2之前还包括：
[0016]步骤B2，对上传的代码片段进行安全性校验。
[0017]进一步的，前端预置模板包括可配置的内容项，在步骤A1之前还包括：
[0018]步骤B0，对前端预置模板中可配置的内容项进行配置形成当前的前端预置模板；
[0019]在步骤A2中，将代码片段自动插入当前的前端预置模板中形成前端页面。
[0020]一种前端页面生成系统，其特征在于，使用前述的一种前端页面生成方法，包括：
[0021]上传模块，用于根据预设格式模板规定的格式上传编写的代码片段；
[0022]页面生成模块，连接上传模块，用于将代码片段自动插入前端预置模板中形成前端页面。
[0023]进一步的，预设格式模板预留有数据钩子；
[0024]前端预置模板预留有代码接收位置和上下文代码；
[0025]页面生成模块包括：
[0026]代码接收单元，用于根据预留的代码接收位置接收代码片段；
[0027]代码连接单元，连接代码接收单元，用于根据数据钩子使代码片段连接前端预置模板中的上下文代码形成前端页面。
[0028]进一步的，还包括：
[0029]封装模块，连接上传模块，用于将上传的代码片段进行封装；
[0030]页面生成模块连接封装模块，用于将封装后的代码片段插入前端预置模板中。
[0031]进一步的，还包括：
[0032]校验模块，连接上传模块，用于对上传的代码片段进行安全性校验；
[0033]页面生成模块连接校验模块，用于将对安全性校验通过的代码片段插入前端预置模板中。
[0034]进一步的，前端预置模板包括可配置的内容项，还包括：
[0035]配置模块，用于对前端预置模板中可配置的内容项进行配置形成当前的前端预置模板；
[0036]页面生成模块还连接配置模块，用于将代码片段自动插入当前的前端预置模板中形成前端页面。
[0037]本专利技术的有益技术效果是：用于按照要求的格式上传代码片段，代码片段自动插入模板中形成前端页面，提高页面开发效率，降低页面开发的繁琐性，降低页面开发的错误率。
附图说明
[0038]图1
‑
7为本专利技术一种前端页面生成方法的步骤流程图；
[0039]图8
‑
14为本专利技术一种前端页面生成系统的模块示意图。
具体实施方式
[0040]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0041]需要说明的是，在不冲突的情况下，本专利技术中的实施例及实施例中的特征可以相互组合。
[0042]下面结合附图和具体实施例对本专利技术作进一步说明，但不作为本专利技术的限定。
[0043]参见图1，本专利技术提供一种前端页面生成方法，包括：
[0044]步骤A1，根据预设格式模板规定的格式上传编写的代码片段；
[0045]步骤A2，将代码片段自动插入前端预置模板中形成前端页面。
[0046]步骤A1中，用户可以根据预设格式模板规定的格式编写代码片段之后上传。
[0047]用户可以根据预设格式模板规定的要求编写代码片段。
[0048]用于按照要求的格式上传代码片段，代码片段自动插入模板中形成前端页面，提高页面开发效率，降低页面开发的繁琐性，降低页面开发的错误率。具体的，前端页面为web
图表页面。
[0049]参见图2，进一步的，预设格式模板预留有数据钩子；
[0050]前端预置模板预留有代码接收位置和上下文代码；
[0051]步骤A2包括：
[0052]步骤A21，根据预留的代码接收位置接收代码片段；
[0053]步骤A22，根据数据钩子使代码片段连接前端预置模板中的上下文代码，形成前端页面。
[0054]预设格式模板根据前端预置模板的上下文代码确定用户上传代码的格式，并预留数据钩子。通过数据钩子将插入前端预置模板的代码片段和上下文代码关联。
[0055]参见图3，具体的，还包括步骤A3：实时查看形成的前端页面。
[0056]具体的，还包括步骤A4，将代码片段存入数据库中。可以通过后端的接口将代码片段存储在数据库中，持久化地存入数据库中，增加代码片段的复用性。
[0057]具体的，还包括步骤A5：将前端页面的源代码设置成可下载模式。
[0058]参见图4，进一步的，在步骤A1之后并且步骤A2之前还包括：
[0059]步骤B1，将上传的代码片段进行封装。
[0060]在步骤B1中，通过内置的处理函数对代码片段进行封装，避免对前端预置模板的内容产生破坏。
[0061]步骤A2包括：将封装后的代码片段插入前端预置模板中。
[0062]参见图5，进一步的，在步骤A1之后并且步骤A2之前还包括：
[0063]步骤B2，对上传的代码片段进行安全性校验；
[0064]步骤A2中包括：将安全性校验通过后的代码片段插入前端预置模板中形成前端页面。
[0065]只有本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端页面生成方法，其特征在于，包括：步骤A1，根据预设格式模板规定的格式上传编写的代码片段；步骤A2，将所述代码片段自动插入前端预置模板中形成前端页面。2.如权利要求1所述的一种前端页面生成方法，其特征在于，所述预设格式模板预留有数据钩子；所述前端预置模板预留有代码接收位置和上下文代码；所述步骤A2包括：步骤A21，根据预留的所述代码接收位置接收所述代码片段；步骤A22，根据所述数据钩子使所述代码片段连接所述前端预置模板中的上下文代码，形成所述前端页面。3.如权利要求1所述的一种前端页面生成方法，其特征在于，在所述步骤A1之后并且所述步骤A2之前还包括：步骤B1，将上传的所述代码片段进行封装；所述步骤A2包括：将封装后的所述代码片段插入所述前端预置模板中。4.如权利要求1所述的一种前端页面生成方法，其特征在于，在所述步骤A1之后并且所述步骤A2之前还包括：步骤B2，对上传的所述代码片段进行安全性校验。5.如权利要求1所述的一种前端页面生成方法，其特征在于，所述前端预置模板包括可配置的内容项，在所述步骤A1之前还包括：步骤B0，对所述前端预置模板中可配置的所述内容项进行配置形成当前的前端预置模板；在所述步骤A2中，将所述代码片段自动插入当前的所述前端预置模板中形成所述前端页面。6.一种前端页面生成系统，其特征在于，使用如权利要求1
‑
5任意一项所述的一种前端页面生成方法，包括：上传模...

【专利技术属性】
技术研发人员：徐佳伦，梁林聪，朱仁，温骏炎，
申请(专利权)人：宁波美象信息科技有限公司，
类型：发明
国别省市：