umi+dva+antd+axios搭建項目，跨域代理問題

  項目背景：以前學過一些react，但是沒有實際寫過項目，只了解一些基礎的用法，這次正好空閑有時間將一個后台系統改寫為react的，來實際操作一下react。深感直接用react寫會很累，所以結合現代的流行的框架umi、dva、antd來寫。這樣寫起來也比較輕松，也有成就感。下面開始記錄項目搭建的一些過程。

　　一、項目搭建：umi的官網上有說怎么新建一個項目，但是對於我這次的項目搭建不是很合適，於是采用的另一種搭建方式：

1.mkdir myapp && cd myapp

2.npm create umi

3.執行上一步之后，界面出現以下選擇

? Select the boilerplate type (Use arrow keys) ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. ❯ app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.

4. ? Do you want to use typescript? (y/N)
5. ? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◯ antd ◯ dva ◯ code splitting ◯ dll
最后一步選擇antd和dva，選擇后生成了一個文件夾：create，然后進入這個文件夾，使用npm install安裝依賴
安裝完成之后，啟動項目：npm start。此時如果提示報錯，可能是umi-plugin-react沒有配置好，我重新安裝了最新的依賴："@umijs/preset-react": "^1",然后再刪除了原有的.umirc.js配置文件，新建config文件夾，
在下面建立config.js文件，在里面配置：

export default {
  base: '/',
  plugins: [
    ['umi-plugin-react', { // 主要是這個配置，我曾按照最新的方式直接配置 antd：{}和dva：{}結果還是報錯，這樣就不報錯了。
      antd: true,
      dva: {
        hmr: true
      },
      dynamicImport: {
        webpackChunkName: false,
        // loadingComponent: './components/PageLoading/index'
      },
      locale: {
        enable: true, // default false
        default: 'zh-CN', // default zh-CN
        baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
      }
      // ...(!process.env.TEST && os.platform() === 'darwin'
      //   ? {
      //     dll: true,
      //     hardSource: true,
      //   }
      //   : {}),
    }],
    // ['umi-plugin-ecma5-validator', {}],
  ]
}

這一系列配置完成之后，啟動項目就看到默認的啟動頁了。

二、dva的使用

　　dva官方介紹：dva 首先是一個基於 redux 和 redux-saga 的數據流方案，然后為了簡化開發體驗，dva 還額外內置了 react-router 和 fetch，所以也可以理解為一個輕量級的應用框架。在umi中使用dva很簡單，在安裝了dva之后，在src目錄下直接新建models文件夾，下面新建app.js，這個文件則是全局的可以在里面配置全局的一些方法。具體看官網和自己的實際需求。然后單獨的每個頁面的model則可以直接配置在單獨的文件夾下，如login文件夾下有：index.js、index.less、model.js，這樣在index.js里直接引入dva的connect，不必引入model，框架會自動識別到，然后再導出組件的時候掛載，如下所示：

export default connect(({ login }) => ({ login }))(Login)

這樣在組件里的props里就可以拿到我們管理的數據了。model.js里的具體寫法參看官網。

三、antd的使用，在安裝之后，進行了第一步里的配置之后，則在各個組件里直接引入就可以了，推薦按需引入，如下：

import { Form, Input, Button, Divider, Icon } from 'antd';

四、axios使用和跨域相關問題

終於進入到今天的關鍵問題了，網上搜了好多關於react里使用axios解決跨域的問題，基本都是說兩種方案：

1.在package.json里配置proxy，以對象的方式，記得加雙引號。並說明這種方式只適合一個代理的接口。

2.使用http-proxy-middleware，首先安裝這個插件，然后在src下面新建setupProxy.js文件，里面配置內容就不多說了，網上一搜一大把。

然而這兩種方式我用了都沒有任何效果，我覺得是因為我在umi里用的原因，然后突然看到一位小伙伴是在.umirc.js文件下直接配置的proxy，於是我在我的config.js里做了proxy代理，然后點擊登錄，我的天，簡直了，直接就代理成功了，哈哈哈，終於成功了，沒想到umi的配置這么簡單，我突然很想說一句：umi真香啊！

當然，以上的這些經驗主要是由於我沒有深入理解這些框架導致的，如果大家比較熟悉這些框架可能不會出現這些問題。總而言之，言而總之，終於可以正常開發了，接下來就是權限方面的難題了。后面再更新。。。