react 高效高质量搭建后台系统 系列

react 高效高质量搭建后台系统

前言

目标：用 react 高效高质量搭建后台系统

如何实现：搞定一个优秀的、通用的、有一定复杂度的react的后台系统。类似项目就可以依葫芦画瓢快速展开。

spug 能否当此重任？可以。首先它是一个优秀的开源 react 项目，此刻（20221215） Star 是8.2k，8月以前是7.2k，资料配套齐全，例如 spug 的文档项目采用的是 Facebook 的 docusaurus。其次它是一个较通用的后台系统（从其页面布局、交互、表单查询、表格展示、权限可以得知）。复杂度一般，有8个一级模块，还有 web终端。

Tip：有关 react 和 spug 笔者已经写过两个系列（react实战 系列、七天接手react项目）的文章，本系列就是专注于react 高效高质量搭建后台系统。对于以前已经研究过的内容，笔者不在冗余介绍，只会给出简要及核心步骤，详细请看相关链接。

目录

1. 脚手架搭建
2. 请求数据
3. antd和样式
4. 登录
5. 系统布局
6. 表格的封装
7. 前端权限
8. 结尾

大纲

flowchart TB
subgraph SPUG[ ]
direction LR
spug-->a[脚手架搭建]
a -.- a1[创建新项目]
a -.- a2[安装依赖包]
a -.- a3[antd 按需引入 css]
a -.- a4[代理]
a -.- a5[babel]

spug-->b[请求数据]
b -.- b1[axios]
b -.- b2[mock]

spug-->c[antd和样式]
c -.- c1[antd 多种主题风格]
c -.- c2[antd 国际化]
c -.- c3[样式]

spug-->d[登录]
d -.- d1[路由和登录]
d -.- d2[spug 中登录模块的分析]
d -.- d3[myspug 登录模块的实现]

spug-->e[spug 中系统布局的分析]
e -.- e1[spug 中系统布局的分析]
e -.- e2[myspug 系统布局的实现]

spug-->f[表格的封装]
f -.- f1[spug 中 Table 封装的分析]
f -.- f2[myspug 中 Table 封装的实现]
f -.- f3[分页请求数据]

spug-->g[前端权限]
g -.- g1[spug 中权限的分析]
g -.- g2[myspug 中权限的实现]

spug-->h[尾篇]
h -.- h1[表单查询]
h -.- h2[表单验证]
h -.- h3[WebSocket]
h -.- h4[自动构建]
h -.- h5[完整项目]
end
A[React 高效高质量搭建后台系统] --> SPUG