版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
实项操目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框架
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 矿山安全设备监测检修工发展趋势模拟考核试卷含答案
- 土遗址文物修复师节能评优考核试卷含答案
- 漆器制作工工作实操评优考核试卷含答案
- 光学镜头装配调试工操作安全水平考核试卷含答案
- 矿井开掘工岗位协调沟通考核试卷含答案
- 列车长岗前安全规程考核试卷含答案
- 飞机无线电设备安装调试工安全宣传测试考核试卷含答案
- 2026年小学三年级数学上册《长方体体积》标准教案
- 2026年西师版小学四年级英语上册Module5《CanSamplayfootball》Unit2课文教案
- 2026年小学成语故事《口若悬河》语言表达完整教案
- 2026年中国电信校园招聘考试笔试试题及答案
- (2026)事业单位招聘考试《公共基础知识》真题库参考答案
- 47911-2026《小微型企业安全生产标准化管理体系要求》解读
- 2026浙江杭州市公安局第二轮招聘警务辅助人员448人笔试题库及参考答案详解一套
- 苏州工业园区娄葑街道2026年社工招聘考试【结构化面试题库+高分答题模板】(含考官评分要点)
- 2026年度有限空间及作业培训考试题(附答案)
- 2025 ACC-AHA 急性冠脉综合征管理指南(中文版)完整原文 + 解读
- 2026人教版五年级上语文课后生字情境默写小纸条
- 高三英语第一轮复习教学计划
- 2026年河大版(新教材)初中信息技术七年级全一册《常见的互联网应用》教学课件
- 三沙市2025海南三沙市考核招聘船长1人笔试历年参考题库典型考点附带答案详解
评论
0/150
提交评论