前端脱离后台的敏捷开发

需求

开发一个项目时一般都会有前台、后台。前台负责展示数据、用户交互；后台负责数据的处理和存储。

前提

✦开发阶段，前台和后台按照接口文档进行开发，这套接口规范相当于前台和后台之间交互的协议。
✦一般来说前台和后台的开发进度都会有偏差。

问题

✦在开发阶段，前端的展示和交互需要依赖后台的数据；而后台的开发不需要前端配合，因为后台可以自己写请求做测试。
✦要提高效率，就需要在开发阶段结束，联调阶段开始之前，尽可能的提高代码完成度和代码准确性。

所以，就引出了以下需求：前端脱离后台的独立开发。

这里的独立开发不是单纯的脱离后台的开发，而是可以保证代码完成度和代码准确性前提下的，脱离后台的开发。

目的

前端独立开发所要达到的目的就是：

✦ 在连调阶段之前，完成绝大部分的编码工作，工作量尽可能往前拉
✦ 与后台平行工作，互不干扰，提高了工作效率。
✦ 保证编码的准确性。

#最理想的情况是，在连调阶段连调一个接口，我不用修改一行代码，或者只需要切换一下环境就完成了一个接口的连调，包括接口周边逻辑的测试。#

解决方法

✦ 前端使用写死的假数据
✦ 使用挡板（打转工具）

使用挡板

✦ 自己开发挡板
✦ Mock.js
✦ Moco

自己开发挡板

自己写一套服务，部署在服务器上。
通过Web服务录入数据到mongoDB。
提供给前端的接口，并且接口数据直接从mongoDB读取返回。

优点：自己开发的挡板比较放心？
缺点：开发挡板需要花时间。

Mock.js

实例教程
生成随机数据，拦截Ajax请求，使用如下：

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

配置模拟数据：

Mock.mock('http://g.cn', {
    'name'     : '[@name](/user/name)()',
    'age|1-100': 100,
    'color'    : '[@color](/user/color)'
});

发送ajax请求(jquery版)

$.ajax({
    url: 'http://g.cn',
}).done(function(data, status, xhr){
    console.log(
        JSON.stringify(data, null, 4)
    )    
})

查看响应的结果

// 结果1
{
    "name": "Elizabeth Hall",
    "age": 91,
    "color": "#0e64ea"
}
// 结果2
{
    "name": "Michael Taylor",
    "age": 61,
    "color": "#081086"
}
// 结果N ..

优点：随机数据
缺点：有学习成本，前端。

Moco

写一个接口的配置文件:

[
  {
    "response" :
      {
        "text" : "Hello, Moco"
      }
  }
]

将配置文件和jar包放到服务器上，执行以下命令：

1	java -jar moco-runner-<version>-standalone.jar http -p 12306 -c foo.json

优点：简单易用，工作量极小，适用范围广。
缺点：不能随机数据。

前端脱离后台的敏捷开发

需求

前提

问题

目的

解决方法

使用挡板

自己开发挡板

Mock.js

Moco

辅助工具

postman–接口测试工具

Transmit–FTP工具