今天的目標是實作如下：
透過 json-server 來新增 DEMO 用的 API，模擬實際專案會使用 REST API 的情境。
安裝 http-server 來快速建置 server 環境，將網站跑起來。
藉由 concurrently，能夠同時跑多個 commands，例如：concurrently --kill-others 'http-server' 'json-server --watch db.json'
新增 index.html 的網頁，執行 Javascript ，fetch API 並將資料印出來。
json-server 是一個強大的套件，可以透過 JSON 格式，快速 generate 產生 DEMO 用的 API。
透過 npm 安裝 json-server。
為了讓每個專案都可以直接使用 json-server，我們可以安裝全域的 json-server，這樣之後其他專案就不需要重新安裝。
npm install -g json-server
加上 -g 參數，代表設定全域
如果你在 MAC 出現 permission denied 的 Error，就記得加上 sudo 即可。
sudo npm install -g json-server
接著我們新增一個空的專案，加入 db.json 檔案如下：
手動輸入 json 資料：
{
"people": [
{
"id": 0,
"name": "Anna"
}
]
}
回到 Terminal，在專案目錄下執行 json-sever db.json
就會出現：
輸入 http://localhost:3000/
就可以發現已經成功啟動 JSON Server 了 {^_^}/
輸入 http://localhost:3000/people ，也可以直接取得 DEMO 用的 API
再來搭配 POSTMAN 可以執行 GET、POST、PUT 和 DELETE 的操作。
透過 POSTMAN 來實作 POST 的使用：
http://localhost:3000/people
POST
Body 和 raw
{
"name": "Rulin"
}
回傳 201 created 成功
發現專案裡的 db.json 檔案，也同步更新了耶！已經新增一筆 Rulin 的資料
真是太棒了～ ：Ｄ
透過 command-line 指令，不需要設定檔就能夠簡單建立 web server，快速建立網站啟動環境。
npm install -g http-server
http-server
接著就會出現畫面如下：
連到 http://127.0.0.1:8080/ 頁面：
也成功啟動網頁了～ ：Ｄ
輸入以下程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA Demo</title>
</head>
<body>
<p> \{^_^}/ hi! This's PWA Demo. </p>
<ul id="list"></ul>
<script>
const list = document.getElementById('list');
fetch('http://localhost:3000/people')
.then(res => {
return res.json();
})
.then(json => {
list.innerHTML = json
.map(item => `<li>${item.name}</li>`)
.join('');
})
</script>
</body>
</html>
回到 http://127.0.0.1:8080/ 頁面，發現已成功印出 API 裡面的資料：
今天主要透過 json-server 和 http-server 快速產生 API 素材和網站環境，並建立一個簡單的範例去 Fetch API，將 API 的內容、顯示在網頁上，而下一篇將會同樣使用這個範例介紹如何『實作 Service Worker』。
本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝
不好意思可以請問一個問題嗎
為何當我json-server建立起來之後
進入http://localhost:3000/people
和您的畫面不太一樣
右上角沒有raw & parsed的按鈕
https://imgur.com/a/GrUVK1a
那是POSTMAN的畫面，並不是http://localhost:3000/people 的畫面吧
謝謝
使用http-server指令啟動網頁時畫面為https://imgur.com/a/Rpbexzz
請問該怎麼處理呢?請指教
iThome鐵人賽
看影片追技術