- 🎉🎉🎉 欢迎 PR
- 🌴🌴🌴 钉钉交流群(23355178)
使用钉钉扫描下方二维码
awesome-frontend 整理前端相关的博客、教程、库... 欢迎查阅
-
安装 NodeJs 推荐安装最新稳定版
-
全局安装 yarn(可跳过)
npm install --global yarn
- 安装依赖
npm run bootstrap 或者 yarn bootstrap
- 开发
npm run start 或者 yarn start
- 编译
npm run build 或者 yarn build
- 框架：React、Umi
- 组件库：ant-design
- 开发语言：TypeScript
- Ajax 库：Axios
- 样式：Less
系统采用手动配置路由的形式
相关字典
配合iconfont使用
- 参数类型:
string - 参数描述: 左侧菜单的Icon
- 默认值: 无
- 参数类型:
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': '***'
配合Policy使用
- 参数类型:
string|string[] - 参数描述: 权限 控制是否显示左侧菜单 以及路由拦截
- 默认值: 无
- 参数类型:
boolean - 参数描述: 是否显示面包屑
- 默认值: true
- 参数类型:
boolean - 参数描述: 是否隐藏菜单
- 默认值: false
- 参数类型:
boolean - 参数描述: 是否隐藏该菜单的子菜单
- 默认值: false
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 # 左侧菜单组件
│ │ ├── standard-table # 对table的二次封装
│ │ ├── 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地址
git 提交信息使用commitlint 进行规范
具体配置以及説明请查看commitlint-config-jiumao
采用ant-design提供的解决方案，具体请查看自定义图标
在 /src/config/index.ts 中配置 SETTING_DEFAULT_CONFIG.iconFontUrl