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

摘要：


随着企业信息化建设的深入，后台管理系统在企业运营中扮演着至关重要的角色。本文将以芋道源码的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/

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

TCP UDP 传输协议 Acl 访问控制列表

TCP UDP 传输协议 Acl 访问控制列表

TCP的应用 端口 21 FTP 22 SSH 25 SMTP 53 DNS 80 HTTP 443 HTTPS UDP 的应用 端口 69 TFTP 53 DNS 123 NTP Acl 访问控制列表 路由器ACL配置：[Huawei]acl 2000 //创建acl 列表号是2000[Huawei-acl-basic-2000]rule deny source 192…
阅读更多...
列表、元组、字典和集合的区别

列表、元组、字典和集合的区别

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在前面介绍了序列中的列表、元组、字典和集合的应用，下面通过表2对这几个数据序列进行比较。 表2 列表、元组、字典和集合的区别 数 据…
阅读更多...
消除控制台打印com.apple.commcenter.coretelephony.xpc

消除控制台打印com.apple.commcenter.coretelephony.xpc

控制台输出： [Client] Synchronous remote object proxy returned error: Error DomainNSCocoaErrorDomain Code4099 "The connection to service named com.apple.commcenter.coretelephony.xpc was invalidated." UserInfo{NSDebugDescriptionThe conne…
阅读更多...
MyBatis 面试题

MyBatis 面试题

一、什么是 Mybatis？ 1、Mybatis 是一个半 ORM（对象关系映射）框架，它内部封装了 JDBC，开发时 只需要关注 SQL 语句本身，不需要花费精力去处理加载驱动、创建连接、创建 statement 等繁杂的过程。程序员直接编写原生态 sql，可以严格控制 sql 执行性 能，灵活度高。 …
阅读更多...
【设计模式】适配器

【设计模式】适配器

来源：爱编程的大丙 STL标准模板库有六大组件，其中之一就是适配器 六大组件分别是：容器、算法、迭代器、仿函数、空间适配器 适配器可以分为：容器适配器、函数适配器、迭代器适配器 适配器，相当于沟通的桥梁。将一个…
阅读更多...
半导体测试基础 - 功能测试

半导体测试基础 - 功能测试

功能测试（Functional Test）主要是验证逻辑功能，是运用测试矢量和测试命令来进行的一种测试，相比于纯 DC 测试而言，组合步骤相对复杂且耦合度高。 在功能测试阶段时，测试系统会以周期为单位，将测试矢量输入 DUT，提供预测的结果并与输出的数据相比较，如果实际的结果与测…
阅读更多...
Codeforces Global Round 17 C. Keshi Is Throwing a Party 二分查找

Codeforces Global Round 17 C. Keshi Is Throwing a Party 二分查找

Keshi Is Throwing a Party 题目描述 Keshi is throwing a party and he wants everybody in the party to be happy. He has n n n friends. His i i i-th friend has i i i dollars. If you invite the i i i-th friend to the party, he will be happy only if at m…
阅读更多...
凤香的“蜜”密

凤香的“蜜”密

执笔 | 文 清 编辑 | 古利特 “遇水则漏，遇酒生香”。酒海，一种大型盛酒容器，因盛酒量以“吨”计算，故称“海”，传于唐宋，兴盛于明清，距今有1400多年的历史。文人墨客笔下，也多有…
阅读更多...
C++重点基础知识汇总大全

C++重点基础知识汇总大全

文章目录 一些基础知识点指针和引用 一些基础知识点 1、十进制的数字比较长的时候&#xff0c;可以加方便阅读到底是几位&#xff0c;输出的时候跟不加是一样的效果 // 十进制可以加 cout << 13890324 << endl; // 13890324 // 二进制前加0b cout << 0b111…
阅读更多...
redis集群数据迁移

redis集群数据迁移

redis槽位 ​ redis集群搭建完后会自动在redis集群中内置16384个哈希槽（至于为啥是16384个，有兴趣的读者可进行深究）。当客户端向redis集群中插入数据时（key-value），redis会先对key使用crc16算法算出一个结果值，然后用此结果值对16384进行求余，此余数会对应到16384中的…
阅读更多...
Java基础：桥接模式

Java基础：桥接模式

桥接模式&#xff08;Bridge Pattern&#xff09;主要用于将抽象部分与其实现部分分离&#xff0c;使它们可以独立变化。这种模式通过创建一个抽象类和实现了该抽象类的具体类之间的桥梁来实现这一目的&#xff0c;从而让抽象类和它的实现可以以组合的方式耦合&#xff0c;而不…
阅读更多...
【webrtc】rtp扩展：绝对发送时间、绝对采集时间、时间戳插值

【webrtc】rtp扩展：绝对发送时间、绝对采集时间、时间戳插值

WebRTC RTP 标头扩展审查绝对发送时间和绝对采集时间，二者是不同的当没有打开绝对采集时间戳的扩展时，webrtc依旧会使用AbsoluteCaptureTimeInterpolator 在接收测估算 绝对采集时间戳。Absolute Send Time 带宽估计算法用 The Absolute Send Time extension is used to stam…
阅读更多...
LeetCode/NowCoder-链表经典算法OJ练习4

LeetCode/NowCoder-链表经典算法OJ练习4

人的才华就如海绵的水&#xff0c;没有外力的挤压&#xff0c;它是绝对流不出来的。流出来后&#xff0c;海绵才能吸收新的源泉。&#x1f493;&#x1f493;&#x1f493; 目录 说在前面 题目一&#xff1a;环形链表 题目二&#xff1a;环形链表 II 题目三&#xff1a;随机…
阅读更多...
《Python编程从入门到实践》day34

《Python编程从入门到实践》day34

# 昨日知识点回顾 json文件提取数据、绘制图表渐变色显示 # 今日知识点学习 第17章 17.1 使用Web API Web API作为网站的一部分&#xff0c;用于与使用具体URL请求特定信息的程序交互&#xff0c;这种请求称为API调用。 17.1.1 Git 和 GitHub Git&#xff1a;分布式版本控制系…
阅读更多...
vue-封装上下(垂直方向)轮播

vue-封装上下(垂直方向)轮播

需求&#xff1a;没有找到特别好的上下轮播插件-所以自己写了一个简单的demo 一.上下平滑轮播-移入停止-移出继续轮播 <!--* 消息滚动 --> <template><div class"news"><div id"roll" class"InfoBox" mouseover"thi…
阅读更多...
Media Encoder 2024 for Mac媒体编码器安装教程ME2024安装包下载

Media Encoder 2024 for Mac媒体编码器安装教程ME2024安装包下载

安装 步骤 1&#xff0c;双击打开下载好的安装包。 2&#xff0c;选择install ame_24...双击打开启动安装程序。 3&#xff0c;点击install。 4&#xff0c;输入电脑密码。 5&#xff0c;软件安装中... 6&#xff0c;安装结束点击好。 7&#xff0c;返回打开的镜像 选择激活补…
阅读更多...
零基础，想做一名网络安全工程师，该怎么学习？

零基础，想做一名网络安全工程师，该怎么学习？

​ 相比IT类的其它岗位&#xff0c;网络工程师的学习方向是比较明亮的。想要成为网络工程师&#xff0c;华为认证就是最好的学习方法。而网络工程师的从零开始学习就是从华为认证的初级开始学起&#xff0c;也就是HCIA&#xff0c;也就是从最基本的什么是IP地址、什么是交换机这…
阅读更多...
响应式流和reactor框架进阶

响应式流和reactor框架进阶

响应式流和reactor框架进阶 响应式流创建、转换、处理 本文档主要介绍在响应式编程中如何从流中获取数据并处理。 前提条件 假设您已经能掌握Java基础、Maven使用、Lamda表达式、响应式编程等基础。 如何获取流中数据 &#x1f30f; 说明 1、不要试图从流中获取数据出来&a…
阅读更多...
第⼀次页⾯加载会触发哪⼏个钩⼦?DOM 渲染在哪个周期中就已经完成?

第⼀次页⾯加载会触发哪⼏个钩⼦?DOM 渲染在哪个周期中就已经完成?

在Vue中&#xff0c;第一次页面加载会触发以下钩子函数&#xff1a; beforeCreate&#xff1a;在实例初始化之后&#xff0c;数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created&#xff1a;在实例创建完成后被立即调用。在这一步&#xff0c;实例已完成…
阅读更多...
Angular（1）：使用Angular CLI创建空项目

Angular（1）：使用Angular CLI创建空项目

要创建一个空的 Angular 项目&#xff0c;可以使用 Angular CLI&#xff08;命令行界面&#xff09;。以下是使用 Angular CLI 创建一个新项目的步骤&#xff1a; 1、安装 Angular CLI&#xff1a; 打开你的命令行界面&#xff08;在 Windows 上是 CMD、PowerShell 或 Git Bas…
阅读更多...
最新文章

Copyright @ 2022~2023