迅速提升你的前端本地开发能力

前端技术发展到今天，接口驱动式的前后端分离开发模式已经深入人心。在前后端分离的方案中，我们通常需要关注的是 模板管理 路由管理 数据模拟 前后端联调等问题。本文主要就前端本地开发过程中如何提高接口驱动能力进行探索并给出解决方案。

首先，我们来看看本地开发过程中可能涉及到的能力：

1. 请求接口模拟

关于数据模拟，有类似 mockjs 的类库，也有 RAP 这样的数据模拟平台。这里我们要实现的是一种无侵入式 的接口mock方式，即你的代码在开发、联调、上线阶段都是一致的，不需要在代码中去硬编码实现不同环境的接口。我们将本地接口的模拟分为 静态模拟 与 动态模拟。

静态模拟

静态模拟即用本地的一个json文件去模拟一个接口。

将 /api/user 接口映射到 user.json 文件。json文件就是我们的假数据

rewrite ^\/api\/user$ /mock/user.json

动态模拟

静态模拟的能力非常有限，当我们遇到下面的场景就比较懵逼了：

请求需要携带cookie信息
需要模拟动态数据，例如动态的时间与索引之类的
mock 1000000+ 条数据

这时候我们需要动态模拟的能力，其实就是用一个可执行的js文件去模拟一个接口，在js文件里面去实现各种定制的模拟能力。这里有非常多的可能性，甚至可以结合RAP去管理你的接口！

将 /api/user 接口映射到 dynamic.js 文件。js文件可以是假数据，也可以当作一个 route，自己去实现各种请求能力

rewrite ^\/api\/user$ /mock/dynamic.js

daynamic.js的结构大致为：

module.exports = function(req, res, next) {
    // 我们可以引入mock.js来增加模拟能力
    // 引入request库来发请求
};

2. 请求接口转发

接口转发常用在项目的联通阶段，也可以用本地的代码，线上的数据去排查一些问题。

通常我们看到提供接口proxy能力都是将接口统一转发到某一个地址。然而实际项目中，我们会遇到这种情况：a接口我想走线上服务，b接口我想走后端老王的服务，b接口我想走后端小明的服务。我们需要将不同的接口以 显示的方式 转发到不同的地址。

proxy能力支持正则分组。支持post及get请求的proxy

将 /api/pay 开头的接口全部转发到 10.19.161.92 这个地址。同时将 /api/info 开头的接口全部转发到 11.162.114.1 这个地址

proxy ^\/api\/pay\/(.)$ http://10.19.161.92:8059/api/pay/$1 proxy ^\/api\/info\/(.)$ http://11.162.114.1/api/info/$1

3. 接口重定向

这个需求比较简单，直接将接口重定向到某一地址。

redirect ^\/api\/taobao$ http://www.taobao.com

4. 页面初始化数据

入口模板可能会有同步的数据，后端会将初始数据直接打到页面模板里面，挂载到类似data 变量上。由于页面模板引擎较多，该方案需要配合具体模板引擎来实现。

redirect \/app/page/index.tpl /mock/data.js

用 `api-devtool` 助力本地开发

api-devtool 借鉴了 fis前后端分离解决方案，对接口模拟及转发进行方便快捷的管理，提升前端本地开发能力。无论你对项目是基于 webpack 还是 fis，都可以用 api-devtool 来进行API模拟及转发，提高本地开发效率。

实现这所有的功能，我们需要一个 server.conf 文件，建议将其放在项目目录的mock文件夹下面。目录结构如下：

mock
  ├─ server.conf // 配置中心
  ├─ user.json // json数据
  ├─ dynamic.js // js动态数据
  ...

本地开发需要起本地server，接口mock，接口proxy等能力。接口的mock与proxy我们期望的是无侵入的方式。

安装使用

1. 安装

npm i api-devtool --save

2. 参数

引入 api-devtool 后，使用只有一个参数配置，即配置mock数据的目录。默认的目录是项目目录平级，名称为mock的文件夹。

  devtool({
    mockDir: path.join(__dirname, 'mock')
  })

3. 使用配置

在类express工程中使用，当作一个中间健即可。

var express = require('express');
var devtool = require('api-devtool');
var app = express();

app.use(
  devtool({
    mockDir: path.join(__dirname, 'mock')
  })
);

在webpack工程中使用，个人习惯用 browserSync起服务，可以liveload，在线调试移动端页面。

import browserSync from 'browser-sync';
import devtool from 'express-devtool'; // 本地开发mock能力
browserSync({
    port: 5008,
    middleware:[
        devtool({
             mockDir: path.join(__dirname, 'mock')
         }),
         ...
    ]
})

4. 编写 server.conf

根据项目到实际API情况，编写 server.conf 配置文件。这里是一个demo

# 静态假数据
rewrite ^\/api\/user$ /mock/sample.json
# 动态假数据
rewrite ^\/api\/dynamic\/time$ /mock/dynamic.js
# redirect
redirect ^\/api\/taobao$ http://www.taobao.com
# proxy
proxy ^\/api\/info\/(.*)$  http://11.162.114.1/sales/search/$1
proxy ^\/api\/class\/(.*)$  http://baidu.com/api/class/$1

younth / younth.github.io