iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 13
3
Modern Web

30 天 Progressive Web App 學習筆記系列 第 13

Day 13 - 30 天 Progressive Web App 學習筆記 - 環境建置 ( json-server、http-server 、concurrently )

今天的目標是實作如下:

  1. 透過 json-server 來新增 DEMO 用的 API,模擬實際專案會使用 REST API 的情境。

  2. 安裝 http-server 來快速建置 server 環境,將網站跑起來。

  3. 藉由 concurrently,能夠同時跑多個 commands,例如:concurrently --kill-others 'http-server' 'json-server --watch db.json'

  4. 新增 index.html 的網頁,執行 Javascript ,fetch API 並將資料印出來。


1. 透過 json-server : 新增 DEMO 用的 API

什麼是 json-server?

json-server 是一個強大的套件,可以透過 JSON 格式,快速 generate 產生 DEMO 用的 API。


如何安裝 json-server?

透過 npm 安裝 json-server。
為了讓每個專案都可以直接使用 json-server,我們可以安裝全域的 json-server,這樣之後其他專案就不需要重新安裝。

npm install -g json-server  

加上 -g 參數,代表設定全域

如果你在 MAC 出現 permission denied 的 Error,就記得加上 sudo 即可。

sudo npm install -g json-server  

如何使用 json-server?

接著我們新增一個空的專案,加入 db.json 檔案如下:

手動輸入 json 資料:

{
	"people": [
		{
			"id": 0,
			"name": "Anna"
		}
	]
}  

如何執行 json-server?

回到 Terminal,在專案目錄下執行 json-sever db.json

就會出現:

輸入 http://localhost:3000/

就可以發現已經成功啟動 JSON Server 了 {^_^}/

輸入 http://localhost:3000/people ,也可以直接取得 DEMO 用的 API


如何操作 json-server 產出的 API?

再來搭配 POSTMAN 可以執行 GET、POST、PUT 和 DELETE 的操作。

透過 POSTMAN 來實作 POST 的使用:

  • 輸入網址 http://localhost:3000/people
  • 選擇 POST
  • 點選 Bodyraw
  • 輸入欲 POST 的內容
{
	"name": "Rulin"
}  

回傳 201 created 成功

發現專案裡的 db.json 檔案,也同步更新了耶!已經新增一筆 Rulin 的資料
真是太棒了~ :D


2. 安裝 http-server : 快速建置 server 環境

什麼是 http-server?

透過 command-line 指令,不需要設定檔就能夠簡單建立 web server,快速建立網站啟動環境。


如何安裝 http-server?

npm install -g http-server

如何執行 http-server?

http-server

接著就會出現畫面如下:

連到 http://127.0.0.1:8080/ 頁面:

也成功啟動網頁了~ :D


3. 新增 index.html 的網頁,執行 Javascript

輸入以下程式碼:

<!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。謝謝

上一篇
Day 12 - 30 天 Progressive Web App 學習筆記 - PWA 案例介紹
下一篇
Day 14 - 30 天 Progressive Web App 學習筆記 - 實作 Registering the Service Worker
系列文
30 天 Progressive Web App 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
leway
iT邦新手 5 級 ‧ 2019-08-07 09:24:22

不好意思可以請問一個問題嗎
為何當我json-server建立起來之後
進入http://localhost:3000/people
和您的畫面不太一樣
右上角沒有raw & parsed的按鈕
https://imgur.com/a/GrUVK1a

jeff80187 iT邦新手 5 級 ‧ 2019-08-09 21:09:09 檢舉

那是POSTMAN的畫面,並不是http://localhost:3000/people 的畫面吧

leway iT邦新手 5 級 ‧ 2019-08-13 11:47:24 檢舉

謝謝

0
jeff80187
iT邦新手 5 級 ‧ 2019-08-09 21:07:42

使用http-server指令啟動網頁時畫面為https://imgur.com/a/Rpbexzz
請問該怎麼處理呢?請指教

我要留言

立即登入留言