一种基于VueJS的平台前端框架解决方案[发明专利]

(12)发明专利申请

(10)申请公布号 CN 111158679 A(43)申请公布日 2020.05.15

(21)申请号 201811327625.3(22)申请日 2018.11.08

(71)申请人 北京航天长峰科技工业集团有限公

司

地址 100854 北京市海淀区永定路50号(72)发明人 朱静静　(51)Int.Cl.

G06F 8/38(2018.01)

权利要求书1页 说明书2页 附图1页

(54)发明名称

一种基于VueJS的平台前端框架解决方案(57)摘要

本发明提供一种基于VueJS的平台前端框架解决方案，包括界面设计、菜单路由、组件传值、文档结构，采用导航栏中每个菜单项代表一个子系统，选中菜单后，侧边栏显示该系统的子菜单，每个子系统创建独立的开发代码的文件夹，这种方式方便集成多个子系统，降低了各子系统关联度，耦合性低，便于多人协同开发。解决现有指挥云平台中多人协同开发模块间耦合度高，协同开发效率低，开发代码冗余太多等问题。

CN 111158679 ACN 111158679 A

权　利　要　求　书

1/1页

1.一种基于Vuejs的平台前端框架解决方案，其特征在于，包括界面设计、菜单路由、组件传值、文档结构，其中：

界面设计，包括导航栏、侧边栏、内容区，其中导航栏展示logo、标题、个人中心、退出、菜单项，每个菜单项代表一个子系统；侧边栏显示当前用户在某一个子系统中的操作权限，内容区显示操作菜单后的具体内容；通过Vuejs构建单页面应用的界面，登录平台后展示平台首页，点击子系统菜单后展示该系统的首页；

菜单路由，导航栏中每个菜单项对应一个子系统，即是一级菜单，点击菜单后，在侧边栏显示该系统的子菜单，即是二级菜单，点击子菜单，在内容区显示具体内容；通过为导航栏中的每个菜单项定义一个唯一标识的索引，选中菜单后，将该索引值作为参数，通过Vuex实现的函数，根据索引值分别过滤总的菜单项，最终得到该子系统中的菜单路由表，再通过Vuex定义全局变量，返回到侧边栏中。点击侧边栏中的子菜单，在内容区显示具体内容，用户可以进行相关操作；

组件传值，在内容区中单个页面需要进行多项操作，尽量减少页面间的传值，通过在单个页面中定义弹出窗口的形式，进行数据交互，必要的情况下，通过vuex定义变量或者router传递参数形式交互；

文档结构，将每个子系统中的视图文件、路由文件、状态管理文件等分别放在独立的文件夹，将单个系统中的模块同样使用单独的文件夹存放，然后统一引用，同时将布局文件单独放在一个文件夹，存放通用的导航栏和侧边栏，减少代码冗余。

2

CN 111158679 A

说　明　书

一种基于VueJS的平台前端框架解决方案

1/2页

技术领域

[0001]本发明属于系统开发技术领域，涉及一种平台前端框架解决方案，特别是一种基于vuejs的平台前端框架解决方案。

背景技术

[0002]目前开发的系统，使用vuejs前端框架开发单页面应用系统，通过与elementUI结合进行前端开发，有的没有用到前后端分离框架，前后端开发耦合性高，前端对后端依赖性高，有的使用前后端分离，但是无法满足在指挥云平台领域中对多个子系统进行多人协同开发。

发明内容

[0003]本发明的目的主要是提供一种基于Vuejs的平台前端框架解决方案，解决现有指挥云平台中多人协同开发模块间耦合度高，协同开发效率低，开发代码冗余太多等问题。[0004]本发明的技术方案如下：

[0005]一种基于Vuejs的平台前端框架解决方案，其特征在于，包括界面设计、菜单路由、组件传值、文档结构，其中：[0006]界面设计，包括导航栏、侧边栏、内容区，其中导航栏展示logo、标题、个人中心、退出、菜单项，每个菜单项代表一个子系统；侧边栏显示当前用户在某一个子系统中的操作权限，内容区显示操作菜单后的具体内容；通过Vuejs构建单页面应用的界面，登录平台后展示平台首页，点击子系统菜单后展示该系统的首页；[0007]菜单路由，导航栏中每个菜单项对应一个子系统，即是一级菜单，点击菜单后，在侧边栏显示该系统的子菜单，即是二级菜单，点击子菜单，在内容区显示具体内容；通过为导航栏中的每个菜单项定义一个唯一标识的索引，选中菜单后，将该索引值作为参数，通过Vuex实现的函数，根据索引值分别过滤总的菜单项，最终得到该子系统中的菜单路由表，再通过Vuex定义全局变量，返回到侧边栏中。点击侧边栏中的子菜单，在内容区显示具体内容，用户可以进行相关操作；[0008]组件传值，在内容区中单个页面需要进行多项操作，尽量减少页面间的传值，通过在单个页面中定义弹出窗口的形式，进行数据交互，必要的情况下，通过vuex定义变量或者router传递参数形式交互。[0009]文档结构，将每个子系统中的视图文件、路由文件、状态管理文件等分别放在独立的文件夹，将单个系统中的模块同样使用单独的文件夹存放，然后统一引用，同时将布局文件单独放在一个文件夹，存放通用的导航栏和侧边栏，减少代码冗余。[0010]本发明采用导航栏中每个菜单项代表一个子系统，选中菜单后，侧边栏显示该系统的子菜单，每个子系统创建独立的开发代码的文件夹，这种方式方便集成多个子系统，降低了各子系统关联度，耦合性低，便于多人协同开发。

3

CN 111158679 A

说　明　书

2/2页

附图说明

[0011]图1是本发明基于vuejs的平台前端框架界面设计示意图。[0012]图2是本发明基于vuejs的平台前端框架解决方案模块示意图。

具体实施方式

[0013]如图1所示，本发明根据界面设计图通过elment ui或者其他组件库实现界面布局，并对操作菜单项进行界面设计。导航栏中是一级标题，点击菜单后将唯一标识的索引值作为参数调用获取菜单路由的函数，将经过权限过滤的菜单项在侧边栏显示，点击侧边栏菜单项实现在内容区显示详情，并在内容区进行相关操作。在内容区的增删改查等操作，采用点击按钮弹出窗口的形式展示，弹出窗口中完成操作后，将数据回写入界面及数据库。通过将代码文件根据子系统名称及模块名称，创建独立的文件夹，统一引用的方式开发平台，方便开发人员协同工作。[0014]如图2所示，本发明提供的一种基于Vuejs的平台前端框架解决方案，包括界面设计、菜单路由、组件传值、文档结构等。[0015]界面设计：包括导航栏、侧边栏、内容区，其中导航栏展示logo，标题，个人中心、退出、菜单项，每个菜单项代表一个子系统；侧边栏显示当前用户在某一个子系统中的操作权限。内容区显示操作菜单后的具体内容。通过Vuejs构建单页面应用的界面。登录平台后展示平台首页，点击子系统菜单后展示该系统的首页。[0016]菜单路由：导航栏中每个菜单项对应一个子系统，即是一级菜单，点击菜单后，在侧边栏显示该系统的子菜单，即是二级菜单，点击子菜单，在内容区显示具体内容。通过为导航栏中的每个菜单项定义一个唯一标识的索引，选中菜单后，将该索引值作为参数，通过Vuex实现的函数，根据索引值分别过滤总的菜单项，最终得到该子系统中的菜单路由表，再通过Vuex定义全局变量，返回到侧边栏中。点击侧边栏中的子菜单，在内容区显示具体内容，用户可以进行相关操作。切换导航栏中菜单项，侧边栏子菜单发生变化，相应的内容区也发生变化。

[0017]组件传值：在内容区中单个页面需要进行多项操作，尽量减少页面间的传值，通过在单个页面中定义弹出窗口的形式，进行数据交互，必要的情况下，通过vuex定义变量或者router传递参数形式交互。[0018]文档结构：由于指挥云平台有多个子系统，需要多人协同开发，因此需要减少各子系统间的耦合度。将每个子系统中的视图文件、路由文件、状态管理文件等分别放在独立的文件夹，将单个系统中的模块同样使用单独的文件夹存放，然后统一引用，这样方便不同开发人员分别开发子系统或者模块。同时将布局文件单独放在一个文件夹，存放通用的导航栏和侧边栏，减少代码冗余。

4

CN 111158679 A

说　明　书　附　图

1/1页

图1

图2

5