若依前后端分离版手把手教你本地搭建环境并运行项目

场景

RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架。

RuoYi 官网地址:http://ruoyi.vip
RuoYi 在线文档:http://doc.ruoyi.vip
RuoYi 源码下载:https://gitee.com/y_project/RuoYi-Vue
RuoYi 在线提问:https://gitee.com/y_project/RuoYi-Vue/issues
RuoYi 博客:https://www.oschina.net/p/ruoyi

RuoYi-Vue 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源。

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

截止到目前,若依前后端分离版的最新版本是3.1

 

之前使用的若依的前后端分离版的版本2.3前后端是单应用。后台所有的模块都在一个项目下。

自3.0之后,将单应用调整为多模块项目

下载源码之后ruoyi-ui是前端项目模块,ruoyi-admin是后端主模块,其他的是后端用到的其他模块。

这里以下载3.1为例,浏览器输入以下地址,

https://gitee.com/y_project/RuoYi-Vue/tree/v3.1/

使用git clone 或者压缩包下载的方式将RuoYi-Vue下载,下载之后的目录

 

可以看到下面的sql目录下会有两个sql文件,这两个sql文件就是数据文件。

所以首先在本地新建一个Mysql数据库,这里叫ry-vue310

 

切记在新建数据库时要将字符集设置为utf8不然在执行向数据库插入一些数据含有中文时会报错。

新建数据库完成后在数据库上右击-运行sql文件,这里使用的是Navicat连接工具。然后选中上面的sql目录下的ry_20200901.sql

点击开始,然后再执行sql目录下的quartz.sql

 

初始化数据库完成之后,会在数据库下生成一些表,并在表中生成一些数据。

 

然后使用IDEA-File-Open,选择Ruo-Yi-Vue,打开后,找到ruoyi-admin模块下的application-druid.yml

然后将连接数据的连接语句的数据库以及用户名和密码改为自己的。

后端项目还使用到了Redis作缓存用。所以需要在你的本地安装Redis服务端,这里是在 Windows下。

Windows中Redis的下载安装与修改密码并启动:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107486313

参照如上教程安装完Windows服务端并启动。

然后打开ruoyi-admin下的application.yml修改redis为自己的端口和密码。

如果使用IDEA打开项目后报错,在报错的地方alt+enter,选择SetJDK

 

这里选择自己本地配置的JDK1.8

 

然后找到vue-admin下的RuoYiApplication,右击运行启动后台项目。

 

启动成功,默认端口是8080。

然后启动前端项目。

这里使用VSCode将前端项目RUOYI-UI打开,然后在此处新建终端,输入

npm install --registry=https://registry.npm.taobao.org

安装相关依赖

 

安装成功后,运行项目

npm run dev

 

前端项目默认的端口是80端口,如果80被占用就会使用81端口,具体看启动成功后的输出,这里是启动在81端口,打开浏览器输入

http://localhost:81/

然后能出现验证码则是请求后台成功。

 

输入验证码登录成功后

 

  • 18
    点赞
  • 126
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:成长之路 设计师:Amelia_0503 返回首页
评论 3

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值