Projet de construction React

environnement

Vérification nodeet npmenvironnement
Le projet est développé sur la base de la version suivante

construire un projet

Utiliser npm init viteet construire étape par étape

Ensuite, installez quelques plugins nécessaires

# 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

Configurer @ dans conifg

const path = require("path")
webpack: {
    
    
    alias: {
    
    
      "@": path.resolve(__dirname, "src")  // 使用@符号做相对路径处理
    }
  }

configurationaxios

Créez un fichier de demande, et puis bla bla

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

Définir l'interface dans le fichier 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)

Configuration suivanteredux

// 引入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>
)