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

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

  •  
  •   Imfdj · 85 天前 · 2642 次点击
    这是一个创建于 85 天前的主题,其中的信息可能已经有所发展或是发生改变。

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