芋道源码 / 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 列表、元组、字典和集合的区别 数 据…
阅读更多...
半导体测试基础 - 功能测试

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

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

凤香的“蜜”密

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

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

文章目录 一些基础知识点指针和引用 一些基础知识点 1、十进制的数字比较长的时候&#xff0c;可以加方便阅读到底是几位&#xff0c;输出的时候跟不加是一样的效果 // 十进制可以加 cout << 13890324 << endl; // 13890324 // 二进制前加0b cout << 0b111…
阅读更多...
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;分布式版本控制系…
阅读更多...
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…
阅读更多...
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…
阅读更多...
使用python绘制一个五颜六色的爱心

使用python绘制一个五颜六色的爱心

使用python绘制一个五颜六色的爱心 介绍效果代码 介绍 使用numpy与matplotlib绘制一个七彩爱心&#xff01; 效果 代码 import numpy as np import matplotlib.pyplot as plt# Heart shape function def heart_shape(t):x 16 * np.sin(t)**3y 13 * np.cos(t) - 5 * np.cos…
阅读更多...
微软：最新ChatGPT-4o模型，可在 Azure OpenAI上使用

微软：最新ChatGPT-4o模型，可在 Azure OpenAI上使用

北京时间5月14日凌晨&#xff0c;OpenAI 一场不到 30 分钟的发布会&#xff0c;正式发布了 GPT-4o&#xff0c;视频语音交互丝滑到吓人&#xff0c;还即将免费可用&#xff01; GPT-4o&#xff0c;其中的「o」代表「omni」&#xff08;即全面、全能的意思&#xff09;&#xff…
阅读更多...
AIGC行业：巨头引领的创新浪潮与市场前景

AIGC行业：巨头引领的创新浪潮与市场前景

AIGC&#xff08;AI Generated Content&#xff09;技术&#xff0c;作为新兴的技术力量&#xff0c;正逐渐改变内容创作的生态。在这一变革中&#xff0c;国内科技巨头如百度、阿里巴巴、腾讯等的积极参与&#xff0c;不仅为行业带来资本和技术支持&#xff0c;更预示着AIGC技…
阅读更多...
react 下拉框内容回显

react 下拉框内容回显

需要实现效果如下 目前效果如下 思路 : 将下拉框选项的value和label一起存储到state中 , 初始化表单数据时 , 将faqType对应的label查找出来并设置到Form.Item中 , 最后修改useEffect 旧代码 //可以拿到faqType为0 但是却没有回显出下拉框的内容 我需要faqType为0 回显出下拉…
阅读更多...
Shell脚本基本命令

Shell脚本基本命令

文件名后缀.sh 编写shell脚本一定要说明一下在#&#xff01;/bin/bash在进行编写。命令选项空格隔开。Shell脚本是解释的语言&#xff0c;bash 文件名即可打印出编写的脚本。chmod给权限命令。如 chmod 0777 文件名意思是给最高权限。 注意:count赋值不能加空格。取消变量可在变…
阅读更多...
如何提升网络性能监控和流量回溯分析的效率？

如何提升网络性能监控和流量回溯分析的效率？

目录 什么是网络性能监控&#xff1f; 网络性能监控的关键指标 什么是流量回溯分析&#xff1f; 流量回溯分析的应用场景 网络性能监控与流量回溯分析的结合 实例应用&#xff1a;AnaTraf网络流量分析仪 如何选择适合的网络性能监控和流量回溯分析工具&#xff1f; 结论…
阅读更多...
MQTT 5.0 报文解析 06：AUTH

MQTT 5.0 报文解析 06：AUTH

欢迎阅读 MQTT 5.0 报文系列 的最后一篇文章。在上一篇中&#xff0c;我们已经介绍了 MQTT 5.0 的 DISCONNECT 报文。现在&#xff0c;我们将介绍 MQTT 中的最后一个控制报文&#xff1a;AUTH。 MQTT 5.0 引入了增强认证特性&#xff0c;它使 MQTT 除了简单密码认证和 Token 认…
阅读更多...
Vue3实战笔记（36）—粒子特效完成炫酷的404

Vue3实战笔记（36）—粒子特效完成炫酷的404

文章目录 前言404特效总结 前言 昨天介绍了一个粒子特效小例子&#xff0c;不够直观&#xff0c;下面直接实战在自己的项目中实现一个好玩滴。 404特效 更改之前创建好的404.vue: <template><div class"container"><vue-particles id"tspartic…
阅读更多...
阿里云和AWS的CDN产品对比分析

阿里云和AWS的CDN产品对比分析

在现代互联网时代,内容分发网络(CDN)已成为确保网站和应用程序高性能和可用性的关键基础设施。作为两家领先的云服务提供商,阿里云和Amazon Web Services(AWS)都提供了成熟的CDN解决方案,帮助企业优化网络传输和提升用户体验。我们九河云一直致力于阿里云和AWS云相关业务&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023