环境
检查一下node和npm环境
项目是基于以下版本开发的
搭建项目
使用npm init vite然后一步一步搭建
接下来安装一些必须的插件
# react-redux
npm install react-redux
# 路由
npm install react-router-dom
# redux
npm install redux
# 引入redux-thunk 用于支持异步
npm install redux-thunk
# 用于redux开发者工具
npm install redux-devtools-extension
# 数据持久化 redux-persist
npm install redux-persist
在conifg里配置@
const path = require("path")
webpack: {
alias: {
"@": path.resolve(__dirname, "src") // 使用@符号做相对路径处理
}
}
配置axios
创建一个requse文件，然后吧啦吧啦
import axios from 'axios'
import QS from 'qs'
import {
message } from 'antd';
// 请求超时时间
axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// request拦截器
axios.interceptors.request.use(
config => {
let getToken = localStorage.getItem('TOKEN')
if (getToken) {
config.headers['Authorization'] = getToken // 让每个请求携带自定义token 请根据实际情况自行修改
}
config.headers['Content-Type'] = 'application/json'
return config
},
error => {
Promise.reject(error)
}
)
// response 拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
message.error(response.message)
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login'
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 跳转登录页面
case 403:
message.error('登录过期，请重新登录')
// 清除token
localStorage.removeItem('TOKEN');
setTimeout(() => {
router.replace({
path: '/login'
});
}, 1000);
break;
// 404请求不存在
case 404:
message.error('网络请求不存在')
break;
// 其他错误，直接抛出错误提示
default:
message.error(error.response.data.message)
}
return Promise.reject(error.response);
}
}
)
/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get (url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
});
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post (url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
export default axios
在api文件里设置接口
import {
get, post } from '@/request/index'
export const getVierifionCode = data => get('/api/User/getVierifie', data)
export const login = data => post('/api/user/login', data)
接下来配置redux
// 引入legacy_createStore 创建redux最为核心的store对象
import {
legacy_createStore, applyMiddleware, combineReducers } from 'redux';
// 引入所有reducers
import NumStatesReducer from './NumStates/reducers';
// 引入redux-thunk 用于支持异步
import thunk from 'redux-thunk'
// 引入redux-devtools-extension 用于redux开发者工具
import {
composeWithDevTools } from 'redux-devtools-extension'
// 本地存储
import storage from 'redux-persist/lib/storage';
// 数据持久化
import {
persistStore, persistReducer } from 'redux-persist';
const persistConfig = {
key: 'root',
storage: storage,
// 如果不想将部分state持久化，可以将其放入黑名单(blacklist)中.黑名单是设置
// blacklist: ['不想缓存的状态的名字']
};
// // 组合各模块的reducer
const reducer = combineReducers({
NumStatesReducer
})
const _reducers = persistReducer(persistConfig, reducer)
const store = legacy_createStore(_reducers, composeWithDevTools(applyMiddleware(thunk)))
const persistor = persistStore(store)
//抛出store和持久化工具两个对象信息
export {
store, persistor };
App.js
import React, {
useEffect } from "react";
import {
useRoutes } from "react-router-dom";
import routers from "./router/index";
function App () {
const outlet = useRoutes(routers)
return (
<div className="w100 h100">
{
outlet}
</div>
)
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom/client"
import {
BrowserRouter } from "react-router-dom";
import App from './App'
import '@/assets/css/common.scss';
import './index.css';
import {
Provider } from 'react-redux'
import {
store, persistor } from './store/index'
import {
PersistGate } from "redux-persist/integration/react"
ReactDOM.createRoot(document.getElementById('root')).render(
<Provider store={
store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
)