一、去官网下载RuoYi项目

以下是RuoYi官网

RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-UI||www.ruoyi.viphttps://www.ruoyi.vip/

点击RuoYi Vue前端分离版后,进入下方页面需要首先注册一个gittee账号
然后点击克隆/下载

点击下载ZIP

将下载的ZIP件解压缩后(解压缩后有的文件中可能会多放嵌一层,最好修改一下)在自己经常存放项目的文件中

二、搭建前端环境

接下来需要搭建前端环境,没有nodejs得下载以下,但最好与我版本一致,以防有版本冲突问题

下载后需要进行环境的搭建
配置npm的全局安装路径

使用管理员身份运行命令行,在命令行中,执行如下指令:
npm config set prefix "C:\Program Files\nodejs"
注意: 这个C:\Program Files\nodejs目录是NodeJS的安装目录

然后切换npm的腾讯云镜像

Npm config set registry http://mirrors.cloud.tencent.com/npm

安装Vue-cli

使用管理员身份运行命令行,在命令行中,执行如下指令:
npm install -g @vue/cli

这个过程中,会联网下载,可能会耗时几分钟,耐心等待。


三、将数据库数据迁移到我们电脑本地

接下来就是将它的数据库内容弄到我们本地来
先创建一个数据名为ruoyi

然后再navicat中找到这个数据库,右击表然后点击运行sql文件,找到你刚才存放RuoYi项目的地方打开项目文件找到sql文件夹然后打开依次运行这两个sql文件

然后现在就是在navicat中创建一个sys_student表,这个表的创建以下面为例

四、运行后端环境


(这里默认已经你已经搭建好后端环境,不清楚的可以去我主页查看相关内容)
然后将窗口缩小,接下来用idea打开项目文件RuoYi-Vue-master
在另一个窗口打开ruoyi-ui(在项目文件中属于前端部分)为后续前后端分别操作方便
在后端页面打开application-druid.yml与application.yml和RuoYiApplication.java

然后修改application-druid.yml中的url中/后修改为ruoyi
password:修改为自己的数据库密码

其次可以修改application.yml中端口号如果你的8080端口号被占用的话

其次配置好你的maven,配置好的话点击idea右边的maven左上角的刷新后

便可用启动类启动后端如下所示表示启动后端成功

五、验证后端是否运行成功

然后我们可以通过验证码功能验证以下是否成功
找到CaptchaController.java打开,找到验证码部分

复制下面我选中的

 将这两个文件解压缩后放在自己想放的位置(绿色软件,解压缩后直接点击运行软件就可以使用)

先运行Redis-x64-5.0.14.1的redis-server.exe

点击后是下面的页面

之后缩小该页面然后打开RedisDesktopManager中的rdm.exe

进入如下页面

点击这个页面左下的这个Connnect to Redis Server,按照我的下方的示例输入后点击窗口的
下方的Test Connection成功后点击ok ok

然后打开浏览器输入localhost:你弄的端口号/captchaImage
如果看到这个页面再在刚才的Redis Desktop Manager看一下就知道是否成功
这个数字2就是验证码,它这里是一个算术的结果

六、启动前端


然后现在就是启动前端cmd打开命令提示符按下图输入(不小心输错了忽略那个嘿嘿)

等待前端的启动加载,记住最好是先启动后端在启动前端,我这就是这样的步骤
接下来就来看看我们目前的结果

输入验证码后进入主页打开代码生成页面

七、开始通过ruoyi生成代码来新增内容部分

导入刚才我们创建的sys_student表(这里我已经导入了,所以你找不到,在你的上面应该就是第一个)

点击确认后导入,然后对这个进行编辑,你可以在导入的这个表的右边找到编辑两个字
然后修改内容如下所示(这里取决于你刚才这个表的创建)

然后是生成信息如下图所示

然后是基本信息如下图所示

然后点击提交就可以了

八、将想要新增的内容代码对应的加入到RuoYi项目文件中

之后再点击右边的生成代码,它会以压缩包的方式下载,然后解压缩后你需要将这个文件中的代码导入到刚才那个大项目的对应文件下,目前你打开这个你刚下载的文件是这样的先将studentMenu.sql文件用navicat运行以下

接下来是依次将这四个文件中的代码文件依次放入后端项目文件中直接在idea中操作即可具体我就不详细执行了,controller在ruoyi-admin文件夹下
其他三个都在ruoyi-system文件夹下

然后是这个是放在ruoyi-system下,剩下的自己可以根据图片的嵌套来对应寻找

接下来是Vue部分依次弄api和views部分

把这个文件复制到对应位置,可以打开我刚才让你打开的前端idea窗口找到src文件然后api然后对应的嵌套格式

然后就是将student文件夹复制到对应位置

九、最后欣赏检阅自己的成果!!!

ok已经将新增部分加入到项目中,接下来就是运行项目看一下效果
这里可以直接刷新页面
但最好是重启以下后端和前端
然后就可以看到下面页面

可以对改页面的编辑搜索操作实施一下检查以下问题

十、最后补充

选中的就是我用到的相关软件,因为我们要注意的是那个版本兼容问题等等,所以大家看一下!!!

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐