目錄

引言
第一章：項目創(chuàng)建、antd、less
第二章：路由攔截、路由嵌套
第三章：狀態(tài)管理 Redux
第四章：網(wǎng)絡(luò)請求、代理、mockjs
第五章：webpack配置
第六章：Eslint

源碼地址

https://github.com/dxn920128/cms-base

安裝axios

npm install -S -D axios qs @types/qs

• axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端
• qs

創(chuàng)建axios對象

const service = axios.create({
  timeout: 2 * 60 * 1000,// 請求超時時間
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

request攔截器，為每一條網(wǎng)絡(luò)請求添加token等多種請求參數(shù)。

service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    if (config.params) {
      for (const item in config.params) {
        if (item === null) {
          delete config.params[item]
        }
      }
    }
    if (config && config.headers) {
      const token = getToken()
      if (token) {
        config.headers['X-KT-Login-Token'] = token
      }
    }
    return config
  },
  (error: AxiosError) => {
    return Promise.reject(error)
  }
)

response攔截器，對請求異常、登錄過期、無權(quán)限等狀態(tài)進(jìn)行管理。

service.interceptors.response.use(
  (response: AxiosResponse<ResponseData<any>>) => {
    const res = response.data
    switch (res.code) {
      case 0://正常數(shù)據(jù)
        return response
      case 10104://登錄超時
        store.dispatch(logout())
        window.location.href = `${window.location.origin}`
        return Promise.reject(res.message)
    }
    message.error(response.data.message)
    return Promise.reject(new Error(response.data.message))
  },
  (error) => {
    return Promise.reject(error)
  }
)

請求代理

devServer: {
    proxy: {
      '/cmsapi': {
        target: '',
        changeOrigin: true,
        pathRewrite: {
          '^/cmsapi': ''
        }
      }
    }
}

配置mockjs數(shù)據(jù)

npm install -D mocker-api mockjs cross-env

• mocker-api 為REST API創(chuàng)建模擬請求，在開發(fā)過程中方便調(diào)試。
• mockjs 生成模擬數(shù)據(jù)
• cross-env 跨平臺設(shè)置環(huán)境變量

devServer: {
    //如果使用mocker-api庫
    before (app) {
      if (process.env.MOCKER_ENV) {
        apiMocker(app, path.resolve('./mocker/index.js'), {})
      }
    }
  },

在package.json中配置mocker啟動命令

    "start:mocker": "cross-env port=4000 cross-env MOCKER_ENV=true craco start",

啟動項.png

craco全部配置

const path = require('path')
const CracoLessPlugin = require('craco-less')
const apiMocker = require('mocker-api')//使用mocker-api庫
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,//引入less
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true //js修改主題樣式
          }
        }
      }
    }
  ],
  babel: {
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }], //裝飾器
      [
        'import',//按需引入antd 樣式
        {
          'libraryName': 'antd',
          'libraryDirectory': 'es',
          'style': true
        }
      ]
    ]
  },
  devServer: {
    proxy: {
      '/cmsapi': {
        target: '',
        changeOrigin: true,
        pathRewrite: {
          '^/cmsapi': ''
        }
      }
    },
    //如果使用mocker-api庫
    before (app) {
      if (process.env.MOCKER_ENV) {
        apiMocker(app, path.resolve('./mocker/index.js'), {})
      }
    }
  },
};