使用若依框架RuoYi前后端分离版(超详细步骤)

article/2025/6/27 3:22:46

下一客:若依框架代码生成工具–单表增删改查(超详细步骤)

一、若依框架RuoYi项目运行启动教程(详细步骤)

1.1 官网下载代码

第一步:简介
RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架。
官网链接
在线文档

第二步:下载源码

在这里插入图片描述在这里插入图片描述

1.点击复制,将链接复制到IDEA中,点击Git →点击Clone
在这里插入图片描述

  1. 将复制的链接粘贴到URL,点击Clone
    在这里插入图片描述
    👆修改补正:(复制路径存在一些小问题,进行以下修改)
    将链接复制完成后,打开IDEA→File→New→Project from Version Contro…→将链接复制到URL:
    如下图:

    在这里插入图片描述
    在这里插入图片描述

ruoyi-admin:这是启动和配置数据库的文件夹,后台服务
ruoyi-common:通用工具,如工具类、异常处理、过滤器等
ruoyi-framework:框架核心,如aop切面、系统配置、拦截器
ruoyi-generator:代码生成器,主要通过页面操作生成
ruoyi-quartz:定时任务
ruoyi-system:系统模块,系统代码
ruoyi-ui:后台管理系统的页面代码,采用Vue、Element UI
在这里插入图片描述

1.2搭建若依环境

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Maven >= 3.0
node >= 12.0
Redis >= 5

第一步:配置数据库

1.打开Navicat数据库可视化工具,点击左上角的【连接】按钮。在这里插入图片描述
2.新建连接,大家要注意了,此处新建的是连接,不是新建的数据库,我看到好多人都是把连接名当成库名写上了,这是不对的。可以建多个连接的意思是比如我们可以连接本地的mysql,也可以连接开发环境服务器的mysql,或者测试环境、生产环境等不同的Mysql.
还有很多小伙伴,MySQL数据库的密码忘记了,我们可以通过左下角的【连接测试】按钮来测试密码是否正确。

在这里插入图片描述

3.连接成功后,在左侧列表双击连接名,可以看到Mysql的自带的系统库。
注意:此处Mysql自带的几个库为系统库,千万不要觉得这乱七八糟的什么东西,删除了吧。这样会导致Mysql运行不正常。
在这里插入图片描述

4.连接成功后,我们需要新建数据库,在连接名上点击鼠标右键,选择新建数据库。
填写数据库名(数据库名通常与源码空间站提供的sql文件名相同),字符集选择utf-8,排序规则选择utf8_general_ci.
在这里插入图片描述

5.执行SQL文件,数据库创建成功后,需要我们导入sql文件,在数据库名上点击鼠标右键,选择【运行SQL文件】。运行红框内的两个sql文件
在这里插入图片描述

6.找到sql文件所在的本地路径,选中的后,点击【开始】,执行SQL文件
在这里插入图片描述

[SQL] Query ry 20230223 start(文件)
[SQL]Finished successfully(运行成功)
在这里插入图片描述

7.执行成功后,我们看到数据表还是空的。此时很多小伙伴就疑惑了,明明已经执行成功了,为什么没有表呢? 重要:执行完成后要【刷新】。
在【表】上点击鼠标右键,选择【刷新】,刷新完成后,即可显示出所有的表。
在这里插入图片描述

8.sql文件运行成功
在这里插入图片描述

第二步:配置Redis
下载Redis开启服务
在这里插入图片描述

双击运行,有图标就是开启成功
在这里插入图片描述

第三步:修改ruoyi-admin中的application-druid.yml文件
url:修改本地数据库连接
username:修改数据库用户名(root)
password:修改数据库密码
在这里插入图片描述

第四步:启动若依后端
点击ruoyi-admin中的RuoYiApplication启动类,启动若依后端
在这里插入图片描述

见到这个banner,说明若依后端启动成功,默认端口号8080,如果端口号被占用,则启动失败
在这里插入图片描述

第五步:启动若依前端

配置node.js(根据自己系统进行下载,推荐16以下版本)
在这里插入图片描述

测试node.js是否安装成功:win+r 输入cmd
在这里插入图片描述

打开终端,输入node -v 指令,出现版本号,再输入 npm -v 指令出现版本号,说明node.js安装成功
在这里插入图片描述

点击ruoyi-ui中的package.json文件,点击底部菜单栏中的Terminal命令
在这里插入图片描述

输入cd ruoyi-ui 命令,切换到ruoyi-ui文件夹下,输入npm install命令,点击回车键,下载依赖
在这里插入图片描述

输入npm run dev 命令,运行若依前端项目
在这里插入图片描述
看到运行出前端端口号,然后打开看到有验证码显示就是前端搭建成功
在这里插入图片描述
在这里插入图片描述

很高兴,这篇博客能帮助到大家,也很感谢帮博主分享博客的帖子,如果大家有什么问题,欢迎评论区留言,我们一起解决,一起学习!
博主其它的学习资料:若依框架代码生成工具–单表增删改查(超详细步骤)、java注解大全,希望能帮助到大家!

拿走不谢,留个关注,最好在点个赞! 😊


http://chatgpt.dhexx.cn/article/V2hRDgwx.shtml

相关文章

若依开源框架解析

1、框架介绍 RuoYi是一个基于Java技术开发的后台管理系统,目前官方同步在维护的有3个版本。 开源协议:MIT 解释:MIT是和BSD一样宽松的许可协议,作者只想保留版权,而无任何其他了限制.也就是说,你必须在你的发行版里包含原许可协议的声明,无论…

若依框架的入门介绍及使用

若依框架的入门介绍及使用 文章目录 引言1.什么是若依2 .使用若依2.1系统需求2.1下载并运行2.2配置数据库 MySQL、Reids2.2.1MySQL配置2.2.2Redis配置 2.3前端启动 3. 框架结构和模块3.1后端结构3.2前端结构3.3内置功能3.4其他功能和扩展3.4.1代码生成器 总结 引言 若依&#…

从零入门开源框架---若依(前后端分离版)

一、若依是什么? 若依它就是一个开源项目,别人写好的代码,我们拿来进行二次开发,它主要是做数据和权限管理系统。 二、使用背景 任何公司的各种大的项目必然需要一个后台权限管理系统,这是必然的,但是如果不想投入太多…

若依框架学习笔记

若依框架简介 若依框架简介若依框架版本介绍若依框架(vue前后端分离版本)首页系统管理用户管理角色管理菜单管理 系统监控系统工具表单构建 代码生成 若依框架简介 根据官网介绍若依框架就是一个后台管理框架,主要使用技术在官网上也有介绍我…

若依框架入门(前后端分离版本)

目录 一 若依下载以及配置启动 1.下载地址 2.数据库引入及配置 3.前端vue启动 4.登录及验证 二.关于若依框架的基本使用方法 1.自动生成 2.菜单的配置 3.数据字典 4.关于api接口 5.关于定时任务 6.关于分页 一 若依下载以及配置启动 1.下载地址 学习基础:Spring…

若依框架详细使用

目录 🏳‍🌈若依是用来干什么的❓ 🚩技术支持: 🏳‍🌈如何下载❓ 🚩官网地址: 🏳‍🌈如何搭建ruoyi环境❓ 🚩若依框架的目录结构 🚩 修改配…

js元素距离和鼠标位置整理

距离 offsetTop / offsetLeft ( 元素与父级 定位元素/table/td/th/body 的距离 ) clientTop / clientLeft ( 元素边框宽度 ) scrollTop / scrollLeft ( 元素滚动距离 ) window.scrollY / window.scrollX ( 文档/页面 滚动距离 ) window.pageYOffset / window.pageXOffset ( 另…

原生js实现跑马灯效果,鼠标放下可以停止跑动

js原生代码跑马灯效果纯js代码如下&#xff1a; 1.首先html的内容&#xff08;里面图片自己可以换&#xff0c;li里面也可以填文字&#xff09; <div> <ul><li>呵呵呵呵呵3</li> <li>叽叽叽叽叽4</li> <li…

unity拖拽UI生成Cube并跟随鼠标移动,放置点可放下

代码&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Events; using UnityEngine.EventSystems; using UnityEngine.UI;public class DragCreate : MonoBehaviour {public GameObject Cube;public GameObje…

JavaScript的拖拽事件。

在浏览器可以随意的拖拽&#xff0c;我们来看下怎么实现&#xff1f; 我们具体分析一下步骤&#xff1a; 第一步&#xff1a;鼠标选中需要拖拽的地方&#xff0c;鼠标按下。&#xff08;需要使用事件onmousedown&#xff09; 第二步&#xff1a;鼠标按下后&#xff0c;我们接着…

html修改鼠标手势,css要怎么设置鼠标手势?

在CSS中&#xff0c;可以使用cursor属性来设置鼠标手势。下面本篇文章就来给大家介绍一下cursor属性。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。 cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。有时我们需要…

java 鼠标响应_java小程序中鼠标事件的响应处理

如何在小程序中实现鼠标响应&#xff1f; public class Hello extends Applet implements MouseListener{ public void init(){ addMouseListener(this); } public void mouseEntered(MouseEvent e){ au.play(); setBackground(Color.blue); } public void mouseExited(MouseEv…

html修改鼠标手势,css设置鼠标手势的方法

css设置鼠标手势的方法 相对于传统HTML的表现而言&#xff0c;CSS能够对网页中的对象的位置排版进行像素级的精确控制&#xff0c;支持几乎所有的字体字号样式&#xff0c;下面小编给大家整理了css设置鼠标手势的方法&#xff0c;供大家参阅。 属性名&#xff1a;cursor 属性值…

鼠标拖动生成画框

需求&#xff1a;鼠标按下拖动生成一个画框 注意点&#xff1a; div 的left和top&#xff1a;如果鼠标当前位置>鼠标起始位置&#xff0c;则为鼠标起始位置&#xff08;鼠标往右拉&#xff09;&#xff1b;如果鼠标当前位置<鼠标起始位置&#xff0c;则为鼠标当前位置(…

QT 实现鼠标拖动(drag)和放下(drop)代码(图形操作四)

拖动的对象&#xff1a; #include "outlistitem.h" #include "ui_outlistitem.h"OutListItem::OutListItem(QWidget *parent) :QWidget(parent),ui(new Ui::OutListItem) {ui->setupUi(this); }OutListItem::~OutListItem() {delete ui; }void OutList…

放下鼠标 全键盘定义你的浏览器

在linux上用过vim的朋友相信都被这个编辑器惊艳到了吧, 但是它只是在linux系统中存在而且是在字符操作界面。但是如果将这种可以全键盘的操作搬到windows上这样的图形界面又是怎样令人去感到惊艳呢&#xff1f; 本文介绍的插件是基于谷歌和火狐的&#xff0c;它可以使你在很大的…

外企工作日常:全英文CrossTalk反串讲-讲前紧张,讲后淡定

起因&#xff1a; 在三周之前我接到了一个任务&#xff0c;更准确讲是我自己“作死”主动领取了一个更复杂的任务。这个任务包含了三个相关联的需求。这个需求说简单也简单&#xff0c;说复杂也复杂&#xff5e; 简单在&#xff1a;就是更改一下更新token时间的一个逻辑&am…

linux周六串讲

esc. //粘贴复制上一条命令的参数 cat /etc/resolv.conf //查看DNS地址 route -n //查看网关 hostname //临时修改主机名 hostnamectl set-hostname 名称 //永久修改主机名 ssh root192.168.10.233 //用windows远程的格式&#xff0c;在CMD窗口输入这个命令 …

【Linux】Linux指令串讲

大家好&#xff0c;今天要开启一个新的专题&#xff1a;Linux 今天的内容是指令还有一些基本的Linux知识补充 由于Linux的知识很难明确写出分类&#xff0c;所以目录就不会做的特别详细完全 喜欢的小伙伴点赞收藏一下不迷路哦 目录 1.目录 2.文件 3.路径 1.目录 1.创建目录…

kafka 串讲:架构模型、角色功能梳理

kafka 串讲&#xff1a;架构模型、角色功能梳理 kafka 的 what why how&#xff0c;先有一个粗略宏观的理解 rabbitmq、各种 mq 的技术选型、横向对比 首先&#xff0c;kafka 是一个消息中间件。我们从一个本质的点聊起&#xff0c;我们有一个系统 service&#xff0c;如果这…