CN111538500A

CN111538500A - 一种可视化修改菜单的方法和系统

Info

Publication number: CN111538500A
Application number: CN202010339119.7A
Authority: CN
Inventors: 王杰
Original assignee: Beijing Si Tech Information Technology Co Ltd
Current assignee: Beijing Si Tech Information Technology Co Ltd
Priority date: 2020-04-26
Filing date: 2020-04-26
Publication date: 2020-08-14

Abstract

本发明涉及一种可视化修改菜单的方法和系统，便于用户根据修改需求在编辑界面的界面目录上直观选取目标界面文件信息，并便于用户根据修改需求将目标界面文件信息在编辑界面的菜单编辑界面进行可视化的配置后生成菜单编辑信息，然后，根据菜单编辑信息生成平台主导航菜单，用平台主导航菜单来替代平台的Web前端页面上的原始平台主导航菜单，达到修改的目的，且由于修改过程是可视化的，既提高了修改效率，也降低了平台主导航菜单出错的风险，且不需要专门的开发人员进行修改，技术门槛低。

Description

一种可视化修改菜单的方法和系统

技术领域

本发明涉及互联网Web前端页面技术领域，尤其涉及一种可视化修改菜单的方法和系统。

背景技术

在开发基于Web的平台时，平台外层框架的主导航菜单的具体内容在未上线前往往多变，对于一些像电子商务类站点即平台来说，即使在上线运营后，因不同时段活动或业务的不同，也对站点主导航菜单有大量增删改的需求，目前常用两种方法对平台的主导航菜单进行修改，具体地：

1)静态修改：若将主导航菜单的代码是直接写在并固定在静态代码中，则按软件开发流程修改主导航菜单的代码，来对平台的主导航菜单进行修改，此修改方法需要专业的开发人员修改，费时又费力，且该修改方法不够方便直观，导致所生成的新的主导航菜单出错的风险较高；

2)动态修改：利用web前端获取修改数据库中关联主导航菜单的数据来对平台的主导航菜单进行修改，虽然不用去修改主导航菜单的代码，但同样需要专业的开发人员修改，费时又费力，且该修改方法也不够方便直观，也会导致所生成的新的主导航菜单出错的风险较高，而且直接修改数据库存在的风险本身也比较高，进一步提高了出错的风险。

发明内容

本发明所要解决的技术问题是针对现有技术的不足，提供了一种可视化修改菜单的方法和系统。

本发明的一种可视化修改菜单的方法的技术方案如下：

S1、通过编辑界面的菜单编辑页面接收用户输入的操作指令，所述操作指令用于从所述编辑界面的界面目录中选取至少一个目标界面文件信息并对每个所述目标界面文件信息进行配置；

S2、根据配置后的至少一个目标界面文件信息生成菜单编辑信息；

S3、根据所述菜单编辑信息生成平台主导航菜单，并将所述平台主导航菜单发送至平台的Web前端页面上，以替代所述平台的Web前端页面上的原始平台主导航菜单。

本发明的一种可视化修改菜单的方法的有益效果如下：

便于用户根据修改需求在编辑界面的界面目录上直观选取目标界面文件信息，并便于用户根据修改需求将目标界面文件信息在编辑界面的菜单编辑界面进行可视化的配置后生成菜单编辑信息，然后，根据菜单编辑信息生成平台主导航菜单，用平台主导航菜单来替代平台的Web前端页面上的原始平台主导航菜单，达到修改的目的，且由于修改过程是可视化的，既提高了修改效率，也降低了平台主导航菜单出错的风险，且不需要专门的开发人员进行修改，技术门槛低。

在上述方案的基础上，本发明的一种可视化修改菜单的方法还可以做如下改进。

进一步，所述S1之前，还包括：

获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录。

采用上述进一步方案的有益效果是：将所述平台的所有的界面文件信息添加至界面目录中，便于用户根据修改需求进行选取。

进一步，所述获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录之前，还包括：

利用所述平台的后台管理系统或自动化扫描项目目录结构工具获取所述平台的所有的界面文件信息并所述平台的所有的界面文件信息存储至数据库，则，

所述获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录，包括：

从所述数据库中获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录。

采用上述进一步方案的有益效果是：对获取平台的所有的界面文件信息的过程进行说明。

进一步，所述将平台的所有的界面文件信息添加至所述编辑界面的界面目录，包括：

按照预设规则将所述平台的所有的界面文件信息进行划分后生成至少一个界面文件信息组合；

所述界面目录为列表结构或树结构，将每个界面文件信息组合分别添加至所述列表结构或所述树结构的每个分支中。

采用上述进一步方案的有益效果是：通过按照预设规则对平台的所有的界面文件信息进行划分，并将每个界面文件信息组合分别添加至列表结构或树结构的每个分支中，更便于用户根据修改需求进行选取。

进一步，所述获取用户根据所述修改需求在编辑界面的菜单编辑界面上将用户根据所述修改需求从所述编辑界面的界面目录中所选取的至少一个目标界面文件信息进行配置后所生成的菜单编辑信息之后，还包括：

将所述菜单编辑信息发送至所述平台的Web前端，以使所述Web前端根据所述菜单编辑信息生成所述新的平台主导航菜单。

采用上述进一步方案的有益效果是：将菜单编辑信息发送至平台的Web前端，以使所述Web前端根据菜单编辑信息生成新的平台主导航菜单，更方便快捷。

本发明的一种可视化修改菜单的系统的技术方案如下：

接收模块、生成模块和生成替代模块，

所述接收模块用于：通过编辑界面的菜单编辑页面接收用户输入的操作指令，所述操作指令用于从所述编辑界面的界面目录中选取至少一个目标界面文件信息并对每个所述目标界面文件信息进行配置；

所述生成模块用于根据配置后的至少一个目标界面文件信息生成菜单编辑信息；

所述生成替代模块用于根据所述菜单编辑信息生成平台主导航菜单，并将所述平台主导航菜单发送至平台的Web前端页面上，以替代所述平台的Web前端页面上的原始平台主导航菜单。

本发明的一种可视化修改菜单的系统的有益效果如下：

在上述方案的基础上，本发明的一种可视化修改菜单的系统还可以做如下改进。

进一步，还包括获取添加模块，所述获取添加模块用于获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录。

进一步，还包括获取存储模块，所述获取存储模块用于利用所述平台的后台管理系统或自动化扫描项目目录结构工具获取所述平台的所有的界面文件信息并所述平台的所有的界面文件信息存储至数据库；

所述获取添加模块具体用于从所述数据库中获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录。

进一步，所述获取添加模块具体用于按照预设规则将所述平台的所有的界面文件信息进行划分后生成至少一个界面文件信息组合，所述界面目录为列表结构或树结构，将每个界面文件信息组合分别添加至所述列表结构或所述树结构的每个分支中。

进一步，还包括发送模块，所述发送模块用于将所述菜单编辑信息发送至所述平台的Web前端，以使所述Web前端根据所述菜单编辑信息生成所述新的平台主导航菜单。

采用上述进一步方案的有益效果是：根据在平台中生成原始平台主导航菜单的方式生成相应的平台主导航菜单，提高灵活性。

本发明的一种电子设备的技术方案如下：

包括存储器、处理器及存储在所述存储器上并在所述处理器上运行的程序，其特征在于，所述处理器执行所述程序时实现如上述任一项所述的一种可视化修改菜单的方法的步骤。

本发明的一种电子设备的有益效果如下：

附图说明

图1为本发明实施例的一种可视化修改菜单的方法的流程示意图；

图2为编辑界面的示意图；

图3为本发明实施例的一种可视化修改菜单的系统的结构示意图。

具体实施方式

如图1所示，本发明实施例的一种可视化修改菜单的方法，包括如下步骤：

S1、通过编辑界面100的菜单编辑页面110接收用户输入的操作指令，所述操作指令用于从所述编辑界面100的界面目录120中选取至少一个目标界面文件信息并对每个所述目标界面文件信息进行配置；

其中，如图2所示，编辑界面100上包括菜单编辑界面110和界面目录120，便于用户根据修改需求在编辑界面100的界面目录120上直观选取目标界面文件信息，并便于用户根据修改需求将目标界面文件信息在编辑界面100的菜单编辑界面110进行可视化的配置后生成菜单编辑信息，然后，根据菜单编辑信息生成平台主导航菜单，用平台主导航菜单来替代平台的Web前端页面上的原始平台主导航菜单，达到修改的目的，且由于修改过程是可视化的，既提高了修改效率，具体地：提高平台的平台主导航菜单维护效率与在DEMO演示修改原始平台主导航菜单的效率，也降低了平台主导航菜单出错的风险，且降低了复杂度，不需要专门的开发人员进行修改，技术门槛低。

其中，界面文件信息包括界面文件的名称、界面文件的保存路径等，且界面文件可理解为web页面或软件界面等，在此进行举例说明，具体地：

例如，原始平台主导航菜单包括用于弹出第一界面文件的button1和用于弹出第二界面文件的button2，修改需求为：平台主导航菜单中包括用于弹出第一界面文件的button3、用于弹出第二界面文件的button4和用于弹出第三界面文件的button4，在界面目录120上显示有三个界面文件信息，为便于描述将三个界面文件信息分别记为第一界面文件信息、第二界面文件信息和第三界面文件信息，那么：

S10、选取菜单编辑信息：

使用户能根据修改需求从界面目录120上直观选取目标界面文件信息即选取第一界面文件信息、第二界面文件信息和第三界面文件信息；

使用能将第一界面文件信息、第二界面文件信息和第三界面文件信息在菜单编辑界面110中直观地进行配置后，生成了菜单编辑信息，具体地：

菜单编辑界面110上具有一个具有层级关系体现的表单域例如树结构或列表结构等，可添加多级菜单、可自由编辑菜单的名称、可通过拖拽范式调整菜单层级，且菜单编辑界面110支持修改或删除各目标界面文件信息之间的关系等，以树结构为例进行说明，那么：

当用户选取树结构的第一层的第一个框中，再在界面目录120中选中第一界面文件信息后，第一界面文件信息会关联到第一层的第一个框中，由于第一界面文件信息、第二界面文件信息和第三界面文件信息为并列关系，以此类推，将第二界面文件信息关联到树结构的第一层的第二个框中，将第三界面文件信息关联到树结构的第一层的第三个框中；

且用户可通过修改第一层的第一个框、第二个框和第三个框所显示的具体名称，如将第一个框的名称修改为“开始”，将第二个框的名称修改为“插入”，将第二个框的名称修改为“设计”等，可以理解的是：所生成的菜单编辑信息中包括各目标界面文件之间的相互关系、各目标界面文件信息以及修改后的名称。

S11、生成平台主导航菜单并替换原始平台主导航菜单：

根据菜单编辑信息生成平台主导航菜单，具体地：

由于菜单编辑信息中包括第一界面文件信息，且第一个框的名称修改为“开始”，则生成的平台主导航菜单中包括名称为“开始”的button3；

由于菜单编辑信息中包括第二界面文件信息，且第二个框的名称修改为“插入”，则生成的平台主导航菜单中包括名称为“插入”的button4；

由于菜单编辑信息中包括第三界面文件信息，且第三个框的名称修改为“设计”，则生成的平台主导航菜单中包括名称为“设计”的button5；

当用户点击“开始”时，会触发button3，此时会通过第一界面文件信息包括的第一界面文件的保存路径调用第一界面文件并进行显示；

当用户点击“插入”时，会触发button4，此时会通过第二界面文件信息包括的第二界面文件的保存路径调用第二界面文件并进行显示；

当用户点击“插入”时，会触发button5，此时会通过第三界面文件信息包括的第三界面文件的保存路径调用第三界面文件并进行显示；

然后将平台主导航菜单发送至平台的Web前端页面上，并替代的原始平台主导航菜单。

较优地，在上述技术方案中，S1之前，还包括：

S01、获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面100的界面目录120。

将所述平台的所有的界面文件信息添加至界面目录120中，便于用户根据修改需求进行选取。

例如，平台共有100个界面文件，相对应地，平台共有100个界面文件界面文件信息。

较优地，在上述技术方案中，S01之前，还包括：

S001、利用所述平台的后台管理系统或自动化扫描项目目录结构工具获取所述平台的所有的界面文件信息并所述平台的所有的界面文件信息存储至数据库；

则，S01具体为：

S010、从所述数据库中获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面100的界面目录120。

其中，自动化扫描项目目录结构工具的完整代码可参考网址：“https://www.pianshen.com/article/2564110579/”，也就是说，生成自动化扫描项目目录结构工具的具体技术对于本领域的技术人员来说是常规的，在此不做赘述，其中，通过自动化扫描项目目录结构工具来获取平台的所有的界面文件信息，效率高。

其中，在根据所述菜单编辑信息生成平台主导航菜单之前，也可首先将菜单编辑信息存储至数据库中，然后根据从数据库中所获取到的菜单编辑信息生成平台主导航菜单。

较优地，在上述技术方案中，S01中所述将平台的所有的界面文件信息添加至所述编辑界面的界面目录，包括：

其中，预设规则可为如下方式：

1)假如平台有共10个界面文件，该10个界面文件对应10个界面文件信息，可按照数量进行将平台的所有的界面文件信息进行划分，例如按照5个界面文件信息为一组进行划分，共生成2个界面文件信息组合，将每个界面文件信息组合分别添加至列表结构的两个分支中为例进行说明，可将第一个分支和第二个分支进行命名，便于直观了解这两个分支中的所包含的所有界面文件信息，当用户点击第一个分支和第二个分支名称时，可将分别包含的所有界面文件信息进行展示，便于用户选择；

1)假如平台有共10个界面文件，按照5个界面文件为一组进行划分，可按照10个界面文件信息相互之间的关系进行划分，例如，第1个界面文件中包括1个按钮，当点击该按钮时，会弹出第2个界面文件，则将第1个界面文件对应的第1个界面文件信息和第2个界面文件对应的第2个界面文件信息分在同一分支中。

较优地，在上述技术方案中，S1之后还包括：

S100、将所述菜单编辑信息发送至所述平台的Web前端，以使所述Web前端根据所述菜单编辑信息生成所述新的平台主导航菜单。

参照背景技术中“动态修改”中已提到，web前端通过获取修改数据库中关联主导航菜单的数据来对平台的主导航菜单进行修改，也就是说，通过web前端根据菜单编辑信息即数据能生成所述新的平台主导航菜单进行展示，使Web前端根据菜单编辑信息生成新的平台主导航菜单，更方便快捷。

在上述各实施例中，虽然对步骤进行进行了编号S1、S2等，但只是本申请给出的具体实施例，本领域的技术人员可根据实际情况对调整S1、S2等的执行顺序，此也在本发明的保护范围内。

如图3所示，本发明实施例的一种可视化修改菜单的系统200，接收模块210、生成模块220和生成替代模块230；

所述接收模块210用于：通过编辑界面的菜单编辑页面接收用户输入的操作指令，所述操作指令用于从所述编辑界面的界面目录中选取至少一个目标界面文件信息并对每个所述目标界面文件信息进行配置；

所述生成模块220用于根据配置后的至少一个目标界面文件信息生成菜单编辑信息；

所述生成替代模块230用于根据所述菜单编辑信息生成平台主导航菜单，并将所述平台主导航菜单发送至平台的Web前端页面上，以替代所述平台的Web前端页面上的原始平台主导航菜单。

较优地，在上述技术方案中，还包括获取添加模块，所述获取添加模块用于获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录。

将所述平台的所有的界面文件信息添加至界面目录中，便于用户根据修改需求进行选取。

较优地，在上述技术方案中，还包括获取存储模块，所述获取存储模块用于利用所述平台的后台管理系统或自动化扫描项目目录结构工具获取所述平台的所有的界面文件信息并所述平台的所有的界面文件信息存储至数据库；

较优地，在上述技术方案中，所述获取添加模块具体用于按照预设规则将所述平台的所有的界面文件信息进行划分后生成至少一个界面文件信息组合，所述界面目录为列表结构或树结构，将每个界面文件信息组合分别添加至所述列表结构或所述树结构的每个分支中。

通过按照预设规则对平台的所有的界面文件信息进行划分，并将每个界面文件信息组合分别添加至列表结构或树结构的每个分支中，更便于用户根据修改需求进行选取。较优地，在上述技术方案中，还包括发送模块，所述发送模块用于将所述菜单编辑信息发送至所述平台的Web前端，以使所述Web前端根据所述菜单编辑信息生成所述新的平台主导航菜单。

上述关于本发明的一种可视化修改菜单的系统200中的各参数和各个单元模块实现相应功能的步骤，可参考上文中关于一种可视化修改菜单的方法的实施例中的各参数和步骤，在此不做赘述。

本发明实施例的一种电子设备，包括存储器、处理器及存储在所述存储器上并在所述处理器上运行的程序，所述处理器执行所述程序时实现上述任一实施的一种可视化修改菜单的方法的步骤。

其中，电子设备可以选用电脑、手机等，相对应地，其程序为电脑软件或手机APP等，且上述关于本发明的一种电子设备中的各参数和步骤，可参考上文中一种可视化修改菜单的方法的实施例中的各参数和步骤，在此不做赘述。

在本发明中，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims

1.一种可视化修改菜单的方法，其特征在于，包括：

2.根据权利要求1所述的一种可视化修改菜单的方法，其特征在于，所述S1之前，还包括：

3.根据权利要求2所述的一种可视化修改菜单的方法，其特征在于，所述获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录之前，还包括：

利用所述平台的后台管理系统或自动化扫描项目目录结构工具获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息存储至数据库，则，

4.根据权利要求2或3所述的一种可视化修改菜单的方法，其特征在于，所述将平台的所有的界面文件信息添加至所述编辑界面的界面目录，包括：

5.根据权利要求1至3所述的一种可视化配置菜单的方法，其特征在于，所述获取用户根据所述修改需求在编辑界面的菜单编辑界面上将用户根据所述修改需求从所述编辑界面的界面目录中所选取的至少一个目标界面文件信息进行配置后所生成的菜单编辑信息之后，还包括：

6.一种可视化修改菜单的系统，其特征在于，包括接收模块、生成模块和生成替代模块，

7.根据权利要求6所述的一种可视化修改菜单的系统，其特征在于，还包括获取添加模块，所述获取添加模块用于获取所述平台的所有的界面文件信息并将所述平台的所有的界面文件信息添加至所述编辑界面的界面目录。

8.根据权利要求7所述的一种可视化修改菜单的系统，其特征在于，还包括获取存储模块，所述获取存储模块用于利用所述平台的后台管理系统或自动化扫描项目目录结构工具获取所述平台的所有的界面文件信息并所述平台的所有的界面文件信息存储至数据库；

9.根据权利要求7或8所述的一种可视化修改菜单的系统，其特征在于，所述获取添加模块具体用于按照预设规则将所述平台的所有的界面文件信息进行划分后生成至少一个界面文件信息组合，所述界面目录为列表结构或树结构，将每个界面文件信息组合分别添加至所述列表结构或所述树结构的每个分支中。

10.根据权利要求6至8所述的一种可视化修改菜单的系统，其特征在于，还包括发送模块，所述发送模块用于将所述菜单编辑信息发送至所述平台的Web前端，以使所述Web前端根据所述菜单编辑信息生成所述新的平台主导航菜单。