一 项目的概况说明
1.1 使用到前后端技术
项目服务端通用架构: springboot+mybatisplus+springsecurity
前端架构: node、js+npm+vue+ElementUi+Axios
核心技术:
1.基础框架 springboot;
2.数据缓存:redis
3.权限控制:springsecurity
4.全局日志记录: AOP+自定义注解 实现日志收集
5.前端模板: vue-admin-template
6.前端技术: node.js+Npm+vue+ElementUk+Axios
1.2 工程结构
1.3 实体间关系
1.3.1 常见1:1和1:n和n:n
常见1:1和1:n和n:n
1.3.2 用户,角色,菜单之间关系
用户,角色,菜单之间关系
1.4 用户,角色,菜单之间授权关系
权限涉及3级: 目录》菜单》按钮
1.5 权限的分类
1.6 前端和后端权限控制
1.前端可以使用
实现菜单以及按钮的控制;
2.后端需要在页面按钮请求的controller方法上面加对应的权限控制,可以用filter或者aop就可以实现,目前已经有主流的框架,spring security 和shiro等框架。
二 前端框架基本知识
2.1 前端知识
1)开发工具: visual studio code 简称vsc
2)前端项目管理工具: NPM 项目管理工具
初始化命令 npm init -y
安装是否成功 npm -v
3)node.js 是运行在服务端的javascript框架。
4)vue和element-ui ,vue-admin-template 之间的关系
vue,可读为 view,是一套用于构建用户界面的渐进式框架; 这是前端框架语言。
element-ui:是饿了么出品的,基于vue.js的后台组件框,方便程序员进行页面快速的布局和构建。这是前端组件
vue_admin_template: 是一套后台管理系统基础模板框架;方便进行二次开发。这是前端框架
2.2 Es5和ES6
ECMAScript 5.0(以下简称 ES5)它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
1)es5 引入js文件
2)es6引入文件
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ES6使用 export 和 import 来导出、导入模块。
2.3 前端框架的搭建
三 前端vue和后端进行关联
3.1 前后端框架之间逻辑
3.2 登录前后端整合
3.2.1 代理图
3.2.2 配置访问的代理服务器ip+端口
1.在vue.config.js文件中配置请求后端地址;
2.访问地址&代理地址
访问地址:http://localhost:9528/dev-api/admin/system/index/login
代理地址(真实访问地址):http://localhost:8080/admin/system/index/login
3.2.3 在具体页面js文件,编写请求方法的路径
3.2.4 后端代码
3.3 角色管理前端实现
3.3.1 配置路由
配置路由,也就是挂菜单
3.2.2 编写role的具体list页面
在src/views文件夹下创建以下文件夹和文件
创建文件夹:system/sysRole
创建文件:list.vue
3.3.3 编写具体list页面需要js的脚本
3.3.4 编写具体list页面引用js脚本
3.3.5 调取后端方法,获取响应数据
3.3.6 触发事件
3.4 用户管理前端实现
3.4.1 添加路由
3.2.2 相应页面的api
3.4.3 具体页面应用js文件
1) 用户列表页面
2)应有用户列表需要的js文件
3.5 用户分配角色逻辑
分配角色:在用户角色关联表中删除之前已经分配的角色。
3.7 菜单的维护
3.7.1 新增菜单页面
1.新增菜单页面
按钮显示
3.7.2 新增目录样式
3.7.3 新增按钮
3.7.4 新增外连接
3.6 菜单表中层级关系*
菜单表字段说明
表中的数据:
3.7 菜单权限列表递归查询
1.构建前端需要的json格式
//构建树形结构
public static List<SysMenu> bulidTree(List<SysMenu> sysMenuList) {
//创建集合封装最终数据
List<SysMenu> trees = new ArrayList<>();
//遍历所有菜单集合
for (SysMenu sysMenu:sysMenuList) {
//找到递归入口,parentid=0
if(sysMenu.getParentId().longValue()==0) {
trees.add(findChildren(sysMenu,sysMenuList));
}
}
return trees;
}
//从根节点进行递归查询,查询子节点
// 判断 id = parentid是否相同,如果相同是子节点,进行数据封装
private static SysMenu findChildren(SysMenu sysMenu, List<SysMenu> treeNodes) {
//数据初始化
sysMenu.setChildren(new ArrayList<SysMenu>());
//遍历递归查找
for (SysMenu it:treeNodes) {
//获取当前菜单id
// String id = sysMenu.getId();
// long cid = Long.parseLong(id);
//获取所有菜单parentid
// Long parentId = it.getParentId();
//比对
if(Long.parseLong(sysMenu.getId())==it.getParentId()) {
if(sysMenu.getChildren()==null) {
sysMenu.setChildren(new ArrayList<>());
}
sysMenu.getChildren().add(findChildren(it,treeNodes));
}
}
return sysMenu;
}
3.8 删除主菜单前判断是否有子菜单
删除之前先判断是否有子菜单,有的话,提示不让删除。
3.9 给角色分配菜单
四 jwt 的应用
4.1 jwt的作用
JWT是JSON Web Token的缩写,即JSON Web令牌,是一种自包含令牌。 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。
JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源。比如用在用户登录上。
一个JWT由三个部分组成:JWT头、有效载荷、签名哈希最后由这三者组合进行base64url编码得到JWT
4.2 jwt在登录功能处的使用
4.2.1 设置
1.用户密码验证成功后,将用户名和用户id生成token
4.2.2 解析
2.通过token解析获取,用户id,然后查询,该用户拥有的权限资源
4.2.3 判断使用
3.按钮权限的判断
判断权限标识符要和数据库保持一致
五 前后端程序打包
5.1 后端打包
后端打包: 将springboot工程打成jar包,执行java -jar jar包。
1.service-system的pom文件添加build配置;
<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
2.父工程中去掉bulid配置。
3.通过idea找到maven,使用package打包去掉test过程。
5.2 前端打包
1.打包
2. 用nginx代理部署
1静态文件放到html目录下:
3.nginx.conf配置文件的配置
4.页面效果
代码地址:https://gitee.com/jurf-liu/guigu-auth-parent.git
5.资源地址: