CN116127234A - 一种基于vue架构的前端通用管理系统及方法 - Google Patents

Abstract

一种基于VUE架构的前端通用管理系统，包括子前端页面和前端管理页面，所述前端管理页面设有若干前端标识，若干所述子前端页面各自独立映射在前端管理页面上，所述子前端页面和前端标识连接，所述前端管理页面由VUE架构开发，部分所述子前端页面之间互相连接，所述子前端页面之间的连接方式映射在前端管理页面上。本发明在对子前端进行管理时，通过VUE架构双向数据绑定的特性方便管理者更改子前端页面在管理前端页面中的位置，减少管理者的检查、核实时间，提前设有前端标识并将子前端页面和前端标识对应映射并结合前端管理页面上主管理页面和管理页面的快速切换功能，加速网站系统新版本的上线进程。

Description

一种基于VUE架构的前端通用管理系统及方法

技术领域

本发明涉及前端管理技术领域，特别是一种基于VUE架构的前端通用管理系统及方法。

背景技术

一套前端管理系统所管理在某些情况下需要更改前端的连接关系、连接方式和前端在管理系统中的显示位置以达到适应当前情况或使管理系统页面清晰显示信息的效果，比如在节日时需要快速对前端进行替换、在前端与前端之间新增前端，而这样的改动会使得前端管理系统的页面变得杂乱、显示不完整，管理者无法在快速整理清楚被管理前端之间的关系以进行检查、核实以落实网站系统下一步的上线情况。

发明内容

为了克服现有技术的上述缺点，本发明的目的是提供一种基于VUE架构的前端通用管理系统及方法。

本发明解决其技术问题所采用的技术方案是：一种基于VUE架构的前端通用管理系统，其特征在于，包括子前端页面和前端管理页面，所述前端管理页面设有若干前端标识，若干所述子前端页面各自独立映射在前端管理页面上，所述子前端页面和前端标识连接，所述前端管理页面由VUE架构开发，部分所述子前端页面之间互相连接，所述子前端页面之间的连接方式映射在前端管理页面上。

作为本发明的进一步改进：所述前端管理页面包括主管理页面和若干次管理页面，所述主管理页面为正在使用的前端管理页面，所述次管理页面为预先设定的前端管理页面，所述次管理页面映射在主管理页面上，所述前端管理页面通过请求指令完成主管理页面和次管理页面的切换操作。所述前端标识为前端管理页面中预先设定的项，所述主管理页面和次管理页面中具有对应的前端标识，其不同点在于其在前端代码中的位置参数不同，所述前端管理页面通过将主管理页面切换不同的次管理页面以改变前端标识的位置，并且由于其连接方式跟随映射在前端管理页面上，切换后达到通过不同方式显示子前端页面及其连接方式的效果，可以选择清晰的页面显示子前端页面之间的连接关系，方便对前端页面的管理和检查。

作为本发明的进一步改进：所述前端管理页面通过保存或导入生成次管理页面。所述次管理页面的生成方法有两种：1.所述前端管理页面当前使用的页面为主管理页面，所述主管理页面保存为新的主管理页面，之前未修改的主管理页面保存为次管理页面；2.可以通过预先设置好代码模板，直接导入、映射在前端管理页面上，可以通过切换将其替换主管理页面。

作为本发明的进一步改进：所述前端管理页面设有进程树，所述进程树上显示有代表主管理页面的项和代表次管理页面的项，所述前端管理页面进行保存后，所述进程树上代表主管理页面的项变为代表次管理页面的项，所述主管理页面新建、保存为新的项。所述进程树用于清晰显示前端管理页面的修改历程并存储能选择使用的次管理页面，点击所述进程树的次管理页面切换后进行保存，在点击的次管理页面下生成子集，用于存放以点击的次管理页面为基础进行再保存产生的次管理页面。

作为本发明的进一步改进：所述前端管理页面设置有子前端管理区域，所述前端标识设在子前端管理区域内，所述前端标识为由边框组成的空白图形，所述子前端页面映射在空白图形上并以子前端页面的缩略图的形式覆盖在空白图形上。所述子前端页面以缩略图映射在前端标识上以方便管理者直观地看到各个前端标识所代表的子前端页面。

作为本发明的进一步改进：所述子前端页面之间的连接方式以跳转标识的方式映射在主管理页面上，所述跳转标识用于表明页面跳转的对象和方向，所述标识图形包括跳转方向标识和跳转始末标识。所述跳转标识用于方便管理者直观了解子前端页面之间的跳转方向和跳转目标。

作为本发明的进一步改进：所述子前端页面由设置文件根据代码模板生成，所述设置文件中设有设置项及其设置信息，所述子前端页面和设置项相对应。此处是子前端页面的生成方式，减少生成子前端页面的时间，提升效率。不同的设置文件对应有不同的代码模板以生成与设置项中对应的子前端页面，其中，代码模板依据设置文件的标识码进行确定其代码模板。执行代码模板，通过设置信息生成与设置项对应的子前端页面，代码模板包括设置信息和子前端页面的显示样式的代码语句，设置的目标数根据设置信息的数据获取标识获得，数据获取标识可以是设置信息的名称，还可以是设置信息的编号。

作为本发明的进一步改进：所述子前端页面包括验证前端页面和工作前端页面，所述验证前端页面根据验证信息和工作前端页面连接，所述验证前端页面为公共前端页面，所述验证前端页面根据验证信息经过路由处理跳转至特定工作前端页面。公共前端页面指所有用户都可以访问的页面，用户通过在验证前端页面输入请求指令或验证信息以跳转至对应的工作前端页面，工作前端页面之间也可以进行互相跳转，但工作前端页面并不是所有用户都可以访问，用户在验证前端页面输入的请求指令或验证信息决定用户的访问权限。

作为本发明的进一步改进：所述子前端页面还包括无法访问提示页面，所述路由设有无权指令，所述验证前端页面发送无权指令经过路由处理跳转至无法访问提示页面。通过验证前端页面输入的请求指令或验证信息会通过路由处理，当用户请求进行访问但验证信息对应的权限不足，此时会跳转至无法访问提示页面，提醒用户不允许进行访问。

本发明另一种改进涉及一种基于VUE架构的前端通用管理系统的管理方法，其特征在于：

S1：点击任一前端标识后显示对应跳转标识和与跳转标识有连接关系的前端标识；

S2：点击前端标识显示对应缩略图以浏览前端标识对应的子前端页面，通过删除、编辑或新增的方式对前端标识对应的子前端页面进行管理；

S3：若前端管理页面显示不清前端标识以及跳转标识，通过改写前端代码实施移动前端标识的位置或通过点击进程树中的次管理页面切换前端标识的显示方式，再进行S2的步骤对子前端页面进行管理。

与现有技术相比，本发明的有益效果是：

1.本发明在对子前端进行管理时，通过VUE架构双向数据绑定的特性方便管理者更改子前端页面在管理前端页面中的位置，使管理者快速、清晰地理清子前端页面之间的连接关系和连接方式，减少管理者的检查、核实时间，加速网站系统新版本的上线进程；

2.本发明通过提前设有前端标识并将子前端页面和前端标识对应映射并结合前端管理页面上主管理页面和管理页面的快速切换功能，进一步减少管理者理清子前端页面之间的连接关系和连接方式的时间，而VUE架构给管理者提供对切换后主管理页面进行微调的途径，进一步加速网站系统新版本的上线进程。

3.本发明通过将子前端页面的缩略图显示在管理前端页面上，方便管理者直观地判断前端标识对应的子前端页面；

4.本发明通过本发明通过跳转标识显示在子前端页面之间的跳转关系，方便管理者直观地判断前端之间的连接关系和连接方式。

附图说明

图1为本发明的前端页面之间的连接关系图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明具体实施例及相应的附图对本发明技术方案进行清楚和完整地描述。显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

现结合附图说明与实施例对本发明进一步说明：

本发明的详细描述：

一种基于VUE架构的前端通用管理系统，包括子前端页面和前端管理页面，所述前端管理页面设有若干前端标识，若干所述子前端页面各自独立映射在前端管理页面上，所述子前端页面和前端标识连接，所述前端管理页面由VUE架构开发，部分所述子前端页面之间互相连接，所述子前端页面之间的连接方式映射在前端管理页面上。

进一步的，所述VUE架构具有以下优势：

1、代码直接、简洁；

2、其核心库只关注图层，数据和视图双向即时绑定，数据和视图同步发生变化，是通过数据驱动视图构建用户界面的渐进式框架；

3、灵活高效，可以在一个库和一套完整框架之间自如伸缩，min+gzip运行内存小，虚拟DOM速度快；

4、数据处理能力高，依赖追踪的观察系统并且使用异步队列更新，所有的数据都是独立触发的。

其中，VUE架构的数据和视图双向即时绑定的特性，即数据和视图同步发生变化，用于开发前端管理页面可以有效降低调整前端标识和跳转标识的位置的难度。当子前端页面少，关系明确，可以将前端标识和跳转标识的尺寸调大，以显示清晰；当子前端页面的关系较复杂、多条跳转标识黏连致使视图不清晰，移动跳转关系多的子前端页面使视图清晰。

进一步的，所述前端管理页面包括主管理页面和若干次管理页面，所述主管理页面为正在使用的前端管理页面，所述次管理页面为预先设定的前端管理页面，所述次管理页面映射在主管理页面上，所述前端管理页面通过请求指令完成主管理页面和次管理页面的切换操作。所述前端标识为前端管理页面中预先设定的项，所述主管理页面和次管理页面中具有对应的前端标识，其不同点在于其在前端代码中的位置参数不同，所述前端管理页面通过将主管理页面切换不同的次管理页面以改变前端标识的位置，并且由于其连接方式跟随映射在前端管理页面上，切换后达到通过不同方式显示子前端页面及其连接方式的效果，可以选择清晰的页面显示子前端页面之间的连接关系，方便对前端页面的管理和检查。

进一步的，所述前端管理页面通过保存或导入生成次管理页面。所述次管理页面的生成方法有两种：1.所述前端管理页面当前使用的页面为主管理页面，所述主管理页面保存为新的主管理页面，之前未修改的主管理页面保存为次管理页面；2.可以通过预先设置好代码模板，直接导入、映射在前端管理页面上，可以通过切换将其替换主管理页面。

进一步的，所述前端管理页面设有进程树，所述进程树上显示有代表主管理页面的项和代表次管理页面的项，所述前端管理页面进行保存后，所述进程树上代表主管理页面的项变为代表次管理页面的项，所述主管理页面新建、保存为新的项。所述进程树用于清晰显示前端管理页面的修改历程并存储能选择使用的次管理页面，点击所述进程树的次管理页面切换后进行保存，在点击的次管理页面下生成子集，用于存放以点击的次管理页面为基础进行再保存产生的次管理页面。

进一步的，所述前端管理页面设置有子前端管理区域，所述前端标识设在子前端管理区域内，所述前端标识为由边框组成的空白图形，所述子前端页面映射在空白图形上并以子前端页面的缩略图的形式覆盖在空白图形上。所述子前端页面以缩略图映射在前端标识上以方便管理者直观地看到各个前端标识所代表的子前端页面。

进一步的，所述子前端页面之间的连接方式以跳转标识的方式映射在主管理页面上，所述跳转标识用于表明页面跳转的对象和方向，所述标识图形包括跳转方向标识和跳转始末标识。所述跳转标识用于方便管理者直观了解子前端页面之间的跳转方向和跳转目标。

进一步的，所述前端标识和跳转标识以加深显示、正常显示和隐藏的方式映射在管理前端页面上，正常情况下，所有前端标识和跳转标识正常显示；当管理者点击前端标识，被点击的前端标识、与之相关的其他前端标识还有相关的跳转标识加深显示，不相关的前端标识和跳转标识隐藏，这样可以更加突出、直观地显示管理者获取的连接方式。

进一步的，所述子前端页面由设置文件根据代码模板生成，所述设置文件中设有设置项及其设置信息，所述子前端页面和设置项相对应。此处是子前端页面的生成方式，减少生成子前端页面的时间，提升效率。不同的设置文件对应有不同的代码模板以生成与设置项中对应的子前端页面，其中，代码模板依据设置文件的标识码进行确定其代码模板。执行代码模板，通过设置信息生成与设置项对应的子前端页面，代码模板包括设置信息和子前端页面的显示样式的代码语句，设置的目标数根据设置信息的数据获取标识获得，数据获取标识可以是设置信息的名称，还可以是设置信息的编号。

进一步的，所述子前端页面包括验证前端页面和工作前端页面，所述验证前端页面根据验证信息和工作前端页面连接，所述验证前端页面为公共前端页面，所述验证前端页面根据验证信息经过路由处理跳转至特定工作前端页面。公共前端页面指所有用户都可以访问的页面，用户通过在验证前端页面输入请求指令或验证信息以跳转至对应的工作前端页面，工作前端页面之间也可以进行互相跳转，但工作前端页面并不是所有用户都可以访问，用户在验证前端页面输入的请求指令或验证信息决定用户的访问权限。

进一步的，所述子前端页面还包括无法访问提示页面，所述路由设有无权指令，所述验证前端页面发送无权指令经过路由处理跳转至无法访问提示页面。通过验证前端页面输入的请求指令或验证信息会通过路由处理，当用户请求进行访问但验证信息对应的权限不足，此时会跳转至无法访问提示页面，提醒用户不允许进行访问。

本发明另一种改进涉及一种基于VUE架构的前端通用管理系统的管理方法，其特征在于：

S1：点击任一前端标识后显示对应跳转标识和与跳转标识有连接关系的前端标识；

S2：点击前端标识显示对应缩略图以浏览前端标识对应的子前端页面，通过删除、编辑或新增的方式对前端标识对应的子前端页面进行管理；

S3：若前端管理页面显示不清前端标识以及跳转标识，通过改写前端代码实施移动前端标识的位置或通过点击进程树中的次管理页面切换前端标识的显示方式，再进行S2的步骤对子前端页面进行管理。

实施案例：

一种基于VUE架构的前端通用管理系统，包括子前端页面和前端管理页面，所述前端管理页面设有若干前端标识，若干所述子前端页面各自独立映射在前端管理页面上，所述子前端页面和前端标识连接，所述前端管理页面由VUE架构开发，部分所述子前端页面之间互相连接，所述子前端页面之间的连接方式映射在前端管理页面上，述前端管理页面包括主管理页面和若干次管理页面，所述主管理页面为正在使用的前端管理页面，所述次管理页面为预先设定的前端管理页面，所述次管理页面映射在主管理页面上，所述前端管理页面通过请求指令完成主管理页面和次管理页面的切换操作，所述前端管理页面通过保存或导入生成次管理页面，所述前端管理页面设有进程树，所述进程树上显示有代表主管理页面的项和代表次管理页面的项，所述前端管理页面进行保存后，所述进程树上代表主管理页面的项变为代表次管理页面的项，所述主管理页面新建、保存为新的项，所述前端管理页面设置有子前端管理区域，所述前端标识设在子前端管理区域内，所述前端标识为由边框组成的空白图形，所述子前端页面映射在空白图形上并以子前端页面的缩略图的形式覆盖在空白图形上，所述子前端页面之间的连接方式以跳转标识的方式映射在主管理页面上，所述跳转标识用于表明页面跳转的对象和方向，所述标识图形包括跳转方向标识和跳转始末标识，所述前端标识和跳转标识以加深显示、正常显示和隐藏的方式映射在管理前端页面上，所述子前端页面由设置文件根据代码模板生成，所述设置文件中设有设置项及其设置信息，所述子前端页面和设置项相对应，所述子前端页面包括验证前端页面和工作前端页面，所述验证前端页面根据验证信息和工作前端页面连接，所述验证前端页面为公共前端页面，所述验证前端页面根据验证信息经过路由处理跳转至特定工作前端页面，所述子前端页面还包括无法访问提示页面，所述路由设有无权指令，所述验证前端页面发送无权指令经过路由处理跳转至无法访问提示页面。

本实施例还涉及前述的一种基于VUE架构的前端通用管理系统的管理方法：

S1：点击任一前端标识后显示对应跳转标识和与跳转标识有连接关系的前端标识；

S2：点击前端标识显示对应缩略图以浏览前端标识对应的子前端页面，通过删除、编辑或新增的方式对前端标识对应的子前端页面进行管理；

S3：若前端管理页面显示不清前端标识以及跳转标识，通过改写前端代码实施移动前端标识的位置或通过点击进程树中的次管理页面切换前端标识的显示方式，再进行S2的步骤对子前端页面进行管理。

本发明的主要功能：

1.通过本发明在对子前端进行管理时，通过VUE架构双向数据绑定的特性方便管理者更改子前端页面在管理前端页面中的位置，使管理者快速、清晰地理清子前端页面之间的连接关系和连接方式，减少管理者的检查、核实时间，加速网站系统新版本的上线进程；

2.本发明通过提前设有前端标识并将子前端页面和前端标识对应映射并结合前端管理页面上主管理页面和管理页面的快速切换功能，进一步减少管理者理清子前端页面之间的连接关系和连接方式的时间，而VUE架构给管理者提供对切换后主管理页面进行微调的途径，进一步加速网站系统新版本的上线进程。

3.本发明通过将子前端页面的缩略图显示在管理前端页面上，方便管理者直观地判断前端标识对应的子前端页面；

4.本发明通过本发明通过跳转标识显示在子前端页面之间的跳转关系，方便管理者直观地判断前端之间的连接关系和连接方式。

综上所述，本领域的普通技术人员阅读本发明文件后，根据本发明的技术方案和技术构思无需创造性脑力劳动而作出其他各种相应的变换方案，均属于本发明所保护的范围。

Claims (10)

1.一种基于VUE架构的前端通用管理系统，其特征在于，包括子前端页面和前端管理页面，所述前端管理页面设有若干前端标识，若干所述子前端页面各自独立映射在前端管理页面上，所述子前端页面和前端标识连接，所述前端管理页面由VUE架构开发，部分所述子前端页面之间互相连接，所述子前端页面之间的连接方式映射在前端管理页面上。

2.根据权利要求1所述的一种基于VUE架构的前端通用管理系统，其特征在于，所述前端管理页面包括主管理页面和若干次管理页面，所述主管理页面为正在使用的前端管理页面，所述次管理页面为预先设定的前端管理页面，所述次管理页面映射在主管理页面上，所述前端管理页面通过请求指令完成主管理页面和次管理页面的切换操作。

3.根据权利要求2所述的一种基于VUE架构的前端通用管理系统，其特征在于，所述前端管理页面通过保存或导入生成次管理页面。

4.根据权利要求3所述的一种基于VUE架构的前端通用管理系统，其特征在于，所述前端管理页面设有进程树，所述进程树上显示有代表主管理页面的项和代表次管理页面的项，所述前端管理页面进行保存后，所述进程树上代表主管理页面的项变为代表次管理页面的项，所述主管理页面新建、保存为新的项。

5.根据权利要求1所述的一种基于VUE架构的前端通用管理系统，其特征在于，所述前端管理页面设置有子前端管理区域，所述前端标识设在子前端管理区域内，所述前端标识为由边框组成的空白图形，所述子前端页面映射在空白图形上并以子前端页面的缩略图的形式覆盖在空白图形上。

6.根据权利要求1所述的一种基于VUE架构的前端通用管理系统，其特征在于，所述子前端页面之间的连接方式以跳转标识的方式映射在主管理页面上，所述跳转标识用于表明页面跳转的对象和方向，所述标识图形包括跳转方向标识和跳转始末标识。

7.根据权利要求1所述的一种基于VUE架构的前端通用管理系统，其特征在于，所述子前端页面由设置文件根据代码模板生成，所述设置文件中设有设置项及其设置信息，所述子前端页面和设置项相对应。

8.根据权利要求1所述的一种基于VUE架构的前端通用管理系统，其特征在于，所述子前端页面包括验证前端页面和工作前端页面，所述验证前端页面根据验证信息和工作前端页面连接，所述验证前端页面为公共前端页面，所述验证前端页面根据验证信息经过路由处理跳转至特定工作前端页面。

9.根据权利要求8所述的一种基于VUE架构的前端通用管理系统，其特征在于，所述子前端页面还包括无法访问提示页面，所述路由设有无权指令，所述验证前端页面发送无权指令经过路由处理跳转至无法访问提示页面。

10.根据权利要求1至9任一项所述的一种基于VUE架构的前端通用管理系统的一种管理方法，其特征在于，

S1：点击任一前端标识后显示对应跳转标识和与跳转标识有连接关系的前端标识；

S2：点击前端标识显示对应缩略图以浏览前端标识对应的子前端页面，通过删除、编辑或新增的方式对前端标识对应的子前端页面进行管理；

S3：若前端管理页面显示不清前端标识以及跳转标识，通过改写前端代码实施移动前端标识的位置或通过点击进程树中的次管理页面切换前端标识的显示方式，再进行S2的步骤对子前端页面进行管理。

Images