记录一下 React 简易后台管理系统搭建过程

Last Updated: September 1, 2019 · 9 min read

最近重新学了一下 react 技术栈,顺便重构了去年一个管理后台,不得不说前端变化实在是太快了,几个月没用 react 代码都快看不懂了。

源码地址 👉https://github.com/xiaojun1994/react-admin-lite

🌵 技术栈

基于 cra ts 版

bash
  • react + hooks
  • react-router
  • mobx
  • typescript
  • antd
  • mockjs

🍭 需求分析

  • antd 按需引入
  • 按配置文件自动创建菜单
  • 路由懒加载
  • 必须登录才能访问,如果没登录直接重定向到登录页面
  • 访问了一个不存在的路由跳转到 404 页面
  • 实现路由级别和按钮级别的权限控制,根据登录用户展示对应菜单
  • 使用 mock 数据
  • mobx 状态持久化,避免刷新丢失状态

🍺 目录

text

🍬 按需引入 antd

先安装这几个依赖 babel-plugin-import customize-cra less less-loader react-app-rewired

根目录下新建 config-overrides.js 并写入以下内容

js

然后别忘了改一下 package.json

json

🏀 登录控制

没登录自动跳到登录页面,这个功能通过封装 Route 组件实现,让我们先搞个 AuthRoute。

tsx

⚽️ 按配置文件自动生成菜单

以下教程会通过 lazy Suspense 设置路由懒加载

配置文件

typescript

封装 Menus 组件

Menus 组件负责根据配置文件递归生成侧边菜单

tsx

封装 Content 组件

Content 组件负责根据配置文件递归生成路由

tsx

🚁 按钮级别权限控制

上面我们已经实现了菜单级别权限控制,但是这还不够,可能有时候还需要按钮级别权限控制

自定义 hooks

tsx

这个 hooks 我封装的不是很好,以后看能否优化

使用教程

tsx

🏉 使用 mock 数据

需要安装 mockjs

简单示例,具体请移步官网

ts

之后在 App.tsx 引入它即可

🤡 mobx 持久化存储

很简陋,凑合用

ts

使用教程

ts

🌝 结尾

暂时写这么多,感觉还有很大优化空间,等我慢慢完善,ts 给我感觉就像臭豆腐一样,闻着臭,吃着还行~🤖


©2022 • xiaojun1994
 0   0