关于vue.js:前后端分离-Vue-Eggjs-Mysql-的JS全栈实践动态菜单RBAC权限模型WebSocket实现站内信

46次阅读

共计 2709 个字符,预计需要花费 7 分钟才能阅读完成。

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 👍

指标性能

  • [x] 登录、注册 — 实现
  • [x] github 受权登录 — 实现
  • [x] 找回明码 — 实现
  • [x] 滑块验证 — 实现
  • [x] 邮箱验证 — 实现
  • [x] 动静首页 — 实现
  • [x] 集体设置 — 实现
  • [x] 用户治理 — 实现
  • [x] 角色治理 — 实现
  • [x] 菜单治理 — 实现
  • [x] 资源管理 — 实现
  • [x] 操作日志 — 实现
  • [x] 动静菜单 — 实现
  • [x] 部门治理 — 实现
  • [x] 我的项目列表 — 实现
  • [x] 工作看板 — 实现
  • [x] 工作列表 — 实现
  • [x] 我的项目文件 — 实现
  • [x] 我的项目概览 — 实现
  • [x] 我的项目成员 — 实现
  • [x] 我的项目邀请 — 实现
  • [x] 我的项目设置 — 实现
  • [x] 我的项目回收站 — 实现
  • [x] 工作筛选 — 实现
  • [x] 工作详情 — 实现
  • [x] 工作标签 — 实现
  • [x] 工作参与者 — 实现
  • [x] 工作动静 — 实现
  • [x] 工作工时 — 实现
  • [x] 工作关联文件 — 实现
  • [x] 工作更新即时同步 — 实现
  • [x] 公开我的项目的业务权限管制(非我的项目成员不可编辑我的项目)— 实现
  • [x] 我的项目模板 — 实现
  • [x] 音讯揭示 — 实现
  • [x] 工作台 — 实现
  • [x] 站内信 — 实现
  • [x] 页面元素权限管制 — 实现
  • [] 我的项目版本 — 待开发
  • [] 我的项目日程 — 待开发

局部截图

后端 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

正文完
 0