# react-geek-pc

**Repository Path**: jiang-zi-roy/react-geek-pc

## Basic Information

- **Project Name**: react-geek-pc
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-23
- **Last Updated**: 2022-03-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# geek-pc

## 1 . 项目初始化(3.23)

- 初始化仓库
- 修改目录结构
- 创建1级路由页面
- 下载依赖 axios *sass*  @craco/craco
- 配置 二次封装 axios
- 使用 @craco/craco 修改 @ 为src路径
- 使用 CSS Modules  + :global 改造css文件, 解决样式污染

## 2 . 登录模块

- 页面样式结构搭建
- 使用 antd 组件库 , card 组件 和 from 组件 完成登录页面搭建
- 完成表单校验 表单校验两个属性name,rules(校验规则)
  - Checkbox 组件 自定义校验规则
- 收集表单数据 
  - 给Form添加onFinish函数
  - 给Form.Item 添加name(和接口文档一直)
  - 给button 添加 htmlType设为submit
- 表单设置默认值 initialValues 属性,一个对象,键是Form.Item 的name
- 配置Redux
- 封装api
- login组件中发请求
- 完成登录功能

### 补充: 登录功能(3.24)

- 封装Storage 完成 token 持久化 
- antd 组件库 中 message 提示信息使用
- try catch 配合 async await 使用 登录请求完成后的信息提示, 及捕获错误信息
- try finally 使用 登录按钮 loading 处理
- 编程式导航跳转 使用 `history.replace('/home')`

## 3 . 首页模块

- antd 字体图标组件化导入

- 首页基本布局完成

- 二级路由配置,及基本页面搭建

- 解决二级路由跳转按钮高亮刷新之后重置

- 在 useEffect hooks 里调用 dispatch 获取用户信息并存入redux

- 顶部退出按钮展示用户名

- 退出登录实现,

  - 使用 Popconfirm 组件实现点击后气泡框提示效果 
  - 确定退出,清除 token , 跳转到登录页, 提示消息

- token 过期处理

  - 在响应拦截器中, 捕获错误判断响应状态码是否是401 `error.response.status === 401`
  - 是则清空token , 跳转登录页 , 并提示token过期

- 请求超时处理

  - 请求超时时 error 对象中 没有 response ,先判断有response 执行上述,没有直接 return

- 响应拦截器中使用 React 中 history.replace 跳转

  - 使用 Router 标签 + history={history} 替换 BrowserHistory 对跟标签的包裹
  - `import { createBrowserHistory } from 'history'`createBrowserHistory () 为上述history

- 访问控制实现

  - 封装 AuthRoute 公共组件
  - 在APP.js中 接收并使用

- **首页页面搭建 (3.25)**

  - 样式结构
  - antd 表格组件使用
  - echarts 图标使用

- 获取用户信息,并展示

  

## 4 . 内容管理页面(3.26)

- 表单筛选区域完成
- 表格展示区域完成
- 完成筛选功能
- 完成删除功能
- 封装频道组件,后期发布文章页面复用

## 5 . 发布文章页面(3.27)

- 发布文章基本页面构建完成
- quill 富文本编辑器使用
- 封面上传及 upload 上传控件使用
- 封装上传封面及 upload 控件
- **表单校验(3.28)**
- 表单数据收集
- 发布文章及存入草稿
- 内容管理页面,实现编辑文章跳转
- 编辑文章页面数据回填
- 编辑文章,及存入草稿