React 后台管理系统

后台管理系统

2.1、技术栈

测试接口环境：nodejs

前端:

react.js

redux react-redux redux-thunk

react-router-dom@5

styled-components/sass(node-sass)

ui组件库 ant-design Ant Design - 一套企业级 UI 设计语言和 React 组件库

axios/fetch

sessionStorage/localStorage/cookie

webpack配置(装饰器配置和代理的设置等等)[create-react-app]

npm i -D http-proxy-middleware @babel/plugin-proposal-decorators redux-devtools-extension customize-cra react-app-rewired

npm i -S redux react-redux redux-thunk styled-components react-router-dom@5 react-transition-group axios prop-types immutable redux-immutable 

----------------------------------------
//这是mock
npm i -g json-server

npm i -S antd

yarn add antd

一定要先安装

npm i -D babel-plugin-import

yarn add babel-plugin-import -dev

 不想按需的话

直接引用

全局做 [国际化处理]

日历组件需要单速处理

日历默认是英文

[快速上手]

yarn add moment

1.4、登录

1.4.1、定义登录路由

 

 

 拆出去写一个配置式路由

前

 后

 配置式 静态路由表

---

 登录

 

 登录验证

 

 

 

拆出来

 

 

 登录请求

 

 

 

 

 

 

 

 message第二个参数是秒数

登录错误防抖

 

---

界面布局

 

 

 退出登录

Modal对话框

 

 

 

  

子路由

 

 

 

 

 

 

 

---

后台防

自定义router

 

 

  引入

---

BUG--左侧菜单高亮--刷新页面跳回首页

先在最上面解构出来location

 看官方Api文档改成

---

面包屑导航

cssinjs

 

 

 

 

 表格 

 

 

 

 

 

 

 

 

 

 

---

 添加用户 模态框

 

 

 

 

 

 

 模态框 -表单

  方案1  隐藏模态框自己的

 

 方案2 使用模态框的按钮

 

 用表单的自定义hook,使用表单的实例

useForm完成表单实例获取

---

 拆出去

 

 

 

 

 总结: form表单 父传子 透传

---

 Bug表单内容清空

 初始化

监听模态框的显示和隐藏

---

 

 

 

 

---

 上传头像

 

 

 

 

 记得把这个截图发给后端

 

 

 

 

 

 

---

富文本编辑器    braft-editor

这个优点在于 数据修改方便

因为不是操作Dom的

 

 react专用富文本 braft-editor

富文本要传html

官方文档

手册

 

 

 

 

 

 

富文本加边框

---

 拆出去代理 

 

 拆出 表单上传的服务器路径

前

后

 

---

表单项验证通过后进行网络请求

post要记得在url后面传userData

 

 

 点击添加发送网络请求: 要做防抖!!

 

 

---

BUG富文本再次点开不重置不清空

 

 

 

---

列表分页

 

 

 useEffect需要回收不能有返回值,但是可以写自执行函数,自执行函数没有返回值,自执行函数内可以写async和await

 

---

列表修改(路由版)

默认不是严格匹配,所以写在上面

 不是直接渲染的组件,需要使用useHistory

Bug子路由高亮

---

封装面包屑跳转 

 

 

---

 用户修改表单

 

 重现按钮

 

 

 

 

 

 先删掉初始值设置

 

 

 

 

 改完记得跳转回列表页

---

 BUG,在 第五页 修改完后 要 回到第五页 而不是第一页

 

 

 

 

 在第n页点击修改,跳转到修改页,改完后点击提交修改,跳回到第n页

可以通过地址栏的? seach字符串,或状态,或stirage,或隐式传参

 

 

 

---

 BUG想要F5刷新变成第一页

所以找到一个刷新丢失 的地方存标识 布尔值

 

 

---

后端中间件,完成接口安全!!!!!!!!!!!!!!!

接口安全: 就是登录时 复制了 你网络请求的接口,退出登录后再在地址栏粘贴访问

不让他访问,是后端做的

要在头信息携带token

然后再通过响应头把新的token返回来

 登陆以外的都要携带token

 

 响应要获取最新的

 

取消网络请求    防抖

通过数组把请求地址存进去

数组内只要存在就阻止请求

---

权限--[ rbac ] 基于角色的权限控制    //动态创建路由组件

动态渲染菜单权限

 

 

 然后调用函数()

{ creatMenuItem() }

路由权限

路由本身就是动态渲染的所以直接用组件判断就行

 

 

---

 数据不是写死的

前台只有这个 

 

   其实后台返回的是这个

 就是对象合并

后台返回的带标识标记

前台提供组件页面引用

然后合并

---

按钮权限

1.单页面版(不推荐)

 要改一个地方让所有的都变

2.封装公共组件方案

 

 

 

 

3.高阶组件方案

 

 

 

---

百度的Echarts -或者- 阿里的AntV

 

 

 

 

 然后在示例里面找,然后复制粘贴

在配置项里按照说明改

推荐用插件!!!

 

 

把示例里的代码全c过来,写在return里{}

---

react-saga