目錄

一、react基礎(chǔ)

1.進(jìn)程

2、優(yōu)勢

3、市場

4、搭建腳手架

認(rèn)識目錄

核心依賴（右邊兩個(gè)react）

去除非必要

運(yùn)行原理：

總結(jié)

5、JSX

本質(zhì)

高頻場景

注意?編輯

渲染列表

總結(jié)

條件渲染

簡單情況

復(fù)雜情況

事件綁定（交互）

獲取事件參數(shù)e

自定義參數(shù)（要用函數(shù)引用）

兩個(gè)都要

6、組件

7、useState

狀態(tài)不可變

修改對象狀態(tài)

8、組件樣式變化

1、行內(nèi)樣式

2、類名

9、B站評論案例

渲染

刪除

切換功能

排序

改進(jìn)

10、classnames優(yōu)化類名

安裝包

import

11、受控表單綁定

12、react中獲取dom

13、發(fā)布評論

1、獲取評論內(nèi)容

2、點(diǎn)擊發(fā)布觸發(fā)回調(diào)函數(shù)

3、優(yōu)化

安裝uuid

day.js?編輯

13、清空內(nèi)容并聚焦案例

1、清空內(nèi)容

2、聚焦

14、組件通信

父傳子

props說明

children說明

子傳父

兄弟組件通信

跨層組件通信

15、useEffect

依賴項(xiàng)參數(shù)說明

第一種情況

第二種情況

第三種情況

清除副作用

16、自定義hook函數(shù)

不封裝直接實(shí)現(xiàn)

封裝自定義Hook實(shí)現(xiàn)

抽象實(shí)現(xiàn)的通用邏輯

17、ReactHooks使用規(guī)則

第一種錯(cuò)誤

第二種錯(cuò)誤

18、優(yōu)化B站評論

需求1

json-sever

根目錄創(chuàng)建db.json

pages.json添加serve

npm run serve啟動(dòng)

axios

從后臺獲取數(shù)據(jù)?

需求2

封裝函數(shù)

App組件調(diào)用

需求3

封裝Item組件

封裝刪除功能（子組件調(diào)用父組件 / 父傳子）

19、Redux

快速體驗(yàn)（計(jì)數(shù)器）

模版

流程梳理

20、react-redux

配置基礎(chǔ)環(huán)境

store目錄結(jié)構(gòu)設(shè)計(jì)

21、用redux繼續(xù)實(shí)現(xiàn)counter案例

整體路徑熟悉

使用Reacttoolkit創(chuàng)建counterStore

使用中間件react-redux連接，為React注入store

react中使用store數(shù)據(jù)

useSelector

react中修改store數(shù)據(jù)

useDispatch

總結(jié)

22、提交action傳參

需求

實(shí)現(xiàn)

完整代碼

23、react-redux異步操作

異步操作樣板代碼

24、redus調(diào)試-devtools

安裝擴(kuò)展程序

25、美團(tuán)案例

準(zhǔn)備工作

分類和商品列表

啟動(dòng)項(xiàng)目

?創(chuàng)建store實(shí)例

?異步獲取

導(dǎo)出

modules的index.js引入

根目錄的index.js引入

觸發(fā)action并且渲染數(shù)據(jù)

用redux工具查看

渲染列表

點(diǎn)擊分類激活交互實(shí)現(xiàn)

redux編寫

解構(gòu)出來并export出去

Menu組件的index.js引入方法和使用dispatch

redux工具調(diào)試查看

引入activeIndex

classNames編寫

商品列表切換顯示（視圖控制）

App.js引入activeIndex

添加購物車實(shí)現(xiàn)

思路

redux編寫

編寫modules的state

編寫reducer

export導(dǎo)出

編寫foodsCart組件

?引入方法

引入dispatch

傳入對象

使用redux工具測試

統(tǒng)計(jì)區(qū)域功能實(shí)現(xiàn)

思路

cart組件取到carList長度渲染

計(jì)算總價(jià)（reduce方法和toFixed）

高亮（classNames）

?起送和結(jié)算顯示控制（三元運(yùn)算符）

購物車列表實(shí)現(xiàn)

思路?

使用cartList渲染

增減reducer，action提交

?store編寫

export導(dǎo)出

?熟悉Count組件

引入dispatcher

引入reducer

子傳父觸發(fā)回調(diào)?

優(yōu)化（不能是負(fù)數(shù)）

store里修改（判斷邏輯）

清空購物車

store編寫

reducer

export導(dǎo)出

?編輯cart組件引入reducer

?編輯

控制購物車顯示和隱藏

思路（用useState控制，不用Redux）

優(yōu)化（購物車列表為空應(yīng)該是不會(huì)有蒙層的）

編寫onShow函數(shù)控制

26、react-router

前言提示

實(shí)際的router配置

創(chuàng)建Login和Article頁面并export

創(chuàng)建router目錄并import組件最后export

index.js中注入router并且去配置即可

路由導(dǎo)航

聲明式導(dǎo)航（Link）

?編輯

編程式導(dǎo)航（useNavigate）

導(dǎo)航跳轉(zhuǎn)傳參

1、useSearchParams

在Article頁接收參數(shù)?編輯

2、useParams

編寫樣式

?到router位置給占位符（重中之重）

在Article頁接收id

嵌套路由配置

Outlet

默認(rèn)二級路由

404路由配置（path用星號“*”配置）

兜底組件

提高體驗(yàn)感

兩種路由模式

記賬本項(xiàng)目

準(zhǔn)備工作

?移動(dòng)端組件庫antd-mobile

配置別名路徑@

配置步驟

修改pages.json的scripts

啟動(dòng)

創(chuàng)建test.js測試

index.js導(dǎo)入

VsCode路徑聯(lián)想配置

?編輯

數(shù)據(jù)Mock實(shí)現(xiàn)

?編輯?json-sever實(shí)現(xiàn)數(shù)據(jù)mock

server目錄下創(chuàng)建data.json文件放入數(shù)據(jù)

添加啟動(dòng)命令

啟動(dòng)

訪問接口?

配置路由

編寫router和pages?

index.js引入

配置二級路由

antD-mobile主題定制

編寫css文件

注入到入口文件

Redux管理賬目列表

思路

編寫異步（！！！）

TabBar

靜態(tài)布局實(shí)現(xiàn)

導(dǎo)入代碼和scss文件

配置跳轉(zhuǎn)路由（onChange、useNavigate）

統(tǒng)計(jì)功能

點(diǎn)擊切換搜索

關(guān)閉彈窗（onCacel）

onConfirm

蒙層（onClose）

切換上下箭頭

點(diǎn)擊確定切換時(shí)間顯示

?編輯

賬單數(shù)據(jù)按月分組

從Redux中拿到數(shù)據(jù)以及二次處理（useMemo）

計(jì)算統(tǒng)計(jì)數(shù)據(jù)

編寫新Memo

渲染數(shù)據(jù)

初始化計(jì)算

當(dāng)日統(tǒng)計(jì)

單日賬單列表顯示?編輯

點(diǎn)擊切換

?更換圖標(biāo)

新增賬單

新增表單實(shí)現(xiàn)

收尾優(yōu)化

高亮

?時(shí)間記賬

27、規(guī)范項(xiàng)目

目錄結(jié)構(gòu)

scss

嵌套語法

antDesign

測試

Router

步驟

編寫router

引入routerProvider和router

配置別名路徑

登錄

表單校驗(yàn)

失焦時(shí)校驗(yàn)

多條校驗(yàn)規(guī)則

獲取數(shù)據(jù)

封裝request模塊

?配置

中轉(zhuǎn)工具模塊函數(shù)?編輯

redux管理token

異步獲取token

登錄界面觸發(fā)異步

后續(xù)邏輯

token持久化

本地存儲(chǔ)

封裝token的存儲(chǔ)

編寫

放到中轉(zhuǎn)工具函數(shù)

調(diào)用封裝函數(shù)

Axios頭注入token

使用token跳轉(zhuǎn)路由

高階組件

Layout靜態(tài)結(jié)構(gòu)搭建

清除默認(rèn)邊距

占滿整個(gè)屏幕

二級路由配置

放置二級路由出口

點(diǎn)擊菜單跳轉(zhuǎn)路由

navigate跳轉(zhuǎn)

---

?

一、react基礎(chǔ)

1.進(jìn)程

2、優(yōu)勢

封裝成一個(gè)庫，組件化開發(fā)更加方便

跨平臺主要是react native等可以來寫移動(dòng)端如android，ios等

豐富生態(tài)：可以在很多瀏覽器用

3、市場

4、搭建腳手架

npx create-react-app react-basic

npm start后仍然可能會(huì)報(bào)錯(cuò)

解決辦法，在index.js中把這兩行注釋掉

認(rèn)識目錄

核心依賴（右邊兩個(gè)react）

去除非必要

除了app.js和index.js其他全干掉

index.js

app.js

重新啟動(dòng)測試

npm start

運(yùn)行原理：

總結(jié)

創(chuàng)建->清理

創(chuàng)建react的其他方式

5、JSX

本質(zhì)

工具編譯測試

Babel · Babel，點(diǎn)擊上面的try it out，然后勾選左邊的react就可以了

也就是說，JSX是瀏覽器不認(rèn)可的格式，需要通過babel編譯器轉(zhuǎn)換成js

高頻場景

const count = 1000
function getName(){return('john')
}
function App() {return (<div className="App">this is my first react app{'this is message'}{count}{getName()}{new Date().getDate()}<div style={{color:'red'}}>this is div</div></div>);
}

解釋：外面的括號（外層）是識別表達(dá)式，內(nèi)層是對象結(jié)構(gòu)

注意

渲染列表

總結(jié)

const list = [{id:1001,name:'react'},{id:1002,name:'angular'},{id:1003,name:'vue'}
]
function App() {return (<div className="App"><ul>{list.map(item=><li key={item.id}>{item.name}</li>)}</ul></div>);
}export default App;

條件渲染

簡單情況

復(fù)雜情況

一個(gè)頁面三種圖片展示方式

事件綁定（交互）

獲取事件參數(shù)e

自定義參數(shù)（要用函數(shù)引用）

兩個(gè)都要

6、組件

所謂的組件其實(shí)就是函數(shù)，可以用function也可以用箭頭函數(shù)聲明，只要首字母是大寫就可以。

7、useState

狀態(tài)不可變

修改對象狀態(tài)

拓展：看看官方文檔數(shù)組要怎么變化

8、組件樣式變化

1、行內(nèi)樣式

2、類名

9、B站評論案例

渲染

這堆要放在commentList的map循環(huán)里面

刪除

思路是傳一個(gè)id進(jìn)去函數(shù)，然后用過濾器過濾掉id相等的那個(gè)人

切換功能

思路：先準(zhǔn)備一個(gè)列表，遍歷出最熱和最新，設(shè)置一個(gè)動(dòng)態(tài)state，點(diǎn)擊就傳type給函數(shù)，然后順便修改這個(gè)state，高亮顯示就是動(dòng)態(tài)類名，判斷這個(gè)state和遍歷的item一不一樣。

排序

安裝lodash，主要用他的order功能

npm i lodash

引入橫杠

解釋：三個(gè)字段，第一個(gè)是列表，第二個(gè)是針對哪個(gè)type，第三個(gè)是排序方式

改進(jìn)

讓一開始進(jìn)去就是按最熱排序，有默認(rèn)排序

修改前

修改后

10、classnames優(yōu)化類名

圖里面那種本質(zhì)還是字符串拼接的模板字符串

安裝包

npm i classnames

import

11、受控表單綁定

12、react中獲取dom

可以用dir查看有哪些屬性

13、發(fā)布評論

1、獲取評論內(nèi)容

2、點(diǎn)擊發(fā)布觸發(fā)回調(diào)函數(shù)

本質(zhì)是修改commentList，先展開，后面再拓展進(jìn)去（格式要一致），content改為動(dòng)態(tài)的

3、優(yōu)化

安裝uuid

npm i uuid

用法

import {v4 as uuidv4} from 'uuid';

day.js

import dayjs from 'dayjs';

主要觀察rpid，ctime

13、清空內(nèi)容并聚焦案例

當(dāng)發(fā)布完評論后就要這樣

1、清空內(nèi)容

2、聚焦

先創(chuàng)建ref實(shí)例，然后綁定到input，最后調(diào)用focus方法即可

調(diào)用current.focus()即可

14、組件通信

父傳子

function Son(props){return <div>this is son，{props.name}</div>
}
function App() {const name = "this is father"return (<div className="App"><Son name={name}></Son></div>);
}export default App;

props說明

這里修改會(huì)報(bào)錯(cuò)，因?yàn)閜rops是只讀屬性

children說明

子傳父

影響視圖變化的是狀態(tài)數(shù)據(jù)

兄弟組件通信

import {useState} from "react";function A({onGetAMsg}){const name = "this is A"return (<div>我是A組件<button onClick={()=>onGetAMsg(name)}>send</button></div>)
}
function B({name}){return(<div>我是B組件{name}</div>)
}
function App() {const [name,setName] = useState(null)const getAMsg = (msg)=>{setName(msg)}return (<div className="App"><A onGetAMsg={getAMsg}/><B name={name}/></div>);
}export default App;

跨層組件通信

15、useEffect

我們主要關(guān)注是否有請求并且只請求一次。

依賴項(xiàng)參數(shù)說明

第一種情況

事實(shí)也確實(shí)是這樣，組件初始化和更新時(shí)都會(huì)執(zhí)行一次

第二種情況

這里只執(zhí)行一次

第三種情況

看起來和第一種情況差不多，實(shí)則不然，第一種情況不管什么組件更新都會(huì)執(zhí)行一次，而這里只有count變化才執(zhí)行一次。

清除副作用

import {useEffect, useState} from "react";function Son(){useEffect(() => {const timer = setInterval(()=>{console.log("定時(shí)器執(zhí)行中")},1000)return () => {clearInterval(timer)}}, []);return <div>this is son</div>
}
function App() {const [show, setShow] = useState(true)return (<div className="App">{show && <Son/>}<button onClick={()=>setShow(false)}>卸載Son組件</button></div>);
}export default App;

16、自定義hook函數(shù)

不封裝直接實(shí)現(xiàn)

封裝自定義Hook實(shí)現(xiàn)

抽象實(shí)現(xiàn)的通用邏輯

17、ReactHooks使用規(guī)則

第一種錯(cuò)誤

第二種錯(cuò)誤

18、優(yōu)化B站評論

需求1

json-sever

npm i json-sever -D

根目錄創(chuàng)建db.json

復(fù)制靜態(tài)數(shù)據(jù)過來

pages.json添加serve

npm run serve啟動(dòng)

npm run serve

有笑臉就是成功

可以嘗試請求這個(gè)地址

打開就是模擬get請求

axios

npm i axios

從后臺獲取數(shù)據(jù)?

先初始化一個(gè)動(dòng)態(tài)數(shù)組準(zhǔn)備接收

先在useEffect里編寫函數(shù)邏輯，再來調(diào)用函數(shù)

需求2

封裝函數(shù)

把上一步編寫的邏輯都放到hook函數(shù)里面

App組件調(diào)用

需求3

封裝Item組件

去掉key

這里會(huì)報(bào)錯(cuò)，先把功能去掉

封裝刪除功能（子組件調(diào)用父組件 / 父傳子）

父傳子把功能傳遞下去（onDel那里）

接收一下

重新調(diào)用

至此，我們通過組件抽象的方式實(shí)現(xiàn)了小組件的封裝

19、Redux

快速體驗(yàn)（計(jì)數(shù)器）

模版

最后一步

流程梳理

20、react-redux

配置基礎(chǔ)環(huán)境

store目錄結(jié)構(gòu)設(shè)計(jì)

跟著創(chuàng)建目錄先

21、用redux繼續(xù)實(shí)現(xiàn)counter案例

整體路徑熟悉

使用Reacttoolkit創(chuàng)建counterStore

使用中間件react-redux連接，為React注入store

下面是在根目錄的index.js中操作的哦

react中使用store數(shù)據(jù)

useSelector

react中修改store數(shù)據(jù)

useDispatch

這里還要引入store里的actions對象，然后通過中間件的useDispatch提交

總結(jié)

22、提交action傳參

需求

實(shí)現(xiàn)

完整代碼

原理：跟action對象的payload有關(guān)

23、react-redux異步操作

需求理解：跟之前的沒什么變化，只是多了異步修改

異步操作樣板代碼

實(shí)際代碼，重新創(chuàng)建channelStore.js

導(dǎo)出reducer

24、redus調(diào)試-devtools

安裝擴(kuò)展程序

重啟瀏覽器就可以

25、美團(tuán)案例

1、點(diǎn)擊左邊列表，右邊列表也會(huì)渲染

2、點(diǎn)擊+號下面會(huì)有高亮顯示

3、清除購物車

準(zhǔn)備工作

分類和商品列表

啟動(dòng)項(xiàng)目

npm run start

npm run serve

?創(chuàng)建store實(shí)例

?異步獲取

?

導(dǎo)出

?

modules的index.js引入

根目錄的index.js引入

觸發(fā)action并且渲染數(shù)據(jù)

用redux工具查看

渲染列表

點(diǎn)擊分類激活交互實(shí)現(xiàn)

點(diǎn)擊背景會(huì)變白

redux編寫

解構(gòu)出來并export出去

Menu組件的index.js引入方法和使用dispatch

redux工具調(diào)試查看

引入activeIndex

classNames編寫

商品列表切換顯示（視圖控制）

App.js引入activeIndex

添加購物車實(shí)現(xiàn)

思路

redux編寫

編寫modules的state

編寫reducer

export導(dǎo)出

編寫foodsCart組件

?引入方法

引入dispatch

傳入對象

使用redux工具測試

統(tǒng)計(jì)區(qū)域功能實(shí)現(xiàn)

思路

cart組件取到carList長度渲染

成功實(shí)現(xiàn)

計(jì)算總價(jià)（reduce方法和toFixed）

高亮（classNames）

?起送和結(jié)算顯示控制（三元運(yùn)算符）

購物車列表實(shí)現(xiàn)

思路?

使用cartList渲染

把原本的cart干掉

替換

?添加visible顯示

增減reducer，action提交

?store編寫

export導(dǎo)出

?熟悉Count組件

引入dispatcher

引入reducer

子傳父觸發(fā)回調(diào)?

優(yōu)化（不能是負(fù)數(shù)）

store里修改（判斷邏輯）

清空購物車

store編寫

reducer

export導(dǎo)出

cart組件引入reducer

然后導(dǎo)入dispatcher和reducer方法就可以了?

控制購物車顯示和隱藏

思路（用useState控制，不用Redux）

編寫classNames

優(yōu)化（購物車列表為空應(yīng)該是不會(huì)有蒙層的）

編寫onShow函數(shù)控制

修改之前的setVisible方法為onShow

總結(jié)：多組件共享才要放到Redux里面去，如果不用的話直接用useState就可以了。

26、react-router

前言提示

Vue中不需要export頁面，而React就需要?

npx create-react-app react-router-pro

npm i react-router-dom

npm run start

實(shí)際的router配置

創(chuàng)建Login和Article頁面并export

創(chuàng)建router目錄并import組件最后export

index.js中注入router并且去配置即可

路由導(dǎo)航

聲明式導(dǎo)航（Link）

編程式導(dǎo)航（useNavigate）

導(dǎo)航跳轉(zhuǎn)傳參

1、useSearchParams

在Article頁接收參數(shù)

2、useParams

這個(gè)id是哪里來的呢？要到router實(shí)例去配置

編寫樣式

?到router位置給占位符（重中之重）

后面要接收多個(gè)參數(shù)的話同樣的方式操作即可

在Article頁接收id

嵌套路由配置

Outlet

配置基本跟Vue沒什么兩樣，多了個(gè)Outlet而已 ，作為二級路由出口

默認(rèn)二級路由

我們要的是一進(jìn)入就有顯示“我是面板”，而不用專門去點(diǎn)擊

404路由配置（path用星號“*”配置）

兜底組件

提高體驗(yàn)感

可以加一些按鈕之類跳轉(zhuǎn)到首頁

兩種路由模式

換成hash模式的話直接替換API就可以了，切換頁面的時(shí)候路徑前面有#

?

在實(shí)際開發(fā)中，后端支持的話就選history模式，不支持就選hash模式，其實(shí)沒什么差別

記賬本項(xiàng)目

功能演示

講解：可以切換月份，可以切換年份，會(huì)展示每個(gè)月份的收支，可以輸入“記一筆”

準(zhǔn)備工作

?移動(dòng)端組件庫antd-mobile

?是阿里出品的適應(yīng)React項(xiàng)目的組件庫

配置別名路徑@

配置步驟

修改pages.json的scripts

啟動(dòng)

npm run start

創(chuàng)建test.js測試

index.js導(dǎo)入

VsCode路徑聯(lián)想配置

數(shù)據(jù)Mock實(shí)現(xiàn)

?json-sever實(shí)現(xiàn)數(shù)據(jù)mock

npm i -D json-sever

server目錄下創(chuàng)建data.json文件放入數(shù)據(jù)

添加啟動(dòng)命令

意思是添加一個(gè)以data.json為數(shù)據(jù)源，端口號為8888的服務(wù)器

啟動(dòng)

npm run serve

訪問接口?

配置路由

編寫router和pages?

index.js引入

配置二級路由

antD-mobile主題定制

編寫css文件

注入到入口文件

到官方文檔可以看見更多配置

Redux管理賬目列表

思路

補(bǔ)充name

編寫異步（！！！）

記得導(dǎo)出異步

測試即可

TabBar

靜態(tài)布局實(shí)現(xiàn)

ant design mobile官網(wǎng)查找

這個(gè)去看老師代碼就可以

導(dǎo)入代碼和scss文件

npm i scss

配置跳轉(zhuǎn)路由（onChange、useNavigate）

統(tǒng)計(jì)功能

需要實(shí)現(xiàn)的：可以切換不同月份的賬單，小箭頭有一個(gè)交互的效果，然后下面的三個(gè)部分都有統(tǒng)計(jì)

源代碼去文檔復(fù)制即可

點(diǎn)擊切換搜索

換一下visible

關(guān)閉彈窗（onCacel）

onConfirm

蒙層（onClose）

可以都換成一個(gè)函數(shù)然后綁定

切換上下箭頭

點(diǎn)擊確定切換時(shí)間顯示

?邏輯：點(diǎn)擊確定的時(shí)候會(huì)回調(diào)一個(gè)時(shí)間，我們調(diào)用一下set方法就可以了

嵌入CurrentDate

這里會(huì)顯示錯(cuò)誤，加個(gè)字符串就可以

?時(shí)間顯示有點(diǎn)長，引入dayjs進(jìn)行格式化

賬單數(shù)據(jù)按月分組

從Redux中拿到數(shù)據(jù)以及二次處理（useMemo）

?按月分組（lodash）

npm i lodash

計(jì)算統(tǒng)計(jì)數(shù)據(jù)

獲取當(dāng)前月

定義monthList

從useMemo取到數(shù)據(jù)

編寫新Memo

渲染數(shù)據(jù)

初始化計(jì)算

當(dāng)日統(tǒng)計(jì)

組件去復(fù)制模版然后export，導(dǎo)入到index.js就可以

子組件接收

引入父組件的計(jì)算邏輯

更換遍歷數(shù)據(jù)

單日賬單列表顯示

復(fù)制模版

復(fù)制數(shù)據(jù)

底部的累加器中英文關(guān)系

引入

點(diǎn)擊切換

?控制顯示隱藏

?更換圖標(biāo)

基地址不變，變圖片就可以

準(zhǔn)備靜態(tài)代碼，然后引入即可

父傳子

?

新增賬單

還是一樣去復(fù)制New代碼

設(shè)置激活狀態(tài)

設(shè)置頁面切換

新增表單實(shí)現(xiàn)

綁定value和onChange

綁定賬單類型,useFor

編寫Redux

主文件引入

收尾優(yōu)化

高亮

當(dāng)選中種類后也有選擇效果

?時(shí)間記賬

設(shè)置visible

點(diǎn)擊確定

存儲(chǔ)時(shí)間

修改完?duì)顟B(tài)后關(guān)閉時(shí)間選擇器

修改時(shí)間

27、規(guī)范項(xiàng)目

目錄結(jié)構(gòu)

scss

npm i scss -D

嵌套語法

antDesign

npm i antd --save

測試

Router

步驟

編寫router

引入routerProvider和router

配置別名路徑

這里前面有就不重復(fù)了

登錄

表單校驗(yàn)

校驗(yàn)邏輯可以去antd官網(wǎng)組件看

失焦時(shí)校驗(yàn)

多條校驗(yàn)規(guī)則

獲取數(shù)據(jù)

封裝request模塊

npm i axios

?配置

中轉(zhuǎn)工具模塊函數(shù)

redux管理token

npm i react-redux @reduxjs/toolkit

綁定Provider和store

異步獲取token

登錄界面觸發(fā)異步

redux可以看到有token存儲(chǔ)

后續(xù)邏輯

我們不能直接觸發(fā)異步就跳轉(zhuǎn)，這樣會(huì)有風(fēng)險(xiǎn)，所以要先等待結(jié)果返回，所以要加async和await

token持久化

刷新的時(shí)候看看本地存儲(chǔ)有沒有，有的話就存儲(chǔ)，沒有的話再給空字符串

本地存儲(chǔ)

修改初始化token

不能這么簡單粗暴

封裝token的存儲(chǔ)

編寫

放到中轉(zhuǎn)工具函數(shù)

調(diào)用封裝函數(shù)

Axios頭注入token

講解：前面部分是前端的固定編寫部分，后面部分由后端要求來拼接

token測試

在xhr那里看請求頭是否有加上Authorizatoin字段

使用token跳轉(zhuǎn)路由

高階組件

放進(jìn)component里

route.js引入

刪除localstorage里的token然后再刷新一下頁面就可以了

Layout靜態(tài)結(jié)構(gòu)搭建

清除默認(rèn)邊距

這樣是有問題的，接下來要安裝一個(gè)樣式全局初始化插件，可以把瀏覽器默認(rèn)的padding,margin清除掉

npm i normalize.css

入口文件導(dǎo)入

占滿整個(gè)屏幕

放入入口css文件

root指的是public目錄下的div，就是body下的子節(jié)點(diǎn)

二級路由配置

放置二級路由出口

點(diǎn)擊菜單跳轉(zhuǎn)路由

原理：點(diǎn)擊傳route的key進(jìn)去

navigate跳轉(zhuǎn)