芋道管理后台:基于 Vue3 和 Element Plus 的全能型企业管理系统

芋道管理后台:基于 Vue3 和 Element Plus 的全能型企业管理系统

 

一、引言

在现代商业环境中,企业需要一个功能强大的管理后台来高效地处理日常运营事务。芋道管理后台正是一个满足这种需求的解决方案。基于 Vue3 和 Element Plus 框架,芋道后台提供了 RBAC 动态权限、数据权限、SaaS 多租户、Flowable 工作流、三方登录、支付、短信、商城、CRM 等一系列功能,助力企业实现数字化转型。

新手必读

  • nodejs > 16.18.0 && pnpm > 8.6.0 (强制使用pnpm)

  • 演示地址【Vue3 + element-plus】:http://dashboard-vue3.yudao.iocoder.cn

  • 演示地址【Vue3 + vben(ant-design-vue)】:http://dashboard-vben.yudao.iocoder.cn

  • 演示地址【Vue2 + element-ui】:http://dashboard.yudao.iocoder.cn

  • 启动文档:https://doc.iocoder.cn/quick-start/

  • 视频教程:https://doc.iocoder.cn/video/

平台简介

芋道,以开发者为中心,打造中国第一流的快速开发平台,全部开源,个人与企业可 100% 免费使用。

  • 采用 vue-element-plus-admin 实现

  • 改换 saas,自动引入等功能

  • 使用 Element Plus 免费开源的中后台模版,具备如下特性:

 

cdfd7262565986a1dc57ad84887894f6.png

  • 最新技术栈:使用 Vue3、Vite4 等前端前沿技术开发

  • TypeScript: 应用程序级 JavaScript 的语言

  • 主题: 可配置的主题

  • 国际化:内置完善的国际化方案

  • 权限:内置完善的动态路由权限生成方案

  • 组件:二次封装了多个常用的组件

  • 示例:内置丰富的示例

 

二、技术栈简介

  1. Vue3:Vue3 是 Vue.js 的最新版本,它带来了许多新的特性和性能改进。我们选择 Vue3 作为主要框架,因为它具有简单易用、高效灵活的特性,并且能够很好地与其他技术进行集成。

  2. Element Plus:Element Plus 是 Vue3 的一个 UI 组件库,它基于 Element UI,为 Vue3 开发者提供了丰富的前端 UI 组件,极大地提升了开发效率。

     

 

  1. 技术栈

    框架说明版本
    VueVue 框架3.3.8
    Vite开发与构建工具4.5.0
    Element PlusElement Plus2.4.2
    TypeScriptJavaScript 的超集5.2.2
    piniaVue 存储库 替代 vuex52.1.7
    vueuse常用工具集10.6.1
    vue-i18n国际化9.6.5
    vue-routerVue 路由4.2.5
    unocss原子 css0.57.4
    iconify在线图标库3.1.1
    wangeditor富文本编辑器5.1.23

内置功能

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

  • 系统功能

  • 基础设施

  • 工作流程

  • 支付系统

  • 会员中心

  • 数据报表

  • 商城系统

  • 微信公众号

系统功能

 功能描述
 用户管理用户是系统操作者,该功能主要完成系统用户配置
⭐️在线用户当前系统中活跃用户状态监控,支持手动踢下线
 角色管理角色菜单权限分配、设置角色按机构进行数据范围权限划分
 菜单管理配置系统菜单、操作权限、按钮权限标识等,本地缓存提供性能
 部门管理配置系统组织机构(公司、部门、小组),树结构展现支持数据权限
 岗位管理配置系统用户所属担任职务
🚀租户管理配置系统租户,支持 SaaS 场景下的多租户功能
🚀租户套餐配置租户套餐,自定每个租户的菜单、操作、按钮的权限
 字典管理对系统中经常使用的一些较为固定的数据进行维护
🚀短信管理短信渠道、短息模板、短信日志,对接阿里云、腾讯云等主流短信平台
🚀邮件管理邮箱账号、邮件模版、邮件发送日志,支持所有邮件平台
🚀站内信系统内的消息通知,提供站内信模版、站内信消息
🚀操作日志系统正常操作日志记录和查询,集成 Swagger 生成日志内容
⭐️登录日志系统登录日志记录查询,包含登录异常
🚀错误码管理系统所有错误码的管理,可在线修改错误提示,无需重启服务
 通知公告系统通知公告信息发布维护
🚀敏感词配置系统敏感词,支持标签分组
🚀应用管理管理 SSO 单点登录的应用,支持多种 OAuth2 授权方式
🚀地区管理展示省份、城市、区镇等城市信息,支持 IP 对应城市

工作流程

 功能描述
🚀流程模型配置工作流的流程模型,支持文件导入与在线设计流程图,提供 7 种任务分配规则
🚀流程表单拖动表单元素生成相应的工作流表单,覆盖 Element UI 所有的表单组件
🚀用户分组自定义用户分组,可用于工作流的审批分组
🚀我的流程查看我发起的工作流程,支持新建、取消流程等操作,高亮流程图、审批时间线
🚀待办任务查看自己【未】审批的工作任务,支持通过、不通过、转发、委派、退回等操作
🚀已办任务查看自己【已】审批的工作任务,未来会支持回退操作
🚀OA 请假作为业务自定义接入工作流的使用示例,只需创建请求对应的工作流程,即可进行审批

支付系统

 功能描述
🚀商户信息管理商户信息,支持 Saas 场景下的多商户功能
🚀应用信息配置商户的应用信息,对接支付宝、微信等多个支付渠道
🚀支付订单查看用户发起的支付宝、微信等的【支付】订单
🚀退款订单查看用户发起的支付宝、微信等的【退款】订单

ps:核心功能已经实现,正在对接微信小程序中...

基础设施

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

数据报表

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

微信公众号

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

商城系统

 

dcf17a8b250e756eb31a00564c9fa8f4.png

 

 

数据模块

模块biubiubiu
报表设计器

e63426bee7d917980255a83eb8732d19.png

220d5c1cf2f4c96fd4014981157851f2.png

ab2f7f6d81c1039d0796b3eb00e2bbd6.png

大屏设计器

8f1a5f7420bc06eecac263f4e3638fd5.png

cbe7e34ae029b185b8afc1873e7a52fd.png

f885ffe5695f32d118d509f2376cb0a6.png

三、主要功能解析

  1. RBAC 动态权限管理:通过角色和权限的组合,实现了对不同用户的权限控制。管理员可以灵活地为不同角色分配不同的操作权限,确保数据的安全性。

  2. 数据权限管理:除了对操作权限的控制外,芋道后台还提供了数据权限管理功能。管理员可以根据用户的角色和部门,控制用户对数据的访问权限,确保数据的安全和隐私。

  3. SaaS 多租户:支持多租户模式,每个租户可以独立运行,拥有自己的数据和配置。管理员可以轻松地对租户进行管理和维护,实现了资源的最大化利用。

  4. Flowable 工作流:集成 Flowable 工作流引擎,支持各种复杂的工作流程。用户可以自定义流程节点和流转条件,满足不同业务场景的需求。

  5. 三方登录:整合微信、QQ、谷歌等平台的登录功能,用户可以使用已有的账号密码进行登录,提升了用户体验和安全性。

  6. 支付与短信功能:集成多种支付渠道,支持在线支付功能;同时提供短信服务,方便用户接收通知和验证码等信息。

  7. 商城与 CRM 功能:为用户提供在线商城和客户关系管理功能,帮助企业实现电商业务和客户资源的有效管理。

     

四、总结与展望

芋道管理后台凭借其强大的功能和灵活的配置,为企业提供了一个全方位的管理解决方案。通过不断的技术创新和业务拓展,芋道后台将继续为企业的发展提供有力支持。未来,我们将继续关注行业动态和技术趋势,不断完善芋道后台的功能和性能,以满足更多企业的需求。同时,我们也欢迎广大开发者和技术爱好者共同参与芋道项目的开发与维护,共同推动企业数字化管理的进步与发展。

请关注我的微信公众号: 前端组件开发

 

d848d5658a07453c843277846948c608.png

 

加入我们的前端组件学习交流群

 

a4d0d0ea270f48d1b22cec9aa7e14110.png

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值