React基础之项目实战
React基础之项目实战
规范的项目结构
安装scss
npm install sass -D
安装Ant Design组件库
内置了一些常用的组件
npm install antd –save
路由基础配置
npm i react-router-dom
路由基本入口
import
Layout
from
“../page/Layout”
;
import
Login
from
“../page/Login”
;
import
{
createBrowserRouter
}
from
“react-router-dom”
;
const
router
=
createBrowserRouter
([
{
path:
“/”
,
element:
<
Layout
/>
},
{
path:
“/login”
,
element:
<
Login
/>
}
])
export default
router
主index.js入口配置
import
React
from
‘react’
;
import
ReactDOM
from
‘react-dom/client’
;
import
{
RouterProvider
}
from
‘react-router-dom’
;
import
router
from
‘./router’
;
const
root
=
ReactDOM
.
createRoot
(
document
.
getElementById
(
‘root’
));
root
.
render
(
<
React.StrictMode
< RouterProvider router = { router } />
</
React.StrictMode
);
配置@别名路径
安装craco工具包
npm i @craco/craco -D
也就是将替换成@
1.创建craco.config.js配置文件
const
path
=
require
(
‘path’
)
module
.
exports
= {
// webpack
配置
webpack:
{
//
配置别名
alias:
{
//
约定：使用
@
表示
src
文件所在路径
‘@’
:
path
.
resolve
(
__dirname
,
‘src’
)
}
}
}
2.将package.json进行替换的scripts
- “scripts”
{
“start”
:
“craco start”
,
“build”
:
“craco build”
,
“test”
:
“craco test”
,
“eject”
:
“craco eject”
},
添加路径提示
1.创建jsconfig.json
{
- “compilerOptions”
{
“baseUrl”
:
“./”
,
- “paths”
{
- “@/*”
[
“src/*”
]
}
}
}
Login开发通过使用antDesion组件
Token持久化
因为Redux是基于浏览器内容的存储方法，刷新时状态会恢复为初始值，比如登录之后Token再刷新页面之后就会丢失
我们可以在获取到token之后，就在本地的localStorage进行存储，在进行token初始化的时候，先判断token在localStorage中有没有，如果没有则为空，如果有那就用localStrage中的
token请求头注入
import
axios
from
‘axios’
import
{
getToken
}
from
‘./token’
const
request
=
axios
.
create
({
baseURL:
'
'
,
timeout:
5000
})
// 添加请求拦截器
request . interceptors . request . use (( config ) => {
// 操作 config 注入 token 数据
//1. 获取 tolen
const token = getToken ()
//2. 注入 token
if ( token ){
config
.
headers
.
Authorization
=
Bearer** **${** **token** **}** **
}
return config
}, ( error ) => {
return Promise . reject ( error )
})
// 添加响应拦截器
request
.
interceptors
.
response
.
use
((
response
)
=>
{
// 2xx
范围内的状态码都会触发该函数。
//
对响应数据做点什么
return
response
.
data
}, (
error
)
=>
{
//
超出
2xx
范围的状态码都会触发该函数。
//
对响应错误做点什么
return
Promise
.
reject
(
error
)
})
export
{
request
}
token跳转
1.封装路由组件
//封装高阶组件
//核心逻辑：有token 正常跳转，无token去登录
import
{
Navigate
}
from
‘react-router-dom’
import
{
getToken
}
from
‘@/utils’
export
function
AuthRoute
({
children
}) {
const
isToken
=
getToken
()
if
(
isToken
) {
return
<>
{
children
}
</>
}
else
{
return
<
Navigate
to
=
{
‘/login’
}
replace
/>
}
}
2.在路由配置中应用
import
Layout
from
“@/page/Layout”
;
import
Login
from
“@/page/Login”
;
import
{
createBrowserRouter
}
from
“react-router-dom”
;
import
{
AuthRoute
}
from
“@/components/AuthRouter”
;
const
router
=
createBrowserRouter
([
{
path:
“/”
,
element:
<
AuthRoute
<
Layout
/></
AuthRoute
},
{
path:
“/login”
,
element:
<
Login
/>
}
])
export default
router
初始化样式
npm install normalize.css0
并在项目入口index配置
import
’normalize.css'
设置Token失效或错误重新跳转登录页
import
axios
from
‘axios’
import
{
getToken
,
removeToken
}
from
‘@/utils’
import
router
from
‘@/router’
const
request
=
axios
.
create
({
baseURL:
'
'
,
timeout:
50000
})
// 添加请求拦截器
request
.
interceptors
.
request
.
use
((
config
)
=>
{
//
操作
config
注入
token
数据
//1.
获取
tolen
const
token
=
getToken
()
//2.
注入
token
if
(
token
){
config
.
headers
.
Authorization
=
`Bearer
${
token
}
`
}
return
config
}, (
error
)
=>
{
return
Promise
.
reject
(
error
)
})
// 添加响应拦截器
request . interceptors . response . use (( response ) => {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response . data
}, ( error ) => {
// 添加 401 token 失效
if ( error . response . status === 401 ){
removeToken ()
router . navigate ( ’/login’ )
window . location . reload ()
}
return Promise . reject ( error )
})
export
{
request
}
快速接入Echart基础图标
npm i echarts
import
{
useEffect
,
useRef
}
from
‘react’
import
as
echarts
from
’echarts'
//柱状图
const
BarChart
=({
title
})
=>
{
const
chartRef
=
useRef
(
null
)
useEffect
(()
=>
{
var
chartDom
=
document
.
getElementById
(
‘main’
);
var
myChart
=
echarts
.
init
(
chartDom
);
var
option
;
option
= {
title:
{
text:title
},
xAxis:
{
type:
‘category’
,
data:
[
‘Mon’
,
‘Tue’
,
‘Wed’
,
‘Thu’
,
‘Fri’
,
‘Sat’
,
‘Sun’
]
},
yAxis:
{
type:
‘value’
},
series:
[
{
data:
[
120
,
200
,
150
,
80
,
70
,
110
,
130
],
type:
‘bar’
}
]
};
option
&&
myChart
.
setOption
(
option
);
}, [])
return
<
div
id
=
‘main’
style
=
{
{
width:
‘400px’
,
height:
‘300px’
}
}
/>
}
export default
BarChart
在其他部分复用
import
BarChart
from
“@/components/BarChart”
const
Home
= ()
=>
{
return
(
<
div
<
BarChart
title
=
'
三大框架满意度
'
/>
</
div
)
}
export default
Home
富文本编辑器
npm install react-quill