一、Node環境搭建

Node.js 簡介

Node.js 是一個開源與跨平臺的 JavaScript 運行時環境， 它是一個可用于幾乎任何專案的流行工具！

Node.js 在瀏覽器外運行 V8 JavaScript 引擎（Google Chrome 的內核）， 這使 Node.js 表現得非常出色，

Node.js 應用程式運行于單個行程中，無需為每個請求創建新的執行緒， Node.js 在其標準庫中提供了一組異步的 I/O 原生功能（用以防止 JavaScript 代碼被阻塞），并且 Node.js 中的庫通常是使用非阻塞的范式撰寫的，

當 Node.js 執行 I/O 操作時（例如從網路讀取、訪問資料庫或檔案系統），Node.js 會在回應回傳時恢復操作，而不是阻塞執行緒并浪費 CPU 回圈等待，

這使 Node.js 可以在一臺服務器上處理數千個并發連接，而無需引入管理執行緒并發的負擔（這可能是重大 bug 的來源），

Node.js 具有獨特的優勢，因為為瀏覽器撰寫 JavaScript 的數百萬前端開發者現在除了客戶端代碼之外還可以撰寫服務器端代碼，而無需學習完全不同的語言，

在 Node.js 中，可以毫無問題地使用新的 ECMAScript 標準，因為不必等待所有用戶更新其瀏覽器，你可以通過更改 Node.js 版本來決定要使用的 ECMAScript 版本，并且還可以通過運行帶有標志的 Node.js 來啟用特定的實驗中的特性，言，發布于2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝，

Chrome V8引擎簡介

隨著Web相關技術的發展，JavaScript所要承擔的作業也越來越多，早就超越了“表單驗證”的范疇，這就更需要快速的決議和執行JavaScript腳本，

V8引擎就是為解決這一問題而生，在node中也是采用該引擎來決議JavaScript，V8是如何使得JavaScript性能有大幅提升的呢？

更多介紹：Chrome V8引擎介紹

Node.js環境搭建

Nodejs最新下載地址: 下載 | Node.js 中文網

下載

根據自己電腦系統及位數選擇，我這里選擇windows64位.msi格式安裝包

.msi和.zip格式區別：

1、.msi是Windows installer開發出來的程式安裝檔案，它可以讓你安裝，修改，卸載你所安裝的程式，說白了.msi就是Windows installer的資料包，把所有和安裝檔案相關的內容封裝在一個包里，

2、.zip是一個壓縮包，解壓之后即可，不需要安裝

安裝

下載完成后，雙擊安裝包，開始安裝，一直點next即可，安裝路徑默認在C:\Program Files下，也可以自定義修改，

Node.js runtime 表示運行環境

npm package manager表示npm包管理器

online documentation shortcuts 在線檔案快捷方式

Add to PATH添加到環境變數

驗證

安裝完成后，.msi格式的安裝包已經將node啟動程式添加到系統環境變數path中,查看系統變數驗證，

win7驗證：

win10驗證：

既然已經將node程式添加到全域系統變數，我們可以直接在CMD視窗中任意位置執行node，打開CMD視窗，執行命令node -v查看node版本，

最新版的node在安裝時同時也安裝了npm,執行npm -v查看npm版本，

npm簡介

npm全稱為Node Package Manager，是一個基于Node.js的包管理器，也是整個Node.js社區最流行、支持的第三方模塊最多的包管理器，

npm的初衷：JavaScript開發人員更容易分享和重用代碼，

npm的使用場景：

• 允許用戶從NPM服務器下載別人撰寫的第三方包到本地使用，

• 允許用戶從NPM服務器下載并安裝別人撰寫的命令列程式到本地使用，

• 允許用戶將自己撰寫的包或命令列程式上傳到NPM服務器供別人使用，

如果你安裝的是舊版本的 npm，可以很容易得通過 npm 命令來升級，命令如下：

npm install npm -g

使用淘寶鏡像的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm run是npm run-script的簡寫，顧名思義就是執行腳本，執行的腳本配置在package.json中的scripts物件，

二、json-server環境搭建

json-server概述

一個在前端本地運行，可以存盤json資料的server，

通俗來說，就是模擬服務端介面資料，一般用在前后端分離后，前端人員可以不依賴API開發，而在本地搭建一個JSON服務，自己產生測驗資料，

顧名思義，json-server就是個存盤json資料的server~?，

下載安裝

使用npm全域安裝json-server：

npm install -g json-server

可以通過查看版本號，來測驗是否安裝成功：

json-server -v

創建json資料——db.json

既然是造資料，就需要創建一個json資料，

在任意一個檔案夾下（此處假設我創建了一個myserver檔案夾），進入到該檔案夾里面，執行代碼：

json-server --watch db.json

原本空空如也的檔案夾里，就會多出一個db.json檔案，

同時，根據執行代碼結果的提示，我們可以訪問 http://localhost:3000 （啟動json-server后，點擊才有效）,看到如下頁面：

可以分別點擊/posts /comment /profile /db鏈接，看看頁面跳轉后，觀察地址欄變化和頁面內容，你看到了什么？

沒錯，就是各自的json資料，

db.json里面自帶的資料：

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

再比對myserver/db.json檔案的資料，就可以發現： /db就是整個的db.json資料包，而/posts /comment /profile 分別是db.json里面的子物件，

所以說，json-server把db.json 根節點的每一個key，當作了一個router，我們可以根據這個規則來撰寫測驗資料，

修改埠號

json-server 默認是 3000 埠，我們也可以自己指定埠，指令如下：

json-server --watch db.json --port 3004

嗯，如果你很懶，覺得啟動服務的這段代碼有點長，還可以考慮db.json同級檔案夾（也就是myserver檔案夾）新建一個package.json，把配置資訊寫在里頭：

{
    "scripts": {
        "mock": "json-server db.json --port 3004"
    }
}

之后啟動服務，只需要執行如下指令就可以了：

npm run mock

json-server 的相關啟動引數

• 語法：json-server [options] <source>

• 選項串列：

三、操作資料

我們先自己倒騰下 db.json 資料，比如現在是個水果商城，放點 用戶資訊 和 水果價格 資訊：

{
  "fruits": [
    {
      "id": 1,
      "name": "apple",
      "price": 33
    },
    {
      "id": 2,
      "name": "orange",
      "price": 8.88
    }
  ],
   "users": [
    {
      "name": {
        "username":"admin",
        "nickname":"zhangsan"
      },
      "pwd": "123456"
    }
  ]
}

要注意，資料格式符合JSON格式（尤其注意最后一個鍵值對后面不要有逗號），如果資料格式有誤，命令視窗會報錯，可以根據錯誤提示進行修整，

接下來我們就可以GET, POST, PUT, PATCH or DELETE 方法來對資料進行操作，

獲取資料

首先，我們先來看GET操作，

瀏覽器地址訪問就可以看做GET操作，所以不用寫任何代碼，我們就可以先來測驗下 url -GET 操作，

常規獲取

    http://localhost:3004/fruits

可以得到所有水果資料（物件陣列）

[
  {
    "id": 1,
    "name": "apple",
    "price": 33
  },
  {
    "id": 2,
    "name": "orange",
    "price": 8.88
  }
]

過濾獲取 Filter

根據id獲取資料

    http://localhost:3004/fruits/1

可以得到指定id為1的水果（物件）：

{
  "id": 1,
  "name": "apple",
  "price": 33
}

當然，指定id為1的獲取指令還可以用如下指令，但要注意，此時回傳的資料是一個陣列，

    http://localhost:3004/fruits?id=1

[
  {
    "id": 1,
    "name": "apple",
    "price": 33
  }
]

以此類推，我們也可以通過水果名稱，或者是價格來獲取資料：

    http://localhost:3004/fruits?name=orange

[
  {
    "id": 2,
    "name": "orange",
    "price": 8.88
  }
]

也可以指定多個條件，用&符號連接：

    http://localhost:3004/fruits?name=orange&price=8.88

[
  {
    "id": 2,
    "name": "orange",
    "price": 8.88
  }
]

你甚至還可以使用物件取屬性值 obj.key 的方式：

    http://localhost:3004/users?name.nickname=zhangsan

[
  {
    "name": {
      "username": "admin",
      "nickname": "zhangsan"
    },
    "pwd": "123456"
  }
]

以上看著是不是特別眼熟，不就是HTTP中GET請求方式嘛~

嗯，更好玩的還在后面，

分頁 Paginate

為了能演示分頁效果，我們在db.json檔案里的fruits里面多添加了幾種水果，

{
  "fruits": [
    {
      "id": 1,
      "name": "apple1",
      "price": 33
    },
    {
      "id": 2,
      "name": "apple2",
      "price": 2
    },
    {
      "id": 3,
      "name": "apple3",
      "price": 3
    },
    {
      "id": 4,
      "name": "apple4",
      "price": 4
    },
    {
      "id": 5,
      "name": "apple5",
      "price": 5
    },
    {
      "id": 6,
      "name": "orange",
      "price": 8.88
    }
  ],
   "users": [
    {
      "name": {
        "username":"admin",
        "nickname":"zhangsan"
      },
      "pwd": "123456"
    }
  ]
}

編輯過db.json（db.json資料有變動），都要關閉服務重新啟動，（注意：不要用 CTRL + C 來停止服務，因為這種方式會導致 node.js 依舊霸占著3004埠，導致下一次啟動失敗，簡單粗暴關閉視窗即可！ —— 個人window系統，其他系統可能沒有這樣的煩惱，）

分頁采用 _page 來設定頁碼， _limit 來控制每頁顯示條數，如果沒有指定 _limit ，默認每頁顯示10條，

    http://localhost:3004/fruits?_page=2&_limit=2

[
  {
    "id": 3,
    "name": "apple3",
    "price": 3
  },
  {
    "id": 4,
    "name": "apple4",
    "price": 4
  }
]

排序 Sort

排序采用 _sort 來指定要排序的欄位， _order 來指定排序是正排序還是逆排序（asc | desc ，默認是asc），

    http://localhost:3004/fruits?_sort=id&_order=desc

[
  {
    "id": 6,
    "name": "orange",
    "price": 8.88
  },
  {
    "id": 5,
    "name": "apple5",
    "price": 5
  },
  {
    "id": 4,
    "name": "apple4",
    "price": 4
  },
  {
    "id": 3,
    "name": "apple3",
    "price": 3
  },
  {
    "id": 2,
    "name": "apple2",
    "price": 2
  },
  {
    "id": 1,
    "name": "apple1",
    "price": 33
  }
]

也可以指定多個欄位排序，一般是按照id進行排序后，相同id的再跟進name排序：

    http://localhost:3004/fruits?_sort=id,name&_order=desc,asc

取區域資料 Slice

slice的方式，和 Array.slice() 方法類似，采用 _start 來指定開始位置， _end 來指定結束位置、或者是用_limit來指定從開始位置起往后取幾個資料，

    http://localhost:3004/fruits?_start=2&_end=4

[
  {
    "id": 3,
    "name": "apple3",
    "price": 3
  },
  {
    "id": 4,
    "name": "apple4",
    "price": 4
  }
]

    http://localhost:3004/fruits?_start=2&_limit=4

[
  {
    "id": 3,
    "name": "apple3",
    "price": 3
  },
  {
    "id": 4,
    "name": "apple4",
    "price": 4
  },
  {
    "id": 5,
    "name": "apple5",
    "price": 5
  },
  {
    "id": 6,
    "name": "orange",
    "price": 8.88
  }
]

取符合某個范圍 Operators

（1）采用 _gte _lte 來設定一個取值范圍（range）:

    http://localhost:3004/fruits?id_gte=4&id_lte=6

[
  {
    "id": 4,
    "name": "apple4",
    "price": 4
  },
  {
    "id": 5,
    "name": "apple5",
    "price": 5
  },
  {
    "id": 6,
    "name": "orange",
    "price": 8.88
  }
]

（2）采用_ne來設定不包含某個值：

    http://localhost:3004/fruits?id_ne=1

[
  {
    "id": 2,
    "name": "apple2",
    "price": 2
  },
  {
    "id": 3,
    "name": "apple3",
    "price": 3
  },
  {
    "id": 4,
    "name": "apple4",
    "price": 4
  },
  {
    "id": 5,
    "name": "apple5",
    "price": 5
  },
  {
    "id": 6,
    "name": "orange",
    "price": 8.88
  }
]

（3）采用_like來設定匹配某個字串（或正則運算式）：

    http://localhost:3004/fruits?name_like=apple

[
  {
    "id": 2,
    "name": "apple2",
    "price": 2
  },
  {
    "id": 3,
    "name": "apple3",
    "price": 3
  },
  {
    "id": 4,
    "name": "apple4",
    "price": 4
  },
  {
    "id": 5,
    "name": "apple5",
    "price": 5
  }
]

全文搜索 Full-text search

采用 q 來設定搜索內容:

http://localhost:3004/fruits?q=oran

[
  {
    "id": 6,
    "name": "orange",
    "price": 8.88
  }
]

除了獲取資料，我們當然還希望能向操作sql一樣能更改資料、洗掉資料了，

所以這里，我們采用大部分人熟悉的 ajax 方法，來操作下回應的資料，

案例

獲取db.json中的所有水果資訊，以表格的方式展現出來，

<!DOCTYPE html>
<html>

<head>
  <title>使用jq ajax方法操作資料</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    table,
    td,
    th {
      border: 1px solid black;
      border-collapse: collapse;
    }

    table {
      width: 500px;
      text-align: center;
    }

    tr {
      height: 35px;
    }
  </style>
</head>

<body>
  <button id="getBtn">get</button>
  <div id="showData"></div>

  <script type="text/javascript">
    $("#getBtn").click(function () {
      $.ajax({
        type: 'get',
        url: 'http://localhost:3004/fruits',
        success: function (data) {
          // data 物件陣列
          var h = ""
          h += "<table border='1'>"
          h += "<thead><th>ID</th><th>name</th><th>price</th></thead>"
          h += "<tbody>"
          for (var i = 0; i < data.length; i++) {
            var o = data[i]
            h += "<tr>"
            h += "<td>" + o.id + "</td><td>" + o.name + "</td><td>" + o.price + "</td>"
            h += "</tr>"
          }
          h += "<tbody>"
          h += "</table>"
          $("#showData").empty().append(h)
        },
        error: function () {
          alert("get : error")
        }
      })
    })
  </script>
</body>

</html>

添加資料

POST 方法，常用來創建一個新資源，

案例：在頁面的輸入框中輸入新的水果名稱和價格，通過post添加到db.json中，

水果：<input id="fruitName" type="text" name="fruitName"><br>
價格：<input id="fruitPrice" type="text" name="fruitPrice"><br>
<button id="postBtn">add</button>

$("#postBtn").click(function () {
    $.ajax({
        type: 'post',
        url: 'http://localhost:3004/fruits',
        data: {
            name: $("#fruitName").val(),
            price: $("#fruitPrice").val()
        },
        success: function (data) {
            console.log("post success")
        },
        error: function () {
            alert("post error")
        }
    })
})

輸入 watermelon 6.88 水果后 add 添加新水果，再次點擊get按鈕重新獲取db.json資料，就可以看到新添加進去的資料，此時打開db.json檔案，也可以看到這條新添加的記錄，

注意：此時如果再次點擊 add 按鈕，重復添加watermelon 6.88 資料，會發現在get中存在多條 id 不一樣但 name & price 相同的重復資料，

更新資料

PUT 方法，常用來更新已有資源，若資源不存在，它也會進行創建，

案例：輸入水果對應id，修改其價格，

<p>更新水果價格</p>
水果id：<input id="putId" type="text" name="fruitId"><br>
價格：<input id="putPrice" type="text" name="fruitPrice"><br>
<button id="putBtn">put</button>

$("#putBtn").click(function () {
    $.ajax({
        type: 'put',
        url: 'http://localhost:3004/fruits/' + $("#putId").val(),
        data: {
            price: $("#putPrice").val()
        },
        success: function (data) {
            console.log("put success")
        },
        error: function () {
            alert("put error")
        }
    })
})

在案例中，我們輸入id 為 1 ，更改價格為100，本意是要更新 apple 的價格為100，但PUT方法執行后，get到的資料name 欄位 的 apple 變成 undefined 了，

這是因為，PUT方法會更新整個資源物件，前端沒有給出的欄位，會自動清空，所以，要么我們在ajax的data中給出完整的物件資訊，要么采用PATCH方法，

PATCH是一個新方法，可以當作是PUT方法的補充，主要用來做區域更新，

案例：同PUT方法，

$("#putBtn").click(function () {
    $.ajax({
        type: 'patch',
        url: 'http://localhost:3004/fruits/' + $("#putId").val(),
        data: {
            price: $("#putPrice").val()
        },
        success: function (data) {
            console.log("put success")
        },
        error: function () {
            alert("put error")
        }
    })
})

此處，我們輸入id 為 2 ，更改價格為200，即要更新 orange 的價格為200，執行PATCH方法后，get到的資料name 欄位 的 orange 的價格確實變化了，而且不會像PUT方法，導致 name 變成 undefined ，

但有時候，我們更希望能通過輸入水果名稱，來動態更新水果價格，但 'http://localhost:3004/fruits/orange' 這種 url 是錯誤的，而像 'http://localhost:3004/fruits?name = orange' 這種url，只能供 GET 方法來獲取資料，既然如此，我們就多繞個彎，通過GET方法來獲知id，然后再通過id去PATCH資料，

實作方法如下：

<p>通過水果名更新水果價格</p>
水果：<input id="editName" type="text" name="fruitName"><br>
價格：<input id="editPrice" type="text" name="fruitPrice"><br>
<button id="editBtn">edit</button>

$("#editBtn").click(function () {
    getFun($("#editName").val(), patchFun)
})

function getFun(name, f) {
    $.ajax({
        type: 'get',
        url: 'http://localhost:3004/fruits' + '?name=' + name,
        success: function (data) {
            // data 物件陣列
            console.log(data[0]);
            if (typeof f == "function") f.call(this, data[0].id)
        },
        error: function () {
            alert("error")
        }
    })
}

function patchFun(id) {
    $.ajax({
        type: 'patch',
        url: 'http://localhost:3004/fruits/' + id,
        data: {
            price: $("#editPrice").val()
        },
        success: function (data) {
            console.log("success", data)
        },
        error: function () {
            alert("error")
        }
    })
}

洗掉資料

DELETE 方法，常用來洗掉已有資源

案例：根據id洗掉水果資料

<p>洗掉水果</p>
水果id：<input id="delId" type="text" name="delName"><br>
<button id="delOne">del</button>
<button id="delAll">delAll</button>

$("#delOne").click(function () {
    $.ajax({
        type: 'delete',
        url: 'http://localhost:3004/fruits/' + $("#delId").val(),
        success: function (data) {
            console.log("del success")
        },
        error: function () {
            alert("del error")
        }
    })
})

若想用洗掉全部，沒辦法使用'http://localhost:3004/fruits' 這種請求url，

因為必須指定洗掉的物件id，所以只能通過回圈洗掉，這就需要實作通過GET方法來獲取當前最大id（注意是最大id，而不是資料個數）來作為回圈的邊界，

$("#delAll").click(function () {
    // 此處就沒有動態去獲取db.json中fruits的最大id，直接帶入10
    for (var i = 0; i <= 10; i++) {
        delFun(i)
    }
})

function delFun(id) {
    $.ajax({
        type: 'delete',
        url: 'http://localhost:3004/fruits/' + id,
        data: '',
        success: function (data) {
            console.log("del success", data)
        },
        error: function () {
            console.log("del error")
        }
    })
}

四、配置靜態資源服務器

主要是用來配置圖片、音頻、視瞥澩

通過命令列配置路由、資料檔案、監控等會讓命令變的很長，而且容易敲錯；

json-server允許我們把所有的配置放到一個組態檔中，這個組態檔一般命名為json_sever_config.json;

json_sever_config.json

{
  "port": 3004,            
  "watch": true,           
  "static": "./public",
  "read-only": false, 
  "no-cors": true, 
  "no-gzip": false
}

package.json

{
    "scripts": {
        "mock": "json-server --c json_sever_config.json db.json"
    }
}

我們可以把我們的圖片資源都放在public目錄中，但是public目錄不僅可以放圖片，也可以放音頻和視頻，所有大家放資源的時候，在public下面創建images用來放置圖片，創建audio/video分別放置音頻和視頻；

既然我們已經在json_server_config.json里面指明了靜態檔案的目錄，那么我們訪問的時候，就可以忽略public；

圖片：http://localhost:3004/@2x_about.png