若依框架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/下载
在这里插入图片描述
安装成功后,打开运行即可
在这里插入图片描述
重新刷新网页,即可获取到验证码,登录
在这里插入图片描述

适用人群 Java开发人员,Vue开发人员,前后分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后技术 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后分离的开发 数据库        Mysql5 IDE     Intellij Idea
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页