(19)中华人民共和国国家知识产权局
(12)发明专利申请
(10)申请公布号 (43)申请公布日 (21)申请号 202011617717.2
(22)申请日 2020.12.30
(71)申请人 成都华迈通信技术有限公司
地址 610041 四川省成都市高新区天华二
路219号天府软件园C区10栋6楼
(72)发明人 杨大方　程小勇　李聪　
(74)专利代理机构 成都华飞知识产权代理事务
所(普通合伙) 51281
代理人 徐鸿
(51)Int.Cl.
G06F  8/38(2018.01)
G06F  8/36(2018.01)
G06F  8/71(2018.01)
(54)发明名称
一种前端代码开发方法
(57)摘要
本发明涉及互联网技术领域，具体涉及一种
前端代码开发方法，在服务器内预存包含页面配
置集合的数据库信息，在进行前端代码的开发
时，包括以下步骤：向服务器发送页面配置请求；
在服务器接收到页面配置请求后，根据约定参数
从数据库信息的页面配置集合中挑选出目标页
面配置信息，按规组装成JSON格式数据集，并将
数据集返给前端；前端收到数据集后，根据数据
集将展示数据信息和开发组件之间进行映射，完
成页面组装。本发明采用低容错的技术架构，通
过一套配置，适配多种技术架构多个应用平台，
达到多态多端的开发目的；通过组件化的开发模
式，高效复用组件，极大的减少代码冗余，保证不
同技术架构不同平台下的数据展示效果高度一
致。权利要求书1页  说明书5页  附图1页CN 112685038 A 2021.04.20
C N  112685038
A
1.一种前端代码开发方法，其特征在于，在服务器内预存包含页面配置集合的数据库信息，在进行前端代码的开发时，包括以下步骤：
S1.向服务器发送页面配置请求，
所述页面配置请求包括展示数据信息和约定参数；S2.在服务器接收到页面配置请求后，根据约定参数从数据库信息的页面配置集合中挑选出目标页面配置信息，按规组装成JSON格式数据集，并将数据集返给前端；
S3.前端收到数据集后，根据数据集将展示数据信息和开发组件之间进行映射，让展示数据信息对应显示在开发组件中，完成页面组装。
2.根据权利要求1所述的一种前端代码开发方法，其特征在于，所述页面配置集合包括布局配置、样式配置、组件数据字段配置、API接口配置、页面事件配置、页面权限配置和数据加密配置。
前端页面模板3.根据权利要求2所述的一种前端代码开发方法，其特征在于，前端包括与页面配置集合相对应的组件。
4.根据权利要求2所述的一种前端代码开发方法，其特征在于，所述约定参数包括URL 信息。
5.根据权利要求2所述的一种前端代码开发方法，其特征在于，所述页面配置请求包括身份信息，所述数据库信息包括与身份信息对应的页面配置获取权限信息，在服务器收到页面配制请求后，先根据身份信息来判断权限是否与页面配置请求相匹配。
6.根据权利要求5所述的一种前端代码开发方法，其特征在于，在身份信息有权获取对应的页面配置信息时，服务器根据约定参数从数据库信息的页面配置集合中挑选出目标页面配置信息。
7.根据权利要求5所述的一种前端代码开发方法，其特征在于，在身份信息无权获取对应的页面配置信息时，服务器向前端反馈无配置页面的信息。
8.根据权利要求1所述的一种前端代码开发方法，其特征在于，前端在收到数据集后，根据布局配置，懒加载所需组件，将对应组件放入页面中。
9.根据权利要求8所述的一种前端代码开发方法，其特征在于，前端在收到数据集后，根据样式配置，将样式配置中对应组件的配置应用与组件之上，覆盖默认样式，达到显示时定制效果。
10.根据权利要求9所述的一种前端代码开发方法，其特征在于，前端在收到数据集后，根据数据字段配置，给配置了的组件将配置的字段绑定上去，前端包括数据字段信息。
权　利　要　求　书1/1页CN 112685038 A
一种前端代码开发方法
技术领域
[0001]本发明涉及互联网技术领域，具体涉及一种前端代码开发方法。
背景技术
[0002]代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。源代码是代码的分支，某种意义上来说，源代码相当于代码。现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是
文本文件，这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。
[0003]传统的代码开发技术中，如中国专利公开号CN105511865A公开的一种能够使用多语言或多引擎进行代码开发的方法及系统，所述方法包括S1：创建要实现的数据模型；S2：至少选定一种代码语言或引擎进行代码编辑开发，若预先设定的模板数据库中存在于与所述数据模型相匹配的功能模板，则调用该功能模板并进入S3；若不存在与所述数据模型相匹配的功能模板，则进入S4；S3：对所述功能模板上的代换字符串进行编辑并存储；S4：创建并存储新的功能模板，并在编辑代码过程中标识对应的代换字符串；同时更新模板数据库；S5：分别识别分析S3或者S4编辑后的功能模板，并按照所述功能模板上的全部字符串进行渲染输出。该代码开发方法降低了开发人员开发成本、提升了开发效率，但该方法都是基于静态编译的方式进行部署发布，且分为可变和不可变部分，若需要修改或页面布局变化就需要重写编译打包，可控性不高，修改不便捷。此外，现在代码开发项目中存在许多相同的布局重复开发，不能一次开发，重复使用，导致会有许多冗余代码，加大开发量；同时缺乏个性定制化，不能进行个性化的配置，项目样式单一，不利于个性化需求，可配置性差。[0004]为此，本发明提供一种采用低容错的技术架构，通过一套配置，适配多种技术架构多个应用平台，达到多态多端的开发目的前端代码开发方法。
发明内容
[0005]本发明的目的在于克服现有技术的不足，提供一种前端代码开发方法，采用低容错的技术架构，通过一套配置，适配多种技术架构多个应用平台，达到多态多端的开发目的；通过组件化的开发模式，高效复用组件，极大的减少代码冗余，保证不同技术架构不同平台下的数据展示效果高度一致。
[0006]本发明的目的是通过以下技术方案来实现的：
[0007]一种前端代码开发方法，在服务器内预存包含页面配置集合的数据库信息，在进行前端代码的开发时，包括以下步骤：
[0008]S1.向服务器发送页面配置请求，所述页面配置请求包括展示数据信息和约定参数；
[0009]S2.在服务器接收到页面配置请求后，根据约定参数从数据库信息的页面配置集合中挑选出目标页面配置信息，按规组装成JSON格式数据集，并将数据集返给前端；[0010]S3.前端收到数据集后，根据数据集将展示数据信息和开发组件之间进行映射，让展示数据信息对应显示在开发组件中，完成页面组装。
[0011]进一步地，所述页面配置集合包括布局配置、样式配置、组件数据字段配置、API接口配置、页面事件配置、页面权限配置和数据加密配置。
[0012]进一步地，前端包括与页面配置集合相对应的组件。通过将组件存储到本地，让组件默认样式根据开发时编写的样式而定，而配置中的自定义样式不会根本性地更改组件的样式，只是在显示的时候将其覆盖上去，达到呈现时才更改。
[0013]进一步地，所述约定参数包括URL信息。
[0014]进一步地，所述页面配置请求包括身份信息，所述数据库信息包括与身份信息对应的页面配置获取权限信息，在服务器收到页面配制请求后，先根据身份信息来判断权限是否与页面配置请求相匹配。
[0015]进一步地，在身份信息有权获取对应的页面配置信息时，服务器根据约定参数从数据库信息的页面配置集合中挑选出目标页面配置信息。
[0016]进一步地，在身份信息无权获取对应的页面配置信息时，服务器向前端反馈无配置页面的信息。
[0017]进一步地，前端在收到数据集后，根据布局配置，懒加载所需组件，将对应组件放入页面中。
[0018]进一步地，前端在收到数据集后，根据样式配置，将样式配置中对应组件的配置应用与组件之上，覆盖默认样式，达到显示时定制效果。
[0019]进一步地，前端在收到数据集后，根据数据字段配置，给配置了数据字段的组件将配置的数据字段绑定上去，前端包括数据字段信息。优选地，前端包括数据池，所述数据池包括数据字段信息，绑定在组件上的数据字段是在前端的数据池中获取。
[0020]进一步地，根据API接口配置，获取初始化页面所需展示的数据，将其放入数据池中，得益于响应式数据的特点，绑定了数据池中的组件上会自动读取数据显示。基于响应式数据的特点，放入数据池的数据会自动被使用的组件读取，数据改变，则使用数据的地方也会发生改变。
[0021]进一步地，根据页面事件配置，给按钮、链接或操作绑定事件参数。
[0022]进一步地，在完成页面组装后，将配置缓存在本地和全局数据池中，下次加载页面时，直接加载数据池配置，对于前端本地数据池中的已有配置，前端会周期性的去加载最新配置来进行替换，有效节省页面加载时间。
[0023]进一步地，在页面出发增删改查事件时，根据事件中的配置向服务器发送操作请求，服务器根据操作请求作出响应，并将响应结果反馈回前端。
[0024]进一步地，在前端收到结果反馈后，前端根据结果来对数据池中的数据进行操作，本地修改，同步响应界面上的改变，节省资源。
[0025]进一步地，根据页面权限配置，通过根据规范控制到按钮级别，或通过自定义样式来隐藏显示操作按钮来实现伪权限操作。
[0026]进一步地，根据数据加密配置，在操作请求中传递数据时对数据进行转义。
[0027]进一步地，所述服务器为管理资源并为使用者提供服务的计算机。
[0028]本发明的有益效果是：本发明前端代码开发方法，采用低容错的技术架构，通过一套配置，适配多种技术架构多个应用平台，达到多态多端的开发目的；通过组件化的开发模式，高效复用组件，极大的减少代码冗余，保证不同技术架构不同平台下的数据展示效果高度一致。
附图说明
[0029]图1为本发明前端代码开发方法的流程图。
具体实施方式
[0030]下面结合附图进一步详细描述本发明的技术方案，但本发明的保护范围不局限于以下所述。
[0031]如图1所示，一种前端代码开发方法，在服务器内预存包含页面配置集合的数据库信息，在进行前端代码的开发时，包括以下步骤：
[0032]S1.向服务器发送页面配置请求，所述页面配置请求包括展示数据信息和约定参数；
[0033]S2.在服务器接收到页面配置请求后，根据约定参数从数据库信息的页面配置集合中挑选出目标页面配置信息，按规组装成JSON格式数据集，并将数据集返给前端；[0034]S3.前端收到数据集后，根据数据集将展示数据信息和开发组件之间进行映射，让展示数据信息对应显示在开发组件中，完成页面组装。
[0035]具体地，所述页面配置集合包括布局配置、样式配置、组件数据字段配置、API接口配置、页面事件配置、页面权限配置和数据加密配置。
[0036]具体地，前端包括与页面配置集合相对应的组件。通过将组件存储到本地，让组件默认样式根据开发时编写的样式而定，而配置中的自定义样式不会根本性地更改组件的样式，只是在显示的时候将其覆盖上去，达到呈现时才更改。
[0037]具体地，所述约定参数包括URL信息。
[0038]具体地，所述页面配置请求包括身份信息，所述数据库信息包括与身份信息对应的页面配置获取权限信息，在服务器收到页面配制请求后，先根据身份信息来判断权限是否与页面配置请求相匹配。
[0039]具体地，在身份信息有权获取对应的页面配置信息时，服务器根据约定参数从数据库信息的页面配置集合中挑选出目标页面配置信息。
[0040]具体地，在身份信息无权获取对应的页面配置信息时，服务器向前端反馈无配置页面的信息。
[0041]具体地，前端在收到数据集后，根据布局配置，懒加载所需组件，将对应组件放入页面中。
[0042]具体地，前端在收到数据集后，根据样式配置，将样式配置中对应组件的配置应用与组件之上，覆盖默认样式，达到显示时定制效果。
[0043]具体地，前端在收到数据集后，根据数据字段配置，给配置了数据字段的组件将配置的数据字段绑定上去，前端包括数据字段信息。优选地，前端包括数据池，所述数据池包

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。