前面文章提到許多前、後端分離的開發方式，也模擬過很多次資料來自於外部（json）的開發，今天跟大家介紹一個網站，能讓我們真正模擬網頁資料來自於後端工程師所提供API的方法，網址是：https://reqres.in/

相信在網頁設計道路上這種前、後端分離將會是未來永久的趨勢，透過API進行溝通是每個前端工程師都必須了解的，而透過這個網站就能模擬練習跟API拿資料的方法，例如透過axios打到下面這個網址：

https://reqres.in/api/user

就可以獲得這樣的一個json

{
    "page": 1,
    "per_page": 6,
    "total": 12,
    "total_pages": 2,
    "data": [{
            "id": 1,
            "name": "cerulean",
            "year": 2000,
            "color": "#98B2D1",
            "pantone_value": "15-4020"
        },
        {
            "id": 2,
            "name": "fuchsia rose",
            "year": 2001,
            "color": "#C74375",
            "pantone_value": "17-2031"
        },
        {
            "id": 3,
            "name": "true red",
            "year": 2002,
            "color": "#BF1932",
            "pantone_value": "19-1664"
        },
        {
            "id": 4,
            "name": "aqua sky",
            "year": 2003,
            "color": "#7BC4C4",
            "pantone_value": "14-4811"
        },
        {
            "id": 5,
            "name": "tigerlily",
            "year": 2004,
            "color": "#E2583E",
            "pantone_value": "17-1456"
        },
        {
            "id": 6,
            "name": "blue turquoise",
            "year": 2005,
            "color": "#53B0AE",
            "pantone_value": "15-5217"
        }
    ],
    "ad": {
        "company": "StatusCode Weekly",
        "url": "http://statuscode.org/",
        "text": "A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."
    }
}

而透過下面這樣的打法，就可以拿到第二頁的資料

https://reqres.in/api/user?page=2

另外也可以透過axios來練習看看送出資料（post）的部分

function axiosPost(){
  axios.post("https://reqres.in/api/users", { "name": "morpheus", "job": "leader" }).then(function (response) {
      console.log(response);
  }).catch(function (response) {
      console.log(response);
  })
}

這可以讓我們模擬練習新增資料的部分，而若是在打出去的時候帶個delay的參數：

function axiosPost(){
  axios.post("https://reqres.in/api/users?delay=2", { "name": "morpheus", "job": "leader" }).then(function (response) {
      console.log(response);
  }).catch(function (response) {
      console.log(response);
  })
}

這樣就可以讓我們在兩秒之後才會收到伺服器回應，可以讓我們練習在打出API的時候，有可能會需要做的進度條或是畫面遮罩。

總之學海無涯回頭唯勤是岸，希望大家可以透過這個網站去練習vue 3在開發上各種的可能！