当前位置： 首页 > news >正文

芋道源码 / yudao-cloud：前端技术架构探索与实践

news 2025/8/29 13:17:45

摘要：


随着企业信息化建设的深入，后台管理系统在企业运营中扮演着至关重要的角色。本文将以芋道源码的yudao-cloud项目为例，深入探讨其前端技术架构的设计思路、关键技术与实现细节，并分享在开发过程中遇到的挑战与解决方案。

图片

一、引言

随着互联网技术的飞速发展，传统的后台管理系统已无法满足企业日益增长的业务需求。芋道源码的yudao-cloud项目，以其强大的功能、灵活的配置和先进的技术架构，成为了企业快速构建后台管理系统的首选。本文将从前端技术的角度出发，对yudao-cloud项目的技术架构进行详细的剖析。

图片

二、技术架构概述

yudao-cloud项目的前端技术架构基于Vue.js框架，采用了Element-Plus、Vben(Ant-Design-Vue)和uni-app等多种UI组件库，实现了电脑端和移动端的统一管理。同时，项目支持多终端、多种用户的认证系统，支持SSO单点登录，并集成了实时通信、报表设计器等功能。

图片

平台简介

芋道，以开发者为中心，打造一流的快速开发平台，全部开源

图片

  • Java 后端：master 分支为 JDK 8 + Spring Boot 2.7，master-jdk17 分支为 JDK 17/21 + Spring Boot 3.2

  • 管理后台的电脑端：Vue3 提供 element-plus、vben(ant-design-vue) 两个版本，Vue2 提供 element-ui 版本

  • 管理后台的移动端：采用 uni-app 方案，一份代码多终端适配，同时支持 APP、小程序、H5！

  • 后端采用 Spring Cloud Alibaba 微服务架构，注册中心 + 配置中心 Nacos，定时任务 XXL-Job，服务保障 Sentinel，服务网关 Gateway，分布式事务 Seata

  • 数据库可使用 MySQL、Oracle、PostgreSQL、SQL Server、MariaDB、国产达梦 DM、TiDB 等，基于 MyBatis Plus、Redis + Redisson 操作

  • 消息队列可使用 Event、Redis、RabbitMQ、Kafka、RocketMQ 等

  • 权限认证使用 Spring Security & Token & Redis，支持多终端、多种用户的认证系统，支持 SSO 单点登录

  • 支持加载动态权限菜单，按钮级别权限控制，Redis 缓存提升性能

  • 支持 SaaS 多租户系统，可自定义每个租户的权限，提供透明化的多租户底层封装

  • 高效率开发，使用代码生成器可以一键生成 Java、Vue 前后端代码、SQL 脚本、接口文档，支持单表、树表、主子表

  • 实时通信，采用 Spring WebSocket 实现，内置 Token 身份校验，支持 WebSocket 集群

  • 集成微信小程序、微信公众号、企业微信、钉钉等三方登陆，集成支付宝、微信等支付与退款

  • 集成阿里云、腾讯云等短信渠道，集成 MinIO、阿里云、腾讯云、七牛云等云存储服务

  • 集成报表设计器、大屏设计器，通过拖拽即可生成酷炫的报表与大屏

🐳 项目关系

图片

三个项目的功能对比，可见社区共同整理的 国产开源项目对比 表格。


😎 开源协议

为什么推荐使用本项目？

① 本项目采用比 Apache 2.0 更宽松的 MIT License 开源协议，个人与企业可 100% 免费使用，不用保留类作者、Copyright 信息。

② 代码全部开源，不会像其他项目一样，只开源部分代码，让你无法了解整个项目的架构设计。国产开源项目对比

图片

③ 代码整洁、架构整洁，遵循《阿里巴巴 Java 开发手册》规范，代码注释详细，57000 行 Java 代码，22000 行代码注释。

🐼 内置功能

系统内置多种多种业务功能，可以用于快速你的业务系统：

图片

  • 通用模块（必选）：系统功能、基础设施

  • 通用模块（可选）：工作流程、支付系统、数据报表、会员中心

  • 业务系统（按需）：ERP 系统、CRM 系统、商城系统、微信公众号

友情提示：本项目基于 RuoYi-Vue 修改，重构优化后端的代码，美化前端的界面。

  • 额外新增的功能，我们使用 🚀 标记。

  • 重新实现的功能，我们使用 ⭐️ 标记。

🙂 所有功能，都通过 单元测试 保证高质量。

系统功能

图片

工作流程

图片

支付系统

功能描述
🚀应用信息配置商户的应用信息，对接支付宝、微信等多个支付渠道
🚀支付订单查看用户发起的支付宝、微信等的【支付】订单
🚀退款订单查看用户发起的支付宝、微信等的【退款】订单
🚀回调通知查看支付回调业务的【支付】【退款】的通知结果
🚀接入示例提供接入支付系统的【支付】【退款】的功能实战

基础设施

功能描述
🚀代码生成前后端代码的生成（Java、Vue、SQL、单元测试），支持 CRUD 下载
🚀系统接口基于 Swagger 自动生成相关的 RESTful API 接口文档
🚀数据库文档基于 Screw 自动生成数据库文档，支持导出 Word、HTML、MD 格式
表单构建拖动表单元素生成相应的 HTML 代码，支持导出 JSON、Vue 文件
🚀配置管理对系统动态配置常用参数，支持 SpringBoot 加载
⭐️定时任务在线（添加、修改、删除)任务调度包含执行结果日志
🚀文件服务支持将文件存储到 S3（MinIO、阿里云、腾讯云、七牛云）、本地、FTP、数据库等
🚀WebSocket提供 WebSocket 接入示例，支持一对一、一对多发送方式
🚀API 日志包括 RESTful API 访问日志、异常日志两部分，方便排查 API 相关的问题
MySQL 监控监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈
Redis 监控监控 Redis 数据库的使用情况，使用的 Redis Key 管理
🚀消息队列基于 Redis 实现消息队列，Stream 提供集群消费，Pub/Sub 提供广播消费
🚀Java 监控基于 Spring Boot Admin 实现 Java 应用的监控
🚀链路追踪接入 SkyWalking 组件，实现链路追踪
🚀日志中心接入 SkyWalking 组件，实现日志中心
🚀服务保障基于 Redis 实现分布式锁、幂等、限流功能，满足高并发场景
🚀日志服务轻量级日志中心，查看远程服务器的日志
🚀单元测试基于 JUnit + Mockito 实现单元测试，保证功能的正确性、代码的质量等

图片

数据报表

功能描述
🚀报表设计器支持数据报表、图形报表、打印设计等
🚀大屏设计器拖拽生成数据大屏，内置几十种图表组件

微信公众号

功能描述
🚀账号管理配置接入的微信公众号，可支持多个公众号
🚀数据统计统计公众号的用户增减、累计用户、消息概况、接口分析等数据
🚀粉丝管理查看已关注、取关的粉丝列表，可对粉丝进行同步、打标签等操作
🚀消息管理查看粉丝发送的消息列表，可主动回复粉丝消息
🚀自动回复自动回复粉丝发送的消息，支持关注回复、消息回复、关键字回复
🚀标签管理对公众号的标签进行创建、查询、修改、删除等操作
🚀菜单管理自定义公众号的菜单，也可以从公众号同步菜单
🚀素材管理管理公众号的图片、语音、视频等素材，支持在线播放语音、视频
🚀图文草稿箱新增常用的图文素材到草稿箱，可发布到公众号
🚀图文发表记录查看已发布成功的图文素材，支持删除操作

商城系统

图片

图片

演示地址：https://cloud.iocoder.cn/mall-preview/

会员中心

功能描述
🚀会员管理会员是 C 端的消费者，该功能用于会员的搜索与管理
🚀会员标签对会员的标签进行创建、查询、修改、删除等操作
🚀会员等级对会员的等级、成长值进行管理，可用于订单折扣等会员权益
🚀会员分组对会员进行分组，用于用户画像、内容推送等运营手段
🚀积分签到回馈给签到、消费等行为的积分，会员可订单抵现、积分兑换等途径消耗

ERP 系统

图片

演示地址：https://cloud.iocoder.cn/erp-preview/

CRM系统

图片

演示地址：https://cloud.iocoder.cn/crm-preview/

🐨 技术栈

微服务

项目说明
yudao-dependenciesMaven 依赖版本管理
yudao-frameworkJava 框架拓展
yudao-server管理后台 + 用户 APP 的服务端
yudao-module-system系统功能的 Module 模块
yudao-module-member会员中心的 Module 模块
yudao-module-infra基础设施的 Module 模块
yudao-module-bpm工作流程的 Module 模块
yudao-module-pay支付系统的 Module 模块
yudao-module-mall商城系统的 Module 模块
yudao-module-mp微信公众号的 Module 模块
yudao-module-report大屏报表 Module 模块

演示图

移动端（管理后台）

biubiubiu

图片

图片

图片

图片

图片

图片

图片

图片

图片

三、关键技术分析

  1. Vue.js框架：Vue.js是一款轻量级、渐进式的JavaScript框架，以其简洁的API和灵活的组件化设计，受到了广大开发者的喜爱。yudao-cloud项目充分利用了Vue.js的这些优势，实现了高效、可维护的前端代码。

  2. Element-Plus和Vben(Ant-Design-Vue)组件库：Element-Plus和Vben(Ant-Design-Vue)是基于Vue.js开发的UI组件库，提供了丰富的UI组件和样式，可以快速构建出美观、易用的前端界面。yudao-cloud项目通过引入这些组件库，大大提高了开发效率。

  3. uni-app多端适配方案：uni-app是一款使用Vue.js开发所有前端应用的框架，可以编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度等）。yudao-cloud项目采用uni-app方案，实现了同一套代码在多个平台上的运行，极大地降低了开发成本和维护难度。

  4. 实时通信技术：yudao-cloud项目采用Spring WebSocket实现实时通信功能，支持WebSocket集群。通过WebSocket技术，项目可以实现前后端双向通信，为用户提供了更加实时、高效的信息交互体验。

图片

四、实践挑战与解决方案

在开发过程中，我们遇到了一些挑战，如跨平台兼容性、性能优化、安全性等。针对这些挑战，我们采取了以下解决方案：

  1. 跨平台兼容性：通过引入uni-app多端适配方案，我们成功解决了跨平台兼容性问题。同时，我们也对不同的平台进行了充分的测试和优化，确保了项目在不同平台上的稳定性和性能。

  2. 性能优化：我们采用了一系列性能优化措施，如代码拆分、懒加载、压缩资源等，有效提升了项目的加载速度和运行效率。此外，我们还对关键业务逻辑进行了优化和重构，进一步提升了项目的整体性能。

  3. 安全性：我们注重项目的安全性设计，采用了多种安全措施，如HTTPS加密传输、Token身份校验、输入验证等。同时，我们也对敏感数据进行了加密存储和传输，确保了用户数据的安全性。

图片

五、结论

芋道源码的yudao-cloud项目以其先进的技术架构和丰富的功能，为企业快速构建后台管理系统提供了有力的支持。本文从前端技术的角度出发，对yudao-cloud项目的技术架构进行了深入的探讨和实践，希望能为广大开发者提供一些有益的参考和启示。

项目地址：

https://gitee.com/zhijiantianya/yudao-cloud

启动文档：

https://cloud.iocoder.cn/quick-start/

视频教程：

https://cloud.iocoder.cn/video/

演示地址：

https://cloud.iocoder.cn/mall-preview/

相关文章：

芋道源码 / yudao-cloud：前端技术架构探索与实践

摘要： 随着企业信息化建设的深入，后台管理系统在企业运营中扮演着至关重要的角色。本文将以芋道源码的yudao-cloud项目为例，深入探讨其前端技术架构的设计思路、关键技术与实现细节，并分享在开发过程中遇到的挑战与解决方案。 一、…...

编程日记 2024/5/30 1:18:32

2024 angstromCTF re 部分wp

Guess the Flag 附件拖入ida 比较简单，就一个异或 switcher 附件拖入ida 明文flag Polyomino 附件拖入ida 需要输入九个数，然后进入处理和判断，如果满足条件则进入输出flag部分，flag和输入有关，所以要理解需要满足什么…...

编程日记 2024/5/30 1:17:31

STL库--priority_queue

目录 priority_queue定义 prority_queue容器内元素的访问 priority_queue()常用函数实例解析 priority_queue内元素优先级的设置 priority_queue的常见用途 priority_queue又称为优先队列，其底层是用堆来进行实现的。在优先队列中，队首元素一定是当…...

编程日记 2024/5/30 1:16:30

网络编程 —— Http使用httpClient实现页面爬虫

先去找类型的a标签 取出图片所在网址 取出https://desk.3gbizhi.com/deskMV/438.html 搭建Form界面 Http类 public static HttpClient Client { get; } static Http() {HttpClientHandler handler new HttpClientHandler();//处理消息对象//ServerCertificateCustomValidat…...

编程日记 2024/5/30 1:15:28

【本地运行chatgpt-web】启动前端项目和service服务端项目，也是使用nodejs进行开发的。两个都运行成功才可以使用！

1，启动web界面 https://github.com/Chanzhaoyu/chatgpt-web#node https://nodejs.org/en/download/package-manager # 使用nvm 安装最新的 20 版本。 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source /root/.bashrc n…...

编程日记 2024/5/30 1:13:26

TOGAF企业架构章节（核心）知识点（一）

TOGAF标准9.2一共有 6 部分： 第一部分（简介）：企业架构的关键概念，特别是 TOGAF 方法进行了概要介绍第二部分（架构开发方法）： TOGAF 框架的核心部分。描述了 TOGAF 架构开发方法&…...

编程日记 2024/5/30 1:10:24

手摸手教你uniapp原生插件开发

行有余力,心无恐惧 这篇技术文章写了得有两三个礼拜,虽然最近各种事情,工作上的生活上的,但是感觉还是有很多时间被浪费.还记得几年前曾经有一段时间7点多起床运动,然后工作学习,看书提升认知.现在我都要佩服那会儿的自己.如果想回到那种状态,我觉得需要有三个重要的条件. 其…...

编程日记 2024/5/30 1:09:22

C++进程间通信 消息队列

C进程间通信 消息队列 消息队列概述消息队列代码示例1. 创建和发送消息的程序（sender.cpp）2. 接收消息的程序（receiver.cpp） 代码解释运行步骤运行结果 消息队列概述 消息队列是一种进程间通信机制，允许一个或多个进程…...

编程日记 2024/5/30 1:07:20

mysql中InnoDB的统计数据

大家好。我们知道，mysql中存在许多的统计数据，比如通过SHOW TABLE STATUS 可以看到关于表的统计数据，通过SHOW INDEX可以看到关于索引的统计数据，那么这些统计数据是怎么来的呢？它们是以什么方式收集的呢？今…...

编程日记 2024/5/30 1:03:14

P459 包装类Wrapper

包装类的分类 1）针对八种基本数据类型相应的引用类型——包装类。 2）有了类的特点，就可以调用类中的方法。 Boolean包装类 Character包装类 其余六种Number类型的包装类 包装类和基本数据类型的相互转换 public class Integer01 {publi…...

编程日记 2024/5/30 1:02:13

Kong网关的负载均衡

安装java环境 查询 java安装包 196 yum list java* 安装java8197 yum install -y java-1.8.0-openjdk.x86_64 检验java8是否安装成功。198 java -version2个tomcat准备 另外一个tomcat区别在于：配置文件。conf/server.xml 启动tomcat [rootlocalhost bin]# ./…...

编程日记 2024/5/30 1:01:12

这是一个逗号

还不太能是句号，随想录这两个月算是给我一个学算法的开头，感慨还是挺多的，但是语文功底很差，就接着写流水账吧。 高考前想报计算机，但是那年是先报志愿后考试，家里人劝我选择更稳一点的985，又说…...

编程日记 2024/5/30 0:59:10

oracle tree

select * from "Test"; INSERT INTO "Test" ("id", "name", "pid") VALUES (01, 中国, 00); INSERT INTO "Test" ("id", "name", "pid") VALUES (01.01, 福建, 01); INSERT INTO…...

编程日记 2024/5/30 0:58:08

react-beautiful-dnd 横纵排序demo

简单导入就可以看到效果 1. 安装依赖 npm i react-beautiful-dnd 2. 纵向排序 import React, { useState } from react; import { DragDropContext, Droppable, Draggable } from react-beautiful-dnd;// 纵向排序 const reorder (list, startIndex, endIndex) > {con…...

编程日记 2024/5/30 0:56:06

web练习

[CISCN 2022 初赛]ezpop ThinkPHP V6.0.12LTS 反序列化漏洞 漏洞分析 ThinkPHP6.0.12LTS反序列漏洞分析 - FreeBuf网络安全行业门户 解题过程 ThinkPHP V6.0.12LTS反序列化的链子可以找到，找到反序列化的入口就行 反序列化的入口在index.php/index/test 链子 …...

编程日记 2024/5/30 0:55:05

模型蒸馏笔记

文章目录 一、什么是模型蒸馏二、如何蒸馏三、常见问题3.1 四、参考文献 一、什么是模型蒸馏 Hinton在NIPS2014提出了知识蒸馏（Knowledge Distillation）的概念，旨在把一个大模型或者多个模型ensemble学到的知识迁移到另一个轻量级单模型上&a…...

编程日记 2024/5/30 0:54:04

HAL库使用FreeRTOS实时操作系统时配置时基源(TimeBase Source)

需要另外的定时器，用systic的时候生成项目会有警告 https://blog.51cto.com/u_16213579/10967728...

编程日记 2024/5/30 0:53:03

如何让你的网站能通过域名访问

背景 当我们租一台云服务器，并在上面运行了一个Web服务，我们可以使用云服务器的公网IP地址进行访问，如下： 本文主要记录如何 实现让自己的网站可以通过域名访问。 买域名 可以登录腾讯云等主流公有云平台的，购买域名…...

编程日记 2024/5/30 0:50:00

Spring Boot + Spring Security + JWT 从零开始

Spring Boot + Spring Security + JWT 从零开始 这篇笔记中，我们将学习如何从头开始设置一个带有Spring Security的Spring Boot应用程序，它连接到一个LDAP身份验证的Spring Security身份验证提供程序，这将是即将出现的，这个连接和工作都是开箱即用的。 实际上，设置这个非…...

编程日记 2024/5/30 0:48:59

【busybox记录】【shell指令】rmdir

目录 内容来源： 【GUN】【rmdir】指令介绍 【busybox】【rmdir】指令介绍 【linux】【rmdir】指令介绍 使用示例： 删除空目录 - 默认 删除dirname下的所有空目录，包括因删除其他目录而变为空的目录 常用组合指令： 指令不…...

编程日记 2024/5/30 0:46:57

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...

编程新知 2025/8/4 13:00:39

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2025/8/22 3:28:17

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/7/5 11:09:46

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/8/25 23:31:15

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/8/26 18:48:34

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/8/26 1:35:23

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/8/21 14:47:42

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/7/8 17:11:44

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

编程新知 2025/8/16 12:41:25

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2025/8/22 6:11:42