后台管理系统
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 图表
?
?
?
?
?
?然后在示例里面找,然后复制粘贴
在配置项里按照说明改