web前后端分离式开发实践

阅读本文你需要了解(pre-knowledge)

javascript语法
http协议的基本知识

简述

我接触前后端分离这个概念, 最早是在使用ASP.NET MVC4的时候. 那时候主要做的就是把一个web项目分层, M-model, V-view, C-controller各司其职, 配合的也是非常好. 但是前后端分离的没那么彻底, 项目还是一整个项目.
随着vuejs, angular2, reactjs这些框架的逐渐成熟, 生态圈日渐完善, 前后端分离这个概念就变的越来越火了. 这些框架的发展, 算是给前端开发带来了革命性的变更(主要得益于HTML的新特性). 下面我就想讲一讲基于这些前端框架的”新型”前后端分离.
归根结底, 不管是哪种程度的分离, 最终目标都是为了解决以下一些问题(如不完善, 欢迎补充):

解放开发人员, 使其能专注于各自的业务领域. 前端不用再搭建后端环境, 后端只需要专注api开发.
前后端项目分开部署, 后端不再需要对前端资源进行打包、压缩操作。

生产模式架构

下面我以 react + express(nodejs) + nirvana(go) 为例说明一种实用的前后端分离架构. 架构图

express中间层

根据上图我们可以得知, express项目只需要实现两个功能.

将react项目所在的目录设置为静态路由.
按需转发api请求.

首先, 我们来看一下整个express项目的目录结构:

.
├── app           # 前端静态目录
│   └── build     # react打包后的文件
├── app.js        # express项目代码
├── bin           
│   └── www       # express项目入口文件
└── package.json

我使用了express-generator生成express项目目录, 并删去了一些不相关的内容. 剩下的文件说明如下:

bin/www文件是项目的入口, 里面包含了一些环境变量的判断(如:PORT), 并根据app.js的内容创建一个http服务器.
app.js定义了http服务器的路由, 请求处理器等内容, 代码如下:
```
  // ...
  var express = require('express');
  var proxy = require('express-http-proxy');

  var app = express();

  app.use('/', express.static('app/build'));
  app.use('/api', proxy('localhost:8081'));
  // ...
  module.exports = app;
```
我在app.js中定义了两个路由, 一个就是app.use('/', express.static('app/build'));, 为编译react项目得到的静态目录创建了一个静态路由, 另一个则是把/api路由段的请求转发到了另一个服务端localhost:8081上. 你可以根据你的具体需求在这里定义更多的内容.

开发模式

我们知道, react在开发模式下提供了一个用于开发的服务端. 主要功能包括监听文件变化、自动编译、自动刷新浏览器等. 结合上述架构, 我们在开发模式下想要请求服务端api(这里的服务端指express中间层), 需要在react项目的package.json文件中加入一个配置项. "proxy": "http://localhost:8080", 假设我们的express中间层项目监听8080端口, react开发服务监听3000端口, 增加了这个配置项之后, react开发服务会将除了静态资源以外的http请求转发到localhost:8080这个地址(也就是我们的express中间层). 这样, 我们就能在兼容上述架构的基础上, 使用react方便的开发服务. 开发模式的架构如下图所示:
开发模式架构图

扩展

本文以react + express(nodejs) + nirvana(go)作为示例, 并不说明这些技术是必须的, 你可以根据你的喜好替换任意的技术. 如: 你可以用任何实现了前端路由的框架(eg: vuejs,ng2)代替react, 也可以用任何具备标准http服务能力的技术代替express中间层, api层则可以采用任何你喜欢的后端技术.
得益于开源社区的贡献, 已经有社区开发者实现了基于nodejs的react的服务端渲染, 使用nodejs + react是一个不错的选择. 关于服务端渲染的内容, 不在本文的论述范围之内.