idea部署RuoYi-Vue分离版的图文详解

 更新时间:2024年06月25日 09:06:33   作者:Excellent的崽子  
RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架, 本文主要介绍了idea部署RuoYi-Vue分离版的图文详解,具有一定的参考价值,感兴趣的可以了解一下

现在大部分公司都使用到了若依框架进行二次开发,相信还有很多小伙伴们对若依不是很了解,RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架, 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源,支持分布式事务。

想对若依进行更多了解可以传送官方文档: RuoYi

很多小伙伴们还不会部署这个项目到自己的本地,现在我就来教你将ruoyi-vue部署到本地,这里我们以idea进行教程。

话不多说,开干!

准备工作

  • JDK >= 1.8 (推荐1.8版本)
  • MySQL >= 5.7 (推荐5.7版本)
  • Maven >= 3.0
  • Node >= 12

第一步,拉取项目到我们的idea:

前往Gitee下载页面下载解压到工作目录,这里前提,我们需要给idea配置git,然后直接通过链接拉取项目即可。

1.本地下载git,配置到idea中。

在这里插入图片描述

配置好以后,我们就可以通过点击 File -> New -> Project from Version Controller 从远程仓库去获取我们需要的项目,如图:

在这里插入图片描述

2.将gitee路径复制到URL框中,设置自定义路径,点击Clon就开始加载我们的项目了。

在这里插入图片描述

3.拉取成功就长下面这个样子,如图:

在这里插入图片描述

tips:因为本项目是前后端完全分离的,所以需要前后端都单独部署好,才能进行访问。

第二步,接下来我们准备我们后端启动工作:

必要配置:

修改数据库连接,编辑resources目录下的application-druid.yml

在这里插入图片描述

修改服务器配置,编辑resources目录下的application.yml

在这里插入图片描述

这样基础配置就搞好了,接下来想要启动我们的项目,也要保证我们本地的Redis也是在运行着的,所以就需要我们本地有下载好的Redis数据库,我们将它运行起来。如果没有也没关系,请传送至官网下载: Redis

安装好以后,我们进入Redis路径下,双击redis-server.exe文件,如果闪退可以使用管理员运行或者在rides目录下打开黑窗口执行cmd命令:redis-server.exeredis.windows.conf

在这里插入图片描述

Rdis启动成功就长下面这个样子,如图:

在这里插入图片描述

Reids启动成功,接下来我们就可以启动我们的后端项目了,下面就是后端启动成功的样子,如图:

在这里插入图片描述

第三步,前端部署

首先你需要在本地安装部署nodejs,因为我们接下来都是通过npm命令来进行前端的启动工作。

Node.js 安装包及源码下载地址为:Node.js

Node.js的安装很简单,只要一直下一步就好了,安装好了以后我们开始配置它的环境变量,首先打开我们的环境变量配置(找不到的可以打开搜索框直接搜索环境变量即可),在系统变量中找到path属性,然后将我们的Node.js安装路径添加到变量值中,就OK了,如图:

在这里插入图片描述

下一步,我们右键ruoyi-ui(这个就是我们的前端项目),打开终端,如图:

在这里插入图片描述

在这里插入图片描述

下一步,从上往下输入命令,即可

# 安装依赖
npm install

# 强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
# 这里我们使用的是淘宝镜像
npm install --registry= https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

最后,我们的若依项目启动成功!

前端启动成功会自动打开浏览器,前端端口号默认80,如图:

在这里插入图片描述

那么看到这里,我们的RuoYi-Vue就启动成功啦!接下来就可以对若依进行更加深入的了解,并嵌入自己的项目需求。

到此这篇关于idea部署RuoYi-Vue分离版的图文详解的文章就介绍到这了,更多相关idea部署RuoYi-Vue分离版内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue跳转同一路由报错的问题及解决

    vue跳转同一路由报错的问题及解决

    这篇文章主要介绍了vue跳转同一路由报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue如何使用 Slot 分发内容实例详解

    vue如何使用 Slot 分发内容实例详解

    本篇文章主要介绍了vue如何使用 Slot 分发内容实例详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 解决Vue2.0 watch对象属性变化监听不到的问题

    解决Vue2.0 watch对象属性变化监听不到的问题

    今天小编就为大家分享一篇解决Vue2.0 watch对象属性变化监听不到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 使用v-model实现控制子组件显隐效果

    Vue 使用v-model实现控制子组件显隐效果

    v-model 可以实现双向绑定的效果,允许父组件控制子组件的显示/隐藏,同时允许子组件自己控制自身的显示/隐藏,本文给大介绍Vue 使用v-model实现控制子组件显隐,感兴趣的朋友一起看看吧
    2023-11-11
  • Vue3发送post请求出现400 Bad Request报错的解决办法

    Vue3发送post请求出现400 Bad Request报错的解决办法

    这篇文章主要给大家介绍了关于Vue3发送post请求出现400 Bad Request报错的解决办法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • vue3整合SpringSecurity加JWT实现登录认证

    vue3整合SpringSecurity加JWT实现登录认证

    本文主要介绍了vue3整合SpringSecurity加JWT实现登录认证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-04-04
  • Vue-drag-resize 拖拽缩放插件的使用(简单示例)

    Vue-drag-resize 拖拽缩放插件的使用(简单示例)

    本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue之el-form表单校验以及常用正则详解

    vue之el-form表单校验以及常用正则详解

    这篇文章主要介绍了vue之el-form表单校验以及常用正则,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • VUE+node(express)实现前后端分离

    VUE+node(express)实现前后端分离

    在本篇文章里小编给大家分享的是关于VUE+node(express)前后端分离实例内容,有需要的朋友们参考下。
    2019-10-10
  • Vue实现不同用户权限的方法详解

    Vue实现不同用户权限的方法详解

    在项目中,实现不同用户的权限控制是常见的需求也是常见的功能模块,本文将以 vue 为主要的代码框架介绍几种常见的权限控制方式,有需要的可以了解下
    2025-03-03

最新评论