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

前端与后端，一直是一个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” //重点关注
};

在 route.js中，定义了我们在nei平台上所定义的各个接口以及页面请求路径，然后通过utils.js的方法拿取线上或者本地数据，映射到route.js对应的地址中，完成MOCK功能,

如图：

注意：u.r方法中说配置的路径是相对于前面puer.js文件中views的相对路径，如果这个路径下没有login.ftl,会抛出错误。

在这个功能中，我们只需要简单的开启一个node服务器就够了，不用再去启动jetty,启动tomcat等后端容器，完美的避免了因为后端配置导致服务器无法启动阻塞开发的问题。

我们在我们新启动的这个服务器中输入我们映射的接口地址，发现地址已经成功映射到本地/nei上的JSON文件中了，这样在本地开发环境中，不必为了兼容本地映射而单独增加一个地址配置，达到线上和开发地址的统一。

正式启动项目后:

使用这种方案需要注意的点。

1.重约束，前后端

2.重配置，通过route.js我们可以看见，映射的路径有接口的路径，也有页面路径，因此使用要完成意义上的前后端分离，每个地址的在nei上的配置变的很关键

3.自测，后端要保证接口数据的正确性，一定要在联调是自测通过，以减少联调时间。

后记

以上思路只是本人目前的探索，可以在不影响原有项目目录结构下进行前后端分离，如有什么问题欢迎指正。

本文来自网易实践者社区，经作者田翔授权发布。