使用antd開發後臺管理前端

這一篇主要用來記錄使用antd開發後臺管理的前臺頁面步驟和遇到的坑

原因

不用現成的antdPro，而是用antd開發，有以下幾方面的原因：

1. antdPro啓動速度太慢，修改一個東西好，要加載好半天才能刷新出來
2. 很多東西感覺封裝的過度了，增加了學習成本，但是不可否認，確實減少了大量的重複代碼

開始使用antd

0. 先介紹一款好用的工具，tyarn，自動配置了國內的源，用法跟yarn一樣，速度很快
1. 創建react項目

tyarn create react-app antd-admin

2. 引入antd

tyarn add antd

目前的antd版本是4.16.13，需要將less-loader降版本到5，否則會報錯，希望以後會解決這個問題，less-loader降到版本5後，使用 @antd/pro-layout 也會報類似的錯，不知如何解決，知道怎麼解決的老兄指點一下，謝謝。

3. 引入axios，作爲網絡請求工具

tyarn add axios

使用axios，最好創建實例，在實例裏修改需要的配置，防止全局修改配置，污染其他請求

4. 安裝react路由庫

tyarn add react-router-dom

5. 配置代理，目前在package.json配置代理，只支持字符串格式，不支持對象，對於複雜點的代理，不能滿足，官方推薦使用 http-proxy-middleware 來配置代理，本人沒有安裝這個，而是暴露出webpack配置，執行命令 tyarn eject 即可暴露出webpack配置文件，直接在webpack配置裏面進行代理的配置，配置文件爲 config/webpackDevServer.config.js ，修改proxy屬性即可配置，下面是我的代理配置

proxy: {
      "/api": {
        "target": "http://localhost:8442/",
        "changeOrigin": true,
        "pathRewrite": {
          "^/api": ""
        }
      },
      "/img": {
        "target": "http://localhost:8001/",
        "changeOrigin": true,
        "pathRewrite": {
          "^/img": ""
        }
      },
      "/baiduApi": {
        "target": "http://api.fanyi.baidu.com",
        "changeOrigin": true,
        "secure": false,
        "pathRewrite": {
          "^/baiduApi": ""
        }
      }
    },

項目中用到了百度翻譯的api，很多這種api是不支持跨域的，因此在這裏配置個代理，即可解決實際跨域的問題，在發佈時，同樣在nginx裏面做一個代理，

location /baiduApi {
	proxy_pass http://api.fanyi.baidu.com;
	rewrite "^/baiduApi/(.*)$" /$1 break; 
}

至此，基本環境就搭建好了，可以愉快的開發了，對於後續的坑，本人遇到了再做補充。