【若依Java】15分钟玩转若依二次开发，新手小白半小时实现前后端分离项目，springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能

编程小石头

已于 2024-07-17 11:36:10 修改

阅读量7.2k

点赞数 62

CC 4.0 BY-SA版权

于 2024-06-29 23:13:07 首次发布

本文链接：https://blog.csdn.net/qiushi_1990/article/details/140070488

今天我们来借助若依来快速的搭建一个springboot+vue3的前后端分离的的Java管理后台，后台网页使用vue3和 Element Plus来快速搭建。

这里我们可以借助若依自动生成Java和vue3代码，这就是若依的强大之处，即便你不会Java和vue开发，只要跟着石头哥也可以快速的开发一款Java和vue程序。

一，技术点和准备工作

后端技术点

Java17
数据库：Mysql8
MyBatis：作为持久层框架，实现了数据库的CRUD操作，简化了与数据库的交互
Redis5：作为缓存中间件，提高了系统性能和响应速度
Spring Boot ：作为核心框架，提供了一系列开箱即用的功能，如数据访问、消息传递、任务调度等
Spring Security：提供了强大的安全认证和授权功能
Jwt，权限认证使用Jwt，支持多终端认证系统

前端技术点

vue3
Element Plus
vite

软件和开发环境

官方只是给我们提供一个推荐，建议大家尽量和右边的课程版本保持一致。

官方推荐	课程版本
JDK>=1.8	JDK17
Mysql>=5.7	Mysql8
Redis>=3	Redis5
Maven>=3	Maven3
Node>=12	Node20.15

建议大家尽量和课程版本保持一致，避免一些版本不对应导致一些不必要的错误。

我们Java后端使用idea开发
vue3前端网站使用vscode软件开发。
大家自行下载这两款软件即可。

这里安装redis和node的时候有些注意事项给大家简单说说。

安装软件注意事项

我们安装redis和node的时候都需要配置环境变量，其实我们在安装的过程中，就可以直接勾选上，这样就可以免去自己再单独配置环境变量的麻烦了。
所以不管安装redis和node时，只要看到PATH的地方，一定要记得都勾选上。

redis记得勾选PATH

安装node也记得点中PATH

如果没有配置好环境变量，也可以自己去网上搜索redis5和node20安装教程，跟着安装即可。

如果你找不到安装包，我也给大家提供了安装包，去评论区看置顶评论就可以拿到

二，启动若依的Springboot项目和vue3项目

2-1-1，去官方下载前后端项目

我们使用idea开发者工具来去若依官网下载官方提供的springboot项目

我们使用前后端分离的版本。

如上图所示，我们拿到下载地址即可。
然后打开idea，如下图所示，使用get fromVCS

然后把复制的下载地址粘贴到如下图所示的地方，记得指定源码路径，安装下git。

然后等待源码下载

下载成功后会自动打开项目。

正常第一次打开项目需要导入一些安装包和依赖。

2-1-2，mysql数据库的配置和导入

在项目的sql目录下，有我们数据库配置需要的一些东西。
在这里插入图片描述
所以我们先用idea自带的mysql管理工具，链接我们的mysql数据库，然后创建一个ruoyi的数据库。至于mysql的安装和使用idea链接mysql我这里不拆开讲了，可以去看下我Java基础入门的视频和博客笔记。我会在视频里给大家演示的。

创建好ry-vue数据库,这里数据库名最好也是用ry-vue,因为后续运行项目时官方代码里就是取得这个数据库名。创建好数据库以后，就可以执行sql下的文件了。我们先执行quartz.sql文件

我们在当前页执行sql的时候，记得ctrl+a全选当前的sql，然后点击绿色箭头执行sql

执行完以后如下

然后同样的方式执行另外一个sql文件

两个sql都执行完以后，点击刷新就可以看到我们成功的导入了以下数据表

创建好数据库和数据表以后，我们需要在下图所示的地方修改myslq数据库的账号和密码，记得改成我们自己的。

2-1-3，配置redis

其实配置reids很简单，只要你电脑上已经成功安装并启动redis，一切都保持默认即可。由于我的电脑本地redis没有设置密码，所以不用配置reids即可，当然如果你设置了redis访问密码，记得去下图所示的地方将修改密码。如果和石头哥一样没有设置reids密码，password后面空着即可。

2-1-4，启动项目

如下图所示我们找到RuoYiApplication然后就可以点击绿色箭头运行项目了。

启动成功我们可以看到如下标识

启动成功后通过http://localhost:8080 看到如下所示，就代表若依版的springboot项目已经成功运行了。

Java后端启动成功了，接下来我们就要启动前端vue3项目进行网站端的部署运行了。

2-2-1，下载vue3项目源码

由于上门Java项目里的ruoyi-ui使用的是vue2开发的前端网站，所以我们想用vue3，就得使用官方提供的另外一套代码，所以这里的ruoyi-ui可以直接删除了。

其实在官方的文档里提供的vue3版本的下载地址

我们点进去可以看到是gitbhub上的一个仓库

也可以像上面Java项目一样借助idea的git下载，我们这里为了让大家学习不同的方式。就用另外一种方式教大家下载项目源码吧。

我们只需要下载zip压缩包就可以了。下载到桌面即可，然后解压。

解压后的目录如下

可以看出来这是一个标准的vue3项目。

2-2-2，运行vue项目

我们这里用到的node，所以要确保你node安装成功，并且配置好环境变量。
我们运行项目使用专业的前端开发工具vscode
其实导入项目到vscode很简单，只需要在vscode里打开项目文件夹即可。

我们打开项目后要去安装依赖，安装依赖之前要记得安装node，我们这里使用npm i 来自动安装依赖。

然后耐心等待依赖安装完即可。安装完如下。
依赖安装完，就可以用npm run dev来运行项目了。运行成功后可以看到管理后端网站的访问地址。
然后就可以看到管理后台的登录界面

到这里我们整个前后端项目就运行成功了。
使用默认账号先登录进去看看效果

三，自定义主题样式和文案

我们有时候用别人的框架，肯定想自定义一些样式，颜色，图案。接下来石头哥就带大家自定义下。

项目中要到的图标，图片，背景图我给大家放到评论区了

3-1，自定义主题和样式

在后台的右上角，有一个入口。

点击布局设置，就可以设置主题和颜色了
如我们把深色侧边栏改为浅色侧边栏

改变后如下

改变颜色，如果我们想改变按钮的颜色，就修改下主题颜色即可。

可以看出，我们按钮就从蓝色改为了橘黄色，当然你也可以改为别的颜色。

其他几个选项可以自己根据需求配置。当然也可以恢复默认

3-2，修改图标

可以看到我们后台网站的图标是这样的，当然这里的图标也可以换成自己的。

去代码里查看，可以看到我们这里的图标用的是public目录里的图标

我们只需要自己找一个图标，名字改成favicon并且图片的后缀也改为 .ico就行。如我这里用自己的头像来替换这个默认图标。

替换后记得刷新下网页。可以看到我们只在网站顶部替换了，但是左侧边栏的还没有替换掉。

去查看源码

可以看到我们左侧边栏用的是src下的logo.png,所以这里也要替换下。

如我们这里替换为自己的

再刷新下网页，可以看到成功了

3-3，vscode里修改文案

可以看到我们项目里到处都是若依的字样，那么我们就使用vscode自带的全局替换，来替换下。最左边有一个搜索框，点击下。

可以搜索到整个项目里的若依字段

下面的替换里输入自己替换的文字就行。然后记得点击下这个图标。

然后刷新网页，就可以看到我们文案全部替换成功了

3-4.idea里修改Java文案

我们前面一步只是修改了前端文案。还有Java后端文案需要修改下。
进入idea然后按快捷键
ctrl+shift+R 就可以弹出下面的弹窗，然后搜索若依，替换为编程小石头。再点击下全部替换。

这样整个Java项目里若依的文案也就全部替换了。

3-5，删除数据里的文案

细心的同学可能发现，前端网页左侧边栏里还有若依文案

因为侧边栏我们是从数据库里动态加载的，所以要去数据库里删除对应的数据。我们去idea里借助mysql管理工具，找到sys_menu数据表，然乎双击打开。

打开后如下

可以看到这里存的是我们左侧边栏的文案，把若依官网的这行删除即可。
选中这行，然乎点击减号

点完减号，记得点击整个绿色向上的箭头。同步下数据库。

这样就删除成功了，然后刷新下后台网页。

可以看到没有若依的文字了。