# modularized

**Repository Path**: 233moutian/modularized

## Basic Information

- **Project Name**: modularized
- **Description**: 项目模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-10-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一套模块化的模板。

预计在admin项目写后台UI的api接口，在其他的项目写其他业务的接口，例如对外提供的对接上下游的接口，在支付平台项目中，就是这样写的，并且还有一个子项目单独负责处理发起回调与定时任务等业务。

项目的初始脚手架：

# Spring Boot Vue Admin

## 简介

提供一套前后端分离的后台权限管理模版。

前端 Vue 模板来自 [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)，其他功能可以根据该项目进行拓展。

后端 Spring Boot 模板来自[种子项目](https://github.com/Zoctan/spring-boot-api-seedling.git)，详细请看 [api](https://github.com/Zoctan/spring-boot-vue-admin/tree/master/api)。

使用cors解决跨域问题

## 预览

<img src="https://github.com/233moutian/springboot-vue-admin/blob/master/README/1.png"/>

<img src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/README/2.png"/>

<img src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/README/3.png"/>

<img src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/README/4.png"/>

## Demo

在线 Demo：[暂无]()

## 依赖版本

| 前端依赖 | 版本   |
| -------- | ------ |
| node     | 10.5.0 |
| npm      | 6.1.0  |

| 后端依赖   | 版本          |
| ---------- | ------------- |
| SpringBoot | 2.0.4.RELEASE |

## 快速开始

```markdown
# 克隆项目
git clone https://github.com/233moutian/spring-boot-vue-admin.git

# 进入项目
cd spring-boot-vue-admin

# 后端
cd api

# 导入数据库文件（记得修改数据库信息）或者直接运行admin_dev.sql文件也可.记得修改一下数据库名。
sudo chmod a+x resetDB.sh && ./resetDB.sh

# 启动后端服务...

# 前端
cd app

# 安装依赖
npm install

# 启动前端服务
npm run dev
```

欢迎小伙伴 star 和 issues ~ 谢谢:)

## 问题解决

### 前端依赖安装问题

如果出现以下错误，请单独安装 `npm install css-loader`，再安装项目依赖 `npm install`。

```bash
npm ERR! enoent ENOENT: no such file or directory, rename '/workspace/spring-boot-vue-admin/app/node_modules/.staging/css-loader-b931fe48/node_modules/ansi-styles' -> '/workspace/spring-boot-vue-admin/app/node_modules/.staging/ansi-styles-6535fafb'
```





# RESTful API

主要介绍后端 API 的角色权限控制。参考博文 [Role-Based Access Control 新解](http://globeeip.iteye.com/blog/1236167)。

## 数据库设计

数据库主要包含[五张表](https://github.com/Zoctan/spring-boot-vue-admin/tree/master/api/src/test/resources/dev/sql)，分别是用户表 user、角色表 role、用户角色表 user_role、权限表 permission、角色权限表 role_permission。

数据库关系模型如下：

<img src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/api/README/database.png"/>

user 表：用户信息。

<img src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/api/README/user.png"/>

role 表：角色信息。

<img width="20%" height="20%" src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/api/README/role.png"/>

user_role 表：用户对应的角色，一对一。

<img width="20%" height="20%" src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/api/README/user_role.png"/>

permission 表：权限能操作的资源以及操作方式。

<img width="30%" height="30%" src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/api/README/permission.png"/>

role_permission 表：角色所对应的权限，一对多。

<img width="20%" height="20%" src="https://github.com/Zoctan/spring-boot-vue-admin/blob/master/api/README/role_permission.png"/>

> 为什么 ROLE_ADMIN 角色在数据库没有权限？
>
> ROLE_ADMIN 作为超级管理员这类角色，应该是具有所有权限的，但是对于数据库来说，没必要保存所有权限，只要在查询到该角色时返回所有权限即可。

## 角色权限控制

Spring Security + Json Web Token 鉴权：

最终效果，在控制器上的注解：

```java
@PreAuthorize("hasAuthority('user:list')")
```

实现思路：用户登录 -> 服务端生成 token -> 客户端保存 token，之后的每次请求都携带该 token，服务端认证解析。

所以在服务端认证解析的 token 就要保存有用户的角色和相应的权限：

```java
// service/impl/UserDetailsServiceImpl.java

// 为了方便，角色和权限都放在一起
// 权限
final List<SimpleGrantedAuthority> authorities =
        user.getPermissionCodeList().stream()
                .map(SimpleGrantedAuthority::new)
                .collect(Collectors.toList());
// 角色
authorities.add(new SimpleGrantedAuthority(user.getRoleName()));
// [ROLE_TEST, role:list, user:list]
```

JWT 生成 token：

```java
// core/jwt/JwtUtil.java

Jwts.builder()
        // 设置用户名
        .setSubject(username)
        // 添加权限属性
        .claim(this.AUTHORITIES_KEY, authorities)
        // 设置失效时间
        .setExpiration(date)
        // 私钥加密生成签名
        .signWith(SignatureAlgorithm.RS256, privateKey)
        .compact();
```

Base64 解码 JWT 生成的 token：

```
{"alg":"RS256"}{"sub":"test","auth":"ROLE_TEST,role:list,user:list,"exp":1519742226}<wZJ69e
,x	옮J܃a}
@ϋ+sˆvफ़t|Tq
|7uƙ
```

之后的控制器就可以使用 hasAuthority 和 hasRole 注解控制权限访问了：

```java
@PreAuthorize("hasRole('ROLE_ADMIN') or hasAuthority('user:list')")
```

## axios 预请求和跨域

由于前后端分离，会出现跨域问题，参考[跨域资源共享 CORS 详解](http://www.ruanyifeng.com/blog/2016/04/cors)。

```java
// core/jwt/JwtAuthenticationFilter.java

// 解决跨域问题
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With");

// 明确允许通过的方法，不建议使用*
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Expose-Headers", "*");

// axios 预请求后，直接返回
// 返回码必须为 200 否则视为请求失败
if (request.getMethod().equals("OPTIONS")) {
    return;
}
```

分页请看
https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md

PS：后面拆分模块，只有后台模块admin使用了这里面的技术。其他模块都是统一的springboot+通用mapper。

# 分页插件 PageHelper、通用 Mapper

http://mybatis.tk/

api自行研究。

## lombok

注解生成代码;注解生成代码插件lombok 可以生成 get、set、toString、equals和hashCode等

https://blog.csdn.net/zzy1078689276/article/details/79262287

https://blog.csdn.net/zhglance/article/details/54931430

https://github.com/mplushnikov/lombok-intellij-plugin

```
@Setter         //：注解在属性上；为属性提供 setting 方法 、
@Getter         // 注解在属性上；为属性提供 getting 方法
@ToString       // 注解在属性上；为属性提供 toString 方法
@NoArgsConstructor  //：注解在类上；为类提供一个无参的构造方法
@AllArgsConstructor //：注解在类上；为类提供一个全参的构造方法

日志注解列表如下：
@CommonsLog
Creates private static final org.apache.commons.logging.Log log = org.apache.commons.logging.LogFactory.getLog(LogExample.class);
@JBossLog
Creates private static final org.jboss.logging.Logger log = org.jboss.logging.Logger.getLogger(LogExample.class);
@Log
Creates private static final java.util.logging.Logger log = java.util.logging.Logger.getLogger(LogExample.class.getName());
@Log4j
Creates private static final org.apache.log4j.Logger log = org.apache.log4j.Logger.getLogger(LogExample.class);
@Log4j2
Creates private static final org.apache.logging.log4j.Logger log = org.apache.logging.log4j.LogManager.getLogger(LogExample.class);
@Slf4j
Creates private static final org.slf4j.Logger log = org.slf4j.LoggerFactory.getLogger(LogExample.class);
@XSlf4j
Creates private static final org.slf4j.ext.XLogger log = org.slf4j.ext.XLoggerFactory.getXLogger(LogExample.class);
```