# react-admin

**Repository Path**: tubage0425/react-admin

## Basic Information

- **Project Name**: react-admin
- **Description**: react-admin 后台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-13
- **Last Updated**: 2024-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 初始

- create-react-app  ~
- 引入antd
- less配置（craco)
- 一级路由login  admin

## Login组件

- 静态
- 前台表单验证——收集表单数据——提交登录请求  Form组件(rules )
（高阶函数）：接收函数类型参数/返回值是函数; 常见：定时器 Promise forEach filter map reduce find findIndex
 (高阶组件)：本质是一个函数，接收一个组件（被包装），返回一个新组件，新组件内部渲染被包装组件

## api

- 启动后台应用mongoDB数据库+node / 线上接口：(http://47.102.40.110:5000)
- Request.js. api.js封装
- 跨域

```const {
    createProxyMiddleware
} = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(createProxyMiddleware(
        "/api", {
            target: "http://127.0.0.1:3001",
            changeOrigin: true,
            pathRewrite: {
                "^/api": "" // 如果是/api开头的请求全部跳至target对应的地址
            }
        }
    ));
};
```

## 登陆

- 登陆api
- onFinish事件，发送登陆请求,成功/失败
- localStorage持久化 库:store   保存到内存中
- ？？？？？？？？？？？？？登录后不能进入login

## 主体页面
- Layout: 拆分left-nav  header组件
- left-nav: 
    - Menu组件使用: label搭配Link  本地拿权限menu  默认选择key（包装leftNav高阶组件使用v6 location) 
    - ？？？？？？？？？？？？？默认展开
- 二级路由： Link   注册路由Routes Route  懒加载

## Header组件
- 静态组件
- ？？？？？？？？？？没写天气请求
- 动态： 
    - 用户名: memoryUtils取出
    - 时间: dayjs格式化，动态每隔一秒种 didMount setInterval
    - 菜单名: 拿到meUNList location.pathname
- 退出 : 清除用户信息 跳转login， willmount时清除定时器

## Home
- 暂不实现

## Category
- Card Table Modal 静态组件
- 三个api
- 展示一级列表信息
- 展示二级列表信息：render传当前行参数对象，获取列表回调在state和render之后触发(解决setstate异步更新的问题)
- 回退一级列表：setState修改状态
- ——————————————————————————————————————
- 修改分类：拆分组件 静态页面 
    默认显示当前分类名字：（父组件props传递过来, initialValues不能实现动态展示？）展示模态框后setFieldsValue（处理异步setState第二个参数里）
    更新分类请求函数：参数categoryId, 从render传递之后保存到this中的categoryItem中拿，修改后的参数categoryName，子组件form中的值——》父组件：函数+props带实参过去，子组件中调用函数，传递实参给到父组件。 清除数据
父：
<UpdateForm categoryItemName={categoryItem.name} getform={form => this.form=form}></UpdateForm>
子：
myForm = React.createRef()
UNSAFE_componentWillMount () {
    this.props.getform (this.myForm)
}

- 添加分类：拆分组件 静态页面
    默认显示当前分类名字：（父组件props传递过来, initialValues不能实现动态展示？）展示模态框后setFieldsValue（要二级列表类型不是undefined再更新）二级列表在展示的时候保存一下  ?有bug
    添加请求：获取参数const {parentId,categoryName} = this.form.current.getFieldsValue()
    重新获取列表
    解决在二级分类添加一级分类的问题/ 二级分类添加其他二级分类/：？勉强解决

## Product
- 搭建路由：home detail addUpdate路由组件
- 静态页面productHome
- 分页类型: 前台分页，后台分页
- api商品列表请求：请求列表，分页请求
- 搜索请求： 参数pageNum, pageSize, searchType, searchName  写进商品列表请求里
- 商品状态修改：api，根据status动态显示不同，发请求，展示当前页列表（获取列表的时候保存一下this.pageNum）
___________________
- 静态页面productDetail
- 动态显示商品信息：点击详情按钮跳转并传递product参数
- 动态显示商品对应一二级分类：api请求
————————————————
- productAddUpdate静态页面
- 表单验证：拿到form ref, 自定义验证（promise）参照文档
- 商品分类：获取一二级列表， 动态级联显示二级列表
- 添加修改商品 标识：willMount取出根据路由跳转携带state参数（!!product）
- 修改商品： 默认显示分类1————接收级联分类的数组&&initialValues   默认显示分类2————要产生对应二级列表

- 照片上传：单独组件
- 父组件收集子组件照片数据：子组件里面写好方法，父组件调用子组件：ref得到子组件标签对象
- 删除图片：onchange file.stusta 没有removed？？？？？
- 显示图片：product里imgs属性，props传递给pictures-wall， 

- 富文本编辑：单独组件   ?????上传图片
- 子组件geDetail  ref 父组件调用 拿到收集数据
- 展示请求来的detail props传递给子组件
- 添加修改api
- 收集数据，发送请求submit

## 角色管理role
- 静态页面 table-onRow  rowSelection-onSelect单选 Modal-addRole组件 Form表单 父组件取子组件数据
- api请求
- 显示列表数据
- 点击选中项 role   rowSelection={{type: 'radio', selectedRowKeys: [role._id]}
- Modal-auth-Form组件 Tree组件 递归treeData， 父组件ref拿到auth组件的数据
    - tree初始选中状态（role里的menus）
    - 更新选中onCheck回调，父组件更新需要取子组件的更新后checkedKeys（ref)
    - 更新api 更新getRoleList (授权人在参数里指定 当前登录人)
    - bug(每次选中的都是和第一次打开的角色一样)
    UNSAFE_componentWillReceiveProps(nextProps) {
        const menus = nextProps.role.menus
        this.setState ({
        checkedKeys: menus
        })
    }
    - 格式化时间 render dayjs format

## 补充

## 用户User
- 静态页面 table
- api用户列表，render展示角色（返回来的后台数据有些没有role_id 手动指定一个测试'5e171d55d59eb648d4ed66a8'）
- 删除用户 api  Modal.confirm
- 添加用户 静态modal form api
- 修改用户 利用同一个modal  添加一个isUpdateModal标识  合并添加和修改api 默认展示
  默认显示：（initialValues不能实现动态展示？）展示模态框后setFieldsValue设置（处理异步setState第二个回调函数参数里）
- 权限相关：role组件更新权限回调中：如果更新的是自己角色权限role._id === memoryUtils.user.role_id，强制退出

## redux管理（标题和user)
- npm i redux react-redux redux-thunk redux-devtools-extension
- redux 初始环境