最近重新学了一下 react 技术栈,顺便重构了去年一个管理后台,不得不说前端变化实在是太快了,几个月没用 react 代码都快看不懂了。
源码地址 👉https://github.com/xiaojun1994/react-admin-lite
🌵 技术栈
基于 cra ts 版
1 | npx create-react-app my-app --typescript |
- react + hooks
- react-router
- mobx
- typescript
- antd
- mockjs
🍭 需求分析
- antd 按需引入
- 按配置文件自动创建菜单
- 路由懒加载
- 必须登录才能访问,如果没登录直接重定向到登录页面
- 访问了一个不存在的路由跳转到 404 页面
- 实现路由级别和按钮级别的权限控制,根据登录用户展示对应菜单
- 使用 mock 数据
- mobx 状态持久化,避免刷新丢失状态
🍺 目录
1 | ├── README.md |
🍬 按需引入 antd
先安装这几个依赖 babel-plugin-import
customize-cra
less
less-loader
react-app-rewired
根目录下新建 config-overrides.js
并写入以下内容
1 | // config-overrides.js |
然后别忘了改一下 package.json
1 | // ... |
🏀 登录控制
没登录自动跳到登录页面,这个功能通过封装 Route
组件实现,让我们先搞个 AuthRoute
。
1 | // src/components/AuthRoute |
⚽️ 按配置文件自动生成菜单
以下教程会通过 lazy
Suspense
设置路由懒加载
配置文件
1 | // global.d.ts |
封装 Menus 组件
Menus 组件负责根据配置文件递归生成侧边菜单
1 | // src/components/Menus |
封装 Content 组件
Content 组件负责根据配置文件递归生成路由
1 | // src/components/Content |
🚁 按钮级别权限控制
上面我们已经实现了菜单级别权限控制,但是这还不够,可能有时候还需要按钮级别权限控制
自定义 hooks
1 | // src/common/hooks.tsx |
这个 hooks 我封装的不是很好,以后看能否优化
使用教程
1 | import React from 'react' |
🏉 使用 mock 数据
需要安装 mockjs
简单示例,具体请移步官网
1 | import Mock from 'mockjs' |
之后在 App.tsx 引入它即可
🤡 mobx 持久化存储
很简陋,凑合用
1 | // src/common/utils.ts |
使用教程
1 | import { createContext } from 'react' |
🌝 结尾
暂时写这么多,感觉还有很大优化空间,等我慢慢完善,ts 给我感觉就像臭豆腐一样,闻着臭,吃着还行~🤖