RuoYi-Vue 框架学习
Java EE 企业级快速开发平台
官方文档：https://doc.ruoyi.vip/ruoyi-vue/
基于经典技术组合：Spring Boot、Spring Security、MyBatis、Jwt、Vue
内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告、代码生成等。
在线定时任务配置，支持集群，支持多数据源，支持分布式事务等。
将项目部署在本地
运行环境：
JDK >= 1.8 (推荐1.8版本) - 使用21
Mysql >= 5.7.0 (推荐5.7版本) - 使用8.0.21
Redis >= 3.0 - 使用6.2.6
Maven >= 3.0 - 使用3.8.1
Node >= 12 - 使用16.13.1
- 项目地址下载：https://gitee.com/y_project/RuoYi-Vue
- 使用idea 自动加载Maven
- 创建数据库ry-vue
- 运行sql文件夹的sql文件
- 前端运行：
1
2
3
4
5
6
7
8
9
10
11
|
cd ruoyi-ui
npm install
npm install --registry=https://registry.npmmirror.com
npm run dev
|
必要配置
- 修改ruoyi-admin/src/main/resources/application.yml
- 数据库配置
- 服务器配置
部署
后端
- 打包
在bin目录下执行package.bat打包Web工程，生成war/jar包文件。
- 部署到服务器
jar：使用命令行执行：java –jar ruoyi.jar 或者执行脚本：ruoyi/bin/run.bat
war: ruoyi/pom.xml中的packaging修改为war，放入tomcat服务器webapps<packaging>war</packaging>
前端
1
2
3
4
5
|
npm run build:prod
npm run build:stage
|
环境变量
所有测试环境或者正式环境变量的配置都在 .env.development (opens new window)等 .env.xxxx文件中。
它们都会通过 webpack.DefinePlugin 插件注入到全局。
环境变量必须以VUE_APP_为开头。如:VUE_APP_API、VUE_APP_TITLE
获取环境变量：console.log(process.env.VUE_APP_xxxx)
Tomcat配置
修改server.xml，Host节点下添加
<Context docBase="" path="/" reloadable="true" source=""/>
dist目录的文件夹下新建WEB-INF文件夹，并在里面添加web.xml文件
1
2
3
4
5
6
7
8
9
10
11
12
| <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
|
Nginx配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
charset utf-8;
location / {
root /home/ruoyi/projects/ruoyi-ui;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http:
}
# springdoc proxy
location ~ ^/v3/api-docs/(.*) {
proxy_pass http:
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
|
文件结构
后端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| com.ruoyi
├── common // 工具类
│ └── annotation // 自定义注解
│ └── config // 全局配置
│ └── constant // 通用常量
│ └── core // 核心控制
│ └── enums // 通用枚举
│ └── exception // 通用异常
│ └── filter // 过滤器处理
│ └── utils // 通用类处理
├── framework // 框架核心
│ └── aspectj // 注解实现
│ └── config // 系统配置
│ └── datasource // 数据权限
│ └── interceptor // 拦截器
│ └── manager // 异步处理
│ └── security // 权限控制
│ └── web // 前端控制
├── ruoyi-generator // 代码生成（可移除）
├── ruoyi-quartz // 定时任务（可移除）
├── ruoyi-system // 系统代码
├── ruoyi-admin // 后台服务
├── ruoyi-xxxxxx // 其他模块
|
前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| ├── build // 构建相关
├── bin // 执行脚本
├── public // 公共文件
│ ├── favicon.ico // favicon图标
│ └── index.html // html模板
│ └── robots.txt // 反爬虫
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── layout // 布局
│ ├── plugins // 通用方法
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ ├── permission.js // 权限管理
│ └── settings.js // 系统配置
├── .editorconfig // 编码格式
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── .env.staging // 测试环境配置
├── .eslintignore // 忽略语法检查
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── babel.config.js // babel.config.js
├── package.json // package.json
└── vue.config.js // vue.config.js
|
教程总结
15分钟 视频教程
https://www.bilibili.com/video/BV16D4y1f7iv/?spm_id_from=333.337.search-card.all.click&vd_source=387214638226dee6df2932949d566e5e
- 创建菜单列
- 创建数据库表
- 系统工具 -> 代码生成 -> 导入表 -> 生成代码
- 下载生成的代码，放入项目中对应位置
2024 黑马教程
https://www.bilibili.com/video/BV1pf421B71v/?spm_id_from=333.337.search-card.all.click&vd_source=387214638226dee6df2932949d566e5e
入门案例
- 导入数据库表
- 配置代码生成信息
- 动态菜单 -> .sql文件 系统菜单表可以查看是否操作成功（sys_menu）
系统管理
权限控制
RABC 角色权限控制(粗粒度)
sys_menu 菜单权限表
sys_role 角色信息表
sys_role_menu 角色和菜单关联表（中间表-多对多）
sys_user 用户信息表
sys_user_role 用户和角色关联表（中间表-多对多）
数据字典
若依内置的功能用于维护系统中常见的静态数据
功能包括：字典类型管理，字典数据管理
- 添加字典类型和字典数据
- 修改代码生成信息
- 导入前端代码
其他功能
- 参数管理
- 通知公告
- 日志管理
系统监控
监控相关
数据监控（德鲁伊 druid）
application-druid.yml
定时任务
- 创建任务类（ruoyi-quartz// 定时任务）
- 创建定时任务信息
- 启动任务
系统工具
表单构建
- 制作表单导出
- 复制到前端页面
- 创建动态表单（菜单管理）
代码生成
- 树表（文件夹）
- 主子表（大表套小表）
接口文档
Swagger
相关注解：
@ApiModelProperty(value = “用户名称”)
@ApiModel(value = “用户对象”, description = “用户信息”)
@Api(value = “用户接口”, tags = “用户管理”)
@ApiOperation(value = “用户列表”)
@ApiImplicitParams({})
@ApiImplicitParam(name = “username”, value = “用户名称”, required = true, dataType = “String”, paramType = “query”),
@ApiResponses({@ApiResponse(code = 400, message = “请求参数有误”), @ApiResponse(code = 401, message = “未授权”),})
微信
支付宝
