1、前言

通常前端开发的时候，我们的页面已经开发完成。但是后端的接口不一定已经写完就了。这时候我们就可以自己去伪造一些符合规范的数据，用于前期的测试，等到后端接口完成的时候我们可以在进行一个接口联调。

2、Mock数据的方法

2.1 自己手写一个简易服务器返回数据

对于我们前端来说，我们天生就会一个后端开发语言，nodejs即可实现。

我们只需要创建一个简易服务器，对请求路径进行判断，返回对应的mock数据。

  1. const http = require('http')
  2. const fs = require('fs')
  3. const url = require('url')
  5. http.createServer((req, res) => {
  6.   let pathObj = url.parse(req.url, true)
  7.   switch (pathObj.pathname)
  8.     case '/getWeather':
  9.       if (pathObj.query.city === 'beijing') {
  10.         res.end(JSON.stringify({city: 'beijing', weather: 'sunny'}))
  11.       } else {
  12.         res.end(JSON.stringify({city: pathObj.query.city, weather: 'unknown'}))
  13.       }
  14.       braak
  15.     default:
  16.       try {
  17.         let pathname = pathObj.pathname === '/' ? '/index.html' : pathObj.pathname
  18.         res.end(fs.readFileSync(__dirname + pathname))
  19.       } catch(e) {
  20.         res.writeHead(404, 'Not Found')
  21.         res.end('<h1>404 Not Found</h1>')
  22.       }
  23. }).listen(8080)

上面这个只是简单的返回，你完全可以使用Express等框架，搭建一个更好用的Mock服务器

2.2 使用Mock.js和Mock平台

2.2.1 Mock.js

Mock.js可以快速通过模板生成数据。

http://mockjs.com/examples.html

  1. 常见用法

@ctitle(3, 10)
@cparagraph
@cword
@cname
@integer(10, 100)
@float(20, 30, 2, 3)
@color
@date
@time
@now
@id
@url
@email
@image('200x100')

  1. 使用例子
  1. {
  2.   'statusCode| 1': [1, 3, 2, 8],
  3.   'msg': '@cword(4, 10)',
  4.   'data| 4': [
  5.     {
  6.       id: '@id',
  7.       title: '@ctitle',
  8.       author: '@cname',
  9.       createdAt: '@datetime'
  10.     }
  11.   ]
  12. }

2.2.2 Rap2

http://rap2.taobao.org

这个平台就是类似在线的服务器，加上Mock.js。实现通过他提供的接口，可以自定义返回相应的数据。

3、接口规范

3.1 接口约定

约定好接口的路径是什么？
如
/auth/register

接口的提交类型是什么？
如
GET 获取数据
POST 提交或创建
PATCH 修改数据，部分修改
DELETE 删除数据
PUT 修改数据，整体替换原有数据

参数类型/格式
如
fromdata 或者 application/x-www-form-urlencoded

参数字段限制条件
返回成功的格式
返回失败的格式

3.2 接口测试

当后端给到你接口的时候，你可以使用命令行的 curl 语句，进行简单的测试。

  1. // GET 请求
  2. curl "http://xxx.xxx.com/api/blog/getBlog?id=1"
  4. // -d 提交的参数，默认是POST
  5. curl -d "username=layouwen&password=12345" "http://xxx.xxx.com/api/user/login"
  7. // -i 展示响应头
  8. curl -d "username=layuouwen&password=12345" "http://xxx.xxx.com/api/user/login" -i
  10. // -H 设置请求头
  11. curl -H "Content-Type:application/json" -X POST -d '{"user": "layouwen", "password": "123456"}' "http://xxx.xxx.com/api/user/login"
  13. // -X 设置请求类型
  14. curl -d "username=layouwen&passowrd=bbb" -X POST "http://xxx.xxx.com/api/blog/list"
  16. // -b 请求带上cookie
  17. curl "http://xxx.xxx.com/api/user/login" -b "connect.sid=df1431 35f89a7sdf89gasdf2g#$@123."