iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 19
2
Modern Web

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

Day 19 - 30 天 Progressive Web App 學習筆記 - 實作 PWA To-Do List - 顯示待辦事項清單

今天預計開始實作 To-Do List 的功能,先顯示待辦事項的行為並且串接 Restful API,模擬實際專案的情形。


To-Do List 需求

在開發 To-Do List 的案例之前,先來說明 To-Do List 有哪些功能?

  • 顯示待辦事項清單
  • 新增待辦事項
    • 在輸入框裡按下 Enter,要清空輸入框內容並送出待辦事項
  • 修改待辦事項清單
    • 點擊待辦事項,能夠切換『已完成』和『未完成』狀態
  • 刪除待辦事項
    • 點擊待辦事項右邊的 delete 按鈕,即可刪除待辦事項
  • 顯示未完成事項的數量

To-Do List API

整理 To-Do List 需要哪些 API 如下:


如何實作?

我們今天要實作的需求,如下

  • 利用立即函式,避免全域變數污染
  • 抓取會用到的 DOM 物件
  • 建立 render 函式
  • 透過 AJAX 抓取後端資料,並 render

新增立即函式

建立一個 main.js,/*code*/ 裡面放 To-Do List 的邏輯,這邊用純 js 的方式用來實現本範例的功能以及對應的行為。

(function () {
	/* code */
}())

傳入 windowdocument

(function (window, document) {
	/* code */
}(window, document))

抓取會用到的 DOM 物件

const todoListDOM = document.getElementById('todoList');

因為 ... 所以這裡只用到了 ul(#todoList)

建立 render 函式

我們預期 todoList 的資料會長像這樣

[
    {
         "isComplete": false,
         "desc": "..."
    },
    ...
]

那我可以建立 render 的函式,會接收 todoList 陣列,並轉呈 HTML 塞到 ul(#todoList)

    function renderTodoList(todoList) {
        const html = todoList.map((item, index) => `<li class="list">
                <a class="${item.isComplete ? 'finish' : 'unfinish'}" data-id=${item.id}></a>
                <p class="desc" data-id=${item.id}>
                    ${item.desc}
                </p>
                <a class="del" data-id=${item.id}></a>
            </li>`).join('')
        todoListDOM.innerHTML = html;
    }

透過 AJAX 抓取後端資料,並 render

接著在 main.js 裡,fetch API,取得待辦事項清單:

    let todoList = [];

    // 取得待辦事項清單(GET)
    fetch('http://localhost:3000/todolist')
    .then(res => res.json())
    .then(json => {
        todoList = todoList.concat(json);
        renderTodoList(todoList); // render todoList
    })
    .catch(err => {
        console.log(err);
    })  

拿到待辦事項資料之後,再抓取 todoList 的 DOM,將資料塞入 list 裡面。


Service Worker 搭配 Restful API 結果

透過 Service Workers,在網站離線的情況下,也可以順利顯示 API 的資料:


今日小結

一開始先列出 To-Do List 顯示/新增/刪除/修改待辦事項的需求,今天完成『顯示待辦事項』的部分,主要是抓取 Restful API 的資料去呈現待辦事項的內容,最後藉由 Service Worker 完成離線瀏覽網站的功能。


本人小小筆記,如有錯誤或需要改進的部分,歡迎給予回饋。
我將會用最快的速度修正,m(_ _)m。謝謝

上一篇
Day 18 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - Application Shell 與靜態檔案的離線存取
下一篇
Day 20 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - (新增/修改/刪除待辦事項清單)
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言