V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Imfdj
V2EX  ›  程序员

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

  •  
  •   Imfdj · 10 天前 · 2280 次点击

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