编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好

网易汪源：统一负载与多云环境的“开放姿态”，才是云原生

网易数帆如何用 Kubernetes“原语”搞定云原生中间件

快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案

探索智慧校园新模式，网易有数在教育行业的实践分享

金融行业大数据治理之路——数据模型篇

NEI，轻量化的前后端分离方案

阿凡达2018-07-04 13:44

前端与后端，一直是一个BS项目中不可或缺的好基友，从最初的纯后端渲染到restful的兴起，前后端开发者一直在不断地碰撞、摩擦。有时候，当前端想用一些新的思路来实现，往往得不到后端的支持而作罢，最后，只能变成自己的玩具。

========================================分割线========================================

痛点

对前端而言，明明只是想看这几个页面的效果，你却非要启动整个工程，甚至还需要连VPN，偶尔需要跑个autoconfig,为了看个页面，成本太大了，尤其是当你启动工程时，又出现了一些莫名其妙的问题，以及外部条件不满足（VPN链接不上等），往往处理这些问题就会花费大量的工作时间，有时还会占用后端的工作时间，降低了开发效率。

对后端而言，帮助前端搭建环境，协助前端定位问题也是需要耗费工作时间的。

如何解决？分离！

分离

前后端分离一直是这两年前端圈的热点，各个公司也都有自己的方案，前有淘宝UED的midway,后又出现了chair等框架，但是，这些框架无疑都是在后端和前端之中介入了一层Node,这样，前端虽然掌管了View-Controller层，但是对现有项目改动都是巨大的，尤其是加入node后，对运维同学又增加了不少麻烦的操作。本文旨在减少成本的方式，使用NEI平台实现了前后端分离，并且在现有项目中进行了实践。

前后端分离需要解决的几个问题

1.MOCK数据，

2.后端模板的渲染，

3.ajax代理

4.以JSON为主的数据格式

除第四个问题外，其他问题NEI平台都提供了相因的解决方案来

为了实现前后端分离，接口的约定是非常重要的，因此，开发人员需要定义http请求中请求头，RequestBody, ResponseBody,协议，地址等信息，通过NEI，可以很方便的完成这些数据的定义，同时还可以对接口进行有效的管理，方便日后的维护，具体定义方法不在本文范畴，如有需要，请参考NEI官方文档。

当我们将接口定义在NEI平台后，我们可以使用nei提供的命令将这些接口下载到本地环境。

步骤如下

1. npm install -g puer —pre
2. npm install -g nei
3. nei build [id] //id可以在登陆nei平台后，通过url得到。

执行完成后，我们会发现当前目录下面增加了些许目录

我们需要使用到的有nei.10321 以及src目录，

我们可以使用了puer作为代理服务器来实现前后端分离，puer非常的灵活。

http://leeluolee.github.io/2014/10/24/use-puer-helpus-developer-frontend/ 这篇文章详细的介绍了puer的功能。

打开src/pure.js，

var engine = {};
engine.ftl = (require('../src/main/webapp/src/javascript/lib/express-freemarker/index.js'))();
module.exports={
    "port": 8002,   /
    "engine": engine,
    "dir": "../src/main/webapp/",
    "views": "../src/main/webapp/WEB-INF/views/",
    "inspect": false,
    "reload": false,
    "launch": true,
    "offline":false,
    "rules": "./route.js"
};

通过代码我们可以看见，puer定义了渲染的模板引擎ftl,但是在默认的目录下面并没有发现express-freemarker包，因此我在上级目录下面增加了package.json文件，用来安装express-freemarker包。（注意，需要系统中配置了JAVA_HOME这个环境变量，当puer启动后，是无法渲染ftl文件的）

package.json

{
  "name": "nei",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "express-freemarker": "^0.1.4"
  }
}

并且修改puer.js文件为

var engine = {};
engine.ftl = (require('../node_modules/express-freemarker/index.js'))();  //指向安装刚才安装模块的目录
module.exports={
    "port": 8080,
    "engine": engine,
    "dir": "/Users/jackytianer/NetEase/Project/k12/src/main/webapp”,      //项目目录
    "views": "/Users/jackytianer/NetEase/Project/k12/src/main/webapp”,  //view目录
    "inspect": false,
    "reload": false,
    "launch": true,
    "offline":true,
    "rules": "./route.js” //重点关注
};