【若依框架】代码生成详细教程,15分钟搭建Springboot+Vue3前后端分离项目,基于Mysql8数据库和Redis5,管理后台前端基于Vue3和Element Plus,开发小程序数据后台

【若依框架】代码生成详细教程,15分钟搭建Springboot+Vue3前后端分离项目,基于Mysql8数据库和Redis5,管理后台前端基于Vue3和Element Plus,开发小程序数据后台

今天我们来借助若依来快速的搭建一个基于springboot的Java管理后台,后台网页使用vue3和 Element Plus来快速搭建。这里我们可以借助若依自动生成Java和vue3代码,这就是若依的强大之处,即便你不会Java和vue开发,只要跟着石头哥也可以快速的开发一款Java和vue程序。

技术点

后端技术点

  • Java17
  • 数据库:Mysql8
  • MyBatis:作为持久层框架,实现了数据库的CRUD操作,简化了与数据库的交互
  • Redis5:作为缓存中间件,提高了系统性能和响应速度
  • Spring Boot :作为核心框架,提供了一系列开箱即用的功能,如数据访问、消息传递、任务调度等
  • Spring Security:提供了强大的安全认证和授权功能
  • Jwt,权限认证使用Jwt,支持多终端认证系统

前端技术点

  • vue3
  • Element Plus
  • vite

软件和开发环境

官方只是给我们提供一个推荐,建议大家尽量和右边的课程版本保持一致。

官方推荐课程版本
JDK>=1.8JDK17
Mysql>=5.7Mysql8
Redis>=3Redis5
Maven>=3Maven3
Node>=12Node20.15

建议大家尽量和课程版本保持一致,避免一些版本不对应导致一些不必要的错误。

我们Java后端使用idea开发
vue3前端网站使用vscode软件开发。
大家自行下载这两款软件即可。

一,启动若依的Springboot项目

1-1,去官方下载前后端项目

我们使用idea开发者工具来去若依官网下载官方提供的springboot项目


我们使用前后端分离的版本。


如上图所示,我们拿到下载地址即可。
然后打开idea,如下图所示,使用get fromVCS


然后把复制的下载地址粘贴到如下图所示的地方,记得指定源码路径,安装下git。


然后等待源码下载


下载成功后会自动打开项目。


正常第一次打开项目需要导入一些安装包和依赖。

1-2,mysql数据库的配置和导入

在项目的sql目录下,有我们数据库配置需要的一些东西。

在这里插入图片描述


所以我们先用idea自带的mysql管理工具,链接我们的mysql数据库,然后创建一个ruoyi的数据库。至于mysql的安装和使用idea链接mysql我这里不拆开讲了,可以去看下我Java基础入门的视频和博客笔记。

创建好ry-vue数据库,这里数据库名最好也是用ry-vue,因为后续运行项目时官方代码里就是取得这个数据库名。创建好数据库以后,就可以执行sql下的文件了。我们先执行quartz.sql文件


我们在当前页执行sql的时候,记得ctrl+a全选当前的sql,然后点击绿色箭头执行sql


执行完以后如下


然后同样的方式执行另外一个sql文件


两个sql都执行完以后,点击刷新就可以看到我们成功的导入了以下数据表

创建好数据库和数据表以后,我们需要在下图所示的地方修改myslq数据库的账号和密码,记得改成我们自己的。

1-3,配置redis

其实配置reids很简单,只要你电脑上已经成功安装并启动redis,一切都保持默认即可。由于我的电脑本地redis没有设置密码,所以不用配置reids即可,当然如果你设置了redis访问密码,记得去下图所示的地方将修改密码。如果和石头哥一样没有设置reids密码,password后面空着即可。

1-4,启动项目

如下图所示我们找到RuoYiApplication然后就可以点击绿色箭头运行项目了。


启动成功我们可以看到如下标识


启动成功后通过http://localhost:8080 看到如下所示,就代表若依版的springboot项目已经成功运行了。


Java后端启动成功了,接下来我们就要启动前端vue3项目进行网站端的部署运行了。

二,启动前端vue3项目

由于上门Java项目里的ruoyi-ui使用的是vue2开发的前端网站,所以我们想用vue3,就得使用官方提供的另外一套代码,所以这里的ruoyi-ui可以直接删除了。

2-1,源码下载

其实在官方的文档里提供的vue3版本的下载地址


我们点进去可以看到是gitbhub上的一个仓库


也可以像上面Java项目一样借助idea的git下载,我们这里为了让大家学习不同的方式。就用另外一种方式教大家下载项目源码吧。


我们只需要下载zip压缩包就可以了。下载到桌面即可,然后解压。


解压后的目录如下


可以看出来这是一个标准的vue3项目。

2-2,运行项目

我们运行项目使用专业的前端开发工具vscode
其实导入项目到vscode很简单,只需要在vscode里打开项目文件夹即可。


我们打开项目后要去安装依赖,安装依赖之前要记得安装node,我们这里使用npm i 来自动安装依赖。


然后耐心等待依赖安装完即可。安装完如下。


依赖安装完,就可以用npm run dev来运行项目了。运行成功后可以看到管理后端网站的访问地址。


然后就可以看到管理后台的登录界面


到这里我们整个前后端项目就运行成功了。
使用默认账号先登录进去看看效果

三,自动生成Java和vue3代码

自动生成Java和vue代码正式若依的强大之处,接下来我就来带大家快速的实现一个对用户信息进行增删改查的Java和vue的小案例。

3-1,创建用户表

我们这里以一个用户表为例,首先就是去若依后台,创建一个数据表。这也是若依的强大之处,可以快速的创建数据表。
建表语句先给到大家。

create table qcl_user ( id int(11) auto_increment comment '编号', name varchar(20) null comment '姓名', education varchar(20) null comment '学历', age int null comment '年龄', primary key (id) ) comment '用户表'; 

我们借助若依提供的功能来实现数据表的创建,这里qcl_user是我们的表名,大家最好和石头哥保持一致。点击系统工具,然后点击代码生成,点击新建,把上面的sql语句复制到这里即可。

注意事项:我们的sql语句里必须设置主键也就是主键一定要有。

创建好以后如下,可以看到数据库里也多了qcl_user这个表


然后我们点击编辑来生成对应的增删改查的代码

3-2,生成Java和vue3代码

我们进入编辑后如下


这里全部保持默认即可。然后点击生成信息,生成信息这里我们需要做下修改


修改后如下,记得上级菜单不做选择。这里一定要和石头哥一样用 qcluser 不能直接使用user因为uesr在若依自带的用户管理里面已经被使用过了。

然后点击提交。这样就可以生成对应的Java和vue代码了,可以点击预览查看代码


当然我们最重要的还是要下载代码,然后把对应的代码粘贴到我们的项目里。

3-3,把自动生成的代码插入项目

我们前面点击下载把下载好的代码解压好。解压好以后队医的代码如下。

3-3-1,执行sql文件

我们先执行slq语句,因为我们的若依后台菜单栏都是动态注入的,所以这里要先执行下sql。执行sql用idea自带的mysql管理工具即可。


然后执行上面的sql文件


执行成功,有如下打印

3-3-2,复制Java代码到idea

然后就是复制Java代码到idea,我们在main目录里一层层的进入,复制qcluser文件夹。

然后粘贴到ruoyi-admin项目的com.ruoyi目录下即可。


然后就可以看到我们对应的Java代码就弄好了

3-3-3,复制mapper文件到idea

然后就回到main然后进入resources目录,复制mapper文件夹。


然后粘贴到ruoyi-admin的resources目录里。


可以看到我们对应的mybatis的配置文件就弄好了

3-3-4,粘贴vue3代码到vscode

接下来我们就是进入vue文件里粘贴vue3代码了


这里有个api和views,我们要每个都进入,然后粘贴里面对应的代码到vue3项目对应的目录里。
首先进入api复制qcluser文件夹

然后粘贴到src下面的api目录里


可以看到就是我们前端对应的接口请求的代码

然后就是进入vue的views文件夹,复制qcluser

然后粘贴到vue3代码

Read more

鸿蒙系统专属阅读神器:开源阅读App完全使用手册

鸿蒙系统专属阅读神器:开源阅读App完全使用手册 【免费下载链接】legado-Harmony开源阅读鸿蒙版仓库 项目地址: https://gitcode.com/gh_mirrors/le/legado-Harmony 在鸿蒙生态系统中寻找一款纯净无广告的阅读应用?开源阅读鸿蒙版正是你需要的完美解决方案。这款免费开源的阅读器不仅支持自定义书源抓取全网内容,还能完美管理本地文件,通过高度个性化设置打造属于你的沉浸式阅读空间。 🚀 快速上手:从零开始的安装指南 环境配置与项目部署 开始使用前,你需要先获取项目代码并安装必要依赖: git clone https://gitcode.com/gh_mirrors/le/legado-Harmony cd legado-Harmony npm install 完成安装后,只需执行 npm start 即可启动应用,开启你的阅读之旅。 四大核心功能区域深度解析 启动成功后,你将进入一个设计精美的阅读环境。应用采用四模块导航结构,每个模块都承载着独特的功能使命: * 📚 书架管理:集中管理你的所有阅读内容,支持智能

By Ne0inhk
HarmonyOS应用开发实战(基础篇)Day10 -《鸿蒙网络请求实战》

HarmonyOS应用开发实战(基础篇)Day10 -《鸿蒙网络请求实战》

鸿蒙网络请求实战 * 安装三方库 axios * 安装步骤 * 配置网络权限 * 网络请求测试 * 创建用户类(TypeScript 类型建模) * 测试代码实现 * 创建用户列表(完整交互版) * 页面部分代码解析 * 一、代码整体功能总结 * 二、逐部分详细解析 * 1. 依赖导入部分 * 2. 组件核心结构 * 3. 组件属性定义 * 4. 获取数据的核心方法 * 5. 自定义构建器(删除按钮) * 6. 页面 UI 构建(build 方法) * 三、代码运行流程 * 总结与延伸建议 * 核心技术栈 * 工程化建议 安装三方库 axios 在鸿蒙应用开发中,网络请求是连接前端与后端服务的核心能力。虽然系统提供了 @ohos.net.http 原生模块,但其 API

By Ne0inhk

rocky linux9.6英伟达显卡驱动安装

在 Rocky Linux 9.6 上安装英伟达显卡驱动,需根据显卡型号选择适配的驱动版本,并完成禁用开源驱动、安装依赖、加载专有驱动等操作。以下是详细步骤: 一、确认显卡型号与驱动兼容性 1. 安装依赖 dnf install -y wget vim tar telnet tmux pciutils epel-release 2. 查看显卡型号 lspci | grep -i nvidia 记录输出中的显卡型号(如  NVIDIA Corporation Device 2d04)。 3. 访问 NVIDIA 官网: * 官网地址:https://www.nvidia.com/Download/index.aspx * 选择显卡型号、

By Ne0inhk
2026最新|国内可用 Docker 镜像加速源大全(2月持续更新):DockerHub 镜像加速与限速避坑全指南(适配 Windows / macOS / Linux / containerd /

2026最新|国内可用 Docker 镜像加速源大全(2月持续更新):DockerHub 镜像加速与限速避坑全指南(适配 Windows / macOS / Linux / containerd /

2026最新|国内可用 Docker 镜像加速源大全(2月持续更新):DockerHub 镜像加速与限速避坑全指南(适配 Windows / macOS / Linux / containerd / k3s / BuildKit) 摘要:本指南面向国内服务器与办公网络用户,系统梳理 2026年2月可用 DockerHub 镜像加速源,覆盖 Docker Desktop、dockerd、containerd、k3s、BuildKit 等场景的一键配置、多源回退与测速排障方案,帮助规避 429/Too Many Requests 与拉取超时问题。 最后更新:2026-2 适用对象:国内云服务器/办公网络拉取 DockerHub 镜像慢、易触发限速(429/“Too Many Requests”)的场景 用途:一键配置镜像加速、

By Ne0inhk