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

Aug 31, 20199 min read

此文最后修改于 1756 天前,可能包含很多不再适用的废话,阅读需谨慎~

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

源码地址 👉https://github.com/xiaojundebug/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 设置路由懒加载

配置文件

TS

封装 Menus 组件

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

TSX

封装 Content 组件

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

TSX

按钮级别权限控制

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

自定义 hooks

TSX

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

使用教程

TSX

使用 mock 数据

需要安装 mockjs

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

TS

之后在 App.tsx 引入它即可

mobx 持久化存储

很简陋,凑合用

TS

使用教程

TS

结尾

暂时写这么多,感觉还有很大优化空间,等我慢慢完善

浏览量

最后修改于

Aug 31, 2019
Made withbyXiaojun Zhou