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下配置，具体如下

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

　　博主从事前端开发也只有一两年时间，见解不深，还望大家多多指摘。

　　原创文章，版权所有，转载请注明出处。