前后端分离 Vue + Egg.js + Mysql 的 JS 全栈实践。动态菜单, RBAC 权限模型, WebSocket 实现站内信。已部署到线上! - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
Imfdj
V2EX    程序员

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

  •  
  •   Imfdj 2021-09-13 10:09:21 +08:00 4222 次点击
    这是一个创建于 1489 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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  
       2021-09-13 10:13:47 +08:00
    666
    binbin0915
        2
    binbin0915  
       2021-09-13 10:40:47 +08:00
    学习一下先~~~~
    dany813
        3
    dany813  
       2021-09-13 10:52:20 +08:00
    老哥 数据库的图,哪个软件画的
    kylix
        4
    kylix  
       2021-09-13 10:58:15 +08:00
    快到收藏夹里来~~~
    yunyuyuan
        5
    yunyuyuan  
       2021-09-13 10:59:24 +08:00
    看起来挺牛逼的,老哥一个人做的?感觉可以做 to B 了,类似 tower
    Imfdj
        6
    Imfdj  
    OP
       2021-09-13 10:59:48 +08:00
    @dany813 Navicat Premium 的模型,导出的图片。
    xuxuxu123
        7
    xuxuxu123  
       2021-09-13 11:00:24 +08:00
    云效 2020 版?部分界面真的很像
    Imfdj
       
    Imfdj  
    OP
       2021-09-13 11:06:06 +08:00
    @yunyuyuan 一个人断断续续弄了大半年了。。。
    sciel
        9
    sciel  
       2021-09-13 11:12:50 +08:00
    移动端可以不考虑适配一下么。后面很多客户办公都会用 pad,手机。
    Imfdj
        10
    Imfdj  
    OP
       2021-09-13 11:39:52 +08:00
    @sciel 等啥时候,我头发长回来了再说吧。。。
    ccong
        11
    ccong  
       2021-09-13 11:46:42 +08:00
    老哥动手能力好强,github 关注了
    Imfdj
        12
    Imfdj  
    OP
       2021-09-13 11:59:30 +08:00
    @ccong 谢谢,回关了!
    lichao
        13
    lichao  
       2021-09-13 12:15:33 +08:00
    楼主有 Rails 背景?
    dengshen
        14
    dengshen  
       2021-09-13 12:27:24 +08:00 via iPhone
    nestjs 好评
    Imfdj
        15
    Imfdj  
    OP
       2021-09-13 13:54:38 +08:00
    @lichao 没有。。。
    Imfd
        16
    Imfdj  
    OP
       2021-09-13 13:55:21 +08:00
    @dengshen 用了都说好!
    podel
        17
    podel  
       2021-09-13 14:38:46 +08:00
    妈呀 NB 吖。 咋直接就全开源了呢。这种不是可以商业化的么。
    sinalvee
        18
    sinalvee  
       2021-09-13 15:13:07 +08:00
    6666,项目和任务看上去很像 TB
    Imfdj
        19
    Imfdj  
    OP
       2021-09-13 15:27:58 +08:00
    @podel 离商业化还差的远呢。。。
    Imfdj
        20
    Imfdj  
    OP
       2021-09-13 15:29:02 +08:00
    @sinalvee TB 是说的 Teambetion 吗?
    hb1988
        21
    hb1988  
       2021-09-13 15:44:29 +08:00
    厉害,又是一位动手能力值得借鉴的老哥(滑稽)
    Foryou920
        22
    Foryou920  
       2021-09-13 15:50:26 +08:00
    太强了,star 一个
    sinalvee
        23
    sinalvee  
       2021-09-13 15:51:59 +08:00
    @Imfdj #20 是的
    star7th
        24
    star7th  
       2021-09-13 16:06:13 +08:00
    支持一下
    Imfdj
        25
    Imfdj  
    OP
       2021-09-13 16:06:33 +08:00
    @sinalvee 有参考了 Teambetion 的。。。 也看了市面上比较火的项目管理系统,任务几乎都是几个状态,可拖拽的那种。
    GG668v26Fd55CP5W
        26
    GG668v26Fd55CP5W  
       2021-09-13 16:10:04 +08:00 via iPhone
    前端为什么没有用 vue3 ?
    Imfdj
        27
    Imfdj  
    OP
       2021-09-13 16:10:42 +08:00
    @hb1988 左手右手一个慢动作~~
    Imfdj
        28
    Imfdj  
    OP
       2021-09-13 16:11:11 +08:00
    @Foryou920 谢谢!
    Imfdj
        29
    Imfdj  
    OP
       2021-09-13 16:11:19 +08:00
    @star7th 谢谢!
    StrongNoodles
        30
    StrongNoodles  
       2021-09-13 16:15:27 +08:00
    收藏夹吃灰=。=
    Imfdj
        31
    Imfdj  
    OP
       2021-09-13 16:17:26 +08:00
    @falcon05 这个项目刚开启的时候,Vue3 才刚刚发布 3.0 呢。。。
    GG668v26Fd55CP5W
        32
    GG668v26Fd55CP5W  
       2021-09-13 16:29:51 +08:00
    @Imfdj 原来如此,那这项目也做了很长时间,不容易。
    cking
        33
    cking  
       2021-09-13 16:32:25 +08:00
    star 了 牛逼 就这行动力 牛逼
    Imfdj
        34
    Imfdj  
    OP
       2021-09-13 16:33:55 +08:00
    @StrongNoodles =。= 让他吃~~
    Imfdj
        35
    Imfdj  
    OP
       2021-09-13 16:35:22 +08:00
    @falcon05 啊,好久了,快一年了都!你们公司都已经用上 Vue3 了吗?
    GG668v26Fd55CP5W
        36
    GG668v26Fd55CP5W  
       2021-09-13 16:38:48 +08:00
    @Imfdj 没有,只有我在个人的小项目用,公司还在用 jQuery 。。。
    Imfdj
        37
    Imfdj  
    OP
       2021-09-13 16:39:53 +08:00
    @cking 秃就秃,欧力给~~
    Imfdj
        38
    Imfdj  
    OP
       2021-09-13 16:41:39 +08:00
    @falcon05 不会还要适配 IE8 吧?给不给用 vue2 呢?
    longgediyi999
    39
    longgediyi999  
       2021-09-13 21:44:20 +08:00 via iPhone
    整挺好
    Imfdj
        40
    Imfdj  
    OP
       2021-09-14 12:15:14 +08:00
    lovelyxiaod
        41
    lovelyxiaod  
       2021-09-15 00:19:03 +08:00
    鲁班七号直呼牛逼。
    dragonszy
        42
    dragonszy  
       2021-09-17 16:41:18 +08:00
    @Imfdj 兄得看一下邮件
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     6121 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 32ms UTC 02:24 PVG 10:24 LAX 19:24 JFK 22:24
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86