react学习笔记（1）：从前后端分离到项目部署

2018-06-24 02:16:33来源：未知阅读 ()

　　我来到现在这家公司有一年多的时间，一直做的是财政系统相关的产品，前端的技术栈用的是传统的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  
    }  
  }  
}