Getting started with an open source framework from scratch --- Ruoyi (separated front-end and back-end versions)

1. What is Zoe?
If it is an open source project, we use the code written by others for secondary development. It is mainly a data and rights management system.
2. Use background
Any company's various large projects will inevitably need a background authority management system, which is inevitable, but if you don't want to invest too much manpower and material resources in development, and you happen to have ready-made and relatively easy-to-use projects that others have completed It is directly for us to use, so why not do it?
3. Learning how to follow the goal
1. Use and reduce workload
2. Learn the underlying programming ideas and design ideas of excellent open source projects to improve your programming ability

After the introduction, let’s start using the process~~~~
1. To learn something, the first thing we think of is its official website: (http://www.ruoyi.vip/)
insert image description hereAs shown in the picture above, it has four versions, what we said today It is the front-end and back-end separation version

2. Use conditions
1. Springboot+vue development basis
2. Environmental conditions
jdk1.8+, mysql, redis, maven, vue
Note: Redis must be used if you use it, and its verification code and cached data are stored in redis Yes, without redis, the project cannot run
3. Use the project steps
(1) download and run
(2) understand the business process
(3) carry out secondary development

Download
insert image description here
insert image description here
Copy the address and download it directly in idea, or you can download zip
Note; do not decompress the downloaded zip, open it directly in idea
insert image description here
The above is the overall structure of the project, among which the red box is the background project
and the green box is the front-end project, and the back-end project There are 6 projects, and admin is the main project (you only need to start it in the later stage).
We will open the front-end project separately for him,
insert image description here
and you can see that the front-end is a pure Vue project

Run
(1) configure the database.
There are two sql scripts in the project directory, which can be executed in your local database.

insert image description here
insert image description here
After running, these tables are probably the only ones.
Then modify the database configuration in the code and change it to your own database information, as shown in the figure below insert image description here
(2) Start the redis
cmd window to enter the local installation redis path, execute the command: redis.server.exe, after starting, do not close this window

insert image description here
Then modify the redis configuration in the code, as shown in the figure below
insert image description here
(3) to start the background project
insert image description here

Verify whether the startup is successful, visit: localhost:8080 in the browser, and the following interface appears, which means success
insert image description here
(4) Start the front-end project Open the
front-end project separately, execute the command line: npm install
After the installation dependencies are completed, execute npm run dev to start
insert image description here

After startup, the default port is 81, which is automatically opened in the browser

insert image description here
After seeing the verification code, it means that the front and back ends are connected, and the verification code is transmitted from the background.

At this point, if the start-up of the front-end and back-end separation projects is completed, you can combine your own needs for secondary development~~~~

Guess you like

Origin blog.csdn.net/qiaojunt/article/details/127588629