目录

基于若依RuoYi框架前后端分离版开发详解

基于若依RuoYi框架前后端分离版开发详解

一.源码下载

1.进入若依官网:http://www.ruoyi.vip/,顶部菜单栏【源码地址】,选择前后端分离版

https://i-blog.csdnimg.cn/blog_migrate/4a43fcf934810fe98de3551cb5bb9d1c.png

2.下载方式二选一即可,①复制地址用git下载 ②将zip包下载到本地后解压。右侧能够预览并选历史版本进行下载。随着版本的更新会对框架进行bug的修复和升级完善,通常选择最新版就可以了。

https://i-blog.csdnimg.cn/blog_migrate/3421177dae5cd7d5bb3ab2d006f4377e.png

二.环境准备及代码修改

1.环境准备

后端:jdk1.8+ mysql redis maven

前端:node.js

2.代码修改

修改项目名称、模块名称及“ruoyi”相关命名。

(1)由于是前后端分离版本,前后端代码由不同人员编写,为便于管理,将前后端代码分为两个项目维护。将ruoyi-ui模块拷贝出来作为前端项目,其余的单独创建一个文件夹做为后端项目。

https://i-blog.csdnimg.cn/blog_migrate/494b39c5f964b542b6054af016364a5e.png

后端项目目录

https://i-blog.csdnimg.cn/blog_migrate/957b55c277bd03cdabe6f32ee7316b4d.png

前端项目目录

https://i-blog.csdnimg.cn/blog_migrate/30c4ded3964c8d887c2e6e373d2f1fec.png

(2)项目名称和模块名称直接右键修改即可。

https://i-blog.csdnimg.cn/blog_migrate/871c7ce8c43aadc0875465b294d0c2c1.png

(3)项目中有很多“ruoyi”相关的命名,例如包名、类名等,根据命名规范大小写不同,而Java是严格区分大小写的,所以不能一次性统一替换,需区分大小写替换。用Ctrl+Shift+R全局搜索替换,注意锁定大小写,如下图,不同版本IDEA锁定大小写按钮的样式和位置可能不同。

https://i-blog.csdnimg.cn/blog_migrate/da461d4d159c4972e5efe7cae1b33ab3.png

(4)修改后端配置文件,修改application-druid.yml中的数据库连接配置,修改application.yml中的redis配置。

https://i-blog.csdnimg.cn/blog_migrate/06e7610a3a37c17836e5747aeb86b461.png

https://i-blog.csdnimg.cn/blog_migrate/aec22288f99e5fd9c1e37ab0dfb1f3e6.png

(5)修改前端配置文件,修改vue.config.js中的代理,ip和端口与后端服务相匹配。

https://i-blog.csdnimg.cn/blog_migrate/d375bfc829be168cf0206bb96f3c0cad.png

三.前后端启动

1.后端启动

运行启动文件即可,看到控制台如下输出则启动成功。

https://i-blog.csdnimg.cn/blog_migrate/8de91ac58f2380035ae4df15cdb94949.png

2.前端启动

首先确保本机已装有node.js,没有需要安装。

# 安装依赖
npm install
# 启动服务
npm run dev

https://i-blog.csdnimg.cn/blog_migrate/b281020b4766118dba04a317fa17ab95.png

3.启动验证

请求本地服务地址http://localhost:8080可看到登录页面

https://i-blog.csdnimg.cn/blog_migrate/6f0cf26eaa50d5b6f9b6ad29df03b3e8.png

四.集成mybatis-plus

1.引入依赖

<!-- mybatis plus -->
<dependency>
   <groupId>com.baomidou</groupId>
   <artifactId>mybatis-plus-boot-starter</artifactId>
   <version>3.5.1</version>
</dependency>

2.代码修改

修改MyBatisConfig.java文件的127行,修改为

final MybatisSqlSessionFactoryBean sessionFactory = new MybatisSqlSessionFactoryBean();

修改后代码如下

https://i-blog.csdnimg.cn/blog_migrate/56e40062df7bfba3ed805d0eb3cfb1a8.png

至此,若依框架的搭建与mybatis-plus的集成已经完成。

附官方文档:http://doc.ruoyi.vip/ruoyi-vue/