若依框架(RuoYi-Vue)前后端分离版——本地启动保姆级教程
若依RuoYi-Vue是目前企业级开发中非常受欢迎的一款前后端分离快速开发平台基于Spring Boot、Spring Security、JWT和Vue全家桶。很多新手在Clone代码后往往卡在Redis配置、数据库导入或前端依赖安装这一步。今天这篇文章我将手把手带你跑起来这个前后端分离版本新手也能轻松搞定一、准备工作环境要求在开始之前请确认你的电脑已经安装好以下工具版本必须符合要求否则会各种报错工具推荐版本说明JDK1.8推荐1.8或17后端运行环境Maven3.5后端依赖管理MySQL5.7推荐8.0数据库Redis3.0推荐5.0缓存中间件必须启动Node.js12推荐16-20前端运行环境IDEIDEA / VS Code后端用IDEA前端用VS Code⚠️特别注意Redis是必须的 若依前后端分离版用Redis做缓存和Token存储不启动会报错安装Node.js时记得勾选自动配置环境变量的选项安装Redis时同样建议勾选PATH方便命令行直接启动二、下载源码若依前后端分离版的Gitee仓库地址https://gitee.com/y_project/RuoYi-Vue方式一Git命令克隆gitclone https://gitee.com/y_project/RuoYi-Vue.git方式二直接下载ZIP进入Gitee页面 → 点击「克隆/下载」→ 选择「下载ZIP」下载完成后用IDEA打开后端项目RuoYi-Vue文件夹。 小提示前后端分离版的项目结构里前端代码在 ruoyi-ui 文件夹中后端是其他模块️ 三、数据库配置关键步骤3.1 创建数据库打开Navicat或其他MySQL客户端新建一个数据库数据库名ry-vue建议保持一致避免改配置字符集utf8 或 utf8mb43.2 导入SQL脚本在项目根目录下找到 sql 文件夹里面有两个SQL文件ry_xxxx.sql — 系统核心表quartz.sql — 定时任务表执行顺序先执行第一个再执行第二个3.3 修改数据库连接配置找到配置文件ruoyi-admin → src → main → resources → application-druid.yml修改成你自己的数据库账号密码spring:datasource:druid:master:url:jdbc:mysql://localhost:3306/ry-vue?useUnicodetruecharacterEncodingutf8useSSLfalseusername:root# 你的MySQL账号password:123456# 你的MySQL密码 四、Redis配置与启动4.1 启动RedisRedis安装后打开终端进入Redis安装目录执行redis-server.exe redis.windows.conf看到Redis图标和启动成功日志就说明Redis运行正常了如下图。4.2 修改Redis配置可选找到 application.yml 文件中的Redis配置块spring:redis:host:localhostport:6379password:# 默认无密码如有设置则填写database:0如果Redis没有设置密码password 留空即可。️ 五、启动后端项目5.1 用IDEA打开项目第一次打开会自动下载Maven依赖等待3-10分钟视网速而定如果下载慢可以配置阿里云镜像加速5.2 找到启动类依次展开ruoyi-admin → src → main → java → com.ruoyi → RuoYiApplication.java5.3 右键Run右键点击RuoYiApplication→ 选择Run ‘RuoYiApplication.main()’5.4 观察控制台如果看到类似这样的ASCII艺术字说明后端启动成功.____ _ __ _ _ /\\/ ____ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | _|_| | _\/ _|\\\\\\/ ___)||_)|||||||(_||))))|____|.__|_||_|_||_\__,|/ / / /|_||___//_/_/_/ :: Spring Boot ::(v2.5.15)...(♥◠‿◠) 若依启动成功 ლ(´ڡლ)如下截图所示 六、启动前端项目6.1 用VS Code打开前端代码前端代码在 ruoyi-ui 文件夹中用VS Code打开这个文件夹。6.2 安装依赖打开终端快捷键 Ctrl ~执行# 进入前端目录cdruoyi-ui# 安装依赖npminstall⚠️ 特别注意如果 npm install 很慢或卡住可以使用淘宝镜像源npminstall--registryhttps://registry.npmmirror.com或者永久设置镜像源npmconfigsetregistry https://registry.npmmirror.com6.3 启动项目依赖安装完成后执行npmrun dev看到以下信息表示启动成功VITE v4.x.x readyinxxx ms ➜ Local: http://localhost:80/ ➜ Network: http://xxx.xxx.xxx.xxx:80/6.4 访问前端页面浏览器打开http://localhost默认80端口输入默认账号密码登录用户名admin密码admin123成功登录后你就能看到若依的管理后台页面了 七、完整启动流程图┌─────────────────┐ │1. MySQL启动 │ → 创建数据库ry-vue执行SQL脚本 └─────────────────┘ ↓ ┌─────────────────┐ │2. Redis启动 │ → redis-server.exe 必须运行 └─────────────────┘ ↓ ┌─────────────────┐ │3. 修改配置文件 │ → application-druid.yml数据库密码 └─────────────────┘ ↓ ┌─────────────────┐ │4. 启动后端项目 │ → 运行RuoYiApplication.java └─────────────────┘ ↓ ┌─────────────────┐ │5. 安装前端依赖 │ →npminstallruoyi-ui目录 └─────────────────┘ ↓ ┌─────────────────┐ │6. 启动前端项目 │ →npmrun dev └─────────────────┘ ↓ ┌─────────────────┐ │7. 访问登录页面 │ → http://localhost └─────────────────┘❌ 八、常见报错及解决方案后端报错Connection refused: connectRedis连接失败原因Redis没有启动解决启动Redis服务执行 redis-server.exe后端报错Table ‘ry-vue.sys_user’ doesn’t exist原因数据库没有导入成功或连错库解决检查 application-druid.yml 中的数据库名确认已执行SQL脚本后端报错Failed to configure a DataSource原因Maven依赖没下载完或配置文件有误解决Reimport Maven刷新依赖检查数据库配置前端报错Error: Cannot find module原因node_modules 依赖未安装解决执行 npm install 安装依赖前端报错npm install 一直卡住原因npm源在国外下载慢解决切换淘宝镜像源 npm config set registry https://registry.npmmirror.com验证码无法显示或登录失败原因Redis未启动或网络不通解决确认Redis已启动检查端口6379是否被占用端口8080或80被占用原因其他程序占用了端口解决修改后端端口application.yml 中改 server.port修改前端端口ruoyi-ui/vue.config.js 中改 port 九、成功标志一览完成所有步骤后你应该能看到✅ 后端控制台输出「若依启动成功」的ASCII艺术字✅ 浏览器访问 http://localhost:8080 能看到若依后端接口信息✅ 前端页面正常加载能看到登录界面✅ 输入 admin/admin123 能成功登录看到管理后台 十、写在最后恭喜你 至此你已经成功在本地运行起了若依前后端分离版。回顾一下整体流程MySQL导数据 → Redis启动 → 修改配置 → 启动后端 → 前端装依赖 → 启动前端若依框架是一个非常好的学习脚手架也是企业级开发的利器。把环境跑通只是第一步接下来你可以研究代码生成器的使用学习Spring Security JWT的权限设计探索Vue Element UI的前端架构如果这篇文章对你有帮助欢迎点赞、收藏、转发有任何问题可以在评论区留言我会尽力解答~ 本文参考RuoYi-Vue官方Gitee仓库若依官方文档 下一篇预告若依框架代码生成器使用教程——十分钟生成一个完整的CRUD模块敬请期待