Node.js 學習第十二天

今天是學習搜尋規則，雖然是使用 firbabse 的函式庫但邏輯都是大同小異所以學了之後對其它的函式庫可以更快上手。

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

startAt 、 endAt 、 equalTo - 搜尋區間規則 (上)

startAt - 搜尋你設定以上的值
endAt - 搜尋你設定以下的值
equalTo - 搜尋你設定等於的值
這三個是搜尋區間規格的函式。
下面是用前一天的範例修改值後再去做新增，在你要排序的資料( orderByChild )後面在新增函式。
startAt 、 endAt 可以用在一起， equalTo 就要單獨使用了。

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

var people = {
        "mike": {
          "length" : 12.5,
          "weight": 5000,
          "mail":sas@gmail.com
        },
        "casper": {
          "length" : 9,
          "weight" : 4500,
          "mail":qwe@gmail.com
        },
        "bob": {
          "length" : false,
          "weight" : 3500,
          "mail":zxc@gmail.com
        },
        "john": {
          "length" : 9,
          "weight" : 3500,
          "mail":rty@gmail.com
        }
        ,
        "josh": {
          "length" : 9,
          "weight" : 2500,
          "mail":uio@gmail.com
        }
      };
    firebase.database().ref('people').set(people);
peopleRef.orderByChild('weight').startAt(2500).endAt(4000).once('value',function(snapshot){
        snapshot.forEach(function(item){
        //.key 在這是可以撈出子目錄
            console.log(item.key);
            console.log(item.val());
        })
    })

如果收尋字串後其它也可以用。
下面範例是要搜尋特定的 mail 。

1
2
3
4
5
6
7

peopleRef.orderByChild('mail').equalTo('sas@gmail.com').once('value',function(snapshot){
        snapshot.forEach(function(item){
        //.key 在這是可以撈出子目錄
            console.log(item.key);
            console.log(item.val());
        })
    })

limit - 限制筆數

如果資料庫太過於龐大，如何去設定只有 10 筆或 20 筆資料顯示在網頁上面，就要使用 limit 的方式去撈出資料，那就要使用 firebase 的函式庫了。
limitToFirst (值) - 撈出第幾筆資料
limitLast (值) - 撈出最後幾筆資料
可以搭配搜尋區間規則使用。
下面範例就是只撈出符合資料的 2 筆。

1
2
3
4
5
6
7

peopleRef.orderByChild('weight').startAt(2500).limitToFirst(2).once('value',function(snapshot){
        snapshot.forEach(function(item){
        //.key 在這是可以撈出子目錄
            console.log(item.key);
            console.log(item.val());
        })
    })

結語

今天一樣學的是規則，搭配前一天學的規則去做使用，就可以去做一些蒐尋功能做使用了。
有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

Node.js 學習第十一天

第十一天有看到幾家公司的求職條件要求都好高，對於我這個新鮮人來講實在是很難有優勢，只好繼續學多增加作品吧。

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

forEach、orderByChild - 資料排序篇

這資料排序的語法是 firebase 的，所以今天學的事如何把 firebase 資料庫裡面的資料由小到大。
orderByChild 的語法是選取要排序的子鍵，單獨使用是沒辦法排序要跟 forEach 使用來完成排序。
先看 firebase 的排序規則
基本上規則是:

1. 子鍵值 null
2. 子鍵值 false
3. 子鍵值 true
4. 子鍵值是數值由小到大
5. 子鍵值是字串由 A 到 Z
6. 物件定義
   以上規則都是由上到下排列

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
41
42
43
44
45
46

// 排序weight的資料由小到大
//宣告物件
   var people = {
       "mike": {
         "height" : 4,
         "length" : 12.5,
         "weight": 5000
       },
       "casper": {
         "height" : 3,
         "length" : 9,
         "weight" : 2500
       },
       "bob": {
         "height": "dalse",
         "length" : false,
         "weight" : 2500
       },
       "john": {
         "height" : true,
         "length" : 9,
         "weight" : 2500
       }
       ,
       "josh": {
         "height" : false,
         "length" : 9,
         "weight" : 2500
       },
       'boss':{
         "length": 3
       },
       'frank':{
         height:{'aaa':1}
       }
     };
   //選取並新增people目錄並新增people物件資料
   firebase.database().ref('people').set(people);
   //宣告變數指定people子目錄
   var peopleRef = firebase.database().ref('people');
   // 路徑>>排序('屬性')>>讀取> forEach 依序撈出資料
   peopleRef.orderByChild('height').once('value',function(snapshot){
       snapshot.forEach(function(item){
           console.log(item.val());
       })
   })

結語

這次排序規則對於要處理或顯示資料做排列的網站很有用，有需要的話可以去查詢 JavaScript 的排序如何做使用。
有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

Node.js 學習第十天

今天第十天來學上次剩下的。

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

todolist (下)

上一次講的事如何新增內容與顯示 darabase 的實際應用，這是學的是如何做刪除動作，新增一個刪除的邏輯與 dataset 方式。
HTML的dataset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 拉出資料庫內容並渲染到網頁上
    todos.on('value',function(snapshot){
      var str ='';
      var data = snapshot.val();
      for(var item in data){
        //新增一筆dataset的資料在li上面
        str +='<li data-key="'+[item]+'">'+data[item].content+'</li>';
      }
      list.innerHTML = str ;
    })
    //刪除邏輯
    //選取要刪除的dom元素事件
    list.addEventListener('click',function(e){
      //如果點選的地方等於li元素執行內容
      if(e.target.nodeName = "LI"){
        //宣告變數點選位置的dataset值
        var key = e.target.dataset.key;
        //子目錄指定key並刪除子目錄下的內容
        todos.child(key).remove();
      }
    })

結語

基本上 database 的新增刪除讀取應用就這樣看大家玩出什麼樣的應用，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

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 一起共同討論。

Node.js 學習第八天

晚上出門跨年，出門前也來學習一下不過應該學不多，看我看到哪裡這篇筆記就寫到哪裡囉，有可能只有短短的幾行文字。

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

remove、child - 移除資料

child 是子路徑用法，再 ref 裡面寫路徑跟 child 寫路徑效果是一樣 。
firebase.database().ref('myname).remove();
firebase.database().ref().child('myname').remove();

在網頁即時看到 Firebase 資料庫資料

看範例圖並做一遍，也不一定要抓根目錄以下所有的資料，可以指向子目錄抓取單一。

結語

要跟朋友去跨年所以才記錄兩個小段落，隔天在一口氣把 todolist 學完吧。
有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

Node.js 學習第七天

痾~已經 30 號了再過一天就 31 號年底準備跨年拉，想到畢業後過了半年還沒找到工作真是不爽，只能繼續投履歷繼續找阿，不過先去朋友快樂的跨年再說囉！！

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

once - 顯示資料到網頁

once 這語法是只讀取資料庫的資料一次。

1
2
3
4
5
6
7
8
9
10

//把資料寫入資料庫
firebase.database().ref('myname').set('mark');
//宣告一個變數指定位子
var myName = firebase.database().ref('myname');
//once 只讀取資料庫的資料一次 on 隨時監聽
//once 裡面的函式像快照把資料記錄一次名稱自訂
myName.once('value',function(snapshot){
  document.getElementById('title').textContent = snapshot.val();
  console.log(snapshot.val());
})

如果要使用 on 的語法就把 once 改成 on ，on 就把資料庫更新資料時可以即時監聽。

還有一種新增資了方法就是 push ， push 跟 set 的差別在於 firebase 把 push 新增的物件資料會多加一組 key 值並且只能新增物件。

1

firebase.database().ref('push顯示').push({content:'你好嗎?'});

結語

今天講的就是新增資料的方法，明天 31 號會講移除的方法不過應該會很短，要跟朋友去跨年阿。
有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

Node.js 學習第六天

前置作業都弄得差不多了，就要開始製作一個小型專案，這次要邊做邊學的專案是 整合todolist ，這次花費的天數會比較常就每一個小段落邊看變邊詢 GOOGLE 邊做。

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

Firebase 服務

Firebase 是可以使用 js 去操控的服務還有這服務免費給的版本條件很不錯，所以這邊個人建議使用 Firebase的服務，這邊對於 Firebase 服務就不多做解說了基本註冊與新增專案就請上網搜尋。

首先要使用 Firebase 服務裡面的 Database 功能。

建立資料庫環境，使用 Firebase 懶人包把這連結裡面的程式碼貼到新的資料夾裡面的 html 檔案(head上)。

1
2
3
4
5
6
7
8
9
10
11
12
13

    <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);
</script>

操控 Firebase 資料庫 - ref (路徑) 、 set (新增)

首先我們要練習如何操控要去 Firebase 裡面把規則寫入跟讀取都改成 true ，一般是不會這樣設定不過這是練習就先這樣設定。

再來如何使用這兩種語法， set 語法可以設定字串或物件進去，每次寫入都會覆蓋原本的資料。
set 只能帶入物件格式不能帶入陣列格式

1
2
3

ref() //尋找資料庫路徑
set() //新增資料庫
firebase.database().ref().set('hi') //沒設定路徑的話會從根目錄開始

1
2
3
4
5
6
7
8
9
10
11

firebase.database().ref().set({
    studen1:{
        name:'Tom',
        num:'1'
    },
    studen2:{
        name:'John',
        num:'2'
    }
});  代入物件格式
ref(studen1/num);  指向 num 的路徑

結語

嗯……….沒啥好說，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

Node.js 學習第五天

上一個小章節學完了，接下來要學下一段就要先準備事前作業囉，讓我們繼續邊看邊學。

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

NPM

什麼事 npm 呢？ NPM 官方網站 NPM WIKI
就是給一群使用 Node.js 開發的使用者發佈自己開發的模組， NPM 有許多非常好用的模組可以到 NPM 的官網去了解有哪些模組。

建立 package.json

package.json 是寫入這個模組本身的詳細資料，像名字、版本包含許多訊息，那如何建立自己的 package.json 呢？ 跟著下列步驟做。
現在用 GIT 移動到自己檔案的資料夾。

1

npm init

輸入完之後會詢問你幾項問題：

1. 這支模組的名稱
2. 這支模組的版本號
3. 描述(不想寫按 ENTER 跳過)
4. 要執行主要的檔案是哪一支檔案
5. 有沒有測試用程式碼 (沒有按 ENTER 跳過)
6. 是否有 GIT 數據庫 (沒有建立 ENTER 跳過)
7. 有沒有關鍵字尋找這支 NPM 方法 (沒有 ENTER 跳過)
8. 作者是誰
9. 這支模組需要 opne source (沒有 ENTER 跳過)
10. 顯示你設定的結果 Y/N 來確定是與否
    完成後資料夾內就會有 package.json 檔案了。

如何安裝 NPM 模組

到 NPM 官網 ，以 express 這模組為範例，這模組有說明安裝需要在 git 裡面輸入這段程式碼 npm install express --save ，安裝前要先移動到你要安裝到的資料夾，移動到後先建立 package.json 在輸入這段程式碼， package.json 裡面會紀錄有安裝哪些模組方便管理所以需要安裝，安裝完成後建立 js 檔裡面新增變數 require('express') 可以去 console 查看這個模組。

npm install 如果你安裝的模組不小心遺失或刪除，你 package.json 檔裡面的 dependencies 有記錄的話，輸入這段就會把你所有缺失的模組全部安裝回來。

1
2
3

--save 加上這段會複寫 package.json 檔案
--save-dev 加上後面這段是測試用 會安裝測試用輔助工具
-g 是安裝在全域 全域會在  C:\users[使用者名稱]\AppData\Roming\npm 這個資料夾內

結語

NPM 是個非常好用的管理器，裡面有許多開發者創建的模組，各式各樣都有寫爬蟲、APP、資料庫、應用程式，都有一堆人建立並使用，十分建議好好了解 NPM 的詳細內容，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

Node.js 學習第四天

第三第四天比較趕，所以文章有任何不順的地方多見諒，一樣麻煩了。

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

Node.js 模組原理(下)

Node.js 核心模組 - dirname、 filename

dirname 是你這支 js 的資料夾路徑， filename 是這支 js 的路徑會顯示檔案名稱，這兩在設定路徑的時候就很好用在 js 裡面下兩個 console.log 用這兩個語法就可以看到這支的路徑。

1
2

console.log(__dirname);
console.log(__filename);

Node.js 核心模組 - Path

這是 Node.js 的路徑模組，想處理這個檔案的路徑或名稱就很好去指定位置，如果我設定一個資料夾是這樣 project/a/b/all.js 把 all.js 放在 project 資料夾又放入 a 資料夾又放入 b 資料夾，接下來去載入 path 模組 var path = require('path'); ，如果想要看檔案的資料夾路徑就可以這樣寫
console.log(path.dirname('a/b/all.js')) ，它就會回傳給你這檔案的資料夾路徑，在來還有一個語法是 path.join 這像字串相加， console.log(path.join(__dirname,'/a')) 它就會把目前路徑加上 /a ，也可以抓擋名路徑或抓副檔名，在來可以分析路徑。

console.log(path.dirname('/xx/yy/zz.js')); //抓目錄路徑
console.log(path.join(__dirname,'/xx')); //路徑合併
console.log(path.basename('/a/b/all.js')); //抓檔名
console.log(path.exname('/a/b/all.js')); //抓副檔名
console.log(path.parse('/a/b/all.js')); //分析檔案路徑

可以去練習看每個 console 的結果出來。

結語

終於把第三第四天寫完了，日後有時間會在去更新圖文更好了解，畢竟個人還在學習中，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。

Node.js 學習第三天

今天比較忙一點，所以第三第四天一起發出來，希望自己潛意識生出偷懶不寫的想法，或者拖延後發覺太晚就放棄。

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

Node.js 模組原理(中)

Node.js 核心模組 - createServer

Node.js 裡面有需多的模組，詳細模組說明參考官網說明，這次要使用 HTTP 模組，使用方宣告一個變數使用前一天講到的 require('http') 這 HTTP 是內建的，所以可以使用這個模組，接下來要連接一個 Web Server 就要使用 HTTP 模組的連接事件 connect 來去使用 HTTP 裡面各種的函式，這次要用的事 createServer 可以幫你開啟 Web 伺服器。

1
2
3
4
5

http.createServer(function(request, response){
    response.writrHead(200,{"Content-Type":"text/plain"});
    response.write('Hello!!');
    response.end();
}).listen(8080);

匿名函式裡面帶入第一個值不限定，第二個會叫 response ， request 是當使用者連接到網站就會讀取網站的相關詳細資料， response 就是收到資料後要回傳給它的資料，第一行語法的第一個帶入 200 這是代表你資料回傳成功，第二個帶入一個物件 "Content-Type":"text/plain" 這是代表我要回傳文字格式給它，第二行是要回傳什麼樣的內容給它，第三行要寫結束代表結束這次的回傳，最後要開啟一個埠就是本機端的 8080 ，結束後在自己的 CMD 輸入node 檔案名.js ，開啟一個瀏覽器輸入 127.0.0.1:8080 或 localhost:8080 兩個都可以去檢查看有沒有回傳正確，基本上在 CMD 那邊就會說程式碼是否有錯誤。可以在回傳什麼格式那邊改成 text/html 就可以回傳 <h1>hello!!</h1>。

通訊埠

1
2
3
4

127.0.0.1/localhost 是自己主機端 
21 FTP
80 HTTP
3389 遠端桌面

結語

這次需要的知識就比較需要比較廣，可以要去多看 Node.js API 文件，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。