• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Imfdj
V2EX  ›  程序员

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

  •  
  •   Imfdj · Sep 13, 2021 · 5524 views
    This topic created in 1878 days ago, the information mentioned may be changed or developed.

    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

    42 replies  •  2021-09-17 16:41:18 +08:00
    MX123
    MX123
    Sep 13, 2021
    1
    666
    binbin0915
    binbin0915
    Sep 13, 2021
    2
    学习一下先~~~~
    dany813
    dany813
    Sep 13, 2021
    3
    老哥 数据库的图,哪个软件画的
    kylix
    kylix
    Sep 13, 2021
    4
    快到收藏夹里来~~~
    yunyuyuan
    yunyuyuan
    Sep 13, 2021
    5
    看起来挺牛逼的,老哥一个人做的?感觉可以做 to B 了,类似 tower
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    6
    @dany813 Navicat Premium 的模型,导出的图片。
    xuxuxu123
    xuxuxu123
    Sep 13, 2021
    7
    云效 2020 版?部分界面真的很像
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    8
    @yunyuyuan 一个人断断续续弄了大半年了。。。
    apple2026
    apple2026
    Sep 13, 2021
    9
    移动端可以不考虑适配一下么😄。后面很多客户办公都会用 pad,手机。
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    10
    @sciel 等啥时候,我头发长回来了再说吧。。。😄
    ccong
    ccong
    Sep 13, 2021
    11
    老哥动手能力好强,github 关注了
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    12
    @ccong 谢谢,回关了!
    lichao
    lichao
    Sep 13, 2021
    13
    楼主有 Rails 背景?
    dengshen
    dengshen
    Sep 13, 2021 via iPhone
    14
    nestjs 好评
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    15
    @lichao 没有。。。
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    16
    @dengshen 用了都说好!
    podel
    podel
    Sep 13, 2021
    17
    妈呀 NB 吖。 咋直接就全开源了呢。这种不是可以商业化的么。
    sinalvee
    sinalvee
    Sep 13, 2021
    18
    6666,项目和任务看上去很像 TB
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    19
    @podel 离商业化还差的远呢。。。😄
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    20
    @sinalvee TB 是说的 Teambetion 吗?
    hb1988
    hb1988
    Sep 13, 2021
    21
    厉害,又是一位动手能力值得借鉴的老哥(滑稽)
    Foryou920
    Foryou920
    Sep 13, 2021
    22
    太强了,star 一个
    sinalvee
    sinalvee
    Sep 13, 2021
    23
    @Imfdj #20 是的
    star7th
    star7th
    Sep 13, 2021
    24
    支持一下
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    25
    @sinalvee 有参考了 Teambetion 的。。。😄 也看了市面上比较火的项目管理系统,任务几乎都是几个状态,可拖拽的那种。
    GG668v26Fd55CP5W
    GG668v26Fd55CP5W
    Sep 13, 2021 via iPhone
    26
    前端为什么没有用 vue3 ?
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    27
    @hb1988 左手右手一个慢动作~~😄
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    28
    @Foryou920 谢谢!😄
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    29
    @star7th 谢谢!😄
    StrongNoodles
    StrongNoodles
    Sep 13, 2021
    30
    收藏夹吃灰=。=
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    31
    @falcon05 这个项目刚开启的时候,Vue3 才刚刚发布 3.0 呢。。。
    GG668v26Fd55CP5W
    GG668v26Fd55CP5W
    Sep 13, 2021
    32
    @Imfdj 原来如此,那这项目也做了很长时间,不容易。
    cking
    cking
    Sep 13, 2021
    33
    star 了 牛逼 就这行动力 牛逼
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    34
    @StrongNoodles =。= 让他吃~~
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    35
    @falcon05 啊,好久了,快一年了都!你们公司都已经用上 Vue3 了吗?
    GG668v26Fd55CP5W
    GG668v26Fd55CP5W
    Sep 13, 2021
    36
    @Imfdj 没有,只有我在个人的小项目用,公司还在用 jQuery 。。。
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    37
    @cking 秃就秃,欧力给~~😄
    Imfdj
    Imfdj
    OP
    Sep 13, 2021
    38
    @falcon05 不会还要适配 IE8 吧?给不给用 vue2 呢?
    longgediyi999
    longgediyi999
    Sep 13, 2021 via iPhone
    39
    整挺好
    Imfdj
    Imfdj
    OP
    Sep 14, 2021
    40
    lovelyxiaod
    lovelyxiaod
    Sep 15, 2021
    41
    鲁班七号直呼牛逼。
    dragonszy
    dragonszy
    Sep 17, 2021
    42
    @Imfdj 兄得看一下邮件
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1864 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 74ms · UTC 00:04 · PVG 08:04 · LAX 16:04 · JFK 19:04
    ♥ Do have faith in what you're doing.