若依框架(前后端分离版)开发环境搭建步骤

[一、RuoYi 介绍](#一、RuoYi 介绍)

[1. RuoYi 简介](#1. RuoYi 简介)

[2. RuoYi 代码分为多个版本：](#2. RuoYi 代码分为多个版本：)

[3. RuoYi-Vue简介](#3. RuoYi-Vue简介)

[4. 官网地址](#4. 官网地址)

[5. 系统需求](#5. 系统需求)

二、准备工作

[1. 安装 JDK](#1. 安装 JDK)

[2. 安装 MySQL](#2. 安装 MySQL)

[3. 安装 Maven](#3. 安装 Maven)

[4. 安装 Redis](#4. 安装 Redis)

[5. 安装 Node.js](#5. 安装 Node.js)

[6. 安装 Git](#6. 安装 Git)

[7. 安装 TortoiseGit](#7. 安装 TortoiseGit)

[8. 安装 IntelliJ IDEA](#8. 安装 IntelliJ IDEA)

[9. 安装 VS Code](#9. 安装 VS Code)

[10. 安装 DBeaver](#10. 安装 DBeaver)

三、下载若依源码

四、导入后端代码

[1. 导入数据库](#1. 导入数据库)

[2. 配置项目](#2. 配置项目)

[3. 运行后端项目](#3. 运行后端项目)

五、导入前端代码

[1. 安装依赖](#1. 安装依赖)

[2. 运行前端项目](#2. 运行前端项目)

六、测试登录

一、RuoYi 介绍

1. RuoYi 简介

RuoYi是一个后台管理系统，基于经典技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf）主要目的让开发者注重专注业务，降低技术难度，从而节省人力成本，缩短项目周期，提高软件安全质量。

2. RuoYi 代码分为多个版本：

(1) 不分离版：RuoYi

(2) 前端分离版：RuoYi-Vue

(3) 微服务版：RuoYi-Cloud

(4) 移动端版：RuoYi-App
注：本文中所有内容以前端分离版（RuoYi-Vue）为例。

3. RuoYi-Vue简介

RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告、代码生成等。在线定时任务配置，支持集群，支持多数据源，支持分布式事务等。

4. 官网地址

官网地址：http://ruoyi.vip

在线文档：http://doc.ruoyi.vip/ruoyi-vue

在线演示：http://vue.ruoyi.vip

源码下载：https://gitee.com/y_project/RuoYi-Vue

5. 系统需求
复制代码
JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Redis >= 3.0
Maven >= 3.0
Node >= 12
说明：以上信息来自于 RuoYi 官网。

二、准备工作

在开始之前，需要先安装必备软件。

1. 安装 JDK

官网推荐 JDK 1.8 版本。

点击跳转进入 JDK 下载与安装步骤：

2. 安装 MySQL

官网推荐 MySQL 5.7 版本，我本地是为了学习使用，安装的是最新版 MySQL 9.4.0。

点击跳转进入 MySQL 下载与安装步骤：

3. 安装 Maven

用于管理后端 Java 项目的依赖。

点击跳转进入 Maven 下载与安装步骤：

4. 安装 Redis

主要用于缓存用户信息。

点击跳转进入 Redis 下载与安装步骤：

5. 安装 Node.js

用于运行和构建前端 Vue 项目。

点击跳转进入 Node.js 下载与安装步骤：

6. 安装 Git

用来从 Gitee 上克隆若依的源码。

点击跳转进入 Git 下载与安装步骤：

7. 安装 TortoiseGit

TortoiseGit是一个在Windows系统下使用的Git版本控制客户端。它提供了图形用户界面，操作简单。

点击跳转进入 TortoiseGit 下载与安装步骤：

8. 安装 IntelliJ IDEA

后端开发工具。

点击跳转进入 IntelliJ IDEA 下载与安装步骤：

9. 安装 VS Code

前端开发工具。

点击跳转进入 VS Code 下载与安装步骤：

10. 安装 DBeaver

数据库管理工具。

点击跳转进入 DBeaver 下载与安装步骤：

三、下载若依源码

RuoYi代码分为多个版本，本文以前端分离版（RuoYi-Vue）为例。

打开若依前端分离版(RuoYi-Vue)源码地址：

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

点击 "克隆/下载"：

点击后面的 "复制" 按钮，复制克隆命令：

进入要存放代码的文件夹，右键-->Git克隆：

打开Git克隆页面时 URL文本框已自动填写。

确认：

URL是否为：https://gitee.com/y_project/RuoYi-Vue.git

目录是否为：要存放代码的文件夹

确认后点击"确定"按钮：

下载后的代码如下图：

文件结构（来自于官网-->在线文档-->文件结构章节）：

(1) 后端结构：

(2) 前端结构：

四、导入后端代码

1. 导入数据库

(1) 创建一个名为 ruoyidb 的数据库：
复制代码
drop database if exists ruoyidb;
create database if not exists ruoyidb default character set utf8mb4 default collate utf8mb4_bin;
(2) 找到 \RuoYi-Vue\sql 文件夹下的两个 SQL 文件：

(3) 把这两个文件依次导入到 ruoyidb 数据库中，执行完成后会创建30张数据表，执行后的部分表如下图：

2. 配置项目

(1) 打开 IDEA，依次点击 "文件 ---> 打开"，选择 "RuoYi-Vue文件夹" 下的 pom.xml 文件后，点击 "打开" 按钮：

(2) IDEA 会自动识别 Maven 项目，点击 "作为项目打开"：

(3) 点击 "此窗口"（在新窗口打开，则会再打开一个IDEA）：

(4) 找到 application-druid.yml 数据库配置文件，修改数据库名称，和root用户密码：

**位置：**ruoyi-admin/src/main/resources/application-druid.yml

(5) 按照 application.yml 文件中的配置，需要在D盘新建一个文件上传目录：D:/ruoyi/uploadPath

**application.yml 位置：**ruoyi-admin/src/main/resources/application.yml

3. 运行后端项目

(1) 找到启动类RuoYiApplication，右键点击这个类，选择"运行 RuoYiApplication.main()"：

(2) 控制台显示 "若依启动成功"，则表示后端服务已经成功启动：

五、导入前端代码

1. 安装依赖

(1) 打开 VS Code，依次点击 "文件 ---> 打开文件夹"，选择 RuoYi-Vue 文件夹下的

ruoyi-ui 文件夹后，点击 "select folder" 按钮：

(2) 依次点击 "菜单 ---> 终端 ---> 新建终端"，打开 VS Code 自带的终端：

(3) 先设置淘宝镜像：
复制代码
npm config set registry https://registry.npm.taobao.org
(4) 执行命令安装依赖：
复制代码
npm install

# 如果 npm install 报错，可以尝试用 cnpm install
2. 运行前端项目

(1) 依赖安装完成后，执行：
复制代码
npm run dev
(2) 等待编译完成，终端会显示访问地址，通常是 http://localhost:80

(3) 打开浏览器，输入这个地址，就能看到若依的登录页面了：

六、测试登录

在登录页面输入默认的账号密码进行登录：

用户名： admin

密码： admin123

登录后页面如下图，开发环境搭建完成：