02-全栈项目搭建-React

参考资料：

• 全栈项目-前端代码工程：https://github.com/janycode/react-news-manage-system-demo
• 全栈项目-后端模拟数据：https://rtool.cn/jsonserver/docs/introduction
  • https://github.com/janycode/react-news-manage-system-demo/blob/main/db/db.json

技术栈：

前端：React19 + Antd6

后端：json-server 模拟后端数据

功能：基于 React 实现的 CMS 文章发布系统、包含一整套用户管理、权限管理、登录校验、审核管理、发布管理等功能，项目搭建快速起步架子。

一页效果：

项目搭建

实现步骤：https://github.com/janycode/react-news-manage-system-demo/commits/main/

1. npx create-react-app myapp 创建项目

2. 修改 index.js 去掉严格模式，reportWebVitals

3. 修改 App.js 为自己的 App

4. 安装 sass 支持 .scss 样式文件（局部样式 xxx.module.scss）

5. 配置反向代理，安装 http-proxy-middleware，然后在 src 下创建 setupProxy.js，拷贝配置并修改

6. 安装 axios 验证 反向代理，如使用猫眼电影的接口验证

7. 提前画路由架构图，路径对应组件，下载 react-router-dom@6 根据情况选择 v5还是v6 版本，推荐 v6 更易配置，配置路由、创建空组件
   

8. 搭建具体的路由

9. 引入 antd 针对PC端的框架，v5+版本已经不需要引入样式文件了

10. 配置 Layout 组件，规划首页结构根据需求使用 Layout，包含自定义的 SideMenu、TopHeader、Content中的路由切换等

11. 自定义的 TopHeader 组件中引入 antd 的 头像、下拉框 组件

12. 安装 json-server 模拟数据请求 等同于 后端准备数据（JSON 字符串可转为 Java 实体类 或 sql 建表语句，再生成后端三层结构代码——参考其他我的博文即可生成）

    1. json-server –watch .\db\test.json –port 5000

    2. 新版 json-server 中的连表查询的 外键字段 只能为字符串，否则影响 连表查询 功能

13. 完善 侧边栏 Sidebar 功能

    • 添加json假数据模拟后端返回数据，菜单图标映射递归赋值同时剔除DOM无用字段
    • 首页菜单是默认进入，且没有二级，剔除首页的children
    • 添加侧边栏全局滚动条样式、Logo和标题显示样式
    • 侧边栏高亮处理、默认和点击展开处理、重定向到首页时首页高亮处理

14. 权限控制的数据流程图
    

业务实现

1. 完善权限列表页功能：Table 组件、树形展示、权限控制开关、删除等

2. 完善角色列表页功能：完善Table组 件展示、删除弹窗和删除数据、编辑弹窗Tree树形结构、属性结构勾选和编辑数据生效后端

3. 完善用户列表页功能：Form子组件封装复用与新增和编辑、数据的增删改查、表头筛选支持、国家化i18n配置

4. 完善登陆退出的功能：登陆功能、粒子背景效果、用户信息结构、用户登陆菜单权限、用户列表数据权限、跳转等

   • 引入粒子效果，安装 yarn add @tsparticles/react @tsparticles/slim，按照文档demo使用即可，

     1. 适配 react19 和 antd6 的粒子效果：https://github.com/tsparticles/react/#readme

     2. particles 粒子库官网（更换其他特效）：https://particles.js.org/

5. 完善路由权限的功能：动态路由渲染、本地路由映射与路由权限校验、安装nprogress库用于侧边栏路由加载展示进度条、封装 axios 基地址

6. 完善撰写新闻页功能：优化 Form表单中异步请求后设置默认值问题、安装react-draft-wysiwyg引入富文本编辑器并封装、引入 Steps 步骤条组件

   • 引入富文本编辑器，安装 yarn add react-draft-wysiwyg draft-js draftjs-to-html html-to-draftjs

7. 完善草稿箱页功能：列表、删除、提交审核、预览(Descriptions 描述列表组件)、编辑（回显富文本）、引入时间格式化和时区扩展

   • 安装 yarn add moment moment-timezone

8. 完善我的新闻页功能：列表、撤销、更新、发布功能 （或者叫审核列表）

9. 完善审核新闻页功能：列表、通过、驳回功能

10. 完善新闻分类页功能：可编辑单元格（4个步骤）、列表、删除

11. 完善发布管理页功能：待发布&已发布&已下线 三个页面复用组件封装、自定义hooks、操作按钮功能、优化内容区域滚动条展示

状态管理

1. 侧边栏折叠功能：引入 redux 实现顶部折叠按钮控制侧边栏折叠，通过 redux 公共状态管理的属性

   • 安装 yarn add redux react-redux 需重启项目

2. 全局 Loading：利用 redux 状态管理控制全局 axios 请求的加载中样式

3. 侧边栏折叠持久化：利用 redux-persist 持久化处理，刷新不改变折叠状态，支持 redux浏览器插件配置

   • 安装 yarn add redux-persist

排版和数据图

1. 首页栅格布局：Card 组件布局和展示、List 组件、排序处理
2. 首页数据可视化：引入 echarts 组件实现可视化柱状图 和 饼状图、引入高性能 JS 处理库 lodash 做运算、处理异步渲染DOM
   • 安装 yarn add echarts

前台用户端

1. 简易用户端列表页和详情页(复用预览页)：列表页 Card 组件遍历、数据清洗为二维数组、详情页浏览量和点赞量数据交互
   • let list = Object.entries(_.groupBy(list, item => item.category.title)) 按照分类标题分组并转为二维数组 - 更利于遍历

二维数组结构：

展开第一个元素：