一、官网下载代码
RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架。
- 若依官网:http://ruoyi.vip
- 演示地址:http://vue.ruoyi.vip
- 代码下载:https://gitee.com/y_project/RuoYi-Vue
下载之后解压,ruoyi-ui是前端代码vue2, 建议分离出来,
vue3代码:https://github.com/yangzongzhuan/RuoYi-Vue3
用IDEA打开后端项目
二、搭建环境
1、创建mysql数据库并且导入数据
SQL文件位置
1.1、打开Navicat创建数据库并且导入
或者点击连接->MySQL...
1.2、连接名随便写,输入密码点击测试连接 查看是否成功,点击确定。
1.2、打开连接导入SQL文件
双击新建的连接
右键->新建数据库。名称一致
双击新建的数据库->右键->运行SQL文件...
选择文件
这个代表成功点击关闭
点击表,没有刷新一下
2、修改数据库连接
编辑resources目录下的application-druid.yml
自定义数据库名称(ry-vue)和账号(root)密码 (123456)
3、配置Redis
下载Redis 双击redis-server.exe开启服务
这个代表开启成功
三、运行java启动文件
在RuoYiApplication.java文件中运行
检查下依赖再运行
出现这个表示后端运行成功了
可以在http://localhost:8080/ 中访问
四、前端启动
1、vue2
安装配置vue2 参考
Mac Windows安装Vue脚手架_mac下载脚手架-CSDN博客文章浏览阅读326次。Mac Windows安装Vue脚手架_mac下载脚手架https://blog.csdn.net/weixin_44523517/article/details/125826560
2、vue3
安装配置vue3+vite 参考 到第三步安装完成即可
安装配置vue3+vite_vue3 安装vite-CSDN博客文章浏览阅读7.3k次,点赞2次,收藏7次。安装配置vue3+vite_vue3 安装vitehttps://blog.csdn.net/weixin_44523517/article/details/130336959
3、运行
在前端文件运行命令
下载依赖(有国内镜像用cnpm i):
npm i
运行:
npm run dev
出现以下代表成功了
浏览器运行 http://localhost:80/