详解从NodeJS搭建中间层再谈前后端分离

前言

随着前后端分离的流行，前端在项目中的地位越来越重要。在这个过程中，前端负责视觉交互和实现与用户交互相关的逻辑，而后端主要负责数据存储和提供API服务。但是由于前后端完全分离，在跨域等问题上会遇到很多麻烦。而中间件的出现可以很好地解决这个问题。本篇文章将详解如何使用NodeJS搭建一个中间层，来达成前后端分离的需求。

什么是中间层

中间层可以简单理解为前后端的桥梁，它坐落在前端与后端之间，接收并处理前端请求，再将请求转发到后端服务。中间层的优点在于：

• 可以降低数据库等敏感资源的风险，如加入身份验证等安全机制；
• 可以缓存，减轻后端压力；
• 可以做数据聚合和转换；
• 可以解决跨域等问题。

中间层搭建流程

1. 安装NodeJS

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以让JavaScript脱离浏览器来运行。要使用NodeJS搭建中间层，首先需要在机器上安装NodeJS。安装过程可以参考Node官网的说明：https://nodejs.org/en/download/。

2. 初始化项目

创建一个文件夹，使用命令行进入该文件夹，运行npm init，根据提示输入项目名称、作者等信息，生成package.json文件。这个文件是npm包管理工具的配置文件，里面记录了该项目依赖的库等信息。

3. 导入所需模块

在项目根目录下创建app.js文件，并导入必要的模块：

var express = require('express');
var path = require('path');
var proxy = require('http-proxy-middleware');

其中，express是一个NodeJS框架，可以简化Web应用的开发。path用于路径处理，http-proxy-middleware是一个轻量级HTTP代理中间件。

4. 配置静态资源服务

app.use(express.static(path.join(__dirname, 'public')));

以上代码会将public目录下的静态资源作为服务提供给客户端。

5. 配置代理转发

app.use('/api', proxy({ target: 'http://localhost:3000', changeOrigin: true }));

以上代码实现了对/api路径的请求代理转发到http://localhost:3000。其中，changeOrigin为true表示在代理请求中，将请求的源设置为代理的源，解决跨域问题。

6. 启动中间层服务

var port = process.env.PORT || 8080;
app.listen(port, function () {
  console.log('Middlewares proxy listening on port ' + port);
});

以上代码会在指定端口（默认为8080）启动中间层服务，并在控制台打印监听启动消息。

7. 使用中间层服务

修改前端代码，将原本向后端请求数据的URL改为中间层服务提供的URL即可，如：

axios.get('/api/data')

示例说明

示例1：简单代理

以下示例基于前后端分离简单示例，在Vue项目中加入中间层。

1. 假设后端API服务运行在http://localhost:3000，前端Vue项目使用webpack-dev-server启动在http://localhost:8080。
2. 创建一个中间层项目，并使用上文中提到的方法配置中间层。
3. 修改Vue项目中所有向后端API请求的URL，改为/api/data（例如：axios.get('/api/data')）。
4. 启动中间层和Vue项目，并在浏览器中访问Vue项目。

此时，Vue项目向中间层发送请求，中间层将请求转发至后端API服务，再将后端API的响应返回给Vue项目。此过程中，中间层实现了跨域，Vue项目和后端API之间无需相互认证。

示例2：数据聚合

以下示例在示例1基础上进行扩展，通过中间层实现数据聚合，从而降低了大量重复请求带来的服务器压力。

1. 在远程API服务中增加一项API，用于返回所有用户名的列表，路径为/api/users。
2. 修改中间层代码，使用request模块发起对/api/users的请求，并将返回的用户名列表作为参数填入/api/data的请求数据中（这里使用了qs模块，用于序列化JavaScript对象）：

var request = require('request');
var qs = require('qs');

app.get('/api/data', function(req, res) {
  request('http://localhost:3000/api/users', function (error, response, body) {
    if (!error && response.statusCode == 200) {
      var data = qs.stringify({
        users: JSON.parse(body),
      });
      request.post('http://localhost:3000/api/data', {body: data}, function (error, response, body) {
        res.json(JSON.parse(body));
      });
    }
  });
});

1. Vue项目中修改请求地址为/api/data，并重新启动服务。

此时，Vue项目只需向中间层请求数据，中间层将根据需求，先请求所有用户名列表，再请求数据具体内容，最后将数据返回给Vue项目。这样，当页面中需要使用多个数据接口的数据时，只需要向中间层发送一个请求即可，避免了向后端不必要的重复请求。