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
posted @ 2022-12-22 16:55  彭加李  阅读(1181)  评论(2编辑  收藏  举报