若依框架搭建使用详细教程
准备工作
学习基础:Springboot Vue
环境要求:JDK1.8+ MySQL Redis Maven Vue
下载
1.打开Gitee进入首页,点击全部推荐项目,快速进入点击蓝色链接,如果不想进行前面几步操作,可以直接跳到第四步。
2.点击全部推荐项目,选择Stars,如下图所示
3.然后往下翻,就可以看到若依了,如图所示。目前排名在第三名(更新时间是2023年10月12日,排名仅供参考)
4.点击进入,如果你不想按照前面操作,点击蓝色链接可直达项目地址,
ruoyi- ui为前端部分其余为后端部分,主要服务与ruoyi-admin文件夹
下载步骤:复制路径打开idea克隆即可
打开idea点击File->Open
选择你下载后解压的文件,这里以若依前后端分离的项目来演示操作
数据库引入以及配置
打开下载的文件,里面有两个sql文件,如果用不到定时任务的话可以只导入 ry_20220822.sql ,用到的话就需要同时导入 quartz.sql 。不确定或者看不懂,就 sql 文件夹下的 sql 文件全部导入吧。
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下的应用控制脚本文件
打开Navicat 新建一个数据库名字,这里以demo命名,使用 utf8mb4 编码。排序规则可以空着用默认的(也可以使用utf8,utf8mb4支持一些表情符号)
建好之后打开数据库,然后双击表,直接把sql文件拖动过来,出现 [SQL] Finished successfully 表示成功。刷新后就可以看到表。这里把定时任务也导进来了。
导入后的表,都有注释。其中 qrtz 开头的是定时任务相关的,其他都是Ruoyi相关的。
修改配置文件
打开application-druid.yml配置文件(需要去配置文件中修改一下数据库链接。位置在 ruoyi-admin/src/main/resources/application-druid.yml )
然后分别修改图片中箭头指的位置:分别是数据库名字以及用户名和密码
这里数据库名字叫demo,用户名和密码是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
url 中的 demo 改为自己上面数据创建时候的名字,username 和 password 改成自己数据库的用户名密码。
有需要的再去 ruoyi-admin/src/main/resources/application.yml 下,修改端口 port 和 Redis密码redis: password ,否则运行不起来。
后端运行
点击RuoYiApplication 旁边的或者 main() 方法左侧的箭头就可以运行了。文件位置:ruoyi-admin/src/main/java/com/ruoyi/RuoYiApplication.java
在运行前需要启动Redis,否则会运行失败的,运行成功会出现下面的效果
修改端口,默认是8080,在 application.yml 文件中配置的,在21行:
前端运行
直接在 IDEA 里面 File -> Open 就可以了,打开ruoyi-vue 文件夹下的 ruoyi-ui
npm install
打开后需要运行一下 npm install ,类似与后端的 maven install 一样,下载一些依赖包。IDEA右下角会有提示,或者自己终端运行也可以。又或者在 package.json 文件上点右键,如下图所示,也有这个选项。(前提安装Node.js,最好再配一下国内镜像),顺便点一下 Show npm Scripts ,会显示出来一些npm的命令,之后运行打包用。install完成,以及显示npm脚本的结果。
运行前端项目
运行前端项目,直接 npm run dev 命令就可以了,就是上面npm脚本中双击dev,运行成功后,控制台显示地址,浏览器会自动弹出登录页面。默认为http://localhost:80/
密码会自动填充。用户名是admin,密码admin123。
登录成功:
修改端口
如有需要,可以自己修改端口。
在 vue.config.js 中可以修改前端项目运行的端口(默认是80),以及与后端交互的端口(Springboot的默认端口8080)。
修改后通过 8081 端口来访问
项目后端运行的地址,这个要与Springboot运行的相对应才能请求到:
总结
package.json :在上面右键可以直接运行install以及显示可用npm脚本。它包含名称、描述和版本之类的信息,以及运行、开发以及有选择地将项目发布到 NPM 所需的信息。
vue.config.js :我们可以在这里更改前端项目接口,以及与后端进行交互的地址。
src :源码
api :调用后端接口的方法封装;
views :具体的前端页面。
dist :打包完成后的文件夹,刚打开的时候没有,在 npm run build 之后才有。