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

[Imfdj]

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 👍

目标功能

登录、注册 -- 完成

github 授权登录 -- 完成

找回密码 -- 完成

滑块验证 -- 完成

邮箱验证 -- 完成

动态首页 -- 完成

个人设置 -- 完成

用户管理 -- 完成

角色管理 -- 完成

菜单管理 -- 完成

资源管理 -- 完成

操作日志 -- 完成

动态菜单 -- 完成

部门管理 -- 完成

项目列表 -- 完成

任务看板 -- 完成

任务列表 -- 完成

项目文件 -- 完成

项目概览 -- 完成

项目成员 -- 完成

项目邀请 -- 完成

项目设置 -- 完成

项目回收站 -- 完成

任务筛选 -- 完成

任务详情 -- 完成

任务标签 -- 完成

任务参与者 -- 完成

任务动态 -- 完成

任务工时 -- 完成

任务关联文件 -- 完成

任务更新即时同步 -- 完成

公开项目的业务权限控制（非项目成员不可编辑项目） -- 完成

项目模板 -- 完成

消息提醒 -- 完成

工作台 -- 完成

站内信 -- 完成

页面元素权限控制 -- 完成

项目版本 -- 待开发

项目日程 -- 待开发

部分截图

后端 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

[MX123]

666

[binbin0915]

学习一下先~~~~

[dany813]

老哥 数据库的图，哪个软件画的

[kylix]

快到收藏夹里来~~~

[yunyuyuan]

看起来挺牛逼的，老哥一个人做的？感觉可以做 to B 了，类似 tower

[Imfdj]

@dany813 Navicat Premium 的模型，导出的图片。

[xuxuxu123]

云效 2020 版？部分界面真的很像

[Imfdj]

@yunyuyuan 一个人断断续续弄了大半年了。。。

[sciel]

移动端可以不考虑适配一下么😄。后面很多客户办公都会用 pad，手机。

[Imfdj]

@sciel 等啥时候，我头发长回来了再说吧。。。😄

[ccong]

老哥动手能力好强，github 关注了

[Imfdj]

@ccong 谢谢，回关了！

[lichao]

楼主有 Rails 背景？

[dengshen]

nestjs 好评

[Imfdj]

@lichao 没有。。。

[Imfdj]

@dengshen 用了都说好！

[podel]

妈呀 NB 吖。 咋直接就全开源了呢。这种不是可以商业化的么。

[sinalvee]

6666，项目和任务看上去很像 TB

[Imfdj]

@podel 离商业化还差的远呢。。。😄

[Imfdj]

@sinalvee TB 是说的 Teambetion 吗？

[hb1988]

厉害，又是一位动手能力值得借鉴的老哥（滑稽）

[Foryou920]

太强了，star 一个

[sinalvee]

@Imfdj #20 是的

[star7th]

支持一下

[Imfdj]

@sinalvee 有参考了 Teambetion 的。。。😄 也看了市面上比较火的项目管理系统，任务几乎都是几个状态，可拖拽的那种。

[falcon05]

前端为什么没有用 vue3 ？

[Imfdj]

@hb1988 左手右手一个慢动作~~😄

[Imfdj]

@Foryou920 谢谢！😄

[Imfdj]

@star7th 谢谢！😄

[StrongNoodles]

收藏夹吃灰=。=

[Imfdj]

@falcon05 这个项目刚开启的时候，Vue3 才刚刚发布 3.0 呢。。。

[falcon05]

@Imfdj 原来如此，那这项目也做了很长时间，不容易。

[cking]

star 了 牛逼 就这行动力 牛逼

[Imfdj]

@StrongNoodles =。= 让他吃~~

[Imfdj]

@falcon05 啊，好久了，快一年了都！你们公司都已经用上 Vue3 了吗？

[falcon05]

@Imfdj 没有，只有我在个人的小项目用，公司还在用 jQuery 。。。

[Imfdj]

@cking 秃就秃，欧力给~~😄

[Imfdj]

@falcon05 不会还要适配 IE8 吧？给不给用 vue2 呢？

[longgediyi999]

整挺好

[Imfdj]

@longgediyi999 😄

[lovelyxiaod]

鲁班七号直呼牛逼。

[dragonszy]

@Imfdj 兄得看一下邮件