Node.js 的 30 天學習日記--第九天

Node.js 學習第九天

2018 年的第一天，一樣再學習不過玩太瘋所以這次日記內容大概一段落吧(?

如果在看的過程中有任何錯誤歡迎寫 E-MAIL： pp840405@gmail.com 提醒我錯誤。

todolist (上)

使用之前學的新增與抓資料庫的方法，首先建立一個 html 裡面就載入 Firebase 資料然後按照下面範例去執行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body>
  //建立輸入欄位與按鈕
  <input type="text" id="txt" placeholder="請輸入內容....">
  <input type="button" id="send" value="送出">
  //只建立 ul 之後要放入 li 內容
  <ul id="list">
  </ul>
  <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyBGF1qu8w1tgKFYCCmrLXVSNe_6_Mam4iU",
      authDomain: "demoindex-de647.firebaseapp.com",
      databaseURL: "https://demoindex-de647.firebaseio.com",
      projectId: "demoindex-de647",
      storageBucket: "demoindex-de647.appspot.com",
      messagingSenderId: "1022331239034"
    };
    firebase.initializeApp(config);
    //操縱 dom 元素
    var txt = document.getElementById('txt');
    var send = document.getElementById('send');
    var list = document.getElementById('list');
    // 建立 todos 資料
    var todos = firebase.database().ref('todos');
    // 寫入資料庫
    send.addEventListener('click',function(e){
      todos.push({content : txt.value})
    })
    // 拉出資料庫內容並渲染到網頁上
    todos.on('value',function(snapshot){
      var str ='';
      var data = snapshot.val();
      for(var item in data){
        str +='<li>'+data[item].content+'</li>';
      }
      list.innerHTML = str ;
    })
  </script>
</body>

展示

結語

這次只會講如何新增，下一次就講如何做刪除的動作，跨年玩太瘋所以才學習這麼少，明天大概就會穩定了，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。