Skip to content

🖖基于Vue+Egg.js的JS全栈项目。动态菜单,RBAC权限模型,Websocket实现站内信。

License

Notifications You must be signed in to change notification settings

Imfdj/vue-beehive

Folders and files

NameName
Last commit message
Last commit date

Latest commit

be858f3 · Mar 22, 2025
Mar 22, 2025
Sep 10, 2021
Sep 12, 2021
Apr 9, 2021
Apr 9, 2021
Nov 26, 2020
Nov 26, 2020
Nov 26, 2020
Nov 26, 2020
Apr 9, 2021
Apr 9, 2021
Nov 26, 2020
Sep 12, 2021
Mar 22, 2025
Apr 9, 2021
Apr 9, 2021
Apr 9, 2021
Sep 6, 2021
Nov 26, 2020
Dec 28, 2020
Sep 5, 2021
Jul 28, 2021

Repository files navigation

Beehive logo

License MITCurrent versionCurrent version

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

About

🖖基于Vue+Egg.js的JS全栈项目。动态菜单,RBAC权限模型,Websocket实现站内信。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published