若依管理系统RuoYi-Vue(前后端分离版)项目启动教程

news2025/2/25 21:28:27

RuoYi-Vue 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue),内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置;支持集群,支持多数据源,支持分布式事务。

系统需求

  • JDK >= 1.8
  • MySQL >= 5.7
  • Maven >= 3.0
  • Node >= 12
  • Redis >= 3

开发工具(推荐):VScodeIDEA

目录

一:前期准备工作

1.1 拉取项目

1.2 VScode 配置 Java 开发环境(可选)

1.2.1 VSCode 中下载 JDK

1.2.2 配置 VSCode 项目的 JDK 路径

1.2.3 测试Java环境

二:后端运行

2.1 部署数据库

 2.2 开启redis

2.3 启动程序

三:前端运行


一:前期准备工作

1.1 拉取项目

1.前往Gitee下载页面(https://gitee.com/y_project/RuoYi-Vue )下载解压到工作目录

2.将下载下来的代码压缩包解压到本地,将ruoyi-ui(前端部分代码)移动到外层(前后端代码分开运行更加直观)

1.2 VScode 配置 Java 开发环境(可选)

因为我是用的vscode作为开发工具运行前后端,所以需要对其进行一定配置。用IDEA开发的大佬可略过...

1.2.1 VSCode 中下载 JDK

首先在vscode中安装以下插件

  • Language Support for Java™ by Red Hat
  • Debugger for Java
  • Java Test Runner
  • Maven for Java
  • Project Manager for Java

安装插件完成后按下 Ctrl+Shift+P输入Java: Configure Java Runtime进行下载

1.2.2 配置 VSCode 项目的 JDK 路径

在 vscode 的设置中查询 java.home ,选择 settings.json 文件中编辑 将 java.home 的路径设置为你的 JDK 目录

1.2.3 测试Java环境

使用Ctrl+Shift+P输入Java: create Project,输入项目名,在src文件夹中,选择Run运行Java代码,控制台数据Hello World则为成功

 

二:后端运行

首先先将RuoYi-Vue文件夹在VScode中打开

2.1 部署数据库

1.打开Navicat创建数据库ry-vue并导入数据脚本ry_2021xxxx.sqlquartz.sql

 2.Navicat运行完数据表之后打开 application-druid.yml,修改为本地配置的mysql数据库名,用户名和密码

 2.2 开启redis

打开redis服务(双击redis-server.exe

 如上图所示即为启动成功

2.3 启动程序

进入RuoYiApplication.java鼠标右键目录选择run.java,启动程序

 出现这个标志即表示若依后端启动成功

后端运行成功后,此时在浏览器中可以通过   http://localhost:8080   访问,如图:

 

三:前端运行

运行前首先确保安装了node环境,随后执行(此内容保存在README.md文件中)

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 启动服务
npm run dev

打开浏览器,输入:http://localhost:80 看到下图,即可表示若依系统启动成功

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405484.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Vue】Axios详解

文章目录1 Axios简介1.1 什么是Axios?1.2 Axios的特性2 Axios的使用2.1 Axios的安装2.2 Axios的创建2.2.1 Proxy配置代理2.2.1.1 核心代码2.2.1.2 代码解释2.2.1.3 多个跨域2.2.2 Axios的二次封装2.2.2.1 为什么要二次封装2.2.2.2 Axios实例化2.2.2.2.1 引入2.2.2.2.2 创建axi…

前端面试题八股文汇总(最新)

文章目录一 、第一回合1.开发中遇到的困难?2. Css的盒子模型3. Pull和fetch的区别4. SPA单页面项目5.SEO优化6.BOM浏览器对象模型7.数组、对象、字符串中的一些方法8.解构赋值9...args剩余参数(扩展运算符)10.arguments 对象11. Promise以及底层封装12.浅拷贝深拷贝…

【node进阶】一文带你快速入门koa框架

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&a…

Vue基础知识总结 11:前端路由vue-router

🍅 作者简介:哪吒,CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪 🍅 哪吒多年工作总结:Java学习路线总结,搬砖工逆袭Java架构师 🍅 关注公众号【哪吒编程】&#…

vue自适应布局(各种浏览器,分辨率)

1.前言 spa页面的layout布局对于前端项目的影响至关重要,在我们进行web端开发的时候,前端的各种大小屏幕,各种内核的浏览器不同,会导致我们的页面呈现出不一样的效果,如何进行更好的取舍,怎么能够达到产品…

使用Nginx部署Vue+SpringBoot前后端分离项目(超详细!)

目录 一、前后端环境准备 1、前端环境准备 2、后端环境准备 二、前后端打包 1、前端打包 2、后端打包 三、服务器前后端配置及部署 1、前端配置 安装nginx 创建项目目录 前端项目部署 2、后端配置 安装宝塔 安装mysql 使用本地Navicat连接远程数据库 安装jdk环境…

echarts文档解读

前言:今天给大家分享一个前端的开源可视化图标库echarts。 💕点击下方名片,即可领取学长个人微信💕 echarts 全局 echarts 对象,在 script 标签引入 echarts.js 文件后获得,或者在 AMD 环境中通过 require…

Vue 插槽(slot)详细介绍(对比版本变化,避免踩坑)

目录 前言 正文 插槽是什么? 怎么使用插槽? 基本用法 后备(默认)内容 具名插槽 作用域插槽 插槽版本变化 总结 前言 Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插…

npm install 提示Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager“

场景: 执行npm install时提示Unable to authenticate Password: Email: (this IS public) xxqq.com Logged in as uploader on http://192.168.xx.xxx:8074/repository/npm-internal/. PS D:\GitworkspaceUi\gisquest-cloud-ui-workcenter> npm install npm ERR…

【登录界面】vue、element-ui登录界面模板

vue、element-ui登录界面模板这里总结一个用vue、element-ui写的登录界面&#xff0c;为以后复制粘贴备用。 截图 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>登录</title><!--…

vue-quill-editor富文本编辑器使用步骤

首先放上效果图 目录 1.安装 2.引入到项目中 3.在页面上写组件 4.配置option 5.给工具栏鼠标悬停加上中文释义 6.上传图片到七牛云 7.自定义控制图片大小 1.安装 npm install vue-quill-editor -S2.引入到项目中 有两种挂载方式&#xff1a; 全局挂载 和 在组件中挂载&…

【Vue插槽详解】

Vue插槽详解Vue插槽的作用一、默认插槽完整代码&#xff1a;二、具名插槽完整代码&#xff1a;三、作用域插槽完整代码如下&#xff1a;Vue插槽的作用 Vue插槽是Vue中常见的一种组件间的相互通信方式&#xff0c;作用是让父组件可以向子组件指定位置插入html结构&#xff0c;适…

记录--前端性能优化——首页资源压缩63%、白屏时间缩短86%

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 提升首屏的加载速度&#xff0c;是前端性能优化中最重要的环节&#xff0c;这里笔者梳理出一些 常规且有效 的首屏优化建议 目标&#xff1a; 通过对比优化前后的性能变化&#xff0c;来验证方案的有效…

除夕最绚丽3D烟花代码(html+音效)

今天就是除夕了&#xff0c;新年怎么能少得了烟花呢&#xff1f;虽然绝大部分地区禁止燃放烟花&#xff0c;但该欣赏的烟花还是要欣赏滴~~ 最近整理文件&#xff0c;找到了一份烟花代码&#xff0c;3D特效&#xff0c;今天分享给大家&#xff0c;希望大家喜欢。 话不多说&#…

uni.getLocation和wx.getLocation方法调用无效,也不返回失败,解决方案!!!

线上已解决问题的代码 记录时间 2022.12.10 //获得地理定位信息uni.getLocation({type: wgs84,success: function(resp) {console.log(11111);//保存纬度数据let latitude resp.latitude;//保存经度度数据let longitude resp.longitude;console.log(经度 latitude);console…

【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

掌握分寸感&#xff0c;找目标一致的人协同你&#xff0c;有效地调配资源&#xff0c;就可以提高效率。 写在前面的话&#xff1a;博主最近想要搭建自己的前端若依项目&#xff0c;因此此系列博客会做一些记录。我的项目gitee地址&#xff1a; https://gitee.com/xuruicong/rac…

less和sass的区别[简洁易懂]

一、基础知识 1.sass&#xff0c;less都是CSS的预处理器&#xff0c;其基本思想就是用编程的思路编写CSS代码。增加了变量&#xff0c;嵌套&#xff0c;函数&#xff0c;语句&#xff0c;继承等概念。有助于模块化开发&#xff0c;例如写一个换肤的效果&#xff0c;以前我们需要…

前端200道面试题及答案(更新中)

目录 html相关 1&#xff09;说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别&#xff1f; 2&#xff09;link和import的区别 3&#xff09;浏览器如何实现不同标签页的通信&#xff1f; 4&#xff09;iframe的优缺点 5&#xff09;canvas 6&#x…

Sublime Text 4 (Build 4143) 注册方法STEP BY STEP

To 初学Python的Pythonista: Sublime Text相对于PyCharm和Visual Studio Code&#xff0c;确实有不足之处&#xff0c;但提供了众多功能丰富的插件&#xff0c;且最大优点就是相对于Pycharm和VSCODE&#xff0c;它体积小&#xff0c;启动速度快。对于Python的初学者来说&#…

JavaScript基础总结---重点

目录JavaScript简介什么是JavaScript浏览器执行JS过程JS的组成JS的引入方式函数与作用域arguments的使用全局变量与局部变量预解析对象创建对象的三种方式1.利用字面量创建对象2.利用 new Object 创建对象3.利用构造函数创建对象遍历对象属性变量、属性、函数、方法总结new关键…