前后端分离开发分析

前后端开发分离，即是前后端除商定 API 接口外，其他的开发工作都不再相互干涉，前端开发进度不再受后端影响。

以开发一个 SPA 单页应用为例，日常开发工作流程变为：

1. 前后端同设计师一起 review 设计稿，对某些设计细节提出技术可行性，交互合理性建议；
2. 根据某个模块，前后端商量 API 接口，包括确定接口名称，字段名等。后端的任务变成根据前端请求，提供相应的数据，而页面渲染及交互逻辑均由前端自主完成；
3. 前端需要在本地维护一个小型服务器，并根据商定好的 API 接口 mock 一些测试数据帮助进行开发；
4. 当后端某些 model 建立完毕后，前后端打开数据接口通道，进行 API 联调；

以上开发过程中，前端需要解决的关键问题是开发过程中直接调用后端接口产生的跨域问题

解决办法有：

• 直接启动服务端项目，将服务端项目中的资源 url 指向到前端服务中的静态资源地址，因为是直接在服务端的环境中调试，不存在接口跨域的问题，但就需要同时启动两套环境，并且需要借助 nginx 对资源地址进行代理转发，配置会比较繁琐。

• 采用 CORS 跨域：后端接口在返回的时候，在 response header 中加入 'Access-Control-Allow-origin': * 等配置，利用跨域资源共享实现跨域，需要依赖服务端在请求头做响应头配置。

• http-proxy: 用 nodejs 搭建本地服务器，根据开发环境，指定接口请求地址是本地 mock 的测试数据，还是后端提供的 api 地址，并能判断访问接口，根据不同接口决定不同 URL 进行转发。由于利用了 http-proxy 正向代理的模式进行了转发，采用的是服务对服务的模式，能较为完美地解决本地开发时的跨域问题。

webpack 的 http-proxy 正向代理解决跨域

1. 搭建 nodejs 和 http-proxy 环境：

安装所需依赖包：

• npm install express // express 作为 node 基础服务框架。
• npm install http-proxy-middleware // http-proxy 的 express 中间件
• npm install body-parser // 用来解析 http 请求体
• npm install querystring // 解析 http 请求所带的数据, 如将字符串反序列化为对象, 对象解析为字符串

核心代码 - server.js:

// 引入 express, http-proxy-middleware, mocks 及 proxyConfig
const proxy = require('http-proxy-middleware')
const express = require('express')
const router = require('../_mocks_/')
const proxyConfigs = require('./proxyConfig.js')

const port = process.env.PORT || 3000 // 指定服务器启动端口，默认为 3000
const isProduction = false  // 当前 API 环境，本地为 false， 线上为 true

if(isProduction) {
   const apiProxy = (targetUrl) => proxy({
      target: targetUrl,
      changeOrigin: true,
      ...
    })
   proxyConfigs.forEach(({url, target}) => app.use(url, apiProxy(target)))
} else {
  app.use('/api', router)
}

2. 集成 webpack

首先, 拆分 webpack 为：

• webpack.config.js
  webpack 基础配置，包含打包 image 的 url-loader, file-loader,
• webpack.config.dev.js
  加入开发环境下所需要的 devtools，重写 entry,
• webpack.config.prod.js
  以 webpack.config.js 为 base, 重写 publicPath；将经过 style-loader 打包之后内联在 html style 标签下的 css 样式通过剔除 style-loader 之后输出为标准的 css 文件；关闭打包后的文件写入磁盘的开关。

然后, 通过 webpack 中间件，将 webpack 与第一步中的 server.js 结合起来：

所需中间件：

• npm install webpack-dev-middleware
• npm install webpack-hot-middleware

server.js 部分代码：

// 引入中间件及 webpack 配置，这里只引入 dev 环境下的
const webpack = require('webpack')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackConfig = require('./webpack.config.dev.js')

// 定义一个 app 服务
const app = express()
const compiler = webpack(webpackConfig)

app.use(webpackDevMiddleware(compiler, {  // 将经过 webpack 打包后的文件装入一个服务器
  noInfo: true,
  publicPath: webpackConfig.output.publicPath // 指定在哪个目录下启动服务, 与 webpack.config.dev.js 的 publicPath 保持同步
  stats: {
    colors: true,
    chunks: false,
    chunkModules: false,
  },
}))
app.use(webpackHotMiddleware(compiler)) // 热替换

3. 配置 node 启动脚本

{
  "start": "cross-env NODE_ENV=development nodemon --watch webpack --watch __mocks__ ./webpack/devServer.js",
}