Ruoyi cloud startup tutorial (hand-held graphics)

scene

RuoYi-Cloud It's a Java EE Enterprise level rapid development platform , Based on the classic technology portfolio （Spring Boot、Spring Cloud & Alibaba、Vue、Element）, Built in modules such as ： Department of management 、 Role users 、 Menu and button Authorization 、 Data access 、 system parameter 、 Log management 、 Code generation etc. . Online scheduled task configuration ; Support clusters , Support for multiple data sources .

Microservices Version technology selection

1、 System environment

• Java EE 8
• Servlet 3.0
• Apache Maven 3

2、 Main frame

• Spring Boot 2.3.x
• Spring Cloud Hoxton.SR9
• Spring Framework 5.2.x
• Spring Security 5.2.x

3、 Persistence layer

• Apache MyBatis 3.5.x
• Hibernate Validation 6.0.x
• Alibaba Druid 1.2.x

4、 View layer

• Vue 2.6.x
• Axios 0.21.0
• Element 2.14.x

System module

Back end architecture

com.ruoyi     
├── ruoyi-ui              //  The front frame  [80]
├── ruoyi-gateway         //  Gateway module  [8080]
├── ruoyi-auth            //  authentication center  [9200]
├── ruoyi-api             //  Interface module 
│       └── ruoyi-api-system                          //  system interface 
├── ruoyi-common          //  General module 
│       └── ruoyi-common-core                         //  Core module 
│       └── ruoyi-common-datascope                    //  Scope of authority 
│       └── ruoyi-common-datasource                   //  Multiple data sources 
│       └── ruoyi-common-log                          //  logging 
│       └── ruoyi-common-redis                        //  Caching services 
│       └── ruoyi-common-security                     //  Security module 
│       └── ruoyi-common-swagger                      //  system interface 
├── ruoyi-modules         //  Business module 
│       └── ruoyi-system                              //  System module  [9201]
│       └── ruoyi-gen                                 //  Code generation  [9202]
│       └── ruoyi-job                                 //  Timing task  [9203]
│       └── ruoyi-file                                //  File service  [9300]
├── ruoyi-visual          //  Graphical management module 
│       └── ruoyi-visual-monitor                      //  The monitoring center  [9100]
├──pom.xml                //  Public dependence 

Front end structure

├── build                      //  Build relevant   
├── bin                        //  Execute the script 
├── public                     //  Public documents 
│   ├── favicon.ico            // favicon Icon 
│   └── index.html             // html Templates 
├── src                        //  Source code 
│   ├── api                    //  All requests 
│   ├── assets                 //  The theme   Static resources such as Fonts 
│   ├── components             //  Global common components 
│   ├── directive              //  Global instructions 
│   ├── layout                 //  Layout 
│   ├── router                 //  route 
│   ├── store                  //  overall situation  store management 
│   ├── utils                  //  Global common method 
│   ├── views                  // view
│   ├── App.vue                //  Entry page 
│   ├── main.js                //  entrance   Load components   Initialization etc. 
│   ├── permission.js          //  Rights management 
│   └── settings.js            //  The system configuration 
├── .editorconfig              //  Coding format 
├── .env.development           //  Development environment configuration 
├── .env.production            //  Production environment configuration 
├── .env.staging               //  Test environment configuration 
├── .eslintignore              //  Ignore syntax checking 
├── .eslintrc.js               // eslint  Configuration item 
├── .gitignore                 // git  Ignore item 
├── babel.config.js            // babel.config.js
├── package.json               // package.json
└── vue.config.js              // vue.config.js

Architecture diagram

Realization

Preparatory work

1. On the computer JDK 、Maven、Mysql、Node、IDEA、Git These basic development environment prerequisites have been installed .

JDK >= 1.8 ( recommend 1.8 edition )
Mysql >= 5.7.0 ( recommend 5.7 edition )
Redis >= 3.0
Maven >= 3.0
Node >= 10
nacos >= 1.1.0 (ruoyi-cloud >= 3.0.0 Need to download nacos >= 2.x.x edition )
sentinel >= 1.6.0

• 1
• 2
• 3
• 4
• 5
• 6
• 7

2. The project needs to be connected Redis, So you need to install on this machine Redis Server side ：

Windows in Redis Download, install and change the password and start ：

Windows in Redis Download, install and change the password and start _BADAO_LIUMANG_QIZHI The blog of -CSDN Blog

3. Project needs Nacos And need to persist to Mysql database .

Nacos brief introduction 、 Download and configure persistence to Mysql：

Nacos brief introduction 、 Download and configure persistence to Mysql_BADAO_LIUMANG_QIZHI The blog of -CSDN Blog

Note that the database connected to the persistence calculation here is Nacos The initialized database , Here you need to connect to ruoyi's database , So you just need to configure it locally Nacos, Wait for the creation of ruoyi's database to be completed, and then connect to ruoyi's database .

Pull project code

Project address ：

RuoYi-Cloud: ?? be based on Spring Boot、Spring Cloud & Alibaba Distributed microservice architecture rights management system

Clone code from code cloud to local . And then use IDEA open , The project directory is as follows

Initialize database

The source code downloaded above sql There are three under the folder sql file

open Navicat Connect local Mysql database

New database ry-cloud, Then execute... Under this database ry_20210908.sql and quartz.sql these two items. sql file .

The above data is some basic data during system operation .

Then create a new database ry-config, Execute... Under this database ry_config_20211118.sql This sql file .

This database is the front nacos Data persistence to Mysql The database of the database .

To configure Nacos Persist to database

Came to Nacos Decompression directory of conf Under the application.properties In file , Uncomment the code connecting to the external local database and change it to

Own database and user name and password

Modified code content

spring.datasource.platform=mysql

Count of DB:

db.num=1

Connect URL of DB:

db.url.0=jdbc:mysql://127.0.0.1:3306/ry-configcharacterEncoding=utf8&connectTimeout=1000&socketTimeout=3000&autoReconnect=true&useUnicode=true&useSSL=false&serverTimezone=UTC
db.user=root
db.password= Your password

Modify the startup mode to ：standalone .

Then start by referring to the blog above Nacos

Call the browser and enter ：

http://localhost:8848/nacos

The login user name and password are nacos

After successful login

All configuration files in the project will be displayed , Then edit from top to bottom , Connect design to Mysql and Redis All over the place , Change to your corresponding user name and password .

Take the configuration file of the gateway ruoyi-gateway-dev.yml For example

take redis Change to your own port and password , Click publish .

The same configuration file with authentication ruoyi-auth-dev.yml

take redis and mysql Are modified to their corresponding .

Back end project launch

Before starting the backend project , You need to start locally Redis Server side , as well as Nacos

And then in IDEA Find

ruoyi-gateway Start class under RuoYiGatewayApplication start-up

ruoyi-auth Start class under RuoYiAuthApplication start-up

ruoyi-modules Under the ruoyi-system Under the RuoYiSystemApplication And start the

If there are no errors in these three modules, the back-end will start to

And you can Nacos These three services are found in

Front end project launch

Where is the front-end project located ruoyi-ui Next

Right click this item -Open in Terminal, Input

npm install

Installation project dependency , then

npm run dev

Run front end projects

The default port should be 80 port , here 80 Port occupied , So it runs in 81 port

Open the browser to input the actual run-time output port

http://localhost

Enter the verification code and click login

So far, the microservice development environment has been successfully deployed .

You can refer to the official documents in the future The deployment environment | RuoYi