本篇練習使用 Firebase 來實作一個 Todolist,首先先建立好 layout,
至於樣式可以請讀者自行發揮,這邊不做多說明。
index.html
<h1>Firebase TodoList practice</h1>
<input type="text" id="memo" placeholder="請輸入待辦事項">
<button id="btn">送出</button>
<ul id="list"></ul>
在 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 的值
});
說明:
on()
來顯示資料庫資料。data
變數來存取資料庫的內容。for...in
的方法來遞迴資料,這邊需要注意是如果只取 item
的值,會取得資料庫的唯一 key 值。如下圖。data[item]
這筆資料底下的 content
的內容。innerHTML
將 str 的值給輸出到網頁上。這樣就完成把資料庫的資料渲染在網頁囉!
Demo:https://codepen.io/hnzxewqw/pen/YzLNEbe