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

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
简介: 🖖基于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

相关实践学习
如何在云端创建MySQL数据库
开始实验后,系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助     相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
2月前
|
安全 关系型数据库 MySQL
PHP与MySQL交互:从入门到实践
【9月更文挑战第20天】在数字时代的浪潮中,掌握PHP与MySQL的互动成为了开发动态网站和应用程序的关键。本文将通过简明的语言和实例,引导你理解PHP如何与MySQL数据库进行对话,开启你的编程之旅。我们将从连接数据库开始,逐步深入到执行查询、处理结果,以及应对常见的挑战。无论你是初学者还是希望提升技能的开发者,这篇文章都将为你提供实用的知识和技巧。让我们一起探索PHP与MySQL交互的世界,解锁数据的力量!
|
2月前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
159 0
|
7天前
|
关系型数据库 MySQL Linux
Linux环境下MySQL数据库自动定时备份实践
数据库备份是确保数据安全的重要措施。在Linux环境下,实现MySQL数据库的自动定时备份可以通过多种方式完成。本文将介绍如何使用`cron`定时任务和`mysqldump`工具来实现MySQL数据库的每日自动备份。
23 3
|
6天前
|
存储 监控 关系型数据库
MySQL自增ID耗尽解决方案:应对策略与实践技巧
在MySQL数据库中,自增ID(AUTO_INCREMENT)是一种特殊的属性,用于自动为新插入的行生成唯一的标识符。然而,当自增ID达到其最大值时,会发生什么?又该如何解决?本文将探讨MySQL自增ID耗尽的问题,并提供一些实用的解决方案。
13 1
|
21天前
|
NoSQL 关系型数据库 MySQL
MySQL与Redis协同作战:百万级数据统计优化实践
【10月更文挑战第21天】 在处理大规模数据集时,传统的单体数据库解决方案往往力不从心。MySQL和Redis的组合提供了一种高效的解决方案,通过将数据库操作与高速缓存相结合,可以显著提升数据处理的性能。本文将分享一次实际的优化案例,探讨如何利用MySQL和Redis共同实现百万级数据统计的优化。
54 9
|
20天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
19 4
|
2月前
|
关系型数据库 MySQL 数据安全/隐私保护
docker应用部署---MySQL的部署配置
这篇文章介绍了如何使用Docker部署MySQL数据库,包括搜索和拉取MySQL镜像、创建容器并设置端口映射和目录映射、进入容器操作MySQL,以及如何使用外部机器连接容器中的MySQL。
docker应用部署---MySQL的部署配置
|
1月前
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【10月更文挑战第3天】随着移动互联网的发展,小程序因便捷的用户体验和社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的WebSocket实时通信实践,包括其实时通信、长连接及双向通信的特点,并通过实时聊天、推送、游戏和监控等功能的实现,展示了WebSocket在小程序中的应用。开发者需注意安全性、性能及兼容性等问题,以保障小程序的稳定运行和用户体验。
44 7
|
2月前
|
JavaScript 前端开发 开发工具
五子棋小游戏(JS+Node+Websocket)可分房间对战
本文介绍了通过JS、Node和WebSocket实现的五子棋游戏,支持多人在线对战和观战功能。
47 1
五子棋小游戏(JS+Node+Websocket)可分房间对战
|
1月前
|
关系型数据库 MySQL 数据库
使用Docker部署的MySQL数据库,数据表里的中文读取之后变成问号,如何处理?
【10月更文挑战第1天】使用Docker部署的MySQL数据库,数据表里的中文读取之后变成问号,如何处理?
59 3