若依框架RuoYi前后端分离项目导入IDEA及运行启动

时间:2024-03-26 15:58:16


RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架,因为本项目是前后端分离的,所以需要前后端都启动好,才能进行访问。

  1. 前往Gitee页面(https://gitee.com/y_project/RuoYi-Vue)下载解压到工作目录。
  2. 建议使用Git命令 git clone https://gitee.com/y_project/RuoYi-Vue.git克隆,因为克隆的方式可以和RuoYi随时保持更新同步。

前端项目CMD命令行启动

  1. 前端系统使用的是Vue框架,所以需要使用Node.js环境, 官网下载 https://nodejs.org/en/ LTS长期支持版,安装过程比较简单, 除了修改安装路径,其他都是一直Next即可。
    若依框架RuoYi前后端分离项目导入IDEA及运行启动
    在官网下载安装node.js后,就已经自带npm(包管理工具),不需要另外再进行安装npm了。
    使用管理员身份打开CMD,输入 node -v 和 npm -v,显示版本号即安装成功。
    若依框架RuoYi前后端分离项目导入IDEA及运行启动
  2. 如果使用cmd命令行启动项目,则进入项目所在路径
    若依框架RuoYi前后端分离项目导入IDEA及运行启动
  3. 安装依赖,建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题:在命令行输入
    npm install --registry=https://registry.npm.taobao.org
    若依框架RuoYi前后端分离项目导入IDEA及运行启动在项目里会生成node_modules文件里,这里面包括所有相关的依赖
    若依框架RuoYi前后端分离项目导入IDEA及运行启动

前端项目IDEA启动

如果使用IEDA运行启动

  1. 首先要在IDEA里安装vue插件,File->Setttings->plugins 在搜索框输入vue
    若依框架RuoYi前后端分离项目导入IDEA及运行启动
    选择第一个安装,安装完后会提示重启。
  2. 导入vue项目,打开IDEA,点击File选择Open
    若依框架RuoYi前后端分离项目导入IDEA及运行启动
    直接选择项目文件夹打开
    若依框架RuoYi前后端分离项目导入IDEA及运行启动
  3. 在Terminal窗口执行命令,进入项目目录
    若依框架RuoYi前后端分离项目导入IDEA及运行启动
    如果已经在命令行里安装过依赖,则直接输入 npm run dev 启动即可。

如果没有,则先installl安装,但是输入npm的时候报错了
若依框架RuoYi前后端分离项目导入IDEA及运行启动
解决办法是选择本地cmd,之后关闭所有idea窗口,重启
若依框架RuoYi前后端分离项目导入IDEA及运行启动
再重新输入命令启动
若依框架RuoYi前后端分离项目导入IDEA及运行启动

后端项目启动

后端系统就是SpringBoot项目
下载压缩包后,使用IDEA导入项目即可

IDEA导入网上开源SpringBoot项目

或者直接使用git克隆项目导入IDEA中

使用Git克隆SpringBoot项目到IDEA启动

系统运行

如果只启动了后台系统,浏览器地址栏输入127.0.0.1:8080 则会显示
若依框架RuoYi前后端分离项目导入IDEA及运行启动
前后端系统都启动后,浏览器地址栏输入127.0.0.1:80,弹出登录页面
若依框架RuoYi前后端分离项目导入IDEA及运行启动
这时候虽然前端页面能打开,但是无法访问到后台系统,需要使用Nginx转发,明天再弄咯。