《大数据技术及应用》课件 单元7 竞赛登记管理系统关键模块实现

单元7竞赛登记管理系统关键模块实现学习目标01在SpringBoot中整合Vue.js和ElementUI02基于RBAC权限管理思路完成“用户-角色-权限”管理模块的设计03掌握路由动态加载实现方式，并能应用于控制用户的页面访问权限开发中任务7.1美化系统登录模块任务情境01

项目三中，我们已通过整合Thymeleaf模板引擎的方式，初步实现了登录跳转功能。但是，该登录页面样式不美观，需进行美化。

为了提升用户对软件系统的使用体验，我们需要引入功能完善的前端框架。具体而言，我们需要将基于Thymeleaf模板引擎完成的登录页面换成基于SpringBoot项目整合Vue.js框架编写的页面。任务场景及任务布置知识准备02单页面应用与多页面应用在请求次数上的差异单页面应用由于仅有一个完整的HTML页面，用户在导航时无需重新发送请求，只需在首次加载时请求所有页面组件。而多页面应用每次导航到新页面时，都需要重新发送请求以获取新页面资源。单页面应用和多页面应用的区别-请求次数首次加载时请求一次所有页面组件的公共资源，之后导航无需再次请求。单页面应用每次导航到新页面时，需要重新请求该页面的公共资源。多页面应用单页面应用和多页面应用的区别-公共资源的处理只需加载一次所有页面组件，加载效率较高。每次导航到新页面需重新加载该页面所有资源，加载效率较低。单页面应用和多页面应用的区别-加载效率多页面应用单页面应用Vue.js和ElementUI简介03学习路径建议从官方文档开始，了解基本概念、使用方法和最佳实践；参考在线教程和实战案例，加快实际应用掌握。01Vue.js的核心特点Vue.js是一款声明式、组件化的JS框架，专为高效构建用户界面设计。02ElementUI的概述ElementUI是基于Vue.js的桌面端组件库，提供了一系列常用UI组件如按钮、表单、导航等。Vue.js和ElementUI简介SpringBoot整合前端Node.js是运行Vue.js和ElementUI的必要条件，从官网下载安装包进行安装。安装Node.js环境Node.js安装完毕后，即可在命令行界面，通过命令来导入Vue.js、axios、ElementUI。（1）导入Vue.js通过命令“npminstallvue”，可导入Vue.js。（2）导入axios通过命令“npminstallaxios”，可导入axios。（3）导入ElementUI通过命令“npmielement-ui-S”，可导入ElementUI。导入Vue.js、axios、ElementUI将依赖导入到Springboot项目中将Vue.js、axios、ElementUI的相关文件复制到Springboot项目的指定目录下。先选定目录。将依赖导入到Springboot项目中分别在vue、axios文件夹下，找到dist文件夹，再将dist文件夹下的vue.min.js、axios.min.js拷贝到SpringBoot原生项目的static/js目录下。将依赖导入到Springboot项目中将整个element-ui文件夹拷贝到SpringBoot原生项目的static目录下。创建一个index.html文件，并在其中复制ElementUI的测试代码。然后，在SpringBoot项目中添加相关代码，并在浏览器中测试是否成功整合前后端。测试前后端整合操作任务7.2实现用户菜单模块任务情境01竞赛登记管理系统的组成该系统由多个独立页面组成，包括用户管理、角色管理、菜单管理和获奖成果管理等。角色访问权限系统需满足不同角色访问不同页面的需求。校级管理员可访问所有页面，部门管理员可访问用户管理和获奖成果管理页面，而普通老师仅可访问获奖成果管理页面。任务场景校级管理员看到的菜单院级管理员看到的菜单普通老师看到的菜单知识准备02快速创建一个新角色，且创建角色的同时能为角色配置权限，并且支持灵活修改已有角色的权限（即，能够访问的菜单页面）。角色管理快速创建一个新用户，且创建用户的同时能为用户配置角色，并且支持灵活修改已有用户拥有的角色。用户管理权限管理指用户是否有权限查看某一页面；操作权限指用户是否能对某个数据进行增伤改查操作；数据权限指用户是否能操作其下属组织成员所能操作的数据。权限管理用户-角色-权限

简介RBAC概念01RoleBasedAccessControl（RBAC）是基于角色的访问控制，其设计理念是将角色与权限关联起来，通过给用户分配适当的角色，从而让用于拥有该角色对应的权限。在实践中，用户在操作业务系统的各种权限时，我们不直接给用户赋予具体权限，而是在用户集与权限集之前构建一个角色集，并为每个角色对应一组特有的权限集。RBAC权限管理权限概念02RBAC涉及了用户、角色、权限三者的有机串联，其中用户和角色相对比较容易理解，权限这一概念则相对比较抽象。权限是可访问资源的集合，可访问资源指的是软件中诸如页面、操作（如，增删改查）、数据等。权限配置的方式多种多样，例如，可以将权限分为：页面权限、操作权限、数据权限。RBAC权限管理数据表设计03RBAC中的权限是由模块和行为构成的。在数据库中，有用户表、角色表、权限表、用户-角色对应表、角色-权限对应表。RBAC权限管理Vue动态路由加载的过程概述01Vue动态路由加载指的是当用户登陆成功后，系统根据用户的角色，获取该用户对应的菜单（含页面、操作）权限，并将菜单权限动态载入到我们的路由中。Vue动态路由加载Vue动态路由加载的实现思路02在vue-router对象中首先会对公共路由（如401，404，login，redirect等）进行初始化，然后在登陆成功之后，根据当前登录用户的角色，获取对应权限列表menuList，接下来会将后端返回的menuList转换成前端Vue.js框架所需要的路由数据结构。同时我们可以将转换后的路由信息保存在vuex中，这样就可以在SideBar组件中获取全部路由信息，并且渲染我们的左侧菜单栏，实现路由的动态加载。Vue动态路由加载任务实施03包含角色列表、新增角色、修改角色信息等功能。角色管理页面的基本功能在角色管理页面中，用户应能够查看和编辑角色的基本信息，如角色名、权限等。角色信息的查看和编辑对于新增角色，系统应提供注册功能，并引导用户填写相关信息。对于已有角色，应提供修改信息的功能，并允许用户修改自己的信息。角色的新增和修改角色管理页面用户列表展示新增用户功能修改用户信息信息查看与编辑用户管理页面页面应展示所有用户的列表，便于管理员查看和管理。允许已有用户修改自己的基本信息，如用户名、密码、角色等。提供注册功能，允许新用户填写必要信息以创建账户。管理员应能查看和编辑任何用户的基本信息，确保数据的准确性和完整性。菜单管理页面对于新增的菜单，系统应提供注册功能，并引导用户填写相关信息；对于已有的菜单，应提供修改信息的功能，使用户能够方便地更新自己的菜单信息。新增与修改菜单菜单管理页面应包括菜单列表、新增菜单、修改菜单等核心功能。功能组成在菜单管理页面中，用户应能够查看和编辑菜单的基本信息，例如菜单名、链接地址等。信息查看与编辑数据配置完成效果用户管理页面效果图角色管理页面效果图菜单管理页面效果图用户-角色关联配置页面效果图角色-权限关联配置页面效果图用户菜单构建123在vue-router对象中首先会对公共路由（如401，404，login，redirect等）进行初始化。公共路由是指所有用户都可以访问的页面，例如登录页面、404页面等。在定义公共路由时，需要考虑到用户可能从各种来源访问这些页面，因此需要设置正确的重定向和错误处理机制。定义公共路由当用户成功登录后，系统会根据用户的角色，获取该用户对应的菜单（含页面、操作）权限。获取菜单信息的具体实现方式可以通过向后端发起一个名为“getRouter”的请求来完成。该请求会携带当前登录用户的角色信息，后端会根据角色信息返回该用户有权限访问的页面路由信息。获