學習教材：六角學院/ NodeJS 前後端開發實戰（講解非常清楚＆可以問到飽，大推！）
基本指令
連接到根目錄
firebase.database().ref()
・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();
讀取資料
・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 是什麼
・要用的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
}
})
沒有留言:
張貼留言