RuoYi-ue前端分离版部署流程

RuoYi是一个后台管理系统,基于经典技术组合(Spring Boot、Apache Shiro、MyBatis、Thymeleaf)主要目的让开发者注重专注业务,降低技术难度,从而节省人力成本,缩短项目周期,提高软件安全质量。

系统需求

  • JDK >= 1.8
  • MySQL >= 5.7
  • Maven >= 3.0

在线体验

下载网址

官网

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.vip

项目结构

  1. .github:这个文件夹通常用于存放与GitHub相关的配置文件,如工作流程(workflows)等。
  2. bin:这个文件夹通常用于存放可执行文件或脚本。
  3. doc:这个文件夹通常用于存放项目的文档,如用户手册、API文档等。
  4. ruoyi-admin:这个文件夹可能包含了与管理后台相关的代码和资源。
  5. ruoyi-common:这个文件夹可能包含了项目中通用的代码和资源,如工具类、常量等。
  6. ruoyi-framework:这个文件夹可能包含了项目的框架代码,如基础服务、基础组件等。
  7. ruoyi-generator:这个文件夹可能包含了代码生成器相关的代码和资源。
  8. ruoyi-quartz:这个文件夹可能包含了与定时任务相关的代码和资源。
  9. ruoyi-system:这个文件夹可能包含了与系统模块相关的代码和资源。
  10. ruoyi-ui:这个文件夹可能包含了与前端用户界面相关的代码和资源。
  11. sql:这个文件夹通常用于存放数据库脚本,如创建数据库、表的SQL语句等。
  12. .gitignore:这是一个Git忽略文件,用于指定在Git版本控制系统中忽略的文件或文件夹。
  13. LICENSE:这是一个许可证文件,通常用于说明项目的开源许可证信息。
  14. pom.xml:这是一个Maven项目的配置文件,用于管理项目的依赖、构建设置等。
  15. README.md:这是一个Markdown格式的README文件,通常用于介绍项目的功能、使用方法等。
  16. ry.batry.sh:这两个文件分别是Windows和Unix/Linux平台下的批处理脚本,可能用于项目的构建、部署等操作。

这个项目是一个基于Vue.js的前端项目,结合了后端服务,一个完整的Web应用项目。

系统需求(必须启动项)

  • JDK >= 1.8
  • MySQL >= 5.7
  • Maven >= 3.0

Tomcat启动

复制代码
cmd中>>startup.bat//不能正常ping通时可以尝试使用管理员模式去进行链接

启动成功界面

Redis启动

cmd指定目录下

启动一个 ,进入到redis中的src目录下 在控制台输入指令:redis-server (注意:这样启动默认端口是 6379 )
进入客户端输入:redis-cli

启动成功页面:

启动后端

找寻指定的文件 修改本机对应配置

application.yml

application-druid.yml

修改为本机数据库相关信息

指定数据库中运行对应SQL配置文件

RuoYiApplication 启动

后端启动成功页面

启动成功ping默认端口时显示:

前端启动教程

启动及验证(前台)

复制代码
## 开发

```bash
# 克隆项目
git clone https://gitee.com/y_project/RuoYi-Vue

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 启动服务
npm run dev
```

浏览器访问 http://localhost:80

## 发布

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
```
步骤 1: 进入项目目录
复制代码
cd ruoyi-ui
  • 解释 : 进入到项目目录 ruoyi-ui。这是项目前端的目录,通常包含前端应用的所有文件和资源。
步骤 2: 安装依赖
复制代码
npm install --registry=https://registry.npm.taobao.org
  • 解释 : 使用 npm install 命令安装项目所需的依赖。这里指定了淘宝的npm镜像 https://registry.npm.taobao.org,以加快下载速度,尤其是在中国大陆地区。
  • 注意: 确保你的系统已经安装了Node.js和npm。
步骤 3: 启动开发服务器
复制代码
npm run dev
  • 解释 : 使用 npm run dev 命令启动开发服务器。这通常会启动一个本地的开发服务器,监听指定的端口(默认通常是8080,但具体端口可能在项目配置中指定)。
步骤 4: 访问应用
  • 打开浏览器,输入 : http://localhost:80(默认账户 admin/admin123
  • 解释: 访问本地开发服务器的默认端口(这里指定为80)。使用默认的用户名和密码登录应用。
  • 验证: 如果能正确展示登录页面,并能成功登录,菜单及页面展示正常,则表明环境搭建成功。

注意事项

  • Node.js环境 : 执行 npm 命令需要配置 Node.js 环境。确保你的系统已经安装了 Node.js,并且 npm 命令可以在命令行中正常使用。

总结

  1. 进入项目目录 : cd ruoyi-ui
  2. 安装依赖 : npm install --registry=https://registry.npm.taobao.org
  3. 启动开发服务器 : npm run dev
  4. 访问应用 : 打开浏览器,访问 http://localhost:80,使用默认账户登录。

通过这些步骤,你可以确保前端应用的开发环境正确搭建,并且能够正常运行和访问。

系统接口500 异常

端口号问题

通过本次事件,学到了:前端 target****里面写的是设定的后端地址,可以和后端地址的 port****一样。

const Q post****里面是前端地址,不能和后端地址设定的一样,不然会报错。

验证完验证码之后成功进入到系统界面

新增子模块

POM内部新增manage模块

admin中新增pom文件

自动生成代码合并方法

后端

在pom中添加对应依赖

相关推荐
一斤代码4 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨6 分钟前
GO 启动 简单服务
开发语言·后端·golang
Hellyc6 分钟前
用户查询优惠券之缓存击穿
java·redis·缓存
中微子7 分钟前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年9 分钟前
从前端转go开发的学习路线
前端·学习·golang
斯普信专业组11 分钟前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
今天又在摸鱼34 分钟前
Maven
java·maven
老马啸西风36 分钟前
maven 发布到中央仓库常用脚本-02
java·maven
代码的余温37 分钟前
MyBatis集成Logback日志全攻略
java·tomcat·mybatis·logback
中微子39 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架