React Admin Template

注意 线上预览地址，现在无接口可访问，请在本地预览，会尽快解决

特性

• 💡 TypeScript: 应用程序级 JavaScript 的语言
• 💎 优雅美观：基于 Ant Design 体系精心设计
• 📐 常见设计模式：提炼自中后台应用的典型页面和场景
• 🚀 最新技术栈：使用 React/umi/dva/ant-design 等前端前沿技术开发
• 🌐 国际化：内建业界通用的国际化方案
• ⚙️ 最佳实践：良好的工程实践助您持续产出高质量代码
• 🔢 Mock 数据：实用的本地数据调试方案
• 🔒 优秀的权限设计：目前能找到的最好的权限实现方案

参与开发

• 🎉🎉🎉 欢迎 PR
• 🌴🌴🌴 钉钉交流群(23355178)

使用钉钉扫描下方二维码

使用微信扫描下方二维码(过期请留言)

使用案例

如果你的项目使用了此模板 可给出访问链接

• fashop-admin 正在开发中...

广告

awesome-frontend 整理前端相关的博客、教程、库... 欢迎查阅

目录

• 使用
• 技术栈
• API
• 关于权限
• 项目目录
• 关于打包
• commit-message
• 自定义图标
• 借鉴项目
• 最佳实践

使用

1. 安装 NodeJs 推荐安装最新稳定版

2. 全局安装 yarn(可跳过)

npm install --global yarn

3. 安装依赖

npm run bootstrap 或者 yarn bootstrap

4. 开发

npm run start 或者 yarn start

5. 编译

npm run build 或者 yarn build

本地开发后端接口配置

可用 server.config.ts 下的配置，使用此项可解决冲突风险

可在 config 目下新建local-server.config.ts文件

内容如下:

export default {
  baseURL: 'https://api.jiumao.com'
};

技术栈

• 框架：React、Umi
• 组件库：ant-design
• 开发语言：TypeScript
• Ajax 库：Axios
• 样式：Less

路由配置

系统采用手动配置路由的形式

相关字典

icon

配合iconfont使用

• 参数类型: string
• 参数描述: 左侧菜单的 Icon
• 默认值: 无

name

• 参数类型: string
• 参数描述: 参数名称 配合多言插件使用 添加路由请在 locals 目录下的 menu.ts 添加对应项
• 默认值: 无
• examples:

// router.config.ts
{
  path: '/module1',
  name: 'module1',
  component: 'component path',
  routes: [
    path: '/module1/page1',
    name: 'page1',
    component: 'component path',
  ]
}

// menu.ts 添加下面几行配置
'module1': '***',
'module1.page1': '***'

authority

配合Policy使用

• 参数类型: string | string[]
• 参数描述: 权限 控制是否显示左侧菜单 以及路由拦截
• 默认值: 无

hideBreadcrumb

• 参数类型: boolean
• 参数描述: 是否显示面包屑
• 默认值: true

hideInMenu

• 参数类型: boolean
• 参数描述: 可以在菜单中不展示这个路由，包括子路由
• 默认值: false

hideChildrenInMenu

• 参数类型: boolean
• 参数描述: 用于隐藏不需要在菜单中展示的子路由
• 默认值: false

API

nest-serve-starter 正在开发中...

关于权限

权限实现参考参考阿里云权限 阿里云 Policy 语法结构

有用户、用户组、操作、权限策略四个概念

• 用户: 系统用户 可直接绑定权限策略 用户绑定权限策略后将不再继承用户组的权限
• 用户组: 职责相同的用户的集合 可绑定策略 可添加用户 用户自动继承该用户组的权限，用户属于多个用户组时，会同时继承多个用户组的权限
• 操作: 基本对应后端 API,会存在意外情况，比如某个前端资源的访问权限
• 权限策略: 操作的集合，一般为每个页面，或者每个模块的权限集合，方便赋权

注意

权限分为allow和deny两种，deny优先

内部实现

Policy 提供权限策略解析、验证等功能

项目目录

├── config                      # UMI配置相关
│   ├── config.ts               # umi配置文件
│   ├── plugin.config.ts        # umi插件配置
│   ├── router.config.ts        # 路由相关配置
│   ├── server.config.ts        # 后端服务地址配置
│   └── theme.config.ts         # 定制化ant-design
├── docker                      # docker相关配置
│   ├── Dockerfile              # docker配置文件
│   └── nginx.conf              # nginx相关配置
├── mock                        # 后端接口模拟
│   ├── notices.ts              # 通知相关
│   └── users.ts                # 用户相关
├── public                      # 静态资源
│   ├── favicon.png             # favicon
│   └──
├── src                         # 主目录
│   ├── assets                  # 静态资源
│   ├── components              # 全局公共组件
│   │   ├── authorized          # 面包屑组件
│   │   ├── drawer-wrapper      # 对drawer二次封装
│   │   ├── exception           # 异常组件
│   │   ├── global-footer       # 全局Footer组件
│   │   ├── global-header       # 全局Header组件
│   │   ├── header-dropdown     #
│   │   ├── header-search       # header搜索组件
│   │   ├── icon-font           # icon组件 具体请参考ant-design自定义图标方案
│   │   ├── notice-icon         # 消息通知组件
│   │   ├── page-header-wrapper # 对page-header二次封装
│   │   ├── page-loading        # loading组件
│   │   ├── screen-full         # 全屏组件
│   │   ├── select-lang         # 选择语言组件
│   │   ├── notice-icon         # 消息通知组件
│   │   ├── send-code           # 发送验证码组件
│   │   ├── side-menu           # 左侧菜单组件
│   │   ├── tab-pages           # 页面Tab组件
│   │   └──                     #
│   ├── config                  # 项目配置
│   │   ├── index.ts            # 项目主要变量配置
│   │   └──
│   ├── layouts                 # 项目常用布局
│   ├── locales                 # 多语言目录
│   ├── models                  # 全局model
│   ├── pages                   # 所有页面
│   ├── services                # 后端接口相关
│   ├── styles                  # 样式目录
│   ├── utils                   # 全局工具方法目录
│   ├── global.ts               # 全局TS umi会直接引入
│   └── global.less             # 全局样式 umi会直接引入
├── .editorconfig               # IDE设置文件
├── .gitignore                  # Git忽略文件
├── .nvmrc                      #
├── .prettierignore             #
├── .prettierrc.js              #
├── .stylelintrc                #
├── commitlint.config.js        #
├── jest.config.js              #
├── LICENSE                     #
├── lint-staged.config.js       #
├── package.json                # package.json
├── README.md                   # 项目描述文件
├── tsconfig.json               # typescript配置文件
└── yarn.lock                   # yarn生成文件

关于打包

提供build:test、build:prod两个编译命令、可结合 CI 使用

请在 config/server.config.ts中配置各个环境的 API 地址

commit-message

git 提交信息使用commitlint 进行规范

具体配置以及説明请查看commitlint-config-jiumao

自定义图标

采用 ant-design 提供的解决方案，具体请查看自定义图标

在 /src/config/index.ts 中配置 SETTING_DEFAULT_CONFIG.iconFontUrl

借鉴项目

• TypeScript-React-Starter
• ant-design-pro

最佳实践

• react-typescript-cheatsheet
• react-redux-typescript-guide