react學習筆記（1）：從先後端分離到項目部署

　　我來到如今這家公司有一年多的時間，一直作的是財政系統相關的產品，前端的技術棧用的是傳統的jQuery+bootStrap+requireJs，隨着項目的開發，愈來愈多的弊病凸顯出來。

　　首先是先後端的代碼存放在同一個工程目錄下，先後端工程師進行開發時，都必須把整個項目導入到開發工具中（像myEclipse和IntelliJ IDEA等），一方面前端在開發以前須要花費大量的時間來部署開發環境，若是後端上傳錯了文件，整個系統啓動不起來，前端就只能乾等着，先後端耦合性很大，另外一方面使用myEclipse這樣的開發工具開發前端項目操做上不熟悉，開發效率很低。

　　其次在整個項目中，組件化很明顯，大多數頁面中所須要的功能都是相似的，雖然可使用require封裝一些公用的組件，可是因爲js技術有限，組件與組件之間仍是存在不少耦合的問題，而且隨着自定義的組件愈來愈多，常常遇到一個頁面開頭先加載幾十個組件的狀況，後期維護也很麻煩，對於有代碼潔癖的人來講，這顯然不是一種好方法。

　　因而就想到用react能不能解決這些問題呢？

　　首先了解到螞蟻金服出品的企業級產品的設計體系——Ant Design，發現裏面的不少組件都很適合咱們現有的產品，若是能用到實際項目中，那麼本身編寫組件的問題就能夠避免了，瞬間心動不已。而後就跟着上面的教程開始了學習，用create-react-app腳手架搭建了一個react開發環境，感受是基本入門了。可是問題也隨之而來：若是用react的話，如何結合到現有的項目中來呢？之前是先後端代碼放在一塊兒，使用react就須要前端單獨起服務，當前端的代碼開發完成後又怎麼和後臺的代碼部署到同一臺服務器上，這篇文章主要是針對這一系列的探索。

　　什麼是先後端分離

　　這幾年先後端分離被提到的愈來愈多，在網上查什麼是先後端分離，基本是說後臺只提供數據api，與用戶的交互操做前端來實現。咱們如今的工做模式，前端也是經過ajax請求後臺數據，前端的代碼單獨放在工程目錄的一個文件夾中，不與後臺的代碼耦合，這算不算先後端分離。

　　先後端分離是先後端代碼庫分離，前端代碼中有能夠進行Mock測試(經過構造虛擬測試對象以簡化測試環境的方法)的僞後端，能支持前端的獨立開發和測試。然後端代碼中除了功能實現外，還有着詳細的測試用例，以保證API的可用性，下降集成風險。具體來講應該像下圖中所示的，前端使用node起一個本地服務器做爲中間層，而後經過一些插件將api請求轉發到後臺，來模擬線上的場景。後臺與數據庫交互提供api接口。這裏又回到以前用create-react-app搭建react開發環境，最後的npm start應該就是啓動本地服務器了吧。隨之而來的一個問題就是數據訪問跨域的問題，前端本地服務和後臺服務既然分離了，那麼確定不在同一個域當中的，這該怎麼辦？

　　跨域問題

　　1.react當中解決跨域問題用proxy能夠實現

　　對於使用creat-react-app構建的項目，能夠直接在package.json下配置，具體以下

1 "proxy": "http://api.xxxx.com"  

　　若是同時使用多個域，配置以下

//package.json中加入  
  "proxy": {  
    "/api/RoomApi": {  
      "target": "http://open.douyucdn.cn",  
      "changeOrigin":true  
    },  
    "/api/v1":{  
      "target":"http://capi.douyucdn.cn",  
      "changeOrigin":true  
    }  
  }  

　　對於antd-pro的項目，須要在package.json的同等目錄下添加.roadhogrc文件

{  
  "entry": "src/index.js",  
  "extraBabelPlugins": [  
    "transform-runtime",  
    "transform-decorators-legacy",  
    "transform-class-properties",  
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]  
  ],  
  "env": {  
    "development": {  
      "extraBabelPlugins": [  
        "dva-hmr"  
      ]  
    }  
  },  
  "externals": {  
    "g2": "G2",  
    "g-cloud": "Cloud",  
    "g2-plugin-slider": "G2.Plugin.slider"  
  },  
  "ignoreMomentLocale": true,  
  "theme": "./src/theme.js",  
  "proxy": {  
    "/api": {  
      "target": "http://api.xxxx.com/",  
      "changeOrigin": true  
    }  
  }  
}  

　　2.使用nodejs中的http-proxy-middleware插件

　　3.使用jsonp，可是不支持post請求方式

　　4.後臺配置cors，可是ie67徹底不兼容，ie89須要作一些特殊處理，ie10以上才能使用

　　後兩種須要後臺大拿配合

　　好了跨域的問題解決了，那麼若是是react怎麼請求後臺數據？

　　數據請求

　　ajax、axios、fetch

　　jquery ajax是使用最多的一種方式，問題是jQuery文件太大，react中單純的使用ajax就引入jquery不太合理

　　Axios 是一個基於promise的HTTP庫，能夠用在瀏覽器和node.js中。簡單易用，功能強大。兼容性方面要低於jQuery的ajax，支持ie9以上。提供了不少併發請求的接口，方便了不少。

　　fetch更加底層，寫法很方便，缺點是隻對網絡請求報錯，對400，500都看成成功的請求，須要封裝處理。

　　綜上考慮使用axios更好一些。

　　上線統一部署

　　前端代碼開發完成後如何與後臺代碼統一部署呢，這裏就用到了webpack之類的打包工具，使用打包工具能夠把前端項目打包成靜態壓縮文件，即一個index.html一個css一個js壓縮文件，而後把他們放在後臺工程目錄裏面運行整個項目就好了，這裏要注意文件路徑問題，而且以前的跨域處理也要去掉。

　　對於使用creat-react-app構建的項目，可使用npm run build來打包。

　　到此，整個使用react的流程就基本搞清了，接下來就是實際的開發工做，react的使用，es6的語法都是重中之重。這裏推薦看一下這篇文檔，在 2017 年學習 React + Redux 的一些建議，對react的學習應該會有所幫助。

　　博主從事前端開發也只有一兩年時間，看法不深，還望你們多多指摘。

　　原創文章，版權全部，轉載請註明出處。