1、前言

通常前端開發的時候，我們的頁面已經開發完成。但是後端的介面不一定已經寫完就了。這時候我們就可以自己去偽造一些符合規範的資料，用於前期的測試，等到後端介面完成的時候我們可以在進行一個介面聯調。

2、Mock資料的方法

2.1 自己手寫一個簡易伺服器返回資料

對於我們前端來說，我們天生就會一個後端開發語言，nodejs即可實現。

我們只需要建立一個簡易伺服器，對請求路徑進行判斷，返回對應的mock資料。

const http = require('http')
const fs = require('fs')
const url = require('url')

http.createServer
 
((req, res) => {
  let pathObj = url.parse(req.url, true)
  switch (pathObj.pathname)
    case '/getWeather':
      if (pathObj.query.city === 'beijing') {
        res.end(JSON.stringify({city: 'beijing', weather: 'sunny'}))
      } else {
        res.end(JSON.stringify({city: pathObj.query.city, weather:
 
 'unknown'}))
      }
      braak
    default:
      try {
        let pathname = pathObj.pathname === '/' ? '/index.html' : pathObj.pathname
        res.end(fs.readFileSync(__dirname + pathname))
      } catch(e) {
        res.writeHead(404, 'Not Found')
        res.end('<h1>404 Not Found</h1>'
 
)
      }
}).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')

2. 使用例子

{
  'statusCode| 1': [1, 3, 2, 8],
  'msg': '@cword(4, 10)',
  'data| 4': [
    {
      id: '@id',
      title: '@ctitle',
      author: '@cname',
      createdAt: '@datetime'
    }
  ]
}

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 語句，進行簡單的測試。

// GET 請求
curl "http://xxx.xxx.com/api/blog/getBlog?id=1"

// -d 提交的引數，預設是POST
curl -d "username=layouwen&password=12345" "http://xxx.xxx.com/api/user/login"

// -i 展示響應頭
curl -d "username=layuouwen&password=12345" "http://xxx.xxx.com/api/user/login" -i

// -H 設定請求頭
curl -H "Content-Type:application/json" -X POST -d '{"user": "layouwen", "password": "123456"}' "http://xxx.xxx.com/api/user/login"

// -X 設定請求型別
curl -d "username=layouwen&passowrd=bbb" -X POST "http://xxx.xxx.com/api/blog/list"

// -b 請求帶上cookie
curl "http://xxx.xxx.com/api/user/login" -b "connect.sid=df1431 35f89a7sdf89gasdf2g#[email protected]"