在线试用 http://demo.ruoyi.vip/

手册：介绍 | RuoYi

技术栈

前端

Vue,ElementUI

后端

Spring Boot、Spring Security、Redis & Jwt

功能特性

用户管理：用户是系统操作者，该功能主要完成系统用户配置。

部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。

岗位管理：配置系统用户所属担任职务。

菜单管理：配置系统菜单，操作权限，按钮权限标识等。

角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。

字典管理：对系统中经常使用的一些较为固定的数据进行维护。

参数管理：对系统动态配置常用参数。

通知公告：系统通知公告信息发布维护。

操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。

登录日志：系统登录日志记录查询包含登录异常。

在线用户：当前系统中活跃用户状态监控。

定时任务：在线（添加、修改、删除)任务调度包含执行结果日志。

代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载 。

系统接口：根据业务代码自动生成相关的api接口文档。

服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。

缓存监控：对系统的缓存查询，删除、清空等操作。

在线构建器：拖动表单元素生成相应的HTML代码。

连接池监视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。

参考

https://blog.csdn.net/qiaojunt/article/details/127588629?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-127588629-blog-127731411.235^v27^pc_relevant_landingrelevant&spm=1001.2101.3001.4242.1&utm_relevant_index=3

【开源项目学习】若依前后端分离版，通俗易懂，快速上手_哔哩哔哩_bilibili

1. 下载代码

前后端分离版本

https://gitee.com/y_project/RuoYi-Vue

RuoYi-Vue-master.zip

2. 运行环境

jdk1.8+、mysql(保存数据)、redis(验证码和缓存数据)、maven(源码编译和构建)、vue(前端代码的SPA框架）

3.  解压并打开工程

6个后台模块，1个前端模块ruoyi-ui

4. 设置本地maven工具下载依赖，并编译构建

5. 配置数据库

5.1 导入数据

使用navicat创建数据库 water , utf8mb4, utf8mb4_general_ci

运行sql文件，选择65001（utf8）导入两个.sql文件

5.2 修改yml文件中的数据库连接：

master:url: jdbc:mysql://192.168.0.117:3306/water?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8username: rootpassword: root

6. 配置redis

前提：启动redis服务，并保证服务器（192.168.0.117）的redis服务能够远程访问修改实际redis的服务IP和端口redis:# 地址#host: localhosthost: 192.168.0.117 // 远程服务器IP# 端口，默认为6379port: 6379 // redis服务端口

7. 启动后台，运行admin下的RuoYiApplication

yml中的mysql配置和redis配置错误会导致启动失败

使用http://localhost:8080/

验证后端启动ok，出现以下信息：

“欢迎使用RuoYi后台管理框架，当前版本：v3.8.5，请通过前端地址访问。”

. 8 下载nodejs并安装

参考：

Node.js安装与配置（详细步骤）_nodejs安装及环境配置_liyitongxue的博客-CSDN博客

8.1 安装node（同时安装npm）

安装node的两种方式：（使用nvm或官网下载安装）

Node.js

windows版本

指定安装文件夹，nodejs的安装目录，到时候会把node、npm等执行程序都放到整个目录下

注意：要选择自动安装Tools for Native Modules，由于一些npm模块需要使用C/C++编译，如果想要编译这些模块，则需要安装npm构建工具(Python 2和Visual Studio构建工具)和Chocolatey，否者会报“gyp ERR! find Python”错误。

相关解释：

GitHub - nodejs/node-gyp: Node.js native addon build tool

使用node -v / npm -v 验证本地安装

C:\Users\liyumin>node -v
v18.15.0

C:\Users\liyumin>npm -v
9.5.0

8.2 使用HTTP模块

创建文件夹nodeJS_App，写入文件nodeJs_test.js

var http = require("http"); // http 模块   

http.createServer(function(req, res) {

  res.writeHead( 200 , {"Content-Type":"text/html"});  // HTTP响应头

  res.write("<h1>Node.js</h1>");

  res.write("<p>Hello World</p>");

  res.end("<p>beyondweb.cn</p>");

}).listen(3000); // 监听端口3000

console.log("HTTP server is listening at port 3000."); //在CMD中打印日志

执行 node nodeJs_test.js

访问网址http://127.0.0.1:3000

9. 运行前端项目

9.1 打开前端项目并安装依赖

命令行执行 npm install  // 会根据package.json 安装依赖, 在当前工程目录D:\RuoYi-Vue-master\ruoyi-ui\node_modules

ruoyi-ui 前端工程的README.md

# 安装依赖npm install# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=https://registry.npmmirror.com

9.2 运行前端项目

D:\RuoYi-Vue-master\ruoyi-ui>npm run dev                                  

> ruoyi@3.8.5 dev
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 61382ms                                                                               

查看npm全局模块的存放路径

D:\nodeJS_App>npm get prefix
C:\Users\liyumin\AppData\Roaming\npm

npm缓存默认存放路径

D:\nodeJS_App>npm get cache
C:\Users\liyumin\AppData\Local\npm-cache

修改路径

$ npm config set prefix "D:\Program Files\nodejs\node_global"
$ npm config set cache "D:\Program Files\nodejs\node_cache"
将node_global路径加入系统变量

测试更改是否成功

npm install express --global

“-g”等同于“–global”，“-g” 是全局安装，不加“-g”就是默认下载到当前目录。“-g” 表示安装到之前设置的【node_global】目录下，同时nodejs会自动地在node_global文件夹下创建【node_modules】子文件夹， 即自动下载到D:\Program Files\nodejs\node_global\node_modules” 路径下。

错误：

$ npm install express -g
npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path D:\Program Files\nodejs\node_cache\_cacache
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\Program Files\nodejs\node_cache\_cacache'
npm ERR!  [Error: EPERM: operation not permitted, mkdir 'D:\Program Files\nodejs\node_cache\_cacache'] {
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: 'D:\\Program Files\\nodejs\\node_cache\\_cacache'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
 

将nodejs文件夹添加所有权限后成功

$ npm install express -g

added 57 packages in 12s

7 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New minor version of npm available! 9.5.0 -> 9.6.4
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.6.4>
npm notice Run `

----------------

查看npm使用的镜像

$ npm config get registry

https://registry.npmjs.org/
可更换为国内镜像

$ npm config set registry https://registry.npmmirror.com

临时使用国内镜像

$ npm install --registry=https://registry.npmmirror.com
 

-----------

全局安装淘宝源的cnpm

cnpm一般只用于模块安装，在项目创建与卸载等相关操作时仍使用npm

npm install -g cnpm --registry=https://registry.npmmirror.com

cnpm -v
 

11 创建webpack + vue项目

https://blog.csdn.net/qq_42006801/article/details/124852760