芋道源码 / 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.rhkb.cn/news/333908.html

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

相关文章

经典神经网络(9)VAE模型原理及其在MNIST数据集上的应用

经典神经网络(9)VAE模型原理及其在MNIST数据集上的应用

经典神经网络(9)VAE模型原理及其在MNIST数据集上的应用 图片生成领域来说，有四大主流生成模型：生成对抗模型（GAN）、变分自动编码器（VAE）、流模型（Flow based Model）、扩散模型&#…
阅读更多...
【智能家居入门1】环境信息监测（STM32、ONENET云平台、微信小程序、HTTP协议）

【智能家居入门1】环境信息监测（STM32、ONENET云平台、微信小程序、HTTP协议）

作为入门本篇只实现微信小程序接收下位机上传的数据，之后会持续发布如下项目：①可以实现微信小程序控制下位机动作，真正意义上的智能家居；②将网络通讯协议换成MQTT协议再实现上述功能，此时的服务器也不再是ONENET&…
阅读更多...
数据结构—队列（C语言实现）

数据结构—队列（C语言实现）

文章目录 前言一、队列的概念二、队列的实现Queue.hQueue.c 三、设计循环队列问题数组实现链表实现 总结 前言 嗨喽喽！！小伙伴们，大家好哇，欢迎来到我的博客！ 今天将要分享的是另一种数据结构—队列，以及…
阅读更多...
五分钟搭建一个Suno AI音乐站点

五分钟搭建一个Suno AI音乐站点

五分钟搭建一个Suno AI音乐站点 在这个数字化时代，人工智能技术正以惊人的速度改变着我们的生活方式和创造方式。音乐作为一种最直接、最感性的艺术形式，自然也成为了人工智能技术的应用场景之一。今天，我们将以Vue和Node.js为基础&#xff…
阅读更多...
MySQL触发器实战：自动执行的秘密

MySQL触发器实战：自动执行的秘密

欢迎来到我的博客，代码的世界里，每一行都是一个故事 🎏：你只管努力，剩下的交给时间 🏠 ：小破站 MySQL触发器实战：自动执行的秘密 前言触发器的定义和作用触发器的定义和作用触发器的…
阅读更多...
leetCode.82. 删除排序链表中的重复元素 II

leetCode.82. 删除排序链表中的重复元素 II

leetCode.82. 删除排序链表中的重复元素 II 题目思路： 代码 class Solution { public:ListNode* deleteDuplicates(ListNode* head) {auto dummy new ListNode(-1);dummy->next head;auto p dummy;while(p->next){auto q p->next->next;while(q …
阅读更多...
插件“猫抓”使用方法 - 浏览器下载m3u8视频 - 合并 - 视频检测下载 - 网课下载神器

插件“猫抓”使用方法 - 浏览器下载m3u8视频 - 合并 - 视频检测下载 - 网课下载神器

前言 浏览器下载m3u8视频 - 合并 - 网课下载神器 chrome插件-猫抓 https://chrome.zzzmh.cn/info/jfedfbgedapdagkghmgibemcoggfppbb 步骤： P.s. 推荐大佬的学习视频！ 《WEB前端大师课》超级棒！ https://ke.qq.com/course/5892689#term_id…
阅读更多...
使用Python操作Jenkins

使用Python操作Jenkins

大家好，Python作为一种简洁、灵活且功能丰富的编程语言，可以与各种API轻松集成，Jenkins的API也不例外。借助于Python中的python-jenkins模块，我们可以轻松地编写脚本来连接到Jenkins服务器，并执行各种操作，…
阅读更多...
C语言中的位段

C语言中的位段

位段是通过结构体实现的，可以在一定程度上减小空间浪费，位段的声明和结构体类似，有以下几个不同： ①位段的成员必须是整形（int,char,short等）。 ②成员后边有冒号和数字，表示该成员占几个bit位…
阅读更多...
【译】MySQL复制入门： 探索不同类型的MySQL复制解决方案

【译】MySQL复制入门： 探索不同类型的MySQL复制解决方案

原文地址：An Introduction to MySQL Replication: Exploring Different Types of MySQL Replication Solutions 在这篇博文中，我将深入介绍 MySQL 复制，回答它是什么、如何工作、它的优势和挑战，并回顾作为 MySQL 环境&#xff0…
阅读更多...
“智能体时代：探索无限可能——零代码构建智能教练智能体“

“智能体时代：探索无限可能——零代码构建智能教练智能体“

随着智能体技术的飞速发展，各个领域正经历着空前的变革和新的发展机遇。作为人工智能的一个关键组成部分，智能体以其自我驱动、智能响应和适应能力，逐渐深入到我们日常生活的各个层面，成为促进社会发展和科技进步的新引擎。 顺应这…
阅读更多...
深度神经网络——贝叶斯与朴素贝叶斯定理

深度神经网络——贝叶斯与朴素贝叶斯定理

概述 贝叶斯定理是概率论中一个非常重要的概念，它提供了一种在已知某些相关事件的概率时，计算另一个事件发生概率的方法。在你提供的内容中，贝叶斯定理被描述为一种“魔法”，因为它能够使计算机通过分析大量的数据来预测人们可能…
阅读更多...
十四天学会Vue——Vue核心（理论+实战）中篇（第二天）

十四天学会Vue——Vue核心（理论+实战）中篇（第二天）

声明：是接着上篇讲的哦，感兴趣可以去看一看~ 这里一些代码就不写了，为了缩减代码量，大家知道就可以了： Vue.config.productionTip false //阻止 vue 在启动时生成生产提示。热身小tips，可以安装这个插件&…
阅读更多...
【LeetCode】【9】回文数（1047字）

【LeetCode】【9】回文数（1047字）

文章目录 [toc]题目描述样例输入输出与解释样例1样例2样例3 提示进阶Python实现 个人主页：丷从心 系列专栏：LeetCode 刷题指南：LeetCode刷题指南 题目描述 给一个整数x，如果x是一个回文整数，返回true；否…
阅读更多...
MIT6.828 Lab2-1 Using gdb

MIT6.828 Lab2-1 Using gdb

Using gdb gdb使用： xv6 gdb调试方法 问题1： Looking at the backtrace output, which function called syscall? 按照提示开启gdb后键入： b syscall c layout src backtrace输出结果： (gdb) backtrace #0 syscall () at k…
阅读更多...
Python + adb 实现打电话功能

Python + adb 实现打电话功能

前言 其实很多年前写过一篇python打电话的功能，链接如下： Python twilio 实现打电话和发短信功能_自动发短信代码-CSDN博客 今天由于工作需要，又用python写了个关于打电话的小工具，主要是通过ADB方式实现的 实现过程 1.先利用…
阅读更多...
YOLOv8+PyQt5鸟类检测系统完整资源集合(yolov8模型，从图像、视频和摄像头三种路径识别检测，包含登陆页面、注册页面和检测页面)

YOLOv8+PyQt5鸟类检测系统完整资源集合(yolov8模型，从图像、视频和摄像头三种路径识别检测，包含登陆页面、注册页面和检测页面)

资源包含可视化的鸟类检测系统，基于最新的YOLOv8训练的鸟类检测模型，和基于PyQt5制作的可视化鸟类检测系统，包含登陆页面、注册页面和检测页面，该系统可自动检测和识别图片或视频当中出现的各种鸟类，以及自动开启摄像头…
阅读更多...
Putty： 随心御剑——远程启动服务工具plink

Putty： 随心御剑——远程启动服务工具plink

一、引言：如何远程控制 也许你会有这样的场景，交互程序（以下简称UI程序）跑在windows端，而控制程序跑在Linux上。我们想要通过windows端 UI程序来启动Linux下面的服务，来一场酣畅淋漓的御剑飞行咋办，难道要自己十年磨一剑，在Linux下编写一个受控服务程序么.计算机科技发…
阅读更多...
如何创建一个vue项目？详细教程，如何创建第一个vue项目？

如何创建一个vue项目？详细教程，如何创建第一个vue项目？

已经安装node.js在自己找的到的地方新建一个文件夹用于存放项目，记住文件夹的存放路径，以我为例，我的文件夹路径为D:\tydic 打开cmd命令窗口，进入刚刚的新建文件夹 切换硬盘： D: 进入文件夹：cd tydic 使…
阅读更多...
重学java 49 List接口

重学java 49 List接口

但逢良辰，顺颂时宜 —— 24.5.28 一、List接口 1.概述: 是collection接口的子接口 2.常见的实现类: ArrayList LinkedList Vector 二、List集合下的实现类 1.ArrayList集合的使用及源码分析 1.概述 ArrayList是List接口的实现类 2.特点 a.元素有序 —> 按照什么顺…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023