ただlocal環境でjsonファイルを作れば、モックサーバー(Mockup Server)が起動できるアプリを開発しました

13911 ワード
Electron React TypeScript Vue.js JavaScript JavaScript テキストリンク

Mockup Serverとは

プロントエンドとバックエンドを同時に開発する場合、バックエンドのapiとデータ名などが合わない時が多いです。
でもMockup Serverを使用したら、Local環境で簡単にDirectoryとJsonをファイルを作成し、サーバー起動ができます。
作成した物をGitで管理したらフロントエンドとバックエンド開発者が幸せに開発ができます。

使用方法

  1. Mockupサーバー化ためのDirectoryを作成。
  2. １番から生成したDirectoryの中にindex.json(成功)、error.Json(失敗)を作成。
  3. Mockup Server スタート！！

index.json

// response json
[
  {
        "id": "1",      //dynamic api key   ex) localhost/bla/:id
        "name": "Sara",
        "age": "13"
    },
    {
        "id": "2",
        "name": "teddy",
        "age": "14"
    }   
]

setting.json

// setting header, cookies, api description etc 
{
    "header": {
        "Content-Type": "application/json; charset=utf-8",
        "Content-Length": "123",
        "ETag": "12345"
    },
    "cookies": [
        {  //cookie1
            "cookiekey": "cookieName",
            "options": {
                "maxAge": 30000
            }
        },
        { //cookie2
            "hello": "hi",
            "options": {
                "maxAge": 10000
            }
        }
    ],
    "dynamicRoute":"hello",      //  ex) localhost/bla/:hello
    "description": "this API is holy shit" // api description

}

Set Cookies

headerSetting

API Description tooltip

tooltip

CRUD (Create, Read, Update ,Delete)

// index.json
[
  {
        "id": "1", 
        "name": "Sara",
        "age": "13"
    },
    {
        "id": "2",
        "name": "teddy",
        "age": "14"
    }   
]

CRUD (Create, Read, Update ,Delete)

Post, Get

 
//response data
[
    {
      "id": "1", 
      "name": "Sara",
      "age": "13"
    },
    {
      "id": "2",
      "name": "teddy",
      "age": "14"
    }   
]

//response data
[
    {
      "id": "1",   
      "name": "Sara",
      "age": "13"
    }
]

Put

//request data
{
  "id": "3", 
  "name": "Sara",
  "age": "13"
}

//response data
[
    {
      "id": "3",   
      "name": "Sara",
      "age": "13"
    },
    {
      "id": "2",
      "name": "teddy",
      "age": "14"
    }   
]

Delete

//response data
[
    {
        "id": "2",
        "name": "teddy",
        "age": "14"
    }   
]

DownLoad