[Day11] 前端也可以自己開 API！讓你了解後端的好幫手～ JSON Server

2022 iThome 鐵人賽

DAY 11

自我挑戰組

SPYxFRONTEND ～懂一點後端真是讓人哇哭哇哭系列第 11 篇

14th鐵人賽

Ado Lin

2022-09-12 17:06:29

1854 瀏覽

分享至

前言

前面我們還在前端的世界，加上碰了一點 call API 拿資料的事，
那麼接下來應該是要 call API 來對資料進行修改了對吧？
(PS. 我之前一直講資料的 select, insert, update, delete，
其實講 CRUD 可能更好一點XD)

本日正文

第一天文章我也有提到，當初我被 assign 要 call delete 的 API，
當時真的是害怕極了，
因為真的很怕我一個語法不小心寫錯就把資料刪光光了，
所以我決定要在 local 環境練習一下如何 call API，
那表示我得自己開 API 囉？

找了找，被我找到這篇→ 前端自己來！用 json server 做 RESTful API

沒錯!!!! json-server 這就是我要的，而且感覺不難，
那我們來試著開開看吧！

首先先來安裝看看吧：

再來依照教學，
在正式開 json-server 之前，
我們要先準備好一個 json 檔，
像這樣：
db.json

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

json 檔準備好了以後，
我們要下這個指令 json-server db.json
再來你就會看到 API 開好的視窗囉！

然後我們也來首頁 http://localhost:3000 看看

還有上面提到的你現在可以 call 的 API url：

 Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

我們先用瀏覽器打開看看吧：

這樣就跟前幾天我們 call API 拿資料都一樣了！

然後你會注意到一件事，
3000 通常是前端在用的 port，
10000 才是後端常用的 port，
json-server 起起來用 3000 port，
跟我們要開的前端 port 會有衝突(都用 3000 這個 port)，
所以我們要想辦法把這個 port 改掉才行。

官方文件有提到如何改 port，
只要我們在下的指令多加 --port 的參數就可以了~
那我們就來試試看，把剛剛下的指令改成這樣：

json-server --watch db.json --port 10000

沒錯！你看到你開的 json-server 成功起在 10000 port 了！
我們再用瀏覽器來看一下：

那 API 成功起起來之後，我們就來起前端，並試 call API 看看吧！

為了要讓拿到的資料有多筆， db.json 我有先手動增加成3筆資料，
像這樣：

那我們第一步就是 call API 把這三筆資料渲染到前端畫面上，
像這樣：(寫前端的過程就讓我快轉一下)

import React, { useState, useEffect } from 'react';
... (略)
import axios from 'axios';

function App() {
  const sourceUrl =
    "http://localhost:10000/posts";
  const [dataResult, setdataResult] = useState([]);
  const [dataFetchTimes, setDataFetchTimes] = useState(0);

  function fetchData(){
    axios.get(sourceUrl)
      .then(function (response) {
          console.log(response);
          setdataResult(response.data);
          setDataFetchTimes(dataFetchTimes+1);
      })
      .catch(function (error) {
          alert("抓取資料錯誤，請確認後再試");
          console.log(error);
      })
  }

  return (
    <ChakraProvider theme={theme}>
      <>
        <Text my={4} fontSize="p" textAlign="center">
          sourceUrl: {sourceUrl}
        </Text>
        <Text my={4} as="h2" fontSize="2xl" textAlign="center">
          全部總共 {dataResult?.length === 0 ? 0 : dataResult?.length } 筆資料
        </Text>
        <Text my={4} as="h2" fontSize="2xl" textAlign="center">
          資料抓取次數：{dataFetchTimes} 次
        </Text>
        <Divider my={4} />
        <Flex justifyContent="space-around">
        {dataResult?.map((d, i) => (
          <Box mx={2}>
            <Text fontSize="xl" textAlign="center">第 {i+1} 篇文章</Text>
            <Text>Title: {d.title}</Text>
            <Text>Author: {d.author}</Text>
          </Box>
        ))}
        </Flex>
        <Divider my={4} />
        <Center>
          <Button onClick={fetchData}>取得資料</Button>
        </Center>
      </>
    </ChakraProvider>
  );
}

export default App;

其實變動只有 sourceUrl 把它改成我們自己起的 API 位址： http://localhost:10000/posts
其它大部份都跟前幾天寫的範例一樣，
來看看執行結果吧！

看起來我們已經完成第一步囉，
但到目前為止還停留在 axios.get 的階段對吧，
所以雖然今天文章篇幅夠長了，
但最後加碼試一下 axios.post 也就是新增資料，
這邊我先寫好 addData 去 call axios.post，
像這樣：

function addData(){
    axios.post('http://localhost:10000/posts/', {
      id: 4,
      title: '我是第4篇文章',
      author: 'Misado'
    })
    .then(res => {
      console.log(res.data);
    });
    fetchData();
  }

那我們來看一下執行結果：

我們看到畫面從3篇文章變4篇，
原本的 db.json 也變成4筆資料：