一种web前端应用约定式数据字典配置方法及系统与流程

本发明涉及前端数据字典配置，特别是一种web前端应用约定式数据字典配置方法及系统。

背景技术：

1、前端web应用程序中，数据字典是时常需要用到的，一种是存储在数据库中，通过接口获取，这种通常是用于跟业务代码逻辑不相关的，一般可以动态调整；另一种是存储在代码中，通过引入获取，通常用于跟业务代码逻辑相关的，不能动态调整，除非前后端协同针对相关业务代码逻辑进行调整。

2、针对第二种存储方式，随着页面的数量和复杂度的增加，页面依赖的数据字典越来越多，数据字典的管理变得越加困难。例如在一个前端web应用程序中，可以用一个js文件来存储所有的数据字典，但随着数据字典数据越来越多，开发人员越来越难地去管理和分类所有的数据字典数据，不利于数据字典的可维护性；而用多个js文件分别存储不同页面的数据字典，随着js文件越来越多，每次新增都需要手动配置，对于开发人员来说就需要不断重复相同的内容进行配置，存在大量重复工作；而且一般的数据字典只包含键值对，只能用于下拉框选项的遍历初始化，而根据一直保存的值再去显示相应的字典名称的场景还要进一步处理。

技术实现思路

1、针对上述缺陷，本发明提出了一种web前端应用约定式数据字典配置方法及系统，其目的在于解决了随着页面的数量和复杂度的增加，前端web应用程序中存储在代码内的数据字典会越来越多，数据字典的管理变得越加困难的问题。

2、为达此目的，本发明采用以下技术方案：

3、一种web前端应用约定式数据字典配置方法，包括以下步骤：

4、步骤s1：创建项目文件夹，并在所述项目文件夹中创建配置文件和若干项目文件，所述配置文件和所述项目文件均储存有字典数组；

5、步骤s2：在所述配置文件内创建第一函数，所述第一函数用于将所述字典数组对象化；

6、步骤s3：在所述配置文件内导入js代码，所述js代码用于遍历所述项目文件夹中所有所述项目文件；

7、步骤s4：在所述配置文件内导出第一对象，并使用所述第一对象，其中，所述第一对象包括字典数据和字典数组对象化后的数据。

8、优选地，在步骤s2中，具体包括以下子步骤：

9、步骤s21：创建第二对象，所述第二对象用于存储数据结果；

10、步骤s22：遍历所述第一函数的传参，分别得到第三对象和第四对象；

11、步骤s23：获取所述第三对象的成员变量和所述第四对象的成员变量；

12、步骤s24：给所述第二对象增加成员变量；

13、步骤s25：使用object.freeze函数将增加了成员变量的第二对象进行冻结后返回。

14、优选地，在步骤s3中，具体包括以下子步骤：

15、步骤s31：创建第一对象，所述第一对象用于存储数据结果；

16、步骤s32：使用require.context函数对所述项目文件夹进行遍历，得到require.context函数的返回值，即第二函数；

17、步骤s33：调用所述第二函数的成员函数得到所述项目文件夹内所有项目文件名称的数组；

18、步骤s34：遍历所述数组，将所述数组中的每个元素，即每个项目文件名称，分别代入所述第二函数的构造函数，分别得到每个项目文件所对应的对象；

19、项目文件所对应的对象集合有其子对象和所述第一函数的传参，项目文件所对应的对象的子对象与所述第一函数的传参相互映射关联；

20、步骤s35：遍历每个项目文件所对应的对象，给所述第一对象增加成员变量，并将增加了成员变量的第一对象进行返回。

21、本申请的另一方面提供了一种web前端应用约定式数据字典配置系统，所述系统包括：

22、第一创建模块，用于创建项目文件夹；

23、第二创建模块，用于在所述项目文件夹中创建配置文件和若干项目文件，所述配置文件和所述项目文件均储存有字典数组；

24、第三创建模块，用于在所述配置文件内创建第一函数，所述第一函数用于将所述字典数组对象化；

25、导入模块，用于在所述配置文件内导入js代码，所述js代码用于遍历所述项目文件夹中所有所述项目文件；

26、导出模块，用于在所述配置文件内导出第一对象，并使用所述第一对象，其中，所述第一对象包括字典数据和字典数组对象化后的数据。

27、优选地，所述第三创建模块包括：

28、第一创建子模块，用于创建第二对象，所述第二对象用于存储数据结果；

29、第一遍历子模块，用于遍历所述第一函数的传参，分别得到第三对象和第四对象；

30、获取子模块，用于获取所述第三对象的成员变量和所述第四对象的成员变量；

31、第一增加子模块，用于给所述第二对象增加成员变量；

32、第一返回子模块，用于使用object.freeze函数将增加了成员变量的第二对象进行冻结后返回。

33、优选地，所述导入模块包括：

34、第二创建子模块，用于创建第一对象，所述第一对象用于存储数据结果；

35、第二遍历子模块，用于使用require.context函数对所述项目文件夹进行遍历，得到require.context函数的返回值，即第二函数；

36、调用子模块，用于调用所述第二函数的成员函数得到所述项目文件夹内所有项目文件名称的数组；

37、第三遍历子模块，用于遍历所述数组；

38、代入子模块，用于将所述数组中的每个元素，即每个项目文件名称，分别代入所述第二函数的构造函数，分别得到每个项目文件所对应的对象；项目文件所对应的对象集合有其子对象和所述第一函数的传参，项目文件所对应的对象的子对象与所述第一函数的传参相互映射关联；

39、第四遍历子模块，用于遍历每个项目文件所对应的对象；

40、第二增加子模块，用于给所述第一对象增加成员变量；

41、第二返回子模块，用于将增加了成员变量的第一对象进行返回。

42、本申请实施例提供的技术方案可以包括以下有益效果：

43、本方案通过在所述配置文件中统一管理数据字典，使数据字典的管理更加容易，有利于开发人员对数据字典的可维护性，降低开发前端数据字典时的复杂度，减少重复工作。本方案通过在所述配置文件中创建函数，能够实现将字典数组对象化，其中，字典数组能够用于下拉框选项的遍历初始化，字典数组对象化后的数据能够用于页面显示，根据数据库保存的字典值反过来查找对应的字典名称。

技术特征：

1.一种web前端应用约定式数据字典配置方法，其特征在于：包括以下步骤：

2.根据权利要求1所述的一种web前端应用约定式数据字典配置方法，其特征在于：在步骤s2中，具体包括以下子步骤：

3.根据权利要求1所述的一种web前端应用约定式数据字典配置方法，其特征在于：在步骤s3中，具体包括以下子步骤：

4.一种web前端应用约定式数据字典配置系统，其特征在于：使用如权利要求1-3任意一项所述web前端应用约定式数据字典配置方法，所述系统包括：

5.根据权利要求4所述的一种web前端应用约定式数据字典配置系统，其特征在于：所述第三创建模块包括：

6.根据权利要求4所述的一种web前端应用约定式数据字典配置系统，其特征在于：所述导入模块包括：

技术总结
本发明公开了一种web前端应用约定式数据字典配置方法及系统，该方法包括以下步骤：创建项目文件夹，并在项目文件夹中创建配置文件和若干项目文件，配置文件和项目文件均储存有字典数组；在配置文件内创建第一函数，第一函数用于将字典数组对象化；在配置文件内导入js代码，js代码用于遍历项目文件夹中所有项目文件；在配置文件内导出第一对象，并使用第一对象，其中，第一对象包括字典数据和字典数组对象化后的数据。本发明解决了随着页面的数量和复杂度的增加，前端web应用程序中存储在代码内的数据字典会越来越多，数据字典的管理变得越加困难的问题。

技术研发人员：邓维滔,孔令超,吕火生,黄世志,彭志鸿
受保护的技术使用者：西藏众陶联供应链服务有限公司
技术研发日：
技术公布日：2024/1/13