iThings 的后台前端
iThings 的后台前端项目是一个基于 Antd Pro 组件风格,使用 umi 脚手架搭建的系统级前端项目。
环境准备
安装 node_modules
:
yarn
脚本命令
前端项目提供一些脚本命令可以用来启动项目、项目打包、检查代码风格、规范和单元测试。所有脚本命令统一放置在 package.json
文件中,这对于修改或者添加其他脚本命令来说十分简单和安全。
启动项目
// 使用 mock 接口
yarn start
// 不使用 mock 接口
yarn dev
项目打包
yarn build
检查代码风格、规范
yarn lint
你也可以用下面的命令进行修复:
yarn lint:fix
单元测试
yarn test
更多
文件命名规范
- 推荐:React 组件的文件夹命名都是大驼峰+ 单数,其他文件夹都是小驼峰+ 复数。
- 推荐:文件命名都是小驼峰,单复数看情形。
- 推荐:方法名都是小驼峰,单复数看情形。
- 推荐:变量名除常量外都是小驼峰,单复数看情形。
- 推荐:常量名都是全大写字母+ 下划线分隔,单复数看情形。
目录结构
├── README.md // 项目介绍
├── config // 配置文件夹
│ ├── config.dev.ts //开发时配置
│ ├── config.ts // 基本配置
│ ├── defaultSettings.ts // 默认设置
│ ├── iThingsapi.json // openApi导出的JSON
│ ├── proxy.ts // 本地开发时代理配置
│ └── routes.ts // 路由表
├── deploy.sh // 部署脚本
├── jest.config.js // 单元测试相关
├── jsconfig.json // 单元测试相关
├── mock // 本地 mock 文件夹
│ └── user.ts
├── package.json // 依赖
├── public // 公共资源目录
│ ├── CNAME
│ ├── favicon.ico
│ ├── favicon.png
│ ├── icons
│ │ ├── icon-128x128.png
│ │ ├── icon-192x192.png
│ │ ├── icon-512x512.png
│ │ ├── icon_data_01.png
│ │ └── logo.png
│ └── pro_icon.svg
├── src // 主文件夹
│ ├── access.ts // plugin-access 插件依赖文件
│ ├── app.tsx // 应用入口
│ ├── assets // 静态资源
│ │ ├── icons
│ │ └── img
│ ├── components // 公共组件目录
│ │ ├── Footer
│ │ ├── HeaderDropdown
│ │ └── RightContent
│ ├── global.less
│ ├── global.tsx
│ ├── hooks // 自定义 hook 文件夹
│ │ ├── useTitle.ts
│ ├── layouts // 布局组件
│ │ ├── BasicLayout.tsx
│ │ └── BlankLayout.tsx
│ ├── manifest.json
│ ├── pages // 页面文件夹
│ │ ├── 404.tsx
│ │ ├── Admin.tsx
│ │ ├── Welcome.less
│ │ ├── Welcome.tsx
│ │ ├── device // 设备模块
│ │ ├── document.ejs
│ │ ├── product // 产品模块
│ │ └── user // 用户登录模块
│ ├── service-worker.js
│ ├── services // 由 openApi 生成的异步请求文件,使用方法见 pages/user
│ │ └── iThingsapi
│ ├── typings.d.ts // 类型声明
│ └── utils // 工具方法目录
│ ├── const.ts // 常量表
│ ├── date.ts // 时间|日期相关方法
│ ├── iconMap.ts // 菜单图表对应Map
│ ├── request.ts // 封装的请求相关
│ └── utils.ts // 常规工具方法
├── tests // 单元测试相关
│ ├── PuppeteerEnvironment.js
│ ├── beforeTest.js
│ ├── getBrowser.js
│ ├── run-tests.js
│ └── setupTests.js
├── tsconfig.json // ts 配置文件
├── types // 全局类型声明文件
│ ├── base.ts
│ ├── postcss-px2viewport.d.ts
│ └── userInfo
│ ├── data.d.ts
│ └── service.ts
├── yarn-error.log
└── yarn.lock
项目架构介绍
react + umi + react hooks + TypeScript + Ant design Pro
Ant design Pro: Ant design Pro 的底座是 umi,umi 是一个 webpack 之上的整合工具。 umi 相比于 webpack 增加了运行时的能力,同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。这也是我们能提供插件的原因。
Ant design Pro文档总览: 文档
Ant design Pro开发需知: 开发需知
所使用到的 umi 插件:
plugin-access,权限管理
plugin-antd,整合 antd UI 组件
plugin-initial-state,初始化数据管理
plugin-layout,配置启用 ant-design-pro 的布局
plugin-model,基于 hooks 的简易数据流
使用的 react hooks 工具方法库:
ahooks: ahooks
分支规范
采取 mtr 分支模型:
一个功能,就是一个 feat 分支。命令规范为 feat-xxx。(举个🌰: feat-user)
开发及代码提交步骤: 本地开发 ==> 代码提交前的代码检查(已配置git hooks, 代码提交前会自动检查) ==> 代码检查通过 ==> 代码提交到 test 分支 ==> 告知团队其他成员代码已提交,请帮忙 code review ==> code review 通过 ==> 合并到 test 分支 ==> 测试环境验证完毕 ==> 合并到 master 分支。
具体业务逻辑,文件夹组织方式
├── components // 某个业务模块下共有的组件
│ └── Dialog.tsx // 弹窗组件
├── index.tsx // 业务模块主入口
├── styles.less // 抽离出来的 less 文件
└── types.d.ts // 抽离出来的 ts 类型定义文件
本地开发时,热加载比较慢
react 也有解决方案:
- vite 进行本地开发的热加载方案.
- 使用 mfsu . // 开启方法,config/confog.ts 文件中配置 mfsu.