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


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即可。
    在这里插入图片描述
    在官网下载安装node.js后,就已经自带npm(包管理工具),不需要另外再进行安装npm了。
    使用管理员身份打开CMD,输入 node -v 和 npm -v,显示版本号即安装成功。
    在这里插入图片描述
  2. 如果使用cmd命令行启动项目,则进入项目所在路径
    在这里插入图片描述
  3. 安装依赖,建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题:在命令行输入
    npm install --registry=https://registry.npm.taobao.org
    在这里插入图片描述在项目里会生成node_modules文件里,这里面包括所有相关的依赖
    在这里插入图片描述
前端项目IDEA启动

如果使用IEDA运行启动

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

如果没有,则先installl安装,但是输入npm的时候报错了
在这里插入图片描述
解决办法是选择本地cmd,之后关闭所有idea窗口,重启
在这里插入图片描述
再重新输入命令启动
在这里插入图片描述

后端项目启动

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

IDEA导入网上开源SpringBoot项目

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

使用Git克隆SpringBoot项目到IDEA启动
系统运行

如果只启动了后台系统,浏览器地址栏输入127.0.0.1:8080 则会显示
在这里插入图片描述
前后端系统都启动后,浏览器地址栏输入127.0.0.1:80,弹出登录页面
在这里插入图片描述
这时候虽然前端页面能打开,但是无法访问到后台系统,因为连接不到redis,所以还需要启动redis
在这里插入图片描述
redis官网https://redis.io/下载
在这里插入图片描述
安装成功后,打开运行即可
在这里插入图片描述
重新刷新网页,即可获取到验证码,登录
在这里插入图片描述

若按照RuoYi框架进行前后端分离,你需要进行以下步骤: 1. 创建前端项目:首先,你需要创建一个前端项目,可以选择使用Vue.js、React.js或Angular等框架进行开发。 2. 配置前端项目:在前端项目中,你需要配置相关的路由、页面组件以及与后端接口通信的方法。可以使用axios或fetch等工具发送HTTP请求。 3. 定义接口规范:在后端项目中,你需要定义接口的URL路径、请求方式、请求参数以及返回数据的格式。 4. 实现后端接口:根据前端定义的接口规范,在后端项目中实现对应的接口逻辑。可以使用RuoYi提供的注解和工具类简化开发过程。 5. 跨域配置:由于前后端分离的架构,前端项目和后端项目可能存在跨域请求的问题。你需要在后端配置跨域访问权限,确保前端可以正常调用后端接口。 6. 接口测试与调试:完成前后端的开发和配置后,你可以通过Postman或浏览器等工具进行接口测试和调试,确保数据的正常传输和交互。 7. 部署与运行:最后,你可以将前端项目打包成静态文件,并将其部署到Web服务器上。同时,将后端项目部署到应用服务器上,启动应用程序。 这样,你就成功实现了RuoYi框架前后端分离。前端负责展示和用户交互,后端负责处理业务逻辑和数据存储。通过接口的方式进行通信,实现了前后端的解耦和独立开发。
评论 27
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值