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的学习应该会有所帮助。

　　博主从事前端开发也只有一两年时间，看法不深，还望你们多多指摘。

　　原创文章，版权全部，转载请注明出处。