Firebase即時資料庫的創建 Part2

閱讀Part2前，請先閱讀Firebase即時資料庫的創建 Part1

Firebase即時資料庫的操作方法

Firebase可以進行資料基本的操作，增刪查改（英語：CRUD）
增：寫入資料
查：讀取資料
改：更新資料
刪：刪除資料

在開始之前，我們創建一個名為userData的用戶資料，裡面包含了一位用戶的名字、年齡和電子郵件地址。

const userData = {
  name: 'Jessie',
  age: 31,
  email: 'jessie@example.com'
};

接下來建立一個指向Firebase資料庫的參考dbRef。透過dbRef，我們就可以訪問和操作Firebase資料庫中的資料。比如說，如果我們想要將資料寫入到資料庫的某個特定路徑，我們就可以使用dbRef來指定那個路徑。

const dbRef = firebase.database().ref();

寫入資料

• set：用來把資料放到指定的地方。如果那裡已經有資料了，舊的資料就會被新的取代。

// 使用 set 方法將 userData 寫入 'users/jessie' 路徑
dbRef.child('users/jessie').set(userData)
  .then(() => {
    console.log('資料成功寫入!');
  })
  .catch((error) => {
    console.log('寫入錯誤:', error);
  });

• push：當你想在列表的最後加上新資料時用這個。它會自動幫新資料加上一個獨一無二的ID。

// 使用 push 方法將 userData 新增到 'users' 列表
dbRef.child('users').push(userData)
  .then((snap) => {
    const key = snap.key;
    console.log('新資料的ID:', key);
  })
  .catch((error) => {
    console.log('新增錯誤:', error);
  });

讀取資料

• onValue：這個方法可以持續追蹤某個路徑的資料。一旦那裡的資料有變，你就會知道。

// 使用 onValue 監聽 'users/jessie' 路徑上的資料
dbRef.child('users/jessie').on('value', (snapshot) => {
  const data = snapshot.val();
  console.log('資料更新:', data);
});

• once：如果你只想讀取資料一次，而不需要持續追蹤，就用這個。

// 使用 once 方法讀取 'users/jessie' 路徑上的一次性資料
dbRef.child('users/jessie').once('value')
  .then((snapshot) => {
    const data = snapshot.val();
    console.log('讀取到的資料:', data);
  })
  .catch((error) => {
    console.log('讀取錯誤:', error);
  });

更新資料

update：這個方法讓你可以改變某個路徑下的部分資料，而不是全部替換掉。

const dbRef = firebase.database().ref();
// 假設我們只想更新Jessie的年齡
const updates = {
  'age': 32
};
// 使用 update 方法更新 'users/jessie' 路徑下的部分資料
dbRef.child('users/jessie').update(updates)
  .then(() => {
    console.log('資料成功更新!');
  })
  .catch((error) => {
    console.log('更新錯誤:', error);
  });

刪除資料

• remove：要刪除某個路徑下的資料，就用這個方法。

// 使用 remove 方法刪除資料
dbRef.child('users/jessie').remove()
  .then(() => {
    console.log('資料已成功刪除!');
  })
  .catch((error) => {
    console.log('刪除錯誤:', error);
  });

• 另一種方法是把那個路徑的資料設定成null，這樣資料也會被刪除。

// 將資料設置為 null 來刪除
dbRef.child('users/jessie').set(null)
  .then(() => {
    console.log('資料已成功設置為null，相當於刪除!');
  })
  .catch((error) => {
    console.log('設置null錯誤:', error);
  });