RESTful 介面設計規範與mock的完美結合

Say-healer發表於2018-07-21
RESTMock

最近在做一個後臺專案，因為後臺也剛開始開發，因此，需要前端組現行，畢竟不能一直等著他們吧，後來，在專案初期我們就自己寫資料，但是為了高效開發，也希望能夠直接生成api 文件，後來選用了yapi，這個很不錯的，我採用的是內網部署，有需要的可以自己搭建一套，文件說的很詳細。

現在記錄下mock 資料寫法以及介面規範：

1. mock 資料

/**
 * 介面返回資料示例
 */
{
  "current":1,
  "msg":"成功",
  "code":0,
  "pageSize":10,
  "total":null,
  "data|1-100": [
        {
            "id|+1": 1,
            "code|+1": 1, // 活動編碼
            "activityName": "@ctitle", // 活動名稱
            "activityType|1":["reduce","timeLimit"], // 活動型別
            "activityDescription": "@csentence(10,20)", // 活動描述
            "status|1": ["create","issue", "end"],  // 狀態 
            "startTime": "@datetime", // 開始時間
            "endTime": "@datetime",  // 結束時間
        }
   ]
}

複製程式碼

基礎語法跟mock.js一致的，有點區別就是不能寫函式，不過問題不大，可以通過高階mock去修改寫配置，比如可以動態獲取current,pageSize引數。

如圖:

指令碼
具體的mock語法文件寫的很健全，可以參考，這時候又要增加一個新增的介面，就需要restful 規範寫法了

2. 介面規範

先說http 操作型別主要有有如下幾種：

  • GET（SELECT）：從伺服器取出資源（一項或多項）。
  • POST（CREATE）：在伺服器新建一個資源。
  • PUT（UPDATE）：在伺服器更新資源（客戶端提供改變後的完整資源）。
  • PATCH（UPDATE）：在伺服器更新資源（客戶端提供改變的屬性）。
  • DELETE（DELETE）：從伺服器刪除資源。

具體場景如下所示

介面規範

其中id 的意思是動態的，可以是某個活動的id，根據此id 來刪除修改等操作，這樣一個看起來就清晰多了。

RESTful 介面設計規範與mock的完美結合
具體js 用法的話如下

// 活動刪除
export function query (params) {
  return request({
    url: `/Api/activity/reduce/${params.id}`,
    method: 'delete',
// data: params,
  })
}
複製程式碼

寫法也很清晰明瞭

有時間在更新。

相關文章