Detailed tutorial on how to build and use the framework
Preparation
Learning basics: Springboot Vue
Environment requirements: JDK1.8+ MySQL Redis Maven Vue
download
1. Open Gitee and enter the homepage, click on all recommended items, quickly enter and click on the blue link . If you do not want to perform the previous steps, you can jump directly to the fourth step.
2. Click on all recommended items and select Stars, as shown in the picture below.
3. Then scroll down and you can see Zoey, as shown in the picture. Currently ranked third (updated on October 12, 2023, ranking is for reference only)
4. Click to enter. If you do not want to follow the previous operations, click the blue link to go directly to the project address .
ruoyi-ui is the rest of the front-end part. For the backend part, the main services are the ruoyi-admin folder.
Download steps: Copy the path and open the idea to clone
it. Open the idea and click File->Open
to select the file you downloaded and decompressed. Here, the operation is demonstrated using the project of Ruoyi's front-end and back-end separation.
Database introduction and configuration
Open the downloaded file. There are two sql files in it. If you do not need the scheduled task, you can only import ry_20220822.sql. If you use it, you need to import quartz.sql at the same time. If you are not sure or don't understand, just import all the sql files in the sql folder.
ruoyi-vue
├── bat // 提前写好的一些bat脚本，包括清理\运行\打包
│ └── clean.bat // 清理工程target生成路径
│ └── package.bat // 打包Web工程，生成war/jar包文件
│ └── run.bat // 使用Jar命令运行Web工程
├── doc // Eclipse版本的环境配置运行文档
├── ruoyi-admin // 后台服务
├── ruoyi-common // 工具类
├── ruoyi-framework // 框架核心
├── ruoyi-generator // 代码生成
├── ruoyi-quartz // 定时任务
├── ruoyi-system // 系统代码
├── ruoyi-ui // 前端Vue项目
├── sql // 数据库脚本
│ └── quartz.sql // 定时任务相关
│ └── ry_20220822.sql // 若依框架相关
├── .gitignore // Git忽略文件
├── LICENSE // 开源许可
├── pom.xml // Maven 配置
├── README.md // 说明文件
├── ry.bat // Win下的应用控制脚本文件，包括启动/停止/重启应用等
├── ry.sh // Linux下的应用控制脚本文件
Open Navicat and create a new database name. Here it is named after demo and uses utf8mb4 encoding. The sorting rules can be left blank and used as default (utf8 can also be used, utf8mb4 supports some emoticons).
After the database is built, open the database, then double-click the table and directly drag the sql file over. If [SQL] Finished successfully appears, it means success. You can see the table after refreshing. Scheduled tasks are also imported here.
The imported tables have comments. Among them, the ones starting with qrtz are related to scheduled tasks, and the others are related to Ruoyi.
Modify configuration file
Open the application-druid.yml configuration file (you need to modify the database link in the configuration file. The location is ruoyi-admin/src/main/resources/application-druid.yml)
and then modify the positions pointed by the arrows in the picture: the databases respectively Name, username and password.
The database name here is demo, and the username and password are root.
# 数据源配置
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driverClassName: com.mysql.cj.jdbc.Driver
druid:
# 主库数据源
master:
url: jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
username: root
password: root
Change the demo in the url to the name when you created the data above, and change username and password to the username and password of your database.
If necessary, go to ruoyi-admin/src/main/resources/application.yml and modify the port and Redis password redis: password, otherwise it will not run.
Backend running
Click the arrow next to RuoYiApplication or to the left of the main() method to run it. File location: ruoyi-admin/src/main/java/com/ruoyi/RuoYiApplication.java
Redis needs to be started before running, otherwise it will fail. If the operation is successful, the following effect will appear.
Modify the port, the default is 8080, configured in the application.yml file, on line 21:
Front-end operation
Just go to File -> Open directly in IDEA and open ruoyi-ui under the ruoyi-vue folder.
npm install
After opening, you need to run npm install, similar to the back-end maven install, to download some dependency packages. There will be a prompt in the lower right corner of IDEA, or you can run it on your own terminal. Or right-click on the package.json file, as shown in the figure below, there is also this option. (Node.js must be installed first, and it is best to configure a domestic image). By the way, click Show npm Scripts. Some npm commands will be displayed, and then run for packaging. The install completes and the results of the npm script are displayed.
Run the front-end project
To run the front-end project, just use the npm run dev command. Double-click dev in the npm script above. After successful operation, the console will display the address and the browser will automatically pop up the login page. The default is http://localhost:80/
and the password will be filled in automatically. The username is admin and the password is admin123.
login successful:
Modify port
If necessary, you can modify the port yourself.
In vue.config.js, you can modify the port on which the front-end project runs (the default is 80), and the port for interacting with the back-end (Springboot's default port 8080).
After modification, access the project backend running address through port 8081.
This must correspond to the one running Springboot to request:
Summarize
package.json: Right-click on it to run install directly and display available npm scripts. It contains information such as name, description, and version, as well as information needed to run, develop, and optionally publish the project to NPM.
vue.config.js: Here we can change the front-end project interface and the address for interacting with the back-end.
src: source code
api: method encapsulation for calling the back-end interface;
views: specific front-end pages.
dist: The folder after packaging is completed. It does not exist when you first open it. It only exists after npm run build.