vlife-admin-react 介绍

vlife-admin-react 是V-LIFE快速开发平台前端 react 实现的权限管理系统，可作为大多数信息系统的基础开发骨架使用。

特点

• [react 技术栈]: 市面上多为 vue-admin 的骨架系统，好用的 react-admin 很少，可作为项目骨架，也可作为学习 react 的参照项目，帮你快速了解 react 的方方面面.
• [UI 组件丰富]: 前端 UI 组件库使用字节跳动开源的semi,拥有多种作主题(飞书、抖音、火山、剪映)和暗色模式，让你的应用显著区别 elementUi,antd 的风格系统。
• [代码可生成]: 已开放了将服务端数据模型及接口对应生成前端数据接口及 API 的访问代码(包含注释)，前端只用写页面功能即可. 基本可以告别看接口文档了
• [业务组件库]: 使用 ts4+hooks 进行组件式开发,已经封装了 10+的模块页面级的业务组件库,让你开发功能速度显著提升
• [开箱即用]: 信息系统骨架权限\用户管理功能已经全部集成进来,完成相关业务模块开发即可

演示地址

http://admin.vlife.cc

V-LFIFE 快速研发平台开源地址

https://githubs.com/wwwlike/vlife

vlife-admin 配套服务端开源地址

https://githubs.com/wwwlike/vlife-admin

技术栈

采用 react17+结合 hooks 进行开发

• react
• react-router
• typescript4
• react-router
• react-redux
• tailwindcss 原子化 css 方案植入
• axios(http 请求模块，可用于前端任何场景，很强大 👍)
• ahooks ：alibaba 自定义 hooks 最佳实践
• formily： alibaba 表单解决方案，根据配置产生动态表单
• semi： 字节跳动前端开源组件，可更换主题(飞书、抖音等)
• echart 图标组件
• wangeditor 富文本编辑器
• react-draggable(拖拽模块)
• screenfull(全屏插件)
• animate.css(css 动画库)
• react-loadable(代码拆分，按需加载，预加载，样样都行)

其他小细节省略

功能模块

系统管理(sys)

1. 用户管理(sysUser)
2. 部门管理(sysDept)
3. 机构管理(sysOrg)
4. 字典管理(sysDict)
5. 地区管理(sysArea)

权限管理

6. 权限资源管理(sysResources)
7. 角色管理(sysRole)
8. 权限组管理(sysGroup)
9. 角色权限组绑定(sysRoleGroup)

操作权限设计

资源/角色/权限组/用户的关系

sysResources<-sysRole ->sysRoleGroup<- sysGroup ->sysUser

• 每个资源sysResource有一个归属角色sysRole,
• 角色sysRole与权限组sysGroup是多对多关联->sysRoleGroup
• 用户sysUser是和权限组sysGroup关联的.

通过这样的关联关系,让用户拥有该他所在权限组对应角色下的所有资源的权限.

代码生成

访问http://admin.vlife.cc上传后端title.json 文件可以生成和服务端匹配的出参入参数据模型定义代码,和 API 接口的调用代码.

数据模型代码

示例,可生成出参\入参的数据模型接口和中文注释 /src/mvc/sysArea.ts

// 行政区划
export interface SysArea extends DbEntity {
  code: string; // 区划编码
  pcode: string; // 上级地区编码
  level: string; // 地区类型
  name: string; // 区划名称
}
// 地区查询条件
export interface SysAreaPageReq extends PageQuery {
  level: string[]; // 地区类型
  name: string; // 区划名称
}

API 请求代码

示例:可生成与服务端完全一致的 API 接口调用代码 /src/mvc/sysArea.ts

/**
 * 保存行政区划;
 * @param dto 行政区划;
 * @return 行政区划;
 */
export const save = (dto: SysArea): Promise<Result<SysArea>> => {
  return apiClient.post(`/sysArea/save`, { params: dto });
};

/**
 * 明细查询行政区划;
 * @param id 主键id;
 * @return 行政区划;
 */
export const detail = (id: string): Promise<Result<SysArea>> => {
  return apiClient.get(`/sysArea/detail/${id}`);
};
/**
 * 逻辑删除;
 * @param id 主键id;
 * @return 已删除数量;
 */
export const remove = (id: string): Promise<Result<number>> => {
  return apiClient.delete(`/sysArea/remove/${id}`);
};

联系帮助

• QQ 讨论群：786134846

• 微信：vlifeBoot