顯示具有 [資料庫]Firebase 標籤的文章。 顯示所有文章
顯示具有 [資料庫]Firebase 標籤的文章。 顯示所有文章

2018年12月23日 星期日

【Firebase】基礎的firebase指令整理(連結資料庫、獲取資料、寫入資料、刪除資料)


▌環境建置

▌在尾端加入firebase代碼

<script src="https://www.gstatic.com/firebasejs/5.7.1/firebase.js"></script>
<script src="./js/usefirebase.js"></script>

▌「連接」資料庫

var config = {
 //省略
};
firebase.initializeApp(config);

▌「獲取」資料庫資料

  • 連接資料庫:var 連接資料庫 = firebase.database().ref(“目錄名稱”);
  • 取得資料庫的資料:目錄名稱 .once(“value”, function (snapshot) { var data = snapshot.val() } 他會是一個{key{….},key{…}}的形式
  • for in:可以取出想要的資料放入陣列
var  connectTofirebase = firebase.database().ref("addIgAccount");
addIgAccount.once("value", function (snapshot) {
    var data = snapshot.val()
    igAccountArray = []
    for (item in data) {
        igAccountArray.push(data[item].account)
    }
    console.log(igAccountArray)

})

▌「寫入」資料庫資料

  • 寫入單筆資料:連接資料庫.push(data).then(function(){.....})
//按下按鈕,並且寫入資料
var  connectTofirebase = firebase.database().ref("addIgAccount");
$('#button-describe').click(function () {
    var igInputAccount = $('#submit_input').val();
    if (igInputAccount == '') {
        toastr.info("請輸入帳號");
    } else if ($.inArray(igInputAccount, igAccountArray) == -1) {

        var data = {
            "account": igInputAccount,
            "date": firebase.database.ServerValue.TIMESTAMP
        };
        connectTofirebase.push(data).then(function () {
            toastr.info("訂閱成功");
        }).catch(function (error) {
            toastr.info("請重新嘗試");
        });

    } else {
        toastr.info("已存在該帳號");
    }
})

▌「移除」資料庫資料

  • 移除單筆資料:連接資料庫.child(key).remove().then(function(){...})
  • 注意:要先取得key才可以移除

var  connectTofirebase = firebase.database().ref("addIgAccount");
$(document).ready(function () {
    $('#button-cancel-describe').click(function () {
        var igInputAccount = $('#submit_input').val();
        if (igInputAccount == '') {
            toastr.info("請輸入帳號");
        } else {
            for (item in allAccountData) {
                if (allAccountData[item].account == igInputAccount) {
                    key = item;
                    connectTofirebase.child(key).remove().then(function () {
                        toastr.info("取消訂閱成功");
                    })
                }

            }

        }
    })
});

2018年6月10日 星期日

【Firebase資料庫(3)】時間搜索



時間搜索


*學習教材:六角學院/ NodeJS 前後端開發實戰(講解非常清楚&可以問到飽,大推!)
*先要有JS data()的基本概念

撈取時間>用setHour設定時間區間>路徑>開始(搜索最初區間)>結束(搜索最後區間)>監聽














btn.addEventListener("click", function () {
      var nowtime = new Date(time.value)
      var starttime = nowtime.setHours(0, 0, 0, 0) //把
      var endtime = nowtime.setHours(23, 59, 59, 999)

      path.orderByChild("time").startAt(starttime).endAt(endtime).once("value", function (snapshot) {
        var str = ""
        snapshot.forEach(function (item) {
          // 要加上for each才能按照順序把資料撈出來
          console.log(item.val()) //輸出所有資料
          str += "<li>" + item.val().comment + "<br/>留言時間:" + new Date(item.val().time) + "</li>"
        })
        txt.innerHTML = str
      })

    })

2018年6月9日 星期六

【Firebase資料庫(2) 】數據排序orderByChild、數據過濾equalTo、筆數限制limitToFirst、倒序



*學習教材:六角學院/ NodeJS 前後端開發實戰(講解非常清楚&可以問到飽,大推!)

基本順序

路徑>>數據排序orderByChild(“屬性”)>>數據過濾(startAt等)>>數據數量限制(limitToFirst等)>>連線>>forEach


資料的順序排序



基本概述
  • 路徑>> orderByChild(“屬性”)>>連線>>forEach
  • 範例(試圖將資料以體重進行排序)
 var people = {
        Paul: {
            weight: 100,
            height: 100,
            age: 20
        },
        neo: {
            weight: 40,
            height: 120,
            age: 28
        },
        Json: {
            weight: 34,
            height: 98,
            age: 18
        }
    }
//寫入people資料
firebase.database().ref("people").set(people);
    var path = firebase.database().ref("people")

path.orderByChild("height").once("value", function (snapshot) {

        console.log(snapshot.val())
        //單純這樣的資料不是有順序的


        snapshot.forEach(function (item) {
        // 要加上for each才能按照順序把資料撈出來

            console.log(item.val())   //輸出所有資料
            console.log(item.val().age) //只輸出年齡
        })

    })


OrderbyChild的排序規則

順序如下
  • 空值
  • false
  • true
  • 數字由小到大
  • 字串由a到z
  • 對象

舉例來說:

假設以height作為排序標準,那console.log的結果就會是
沒有設定的height的-> height 值為false的-> height值為true的->數字-> height為字串的-> height值為物件的




數據過濾

  • startAt()
  • endAt()
  • equalTo()
//過濾出2000~3000的數據
//路徑>>排序>>過濾>>監聽
peopleRef.orderByChild("weight").startAt(2000).endAt(3000).once("value", function (snapshot) {
   //略
      })



//利用equalTo找會員mail
peopleRef.orderByChild("mail").equalTo("123@gmail.com").once(略)



資料數量限制

  • limitToFirst(筆數)
  • limitToLast(筆數)
//取符合weight=2500
peopleRef.orderByChild("weight").equalTo(2500).limitToLast(2).once(略)



倒序排序——reverse

  • 最新的資料往上面排
建立陣列⇒把資料用for each推進陣列=>反轉陣列=>把陣列用for in放入字串
  path.on("value", function (snapshot) {
      var str = ""
      var data = []

      snapshot.forEach(function (item) {
        // console.log(item.val())
        data.push(item.val());
      })
      data.reverse()   

      for (item in data) {
        str += "<li data-key='" + item + "'>" + data[item] + "</li>"
      }
      list.innerHTML = str;
    })


2018年6月8日 星期五

【Firebase資料庫(1)】的基礎指令——連線/新增與刪除資料 / on與once監聽資料/ for in撈資料


學習教材:六角學院/ NodeJS 前後端開發實戰(講解非常清楚&可以問到飽,大推!)

基本指令

連接到根目錄
firebase.database().ref()
・database():選擇firebase的database
・set({資料}):重設資料
・push(""):更新資料
   var refName = firebase.database().ref("dodo")
也可以寫成firebase.database().ref().child("dodo")
       refName.push("打電動")

・ref("要搜尋的路徑"),如果搜尋不到就會幫你建一個
・child("要搜尋的子路徑名稱"),如果搜尋不到就會幫你建一個
・remove():刪除資料


var refName = firebase.database().ref().child("dodo")
    refName.child("-LEUcwMTRYRBhxc5RmHx").remove();


讀取資料

・once:只用一次
・on:即時監聽


var refname=firebase.database().ref("路徑")
refname.once("value",function(監聽函數snapshot){
consoel.log(snapshot.val()) //要把snapshot轉成可用的物件
})
----箭頭函式寫法----

也可以寫成refname.once("value",snapshot=>{
console.log(snapshot.val())
})

Value、Child_add、Child_remove
・value:讀取所有數值

・child_add:當資料更新時,讀取這個新資料

var refname=firebase.database().ref("路徑")
refname.on("child_add",function(監聽函數){
docunment.getElementById("ID").ContentText=監聽函數.val()
})  //當資料被更新時,就會把最新一筆資料讀取出來


即時輸出JSON格式


path.textContent = JSON.stringify(snapshot.val(), null, 3)

<body>
    <pre id="content"></pre>
//一定要用pre tag,不然會永遠無法排版
</body>

<script>
//連線資料庫(略)
//
  var ref = firebase.database().ref();
    ref.on("value", function (snapshot) {
        console.log(snapshot);
        var path = document.getElementById("content");
        path.textContent = JSON.stringify(snapshot.val(), null, 3)
    })
<script>
















firebase的撈資料/刪資料(以to do list為範例)

(特殊技巧)
・要用的JS的for in語法:JavaScript 撈資料的好方法——For in 函數
・要知道如何用dataset(如data-XXX)抓特定資料
・要知道 e.target.nodeName 是什麼

//HTML寫法

<body>
    請天要做的事情
    <input id="txt" type="text" placeholder="請輸入內容">
    <input id="send" type="button" value="送出">
    <ul id="list">
    </ul>
</body>
//連線資料庫(省略)
//dom 
    var txt = document.getElementById("txt")
    var send = document.getElementById("send")
    var list = document.getElementById("list")

//資料庫路徑
  var todos = firebase.database().ref("todos");

//按送出按鈕,寫入資料庫
    send.addEventListener("click", function (e) {
        console.log(txt.value)
        todos.push({
            content: txt.value
        })
    })

//撈資料,輸出到頁面中

todos.on("value", function (snapshot) {
        console.log(snapshot.val())
        var str = "";
        var data = snapshot.val()
        for (var item in data) {
            str += "<li data-key='"+ item +"'>" + data[item].content + "</li>"
            console.log(data[item].content)
        }
        list.innerHTML = str;

    })

//刪除資料

list.addEventListener("value",function(e){
     if(e.target.nodeName="LI"){
     var key=e.target.dataset.key
     //取被點到的那一條的key值
     todos.child(key).remove
     }
})

【JavaScript】用物件Mapping的方法

If的寫法 我們希望當變數是a時就回傳1,變數是b就回傳2,變數是c就會回傳3,一般寫法就是用if,但是這樣會很冗 ​ // IF style var word if(word == 'a'){ word = 1 } else if...