规范的项目结构
安装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: 'http://geek.itheima.net/v1_0',
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: 'http://geek.itheima.net/v1_0',
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