Node.js - 寫一個簡單的 TodoList：新增資料並渲染於網頁上

本篇練習使用 Firebase 來實作一個 Todolist，首先先建立好 layout，

建立 layout

至於樣式可以請讀者自行發揮，這邊不做多說明。

index.html

<h1>Firebase TodoList practice</h1>

 <input type="text" id="memo" placeholder="請輸入待辦事項">
 <button id="btn">送出</button>
 <ul id="list"></ul>

綁定 DOM 元素並寫入點擊事件

在 js 檔案中綁定 DOM 元素，並且把 Firebase 的路徑設定好，再透過按鈕的點擊事件，確認每次點擊後都會把 input 的值抓到，然後透過 push() 的方式新增到資料庫內。

firebase.js

// DOM

let memo = document.querySelector("#memo");
const btn = document.querySelector("#btn");
const list = document.querySelector("#list");

// data
const todo = firebase.database().ref("todo");

// click
btn.addEventListener("click", function (e) {
  console.log(memo.value); //確認取得 input 的值
  //* 把 input 的值新增到 Firebase
  todo.push({ content: memo.value });
});

此時在網頁中的 input 輸入一筆資料，

再去 Firebase 檢查也有看到新增的資料。

看來的確有把資料寫入資料庫了。

把資料渲染在畫面上

最重要的當然就是把資料庫的東西渲染在網頁上啦！待辦事項在使用者體驗當然是要輸入按下送出後要馬上在下方看到代辦列表，才是好的體驗，所以要使用隨時監聽的方法 on()。

firebase.js

todo.on("value", function (snapshot) {
  console.log(snapshot.val());// 取得資料庫的值
  let str = "";
  let data = snapshot.val();
  for (let item in data) {
    console.log(data[item]); // 如果只取 item 會是資料庫的 key
    str += `<li>${data[item].content}</li>`; //* 累加列表
  }
  console.log(str); // 確認取得 <li>xxxx</li> 的標籤
  list.innerHTML = str;
  memo.value = ""; // 按下送出後，清空 input 的值
});

說明：

1. 使用隨時監聽 on() 來顯示資料庫資料。
2. 宣告一個空字串要來放列表清單。
3. 宣告一個 data 變數來存取資料庫的內容。
4. 因為 Firebase 只能是物件格式，故使用 for...in 的方法來遞迴資料，這邊需要注意是如果只取 item 的值，會取得資料庫的唯一 key 值。如下圖。

5. 如上圖所示，要取得 data[item] 這筆資料底下的 content 的內容。
6. 再用累加的方式將組合後的 li 標籤賦值給 str 變數。
7. 最後列表使用 innerHTML 將 str 的值給輸出到網頁上。

這樣就完成把資料庫的資料渲染在網頁囉！

Demo：