Java EE框架应用开发（SpringBoot+VueJS） 第2版 课件 工作单元八 任务2 实现菜单动态生成功能

实项操目JavaEE框架应用开发（SpringBoot+VueJS）工作单元八实现登录的前端功能CHAPTERSEVEN任务2实现菜单动态生成功能任务分析用户登录成功之后，系统会根据登录用户的权限生成首页动态菜单展示给该用户，本任务就是实现菜单动态生成功能。任务实施步骤1.替换静态文件步骤2.编写路由层权限控制工具类步骤3.编写VueX的actions操作步骤4.编写接口调用方法步骤5.编写首页页面组件步骤6.运行调试步骤1替换静态文件从提供的代码资源中获取assets目录下的文件，替换项目中assets目录下的文件步骤2编写路由层权限控制工具类修改“src\permission.js”文件，使用router.beforeEach注册一个全局前置守卫，当一个导航触发时，全局前置守卫按照下面代码逻辑顺序调用：首先判断是否有token值，如果有token值则调用getInfo方法获取用户信息，然后根据获取的用户信息调用generateRoutes方法获取有权限访问的路由表；如果没有token值，则跳转到登录页面。这里还引入了NProgress进度条插件，以优化用户体验。步骤3编写VueX的actions操作1）修改“src\store\modules\user.js”文件，实现步骤2中getInfo与fedLogOut对应的actions。2）修改“src\store\modules\permission.js”文件，实现步骤2中generateRoutes对应的actions。步骤4编写接口调用方法1）修改“src\api\user.js”文件，实现getInfo接口调用方法。2）在“src\api”目录下新增“menu.js”文件，实现getRouters接口调用方法。步骤5编写首页页面组件修改“src\views\dashboard\admin\index.vue”文件，处理掉首页中无用的组件，修改后的代码如下。步骤6运行调试启动前端和后端服务，使用浏览器访问URL地址：http://localhost:9527/，在登录页面单击“Login”按钮跳转到首页页面，且左侧有生成的系统菜单即为成功。知识小结VueRouter是Vue.js官方的路由管理器VueRouter和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。使用Vue.js的组件来组成应用程序，单页面应用无法进行跳转动作。此时把VueRouter添加进来，将组件（components）映射到路（routes），然后告诉VueRouter在哪里可以渲染它们，即能实现单页面应用跳转的功能。任务评价单元小结在前后端分离架构的项目中，实现一个完整的前端UI交互到服务端处理业务流程的编码是核心基础技能。本工作单元主要是基于Vue-Element-Admin框架的登录页面和公共工具类，实现前后端联动的登录认证功能，以及基于VueRouter构建首页动态菜单功能。通过完成本工作单元的任务和实战强化，学员能够熟练掌握使用Vue-Element-Admin框架