前后端分离 Vue + Egg.js + Mysql 的 JS全栈实践。动态菜单,RBAC权限模型,WebSocket实现站内信。已部署到线上!!!

本文涉及的产品
RDS MySQL DuckDB 分析主实例,基础系列 4核8GB
RDS MySQL DuckDB 分析主实例,集群系列 4核8GB
RDS DuckDB + QuickBI 企业套餐,8核32GB + QuickBI 专业版
简介: 🖖基于Vue+Egg.js的JS全栈项目。动态菜单,RBAC权限模型,Websocket实现站内信。

Beehive

前言

Beehive 是一个项目管理系统。参考于Teambetion、PearProject,实现部分功能。

这是一个Vue+Node.js的js全栈项目。基于RBAC模型做权限控制,动态配置菜单,前端实现页面元素级别的权限控制。通过WebSocket实现站内信功能,任务看板中,实现更新同步推送。一旦其他项目成员有对我们当前查看的项目任务做任何的操作,页面都将立即同步更新,并向此任务的所有参与者(除了操作者)发送消息通知。注册和找回密码需要通过邮箱验证码验证,可以通过github授权登陆(不是很稳定)。

Node.js框架选用的是Egg.js,配合sequelize,自己写了一个小工具。可以通过填写表字段的配置,执行npm run generator-entity自动生成一整套文件,包括Swagger、数据校验validate、Sequelize需要的model、controller、service、router。并自动创建数据库表,包括每个字段的类型、长度、是否能为空、默认值、注释、索引、甚至是外键都能搞定。因为加了权限控制,所以还要到前端的资源管理中添加一下新增的资源,并在角色中点选分配一下,就完成了一张表的CRUD了,包括新增、修改、详情、批量删除、分页列表。当然这还是有很多可以优化的空间的,但也基本够用了。为了优化鉴权消耗,以及满足WebSocket的可靠性设计需要,系统引入Redis做缓存。

密码是加盐存储的,且在传输过程中使用了RSA做了非对称加密。Jwt认证使用Access Token + Refresh Token,配合黑名单。

效果演示

预发布环境:超级管理员账号:test-super ,密码:test-super123 预发布环境地址:beehives.imfdj.top

预发布环境:普通用户账号:test-user ,密码:test-user123

生产环境:普通用户账号:test-user ,密码:test-user123 生产环境地址:beehive.imfdj.top

技术栈

前端:Vue2全家桶 + Element-ui + Axios + Vue-socket.io + Sass 前端项目github地址

后端:Egg.js + Sequelize + Jwt + Mysql + Redis + Socket + Swagger 后端项目github地址

说明

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^

或者您可以 "follow" 一下,我会不断开源更多的有趣的项目。如:Vue3 + NestJS + TypeScript ✨

如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR 👍

目标功能

  • [x] 登录、注册 -- 完成
  • [x] github授权登录 -- 完成
  • [x] 找回密码 -- 完成
  • [x] 滑块验证 -- 完成
  • [x] 邮箱验证 -- 完成
  • [x] 动态首页 -- 完成
  • [x] 个人设置 -- 完成
  • [x] 用户管理 -- 完成
  • [x] 角色管理 -- 完成
  • [x] 菜单管理 -- 完成
  • [x] 资源管理 -- 完成
  • [x] 操作日志 -- 完成
  • [x] 动态菜单 -- 完成
  • [x] 部门管理 -- 完成
  • [x] 项目列表 -- 完成
  • [x] 任务看板 -- 完成
  • [x] 任务列表 -- 完成
  • [x] 项目文件 -- 完成
  • [x] 项目概览 -- 完成
  • [x] 项目成员 -- 完成
  • [x] 项目邀请 -- 完成
  • [x] 项目设置 -- 完成
  • [x] 项目回收站 -- 完成
  • [x] 任务筛选 -- 完成
  • [x] 任务详情 -- 完成
  • [x] 任务标签 -- 完成
  • [x] 任务参与者 -- 完成
  • [x] 任务动态 -- 完成
  • [x] 任务工时 -- 完成
  • [x] 任务关联文件 -- 完成
  • [x] 任务更新即时同步 -- 完成
  • [x] 公开项目的业务权限控制(非项目成员不可编辑项目) -- 完成
  • [x] 项目模板 -- 完成
  • [x] 消息提醒 -- 完成
  • [x] 工作台 -- 完成
  • [x] 站内信 -- 完成
  • [x] 页面元素权限控制 -- 完成
  • [ ] 项目版本 -- 待开发
  • [ ] 项目日程 -- 待开发

部分截图

后端egg项目部署

运行环境:

Node.js >= v10; Mysql >= 5.7; Redis >= 5.0;

git clone https://github.com/Imfdj/egg-beehive.git

cd egg-beehive

npm install 或 yarn(推荐)

将database目录下的egg-beehive-dev.sql和egg-beehive-test.sql导入mysql(推荐navicat)。

在config目录下的config.local.js和config.unittest.js中的exports.sequelize、exports.redis、exports.io.redis下填入Mysql和Redis的配置参数

npm run dev

npm run test-local (单元测试)

如何快速CRUD:

在generator文件夹中的config.js文件中定义各个字段的描述,完成后执行npm run generator-entity。
里面还有很多config-*.js的配置文件可供参考。也可以在template文件夹中自定义各个文件的模板。

// 这是一个字段的描述模板
fieldsItemExample: {
    name: 'xx_id',
    type: 'INTEGER',
    length: 11,
    min: 1,
    max: 1,
    required: true,
    description: '这里是描述', // 供swagger使用
    primaryKey: false, // 是否为主键
    unique: false, // 是否唯一
    allowNull: false, // 是否允许为空
    autoIncrement: false, // 是否自增
    defaultValue: '', // 数据库表中字段的默认值
    comment: '外键', // 数据库表中字段的描述
    references: {
      // 外键设置
      model: 'xxxs', // 外键关联表
      key: 'id', // 外键字段名
    },
    onUpdate: 'NO ACTION', // 外键更新约束 CASCADE RESTRICT SET NULL SET DEFAULT NO ACTION
    onDelete: 'NO ACTION', // 外键删除约束 CASCADE RESTRICT SET NULL SET DEFAULT NO ACTION
}

前端vue项目部署

git clone https://github.com/Imfdj/vue-beehive.git

cd vue-beehive

npm install 或 yarn(推荐)

npm run serve

功能设计

后端设计

数据库设计

License

MIT

Copyright (c) 2021 Imfdj

相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。   相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情: https://www.aliyun.com/product/rds/mysql 
目录
相关文章
|
8月前
|
Ubuntu 安全 关系型数据库
安装与配置MySQL 8 on Ubuntu,包括权限授予、数据库备份及远程连接指南
以上步骤提供了在Ubuntu上从头开始设置、配置、授权、备份及恢复一个基础但完整的MySQL环境所需知识点。
877 7
|
前端开发 JavaScript UED
探索Python Django中的WebSocket集成:为前后端分离应用添加实时通信功能
通过在Django项目中集成Channels和WebSocket,我们能够为前后端分离的应用添加实时通信功能,实现诸如在线聊天、实时数据更新等交互式场景。这不仅增强了应用的功能性,也提升了用户体验。随着实时Web应用的日益普及,掌握Django Channels和WebSocket的集成将为开发者开启新的可能性,推动Web应用的发展迈向更高层次的实时性和交互性。
413 1
|
运维 负载均衡 安全
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
457 0
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
507 0
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
519 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
614 1
|
SQL NoSQL 关系型数据库
|
关系型数据库 MySQL Docker
docker环境下mysql镜像启动后权限更改问题的解决
在Docker环境下运行MySQL容器时,权限问题是一个常见的困扰。通过正确设置目录和文件的权限,可以确保MySQL容器顺利启动并正常运行。本文提供了多种解决方案,包括在主机上设置正确的权限、使用Dockerfile和Docker Compose进行配置、在容器启动后手动更改权限以及使用 `init`脚本自动更改权限。根据实际情况选择合适的方法,可以有效解决MySQL容器启动后的权限问题。希望本文对您在Docker环境下运行MySQL容器有所帮助。
2735 1
|
存储 关系型数据库 MySQL
基于案例分析 MySQL 权限认证中的具体优先原则
【10月更文挑战第26天】本文通过具体案例分析了MySQL权限认证中的优先原则,包括全局权限、数据库级别权限和表级别权限的设置与优先级。全局权限优先于数据库级别权限,后者又优先于表级别权限。在权限冲突时,更严格的权限将被优先执行,确保数据库的安全性与资源合理分配。
307 4
|
设计模式 JavaScript 前端开发
vue的MVVM模型
MVVM(Model-View-ViewModel)是Vue框架的核心设计模式,将应用分为模型(数据和业务逻辑)、视图(用户界面)和视图模型(数据转换与用户交互)。其特点包括数据驱动、组件化、双向数据绑定及响应式,提高了开发效率和应用质量。【10月更文挑战第2天】

推荐镜像

更多