iOS Local Mock

Mock数据是分离前后端开发的关键链路。通过预先跟服务端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。

日常开发痛点：很多时候前端/服务端是并行开发，约定好的接口是无法在开发时提供，这个时候由于前端的开发依赖服务端的接口数据，所以无法单个模块整体的开发，只能先实现UI，以及部分逻辑，而且还是无法调试的。只能等待服务端开发完成才能进行接口、逻辑调试。

Mock就是用来解藕开发阶段的前端和服务端，让前端独立开发。

Local Mock方案

Charles+Express 的方式来实现Local Mock。
前提条件是已经定义好接口文档。

1、工具

Express：是基于Node.js平台，快速、开放、极简的Web开发框架。
Charles：Mac端的网络抓包工具。主要使用其重定向Map功能。

2、思路

• 通过Express搭建本地服务，来模拟服务端数据请求，返回定义好的接口数据。
• 通过Charles将真实的服务端接口地址（当前开发中还无法使用的新接口）重定向到Express建立的本地服务。
• 客户端发请求，获取到自己手动创建的接口数据并进行调试。

实践

Express

1、搭建工程

• 要求安装Node.js环境

$ mkdir myapp                          // 创建项目
$ cd myapp                             // 进入项目
$ npm init                             // 初始化项目
$ entry point: (index.js)              // 指定入口文件（默认index.js，可修改）
$ npm install express --save           // 安装express

2、编写项目

• 新建入口文件index.js（默认不会创建，需要手动创建）

const express = require('express')
const app = express()
// Get请求，send()返回响应数据
app.get('/', function (req, res) {
    res.send("Hello World!")
});
// 监听端口
app.listen(3000, function () {
    console.log('Example app is running on port 3000!')
});

$ node index.js    //启动服务

浏览器访问 http://localhost:3000 就能请求到"Hello World!"
一个微服务就搭建完成，然后就是创建需要Mock的请求，返回按规范编写好的响应数据。

const fs = require('fs')  // 文件系统

// app.use()表示全局使用
app.use(function (req, res, next) {
    res.header('Content-Type', 'application/json');
    next();
});

// get
app.get('/detail', function (req, res) {
    // get 请求参数在  req.query
    console.log(req.query)
    var data = fs.readFileSync('./resources/detail.json')
    var result = JSON.parse(data)
    res.send(result)
})；

// post
const bodyParser = require('body-parser')
//返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/form', (req, res) => {
    // post 请求参数可通过 req.body
    console.log(req.body)
    var data = fs.readFileSync('./resources/success.json')
    var result = JSON.parse(data)
    res.send(result)
})

• 使用json文件存储响应的数据，简化index.js，易于管理，并且方便修改。
• json文件的内容需要自己去根据定义好的接口规范去编写假数据。

Charles

1、Local Map

Local Map

使用Local Map，可以直接重定向到指定的json文件，实现Mock，无需搭建Express服务。

2、Remote Map

Remote Map

注：localhost == 127.0.0.1
使用Remote Map，可以重定向到本地搭建的Express服务。Path属性是index.js中app.get()/app.post()方法中第一个参数，要求相互对应才能生效。query属性就是接口携带的请求参数，不需要设置。

总述：完成以上的操作，就可以实现Mock数据，来解藕前端与服务端并行开发，使得前端能独立的完成模块化开发，并灵活的调试本地数据，提高开发效率。

其他

1、json文件就是自己创建的假数据，其内容需要自己根据接口规范去完成。如果使用swagger来定义的接口文档，可直接复制其示例。
2、使用json文件的形式，利于代码整洁，便于修改。
3、可以只使用json文件+Charles Local Map的形式来实现Mock，缺点在于无法模拟实现相关业务逻辑。
4、其实可以只使用Express，通过App直接访问http://localhost:3000服务来实现Mock，但是需要修改App工程代码的接口请求，具有侵害性。而Charles的Map的存在就是为了分离Express与App，做到无侵入Mock。

拓展

• NEI 网易提供的商用的接口管理平台
• YAPl 去哪儿网提供的商用的接口管理平台
• Mock.js 前端Mock的框架

等等，网上的一些接口管理的平台，都有提供Mock数据的功能（暂称Remote Mock）。

Remote Mock与Local Mock的区别：

• Remote Mock是生成随机的数据，而Local Mock是自己编写的数据。Remote Mock更倾向与数据的随机性，所以无法体现数据之间的关联性。Local Mock的数据需要自身编写json文件，带有自己的主观性，更倾向于业务数据，可有主观意识来控制数据之间的关联。
• Remote Mock适用于团队开发，主要是为团队/项目服务。在没有Remote Mock的情况下，Local Mock更适用于个体。