Firebase-基礎用法

發表於 | 分類於 | 0 comments

ref(路徑)、set(新增)

ref()：尋找資料庫路徑(預設：根目錄)
set()：新增資料(寫入方式：覆蓋)

新增資料：範例1
1
firebase.database().ref().set('hi');

結果

新增資料：範例2(物件)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// firebase 全部物件格式，不能陣列內容
// 一個班級有兩個學生
var school = {
    student1: {
        name: 'tom',
        num: '1'
    },
    student2: {
        name: 'john',
        num: '2'
    }
}

firebase.database().ref().set(school);

結果

補充

延續範例2，若要再新增 student3 的話，因為 set 寫入的方式是 覆蓋，所以要注意 ref 是否有指定到正確的新增位置，不然有可能會覆蓋到原來的資料。

新增student3
1
2
3
4
5
6
7
var student3= {
    name: 'kanboo',
    num: '3'
}

// ref 要先指定到 新增的路徑
firebase.database().ref('student3').set(student3);
新增資料：範例3(階層式)
1
2
3
4
5
6
//寫入資料
firebase.database().ref('myName').set('kanboo');
firebase.database().ref('yourName').set('alice');
firebase.database().ref('allName/name01').set('aa');
firebase.database().ref('allName/name02').set('bb');
firebase.database().ref('allName/nameList/name01').set('cc');

結果

once、on 讀取資料

  • once(讀取一次資料庫的資料)

    僅向firebase取得一次性資料，所以當firebase資料有異動，需要再一次呼叫，才會取得更新後的資料。

    1
    2
    3
    4
    5
    6
    var myNameRef = firebase.database().ref('allName/nameList/name01');
    // 快照
    myNameRef.once('value', function (snapshot) {
        console.log(snapshot.val());
        document.getElementById('title').textContent = snapshot.val();
    })

  • on(隨時監聽)

    當firebase資料有異動時，會即時回傳更新資料。

    1
    2
    3
    4
    5
    6
    var myNameRef = firebase.database().ref('allName/nameList/name01');
    //on 隨時監聽
    myNameRef.on('value', function (snapshot) {
        console.log(snapshot.val());
        document.getElementById('title').textContent = snapshot.val();
    })

push - 新增資料

以 Todolist 為例，因為資料隨時會新增，不可能一次就能把所有資料打齊上傳至database，所以就需要借用 push 功能，將 新資料 加在 現有資料 裡。

Todolist：新增待辦
1
2
3
var todos = firebase.database().ref('todos');
todos.push({content:'要去看電影'});
todos.push({content:'要去看跑步'});

結果

push 會自動給一個亂數編號，如果不想產生隨機編號的話，就使用set方式。
set 可以給固定的編號，但要注意新增的位置是否指定正確，要小心覆蓋掉已有的資料。

child 子路徑、remove 移除

以 Todolist 為例，當完成某項事件時，就要將它從待辦清單 移除。

Todolist：移除待辦
1
2
3
4
5
6
// child 子路徑：移至根目錄下的 todos 
var todos = firebase.database().ref().child('todos');


// remove 移除：移除todos下的 -L1H5cAAQnE9y72dCpJ7(要去看電影)
todos.child('-L1H5cAAQnE9y72dCpJ7').remove();

結果

在網頁即時顯示firebase資料

可以用 on(隨時監聽) 的特性，隨時將firebase最新的資料回傳更新，這樣在開發時，就不用特地再開firebase的網頁觀看資料，節省切換頁面的時間。

HTML
1
<pre id="content"></pre>
js
1
2
3
4
5
// 在網頁即時顯示firebase資料
var ref = firebase.database().ref();
ref.on('value', function (snapshot) {
    document.getElementById('content').textContent = JSON.stringify(snapshot.val(), null, 3);
})
JSON.stringify補充說明

orderbyForeach 排序

從firebase取得有 排序 過後的資料，實作語法需要利用 orderByChild 和 forEach 二個函數搭配使用。

people物件資料
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var people = {
    "bob": {
        "height": 178,
        "old": 18,
        "weight": 70
    },
    "casper": {
        "height": 180,
        "old": 13,
        "weight": 80
    },
    "mike": {
        "height": 162,
        "old": 15,
        "weight": 55
    }
};
依「體重」排序
1
2
3
4
5
6
7
8
var peopleRef = firebase.database().ref('people');
// 路徑>>排序('屬性')>>讀取> forEach 依序撈出資料
peopleRef.orderByChild('height').once('value', function (snapshot) { 
    // console.log(snapshot.val());
    snapshot.forEach(function (item) {
        console.log(item.val());
    })
})

延伸問題

firebase 只提供一種排序方式，並無 反向 排序的設定，所以若要達成反向排序，需借用 Array.reverse() 的幫忙。

反向範例
1
2
3
4
5
6
7
8
9
10
11
12
    var peopleRef = firebase.database().ref('people');
    // 路徑>>排序('屬性')>>讀取> forEach 依序撈出資料
    peopleRef.orderByChild('height').once('value', function (snapshot) { 
        // console.log(snapshot.val());
+       var dataArr = [];
        snapshot.forEach(function (item) {
            console.log(item.val());
+           dataArr.push(item.val());
        })
        //反向排序
+       console.log(dataArr.reverse()); 
    })
firebase排序規則
Array.reverse()

startAt、endAt、equalTo 過濾條件

  • 過濾條件：
    • startAt() 多少以上
    • endAt() 多少以下
    • equalTo() 相等

使用 過濾條件 時，一定要先 排序(orderByChild) 過資料

一個 過濾條件
1
2
3
4
5
6
7
8
9
var peopleRef = firebase.database().ref('people');
// 將 重量 排序後，篩選出 4500 以上的資料
peopleRef.orderByChild('weight').startAt(4500).once('value', function (snapshot) {
    snapshot.forEach(function (item) {
    console.log(item.key);
    console.log(item.val());
    })
    // console.log(snapshot.val());
})
多個 過濾條件
1
2
3
4
5
6
7
8
9
var peopleRef = firebase.database().ref('people');
// 將 重量 排序後，篩選出 2500 ~ 3500 之間的資料
peopleRef.orderByChild('weight').startAt(2500).endAt(3500).once('value', function (snapshot) {
    snapshot.forEach(function (item) {
    console.log(item.key);
    console.log(item.val());
    })
    // console.log(snapshot.val());
})

limitToFirst、limitToLast 限制筆數

  • 限制筆數：
    • limitToFirst(n) 從 頭 取得 n 筆資料
    • limitToLast(n) 從 尾 取得 n 筆資料
取得第 1 筆資料
1
2
3
4
5
6
7
8
var peopleRef = firebase.database().ref('people');
peopleRef.orderByChild('weight').limitToFirst(1).once('value', function (snapshot) {
    snapshot.forEach(function (item) {
        console.log(item.key);
        console.log(item.val());
    })
    // console.log(snapshot.val());
})
取得倒數 5 筆資料
1
2
3
4
5
6
7
8
var peopleRef = firebase.database().ref('people');
peopleRef.orderByChild('weight').limitToLast(5).once('value', function (snapshot) {
    snapshot.forEach(function (item) {
        console.log(item.key);
        console.log(item.val());
    })
    // console.log(snapshot.val());
})

參考來源

NodeJS 前後端開發實戰
六角學院