RuoYi-Vue框架的搭建与使用

使用若依前需要先配置node.js,不了解的可以去看

Node安装步骤-CSDN博客

若依官网

一，什么是RuoYi？

是一款基于Spring Boot的快速开发平台，旨在为企业提供一种快速构建应用程序的方式。 它基于Spring Boot、MyBatis、Thymeleaf等经典技术组合，内置了部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、 日志 管理、通知公告等常用模块。

系统需求

JDK >= 1.8 (推荐1.8版本)
Mysql >= 5.7.0 (推荐5.7版本)
Maven >= 3.0

二,RuoYi结构介绍

RuoYi-Vue框架下载地址

我们先在官网下载，后解压打开,我们可以看到一下文件，或者直接通过idea克隆若依源码，仓库地址：RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

三，项目导入及启动

打开我们的idea直接open打开后，等待它自己加载完资源，一下是它的项目结构

royi-ui是后端页面运行，ruoyi-admin是后端运行，

建立数据库ry-vue

将sql文件夹中的sql导入数据库

 进入开发目录下，使用vscode命令code打开项目，或者直接在idea打开也行

# 克隆vue3项目
git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git

项目运行

 在vscode终端中输入以下命令：

# 安装依赖
npm install

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

# 启动服务
npm run dev

记得启动idea的项目

默认账户/密码 admin/admin123

若依使用

现在我们使用若依做一个简单的增删查改

加入一个表（在开发文档的目录下有sql记得运行到若依的数据库底下）

 

添加菜单

 

 

添加字典

 在系统管理的字典管理中添加字典

 添加完后点进字典类型

 

 添加字典数据

生成代码

在系统工具的代码生成中导入之前添加表

 点击编辑

 修改基本信息

 

修改字段信息

插入勾选后表示要新增的字段，编辑表示要修改的字段，列表表示查询时显示的列表，查询字面意思