React学习--黑马极客网笔记

前期配置：

使用CRA初始化项目环境

npx create-react-app + 项目名字

在CRA项目中接入SCSS

npm install sass -D

安装Ant Design组件库

npm i antd --save

安装路由包

npm i react-router-dom

配置路由组件

1. 安装路由包 react-router-dom
2. 在pages路径底下创建要用的路由组件
   
3. 在router/index.js里引入组件进行路由配置，并导出路由实例
   

配置别名路径

1. npm i @craco/craco -D

2. crocro.config.js（创建在项目根目录下）
   

3. package.json
   

再有是增加针对联想提示
实现步骤：

1. 在项目根目录创建jsconfig-json配置文件
2. 添加配置
   

使用gitee管理项目

git add .
git commit -m ""
git push

登录界面实现：

静态结构准备
表单检验实现
获取表单信息并使用token存储表单信息
封装request请求模块（封装API）
实现点击登录后异步向后端发送表单数据
根据后端返回的信号判断是否登录成功
登录成功后跳转到首页
Token持续化（使得用户登录状态持续化）
封装Token的存取删方法（持续化的延申，用来管理本地中的Token）
Axios请求头注入Token(注入token后，所有用到axios实例的接口请求都自动携带了Token)
根据Token控制路由跳转(根据Token的有无控制当前路由是否可以跳转--路由的权限控制)

Layout:

静态结构准备
二级路由配置
点击菜单跳转二级路由
根据当前路由路径高亮菜单
右上角展示个人信息
退出登录实现
处理Token失效（长时间用户未操作会使得Token失效）

Home:

Echarts基础图表渲染以及组件封装实现

Publish:

静态结构准备

面包屑导航组件	Breadcrumb
表单组件	Form
输入框组件	Input
下拉框组件	Select - Option
按钮组件	Button

准备富文本编辑器
频道列表获取渲染
收集表单数据进行提交表单
上传文章封面基础实现
实现切换封面类型
控制上传图片的数量
发布带封面的文章

Article:

静态结构创建
通过自定义hook获取频道列表
渲染table表格
筛选功能实现
分页功能实现
删除功能实现

Update:(采用和Publish一样的静态结构)

携带id跳转到编辑页
回填基础数据和封面信息
根据id适配状态（Publish or Update）
更新文章实现

项目打包