Node.js開發Web後臺服務

1、簡介

Node.js 是一個基於Google Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

能方便地搭建響應速度快、易於擴展的網絡應用，Node.js 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，很是適合在分佈式設備上運行的數據密集型的實時應用。

官網：https://nodejs.org/en/
中文：https://cnodejs.org/、http://nodejs.cn/

API：http://nodeapi.ucdok.com/#/api/

簡單說Node.js就是運行在服務器端的JavaScript，是如今流行的語言中能同時運行在前端與後臺的程序語言，你能夠把JavaScript想像成Java與C#。相關技術：

數據庫：MongoDB，非關係型數據庫，NoSQL（Not only SQL）

MVC框架：AngularJS

Web服務器：Express

模板引擎：jade、ejs、htmljs、swig、hogan.js

2、搭建Node.js開發環境

2.一、安裝Node.js

去官網下下載最新版本的Node.js一步一步按提示安裝便可，若是安裝失敗就手動安裝，將Node.js的安裝位置配置到環境變量的path中。

安裝完成後啓動命令行，測試：

2.二、安裝IDE開發Node.js插件

若是不使用IDE開發項目效率較低，在不少主流的集成開發環境（IDE）中均可以安裝插件支持Node.js開發，如Eclipse，這裏咱們以HBuilder爲例：

啓動HBuilder->工具->插件安裝

安裝成功後就能夠新建Node.js項目了：

這裏選擇Hello World，新建好的項目以下：

hello-world-server.js文件就是一個簡單的web服務器，右鍵選擇「運行方式」->"Node Application"

控制檯提示「Server running at http://127.0.0.1:1337/」在瀏覽器查看的效果以下：

3、第一個Node.js程序

在上面的示例中，咱們是經過IDE完成編譯與運行的，其實手動運行也能夠，好比編寫一段代碼以下：

server.js

//依賴一個http模塊，至關於java中的import，與C#中的using
var http = require('http');

//建立一個服務器對象
server = http.createServer(function (req, res) {
//設置請求成功時響應頭部的MIME爲純文本
res.writeHeader(200, {"Content-Type": "text/plain"});
//向客戶端輸出字符
res.end("Hello World\n");
});
//讓服務器監聽本地8000端口開始運行
server.listen(8000,'127.0.0.1');
console.log("server is runing at 127.0.0.1:8000");

在node環境下解釋運行：

運行結果：

引入 required 模塊：咱們可使用 require 指令來載入 Node.js 模塊。
建立服務器：服務器能夠監聽客戶端的請求，相似於TomCat、IIS、Apache 、Nginx 等 HTTP 服務器。
接收請求與響應請求 服務器很容易建立，客戶端可使用瀏覽器或終端發送 HTTP 請求，服務器接收請求後返回響應數據。

第一行請求（require）Node.js 自帶的 http 模塊，而且把它賦值給 http 變量。
接下來咱們調用 http 模塊提供的函數： createServer 。這個函數會返回 一個對象，這個對象有一個叫作 listen 的方法，這個方法有一個數值參數， 指定這個 HTTP 服務器監聽的端口號。

4、NPM（Node.js包管理器）

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：
a)、容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
b)、容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
c)、容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

官網：https://www.npmjs.com/

4.一、查看npm版本
因爲新版的nodejs已經集成了npm，因此以前npm也一併安裝好了。一樣能夠經過輸入 "npm -v" 來測試是否成功安裝。命令以下，出現版本提示表示安裝成功:

4.二、升級npm

若是你安裝的是舊版本的 npm，能夠很容易得經過 npm 命令來升級

npm install npm -g

 

4.三、安裝模塊

npm install <Module Name> -參數

若是帶參數-g表示全局安裝，不然只是安裝到某個目錄下。

如下實例，咱們使用 npm 命令安裝經常使用的 Node.js web框架模塊 express

4.四、卸載模塊

咱們可使用如下命令來卸載 Node.js 模塊。
npm uninstall <Module Name>

如先使用安裝指令安裝bootstrap:

npm install bootstrap

再使用卸載指令刪除模塊：

npm uninstall bootstrap

能夠到 /node_modules/ 目錄下查看包是否還存在

4.五、模塊列表

使用模塊列表命令能夠方便的看到當前項目中依賴的包：
npm ls

4.六、更新模塊

咱們可使用如下命令更新模塊：
npm update 模塊名稱
npm up -g 模塊名稱

4.七、搜索模塊

npm search 模塊名稱

4.八、NPM 經常使用命令

除了本章介紹的部分外，NPM還提供了不少功能，package.json裏也有不少其它有用的字段。
除了能夠在npmjs.org/doc/查看官方文檔外，這裏再介紹一些NPM經常使用命令。
NPM提供了不少命令，例如install和publish，使用npm help可查看全部命令。
NPM提供了不少命令，例如install和publish，使用npm help可查看全部命令。
使用npm help <command>可查看某條命令的詳細幫助，例如npm help install。
在package.json所在目錄下使用npm install . -g可先在本地安裝當前命令行程序，可用於發佈前的本地測試。
使用npm update <package>能夠把當前目錄下node_modules子目錄裏邊的對應模塊更新至最新版本。
使用npm update <package> -g能夠把全局安裝的對應命令行程序更新至最新版。
使用npm cache clear能夠清空NPM本地緩存，用於對付使用相同版本號發佈新版本代碼的人。
使用npm unpublish <package>@<version>能夠撤銷發佈本身發佈過的某個版本代碼。

4.九、更換NPM 鏡像

由於npm的服務器在國外，在網絡狀態很差的狀況下引入一個模塊會由於網絡延遲而失敗，能夠更換成國內速度更快的鏡像服務器，這裏以使用淘寶 NPM 鏡像（http://npm.taobao.org/）爲例：

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

這樣就可使用 cnpm 命令來安裝模塊了：
＄ cnpm install [name]

這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。

如是安裝失敗，能夠試試：

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

# Or alias it in .bashrc or .zshrc
$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=https://npm.taobao.org/dist \
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

4.十、package.json

4.10.一、概述

每一個項目的根目錄下面，通常都有一個package.json文件，定義了這個項目所須要的各類模塊，以及項目的配置信息（好比名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。

下面是一個最簡單的package.json文件，只定義兩項元數據：項目名稱和項目版本。

{
  "name" : "xxx",
  "version" : "0.0.0",
}

package.json文件就是一個JSON對象，該對象的每個成員就是當前項目的一項設置。好比name就是項目名稱，version是版本（遵照「大版本.次要版本.小版本」的格式）。

下面是一個更完整的package.json文件。

{
    "name": "Hello World",
    "version": "0.0.1",
    "author": "張三",
    "description": "第一個node.js程序",
    "keywords":["node.js","javascript"],
    "repository": {
        "type": "git",
        "url": "https://path/to/url"
    },
    "license":"MIT",
    "engines": {"node": "0.10.x"},
    "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
    "contributors":[{"name":"李四","email":"lisi@example.com"}],
    "scripts": {
        "start": "node index.js"
    },
    "dependencies": {
        "express": "latest",
        "mongoose": "~3.8.3",
        "handlebars-runtime": "~1.0.12",
        "express3-handlebars": "~0.5.0",
        "MD5": "~1.2.0"
    },
    "devDependencies": {
        "bower": "~1.2.8",
        "grunt": "~0.4.1",
        "grunt-contrib-concat": "~0.3.0",
        "grunt-contrib-jshint": "~0.7.2",
        "grunt-contrib-uglify": "~0.2.7",
        "grunt-contrib-clean": "~0.5.0",
        "browserify": "2.36.1",
        "grunt-browserify": "~1.3.0",
    }
}

下面詳細解釋package.json文件的各個字段。

成熟示例：

{
  "_args": [
    [
      {
        "raw": "md5@^2.2.1",
        "scope": null,
        "escapedName": "md5",
        "name": "md5",
        "rawSpec": "^2.2.1",
        "spec": ">=2.2.1 <3.0.0",
        "type": "range"
      },
      "E:\\NF\\vue\\demos\\demo02"
    ]
  ],
  "_from": "md5@>=2.2.1 <3.0.0",
  "_id": "md5@2.2.1",
  "_inCache": true,
  "_location": "/md5",
  "_nodeVersion": "4.4.5",
  "_npmOperationalInternal": {
    "host": "packages-16-east.internal.npmjs.com",
    "tmp": "tmp/md5-2.2.1.tgz_1472679629604_0.48944878415204585"
  },
  "_npmUser": {
    "name": "pvorb",
    "email": "paul@vorba.ch"
  },
  "_npmVersion": "3.9.3",
  "_phantomChildren": {},
  "_requested": {
    "raw": "md5@^2.2.1",
    "scope": null,
    "escapedName": "md5",
    "name": "md5",
    "rawSpec": "^2.2.1",
    "spec": ">=2.2.1 <3.0.0",
    "type": "range"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz",
  "_shasum": "53ab38d5fe3c8891ba465329ea23fac0540126f9",
  "_shrinkwrap": null,
  "_spec": "md5@^2.2.1",
  "_where": "E:\\NF\\vue\\demos\\demo02",
  "author": {
    "name": "Paul Vorbach",
    "email": "paul@vorba.ch",
    "url": "http://paul.vorba.ch"
  },
  "bugs": {
    "url": "https://github.com/pvorb/node-md5/issues"
  },
  "contributors": [
    {
      "name": "salba"
    }
  ],
  "dependencies": {
    "charenc": "~0.0.1",
    "crypt": "~0.0.1",
    "is-buffer": "~1.1.1"
  },
  "description": "js function for hashing messages with MD5",
  "devDependencies": {
    "mocha": "~2.3.4"
  },
  "directories": {},
  "dist": {
    "shasum": "53ab38d5fe3c8891ba465329ea23fac0540126f9",
    "tarball": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz"
  },
  "gitHead": "5536a25dbe856b25d9963fd47da5eb4e1bca4250",
  "homepage": "https://github.com/pvorb/node-md5#readme",
  "license": "BSD-3-Clause",
  "main": "md5.js",
  "maintainers": [
    {
      "name": "coolaj86",
      "email": "coolaj86@gmail.com"
    },
    {
      "name": "pvorb",
      "email": "paul@vorba.ch"
    }
  ],
  "name": "md5",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git://github.com/pvorb/node-md5.git"
  },
  "scripts": {
    "test": "mocha"
  },
  "tags": [
    "md5",
    "hash",
    "encryption",
    "message digest"
  ],
  "version": "2.2.1"
}

View Code

{
  "_args": [
    [
      {
        "raw": "charenc@~0.0.1",
        "scope": null,
        "escapedName": "charenc",
        "name": "charenc",
        "rawSpec": "~0.0.1",
        "spec": ">=0.0.1 <0.1.0",
        "type": "range"
      },
      "E:\\NF\\vue\\demos\\demo02\\node_modules\\md5"
    ]
  ],
  "_from": "charenc@>=0.0.1 <0.1.0",
  "_id": "charenc@0.0.2",
  "_inCache": true,
  "_location": "/charenc",
  "_nodeVersion": "4.4.5",
  "_npmOperationalInternal": {
    "host": "packages-12-west.internal.npmjs.com",
    "tmp": "tmp/charenc-0.0.2.tgz_1482450158427_0.9801697849761695"
  },
  "_npmUser": {
    "name": "pvorb",
    "email": "paul@vorba.ch"
  },
  "_npmVersion": "3.9.3",
  "_phantomChildren": {},
  "_requested": {
    "raw": "charenc@~0.0.1",
    "scope": null,
    "escapedName": "charenc",
    "name": "charenc",
    "rawSpec": "~0.0.1",
    "spec": ">=0.0.1 <0.1.0",
    "type": "range"
  },
  "_requiredBy": [
    "/md5"
  ],
  "_resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
  "_shasum": "c0a1d2f3a7092e03774bfa83f14c0fc5790a8667",
  "_shrinkwrap": null,
  "_spec": "charenc@~0.0.1",
  "_where": "E:\\NF\\vue\\demos\\demo02\\node_modules\\md5",
  "author": {
    "name": "Paul Vorbach",
    "email": "paul@vorb.de",
    "url": "http://vorb.de"
  },
  "bugs": {
    "url": "https://github.com/pvorb/node-charenc/issues"
  },
  "dependencies": {},
  "description": "character encoding utilities",
  "devDependencies": {},
  "directories": {},
  "dist": {
    "shasum": "c0a1d2f3a7092e03774bfa83f14c0fc5790a8667",
    "tarball": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz"
  },
  "engines": {
    "node": "*"
  },
  "gitHead": "01d66efb429d0cb242b2dd5af2ce338554fd3e54",
  "homepage": "https://github.com/pvorb/node-charenc#readme",
  "license": "BSD-3-Clause",
  "main": "charenc.js",
  "maintainers": [
    {
      "name": "pvorb",
      "email": "paul@vorb.de"
    }
  ],
  "name": "charenc",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git://github.com/pvorb/node-charenc.git"
  },
  "scripts": {},
  "tags": [
    "utf8",
    "binary",
    "byte",
    "string"
  ],
  "version": "0.0.2"
}

View Code

 

4.10.二、scripts字段

scripts指定了運行腳本命令的npm命令行縮寫，好比start指定了運行npm run start時，所要執行的命令。

下面的設置指定了npm run preinstall、npm run postinstall、npm run start、npm run test時，所要執行的命令。

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

4.10.三、dependencies字段，devDependencies字段

dependencies字段指定了項目運行所依賴的模塊，devDependencies指定項目開發所須要的模塊。

它們都指向一個對象。該對象的各個成員，分別由模塊名和對應的版本要求組成，表示依賴的模塊及其版本範圍。

{
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  }
}

對應的版本能夠加上各類限定，主要有如下幾種：

• 指定版本：好比1.2.2，遵循「大版本.次要版本.小版本」的格式規定，安裝時只安裝指定版本。
• 波浪號（tilde）+指定版本：好比~1.2.2，表示安裝1.2.x的最新版本（不低於1.2.2），可是不安裝1.3.x，也就是說安裝時不改變大版本號和次要版本號。
• 插入號（caret）+指定版本：好比?1.2.2，表示安裝1.x.x的最新版本（不低於1.2.2），可是不安裝2.x.x，也就是說安裝時不改變大版本號。須要注意的是，若是大版本號爲0，則插入號的行爲與波浪號相同，這是由於此時處於開發階段，即便是次要版本號變更，也可能帶來程序的不兼容。
• latest：安裝最新版本。

package.json文件能夠手工編寫，也可使用npm init命令自動生成。

$ npm init

這個命令採用互動方式，要求用戶回答一些問題，而後在當前目錄生成一個基本的package.json文件。全部問題之中，只有項目名稱（name）和項目版本（version）是必填的，其餘都是選填的。

有了package.json文件，直接使用npm install命令，就會在當前目錄中安裝所須要的模塊。

$ npm install

若是一個模塊不在package.json文件之中，能夠單獨安裝這個模塊，並使用相應的參數，將其寫入package.json文件之中。

$ npm install express --save
$ npm install express --save-dev

上面代碼表示單獨安裝express模塊，--save參數表示將該模塊寫入dependencies屬性，--save-dev表示將該模塊寫入devDependencies屬性。

示例：

 package.json

{
  "name": "demo001",
  "version": "1.1.2",
  "description": "vueclidemo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "keywords": [
    "vue",
    "vue-cli"
  ],
  "author": "zhangguo",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://git.dev.tencent.com/zhangguo5/vuedemo001.git"
  },
  "dependencies": {
    "md5": "^2.2.1"
  },
  "devDependencies": {
    "lodash": "^4.17.15"
  }
}

index.js

var md5=require("md5");
var _=require("lodash");
function Cat(){
    console.log(md5("Hello Cat!"));
}

Cat();

var users = [
    { 'user': 'fred',   'age': 48 },
    { 'user': 'barney', 'age': 36 },
    { 'user': 'fred',   'age': 40 },
    { 'user': 'barney', 'age': 34 }
  ];

 var result=_.sortBy(users,['user','age']);
 console.log(result);

運行結果：

4.10.四、peerDependencies

有時，你的項目和所依賴的模塊，都會同時依賴另外一個模塊，可是所依賴的版本不同。好比，你的項目依賴A模塊和B模塊的1.0版，而A模塊自己又依賴B模塊的2.0版。

大多數狀況下，這不構成問題，B模塊的兩個版本能夠並存，同時運行。可是，有一種狀況，會出現問題，就是這種依賴關係將暴露給用戶。

最典型的場景就是插件，好比A模塊是B模塊的插件。用戶安裝的B模塊是1.0版本，可是A插件只能和2.0版本的B模塊一塊兒使用。這時，用戶要是將1.0版本的B的實例傳給A，就會出現問題。所以，須要一種機制，在模板安裝的時候提醒用戶，若是A和B一塊兒安裝，那麼B必須是2.0模塊。

peerDependencies字段，就是用來供插件指定其所須要的主工具的版本。

{
  "name": "chai-as-promised",
  "peerDependencies": {
    "chai": "1.x"
  }
}

上面代碼指定，安裝chai-as-promised模塊時，主程序chai必須一塊兒安裝，並且chai的版本必須是1.x。若是你的項目指定的依賴是chai的2.0版本，就會報錯。

注意，從npm 3.0版開始，peerDependencies再也不會默認安裝了。

4.10.五、bin字段

bin項用來指定各個內部命令對應的可執行文件的位置。

"bin": {
  "someTool": "./bin/someTool.js"
}

上面代碼指定，someTool 命令對應的可執行文件爲 bin 子目錄下的 someTool.js。Npm會尋找這個文件，在node_modules/.bin/目錄下創建符號連接。在上面的例子中，someTool.js會創建符號連接npm_modules/.bin/someTool。因爲node_modules/.bin/目錄會在運行時加入系統的PATH變量，所以在運行npm時，就能夠不帶路徑，直接經過命令來調用這些腳本。

所以，像下面這樣的寫法能夠採用簡寫。

scripts: {  
  start: './node_modules/someTool/someTool.js build'
}

// 簡寫爲

scripts: {  
  start: 'someTool build'
}

全部node_modules/.bin/目錄下的命令，均可以用npm run [命令]的格式運行。在命令行下，鍵入npm run，而後按tab鍵，就會顯示全部可使用的命令。

4.10.六、main字段

main字段指定了加載的入口文件，require('moduleName')就會加載這個文件。這個字段的默認值是模塊根目錄下面的index.js。

4.10.七、config 字段

config字段用於添加命令行的環境變量。

下面是一個package.json文件。

{
  "name" : "foo",
  "config" : { "port" : "8080" },
  "scripts" : { "start" : "node server.js" }
}

而後，在server.js腳本就能夠引用config字段的值。

http
  .createServer(...)
  .listen(process.env.npm_package_config_port)

用戶執行npm run start命令時，這個腳本就能夠獲得值。

$ npm run start

用戶能夠改變這個值。

$ npm config set foo:port 80

4.10.八、browser字段

browser指定該模板供瀏覽器使用的版本。Browserify這樣的瀏覽器打包工具，經過它就知道該打包那個文件。

"browser": {
  "tipso": "./node_modules/tipso/src/tipso.js"
},

4.10.九、engines 字段

engines字段指明瞭該模塊運行的平臺，好比 Node 的某個版本或者瀏覽器。

{ "engines" : { "node" : ">=0.10.3 <0.12" } }

該字段也能夠指定適用的npm版本。

{ "engines" : { "npm" : "~1.0.20" } }

4.10.十、man字段

man用來指定當前模塊的man文檔的位置。

"man" :[ "./doc/calc.1" ]

4.10.十一、preferGlobal字段

preferGlobal的值是布爾值，表示當用戶不將該模塊安裝爲全局模塊時（即不用–global參數），要不要顯示警告，表示該模塊的本意就是安裝爲全局模塊。

4.10. 十二、style字段

style指定供瀏覽器使用時，樣式文件所在的位置。樣式文件打包工具parcelify，經過它知道樣式文件的打包位置。

"style": [
  "./node_modules/tipso/src/tipso.css"
]

5、Express

Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各類 Web 應用，和豐富的 HTTP 工具。
使用 Express 能夠快速地搭建一個完整功能的網站。使用Node.js做爲AngularJS開發Web服務器的最佳方式是使用Express模塊。

Express官網： http://expressjs.com/

Express4.x API：http://expressjs.com/zh-cn/4x/api.html

5.二、Express框架核心特性

能夠設置中間件來響應 HTTP 請求。

定義了路由表用於執行不一樣的 HTTP 請求動做。

能夠經過向模板傳遞參數來動態渲染 HTML 頁面。

豐富的 HTTP 快捷方法和任意排列組合的 Connect 中間件，讓你建立健壯、友好的 API 變得既快速又簡單。

Express 不對 Node.js 已有的特性進行二次抽象，咱們只是在它之上擴展了 Web 應用所需的基本功能。

5.三、安裝 Express

安裝 Express 並將其保存到依賴列表中：

npm install express --save

以上命令全局安裝express。也可安裝時指定安裝中間件。

body-parser - node.js 中間件，用於處理 JSON, Raw, Text 和 URL 編碼的數據。

cookie-parser - 這就是一個解析Cookie的工具。經過req.cookies能夠取到傳過來的cookie，並把它們轉成對象。

multer - node.js 中間件，用於處理 enctype="multipart/form-data"（設置表單的MIME編碼）的表單數據。

＄ npm install body-parser --save
＄ npm install cookie-parser --save
＄ npm install multer --save

默認這些模塊都已經添加。

5.四、第一個Express框架實例

接下來咱們使用 Express 框架來輸出 "Hello World"。
如下實例中咱們引入了 express 模塊，並在客戶端發起請求後，響應 "Hello World" 字符串。

建立一個目錄，如Project，進入命令行：

使用npm install express 導入express模塊。

在目錄下建立hello.js文件，以下所示：

//引入express模塊
var express = require('express');
//建立一個app對象，相似一個web 應用（網站）
var app = express();
//接受指定路徑的請求，指定回調函數
app.get('/', function (req, res){
res.send('Hello World');
});
//建立一個web服務器，能夠認爲就是web服務器對象
//監聽8081端口，當監聽成功時回調
var server = app.listen(8081, function () {
   var host = server.address().address;  //地址
   var port = server.address().port;  //端口
    console.log("應用實例，訪問地址爲 http://%s:%s", host, port);
});
})

使用node執行js：

運行結果：

5.五、使用Nodeclipse開發Express項目

若是直接使用記事本效率會不高，nodeclipse插件能夠方便的建立一個Express項目，步驟以下：

建立好的項目以下：

app.js是網站：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

//指定視圖引擎爲ejs
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

bin\www是web服務器：

#!/usr/bin/env node

/**
 * 依賴模塊，導入
 */

var app = require('../app');
var debug = require('debug')('nodejsexpress:server');
var http = require('http');

/**
 * 從上下文環境中得到監聽端口，若是空則3000
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * 建立Web服務器
 */

var server = http.createServer(app);

/**
 * 開始監聽
 */

server.listen(port);
server.on('error', onError);  //指定發生錯誤時的事件
server.on('listening', onListening);  //當監聽成功時的回調

/**
 * 規範化端口
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 *錯誤事件監聽
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  //錯誤處理
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);  //結束程序
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * 當用戶訪問服務器成功時的回調
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

routers/index.js路由，有點相似控制器或Servlet：

var express = require('express');
var router = express.Router();

/* 得到首頁 */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

views/index.ejs首頁視圖：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

在www上右鍵選擇「運行方式」->「Node Application」運行結果：

5.5.一、request對象

Request 對象 - request 對象表示 HTTP 請求，包含了請求查詢字符串，參數，內容，HTTP 頭部等屬性。常見屬性有：

req.app：當callback爲外部文件時，用req.app訪問express的實例
req.baseUrl：獲取路由當前安裝的URL路徑
req.body / req.cookies：得到「請求主體」/ Cookies
req.fresh / req.stale：判斷請求是否還「新鮮」
req.hostname / req.ip：獲取主機名和IP地址
req.originalUrl：獲取原始請求URL
req.params：獲取路由的parameters
req.path：獲取請求路徑
req.protocol：獲取協議類型
req.query：獲取URL的查詢參數串
req.route：獲取當前匹配的路由
req.subdomains：獲取子域名
req.accepts()：檢查可接受的請求的文檔類型
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages：返回指定字符集的第一個可接受字符編碼
req.get()：獲取指定的HTTP請求頭
req.is()：判斷請求頭Content-Type的MIME類型

5.5.二、response對象

Response 對象 - response 對象表示 HTTP 響應，即在接收到請求時向客戶端發送的 HTTP 響應數據。常見屬性有：

res.app：同req.app同樣
res.append()：追加指定HTTP頭
res.set()在res.append()後將重置以前設置的頭
res.cookie(name，value [，option])：設置Cookie
opition: domain / expires / httpOnly / maxAge / path / secure / signed
res.clearCookie()：清除Cookie
res.download()：傳送指定路徑的文件
res.get()：返回指定的HTTP頭
res.json()：傳送JSON響應
res.jsonp()：傳送JSONP響應
res.location()：只設置響應的Location HTTP頭，不設置狀態碼或者close response
res.redirect()：設置響應的Location HTTP頭，而且設置狀態碼302
res.render(view,[locals],callback)：渲染一個view，同時向callback傳遞渲染後的字符串，若是在渲染過程當中有錯誤發生next(err)將會被自動調用。callback將會被傳入一個可能發生的錯誤以及渲染後的頁面，這樣就不會自動輸出了。
res.send()：傳送HTTP響應
res.sendFile(path [，options] [，fn])：傳送指定路徑的文件 -會自動根據文件extension設定Content-Type
res.set()：設置HTTP頭，傳入object能夠一次設置多個頭
res.status()：設置HTTP狀態碼
res.type()：設置Content-Type的MIME類型

 5.5.三、express獲取參數有三種方法

req.query 適合 http://localhost:3000/form?num=8888
req.body 適合http://localhost:3000/form，Post請求中的參數
req.params 適合獲取form後的num：http://localhost:3000/form/num

（一）、GET

var num = req.query.num;
res.send("你獲取的get數據爲:" + num); 

（二）、POST

解析post數據須要用到body-parser

npm install body-parser --save

app.js

var express = require('express');
var app = express();
//引入body-parser
var bodyParser = require('body-parser');
app.use(express.static('public'));

//須要use的
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({
extended: true
})); // for parsing application/x-www-form-urlencoded

//獲取數據
app.post('/form', function(req, res) {
var num = req.body.num;
res.send("你獲取的post數據爲:" + num);
});

//設置監聽端口
app.listen(3000);

public/test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="box"></div>
<form action="/form" method="post">
<input type="text" name="num" value="tinyphp">
<input type="submit" value="提交">
</form>

</body>
</html>

（三）、獲取路徑參數

app.js

 

var express = require('express');
var app = express();

//獲取數據
app.get('/form/:num', function(req, res) {
var num = req.params.num;
res.send("你獲取到form/後的參數:" + num);
});

//設置監聽端口
app.listen(3000);

5.六、ejs基礎

ejs是一個Express Web應用的模板引擎，在NodeJS開發中能夠選擇的模板引擎多是全部Web應用開發中範圍最廣的，如jade、ejs、htmljs、swig、hogan.js，但ejs是最容易上手的，與jsp,asp,php的原始模板引擎風格很像。

官網：http://www.embeddedjs.com/

添加一個product.js路由：

var express = require('express');
var router = express.Router();

/* 產品 */
router.get('/', function(req, res, next) {
    
  var products=[];
  products.push({name:"ZTE U880",price:899.8});
  products.push({name:"HuWei 榮耀8",price:1899.8});
  products.push({name:"iPhone 7 Plus 128G",price:5899.8});
  
  //將product視圖與指定的對象渲染後輸出到客戶端
  res.render('product', { title: '天狗商城', pdts:products});
});

module.exports = router;

在views目錄下添加product.ejs視圖，這裏是一個簡單的MVC：

<!DOCTYPE html>
<html>

    <head>
        <title>
            <%= title %>
        </title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>

    <body>
        <h1><%= title %> - 產品列表</h1>
        <table border="1" width="80%">
            <tr>
                <th>序號</th>
                <th>名稱</th>
                <th>價格</th>
            </tr>
            <%pdts.forEach(function(pdt,index){%>
            <tr>
                <td>
                    <%=index+1%>
                </td>
                <td>
                    <%=pdt.name%>
                </td>
                <td>
                    <%=pdt.price%>
                </td>
            </tr>
            <%});%>
        </table>

        <ul>
            <% for(var i=0; i<pdts.length; i++) {%>
            <li>
                <%=pdts[i].name%>
            </li>
            <% } %>
    </body>

</html>

修改app，註冊定義好的模塊product：

var index = require('./routes/index');
var users = require('./routes/users');
var pdts = require('./routes/product');

var app = express();

//指定視圖引擎爲ejs
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);
app.use('/pdt', pdts);

運行結果：

5.七、lodash

這是一個具備一致接口、模塊化、高性能等特性的 JavaScript 工具庫。能夠很是方便的操做json。

官網：http://lodashjs.com/

安裝：

npm i -g npm

npm i --save lodash

安裝時先用cd切換到當前項目下。

若是瀏覽器使用能夠直接引入：

<script src="lodash.js"></script>

添加lodash依賴：

依賴成功後會在package.json中添加引用：

後臺Node.js使用，能夠引入模塊：

//導入lodash模塊
var _= require('lodash');

var products=[];
products.push({name:"ZTE U880",price:899.8});
products.push({name:"HuWei 榮耀8",price:1899.8});
products.push({name:"iPhone 7 Plus 128G",price:5899.8});

//一、取出第一個元素
var obj1=_.first(products);
console.log(obj1.name);  //ZTE U880

//二、取出最後一個元素
var obj2=_.last(products);
console.log(obj2.name);  //iPhone 7 Plus 128G

//三、指定查找條件返回符合條件的索引
var obj3=_.findIndex(products,function(obj){
    return obj.price>=1000&&obj.name.indexOf("7")>0;
});
console.log(obj3);  //2

//四、指定查找條件返回查找到的對象
var obj4=_.find(products,function(obj){
    return obj.price>=1000&&obj.name.indexOf("7")>0;
});
console.log(obj4);  //{ name: 'iPhone 7 Plus 128G', price: 5899.8 }

//五、排序
var obj5=_.orderBy(products,["price","name"],["desc","asc"]);
console.log(obj5); 

//[ { name: 'iPhone 7 Plus 128G', price: 5899.8 },
//{ name: 'HuWei 榮耀8', price: 1899.8 },
//{ name: 'ZTE U880', price: 899.8 } ]

//六、查找價格爲1899.8的產品的key
var obj6=_.findKey(products,{price:1899.8});
console.log(obj6);   //1

API的使用很是簡單，但須要注意版本，能夠現查現用，API地址：https://lodash.com/docs/4.17.2 

5.八、參數

5.8.一、URL中的參數佔位

Checks route params (req.params), ex: /user/:id

127.0.0.1:3000/index，這種狀況下，咱們爲了獲得index，咱們能夠經過使用req.params獲得，經過這種方法咱們就能夠很好的處理Node中的路由處理問題，同時利用這點能夠很是方便的實現MVC模式；

//得到產品根據Id
router.get('/:id/:category',function(request,res,next){
    res.send(request.params.id+","+request.params.category);
});

運行結果：

5.8.二、URL中的QueryString

Checks query string params (req.query), ex: ?id=12

127.0.0.1:3000/index?id=12，這種狀況下，這種方式是獲取客戶端get方式傳遞過來的值，經過使用req.query.id就能夠得到，相似於PHP的get方法；

router.get('/:id',function(request,res,next){
    res.send("name:"+request.query.name);
});

運行結果：

5.8.三、HTTP正文中的參數

 在post請求中得到表單中的數據。

Checks urlencoded body params (req.body), ex: id=

127.0.0.1：300/index，而後post了一個id=2的值，這種方式是獲取客戶端post過來的數據，能夠經過req.body.id獲取，相似於PHP的post方法；

頁面：

<!DOCTYPE html>
<html>

    <head>
        <title>
            <%= title %>
        </title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>

    <body>
        <h1><%= title %> - 產品列表</h1>
        <table border="1" width="80%">
            <tr>
                <th>序號</th>
                <th>名稱</th>
                <th>價格</th>
            </tr>
            <%pdts.forEach(function(pdt,index){%>
            <tr>
                <td>
                    <%=index+1%>
                </td>
                <td>
                    <%=pdt.name%>
                </td>
                <td>
                    <%=pdt.price%>
                </td>
            </tr>
            <%});%>
        </table>

        <ul>
            <% for(var i=0; i<pdts.length; i++) {%>
            <li>
                <%=pdts[i].name%>
            </li>
            <% } %>
        </ul>
<p>
            <%if(typeof msg!="undefined"){%>
                <%=msg%>
            <%}%>
</p>
        <form action="pdt/add" method="post">
            <p>
                名稱：<input name="name" />
            </p>
            <p>
                價格：<input name="price" />
            </p>
            <button>添加</button>
        </form>
        
        
        
        
    </body>

</html>

View Code

代碼：

router.post('/add',function(request,res,next){
    var entity={name:request.body.name,price:request.body.price};
    products.push(entity);
      //將product視圖與指定的對象渲染後輸出到客戶端
      res.render('product', { title: '天狗商城', pdts:products,msg:"添加成功"});
});

結果：

5.九、JSON

若是須要Node.js向外提供返回JSON的接口，Express也是很是方便的，可使用原來在瀏覽器中使用到的JSON對象，這是一個瀏覽器內置對象在服務能夠直接使用：

將對象序列化成字符：

            //對象
            var rose={"name":"Rose","weight":"65"};
            //序列化成字符串
            var str=JSON.stringify(rose);
            alert(str);

結果：

反序列化，將字符轉換成對象：

            //將字符串轉換成JavaScript對象
            var markStr='{"name":"mark","weight":"188"}';
            var mark=JSON.parse(markStr);
            alert(mark.name+"，"+mark.weight);

結果：

Express已經封裝了一個json方法，直接調用該方法就能夠序列化對象：

/* 產品 */
router.get('/rest', function(req, res, next) {
  res.json(products);
});

運行結果：

 

6、RESTful（表述性狀態轉移）

REST是英文Representational State Transfer的縮寫，中文稱之爲「表述性狀態轉移」
基於HTTP協議
是另外一種服務架構
傳遞是JSON、POX（Plain Old XML）而不是SOAP格式的數據
充分利用HTTP謂詞（Verb）
側重數據的傳輸，業務邏輯交給客戶端自行處理

REST是一種分佈式服務架構的風格約束，像Java、.Net（WCF、WebAPI）都有對該約束的實現，使URL變得更加有意義，更加簡潔明瞭，如：

http://www.zhangguo.com/products/1 get請求 表示得到全部產品的第1個

http://www.zhangguo.com/products/product post請求 表示添加一個產品

http://www.zhangguo.com/products/1/price get請求 表示得到第1個產品的價格

http://www.zhangguo.com/products/1 delete請求 刪除編號爲1的產品

REST設計須要遵循的原則
網絡上的全部事物都被抽象爲資源（resource）；
每一個資源對應一個惟一的資源標識符（resource identifier）；
經過通用的鏈接器接口（generic connector interface）對資源進行操做；
對資源的各類操做不會改變資源標識符；
全部的操做都是無狀態的（stateless）

謂詞
GET
表示查詢操做，至關於Retrieve、Select操做
POST
表示插入操做，至關於Create，Insert操做
PUT
表示修改操做，至關於Update操做
DELETE
表示刪除操做，至關於Delete操做

其它還有：

NodeJS+Express能夠很容易的實現REST

application/x-www-form-urlencoded

multipart/form-data

application/json

res.setHeader('Content-Type', 'application/json;charset=utf-8');  

示例代碼cars.js：

var express = require('express');
var router = express.Router();
var _= require('lodash');

var cars=[];
cars.push({id:201701,name:"BMW",price:190,speed:"210km/h",color:"白色"});
cars.push({id:201702,name:"BYD",price:25,speed:"160km/h",color:"紅色"});
cars.push({id:201703,name:"Benz",price:300,speed:"215km/h",color:"藍色"});
cars.push({id:201704,name:"Honda",price:190,speed:"170km/h",color:"黑色"});
cars.push({id:201705,name:"QQ",price:130,speed:"210km/h",color:"白色"});

/* Get */
/*得到全部汽車*/
/*url /cars/*/
router.get('/', function(req, res, next) {
    res.json(cars);
});

/*Get*/
/*得到汽車經過id*/
/*url：/cars/:id  */
router.get('/:id', function(req, res, next) {
     //從路徑中映射參數，轉換成數字
      var id=parseInt(req.params.id);
      var car=_.find(cars,{id:id});
      res.json(car);
});

/*Post*/
/*添加汽車*/
/*url：/cars/car  */
router.post('/car', function(req, res, next) {
      var car=req.body;  //從請求正文中得到json對象
      car.id=_.last(cars).id+1;  //將編號修改成最後一輛車的編號+1
      cars.push(car);  //將汽車對象添加到集合中
      res.json(car);  //將添加成功的車以json的形式返回
});

/*Put*/
/*修改汽車*/
/*url：/cars/car  */
router.put('/car', function(req, res, next) {
      var car=req.body;  //從請求正文中得到json對象
      console.log(req.body);
      var index=_.findIndex(cars,{id:parseInt(car.id)});  //根據id得到車在集合中的下標
      
      cars[index]=car;  //替換原對象
      //res.json(car);  //將修改後的車以json的形式返回
      res.send({status:"success", message:"更新成功!"});  
});

/*Delete*/
/*刪除汽車*/
/*url：/cars/:id  */
router.delete('/id/:id', function(req, res, next) {
      //得到url中的編號參數
      var id=parseInt(req.params.id);
      var index=_.findIndex(cars,{id:id});  //根據id得到車在集合中的下標
      cars.splice(index,1);   //在cars數組中刪除下標從index開始的1條數據
      res.send({status:"success", message:"刪除成功!"});  
});

module.exports = router;

示例代碼app.js：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');
var pdts = require('./routes/product');
var task = require('./routes/task');
var cars = require('./routes/cars');

var app = express();

//指定視圖引擎爲ejs
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);
app.use('/pdt', pdts);
app.use("/task",task);
app.use("/cars",cars);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

/* Get */
/*得到全部汽車*/
/*url /cars/*/

/*Get*/
/*得到汽車經過id*/
/*url：/cars/:id */

/*Post*/
/*添加汽車*/
/*url：/cars/car */

 

參數中的json格式必定要使用標準格式，注意引號，注意Content-Type，默認的Content-Type類型是：application/x-www-form-urlencoded

/*Put*/
/*修改汽車*/
/*url：/cars/car */

/*Delete*/
/*刪除汽車*/
/*url：/cars/:id */

node.js跨域

修改app.js文件攔截全部的請求，修改頭部

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "content-type");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    if(req.method == "OPTIONS") {
        res.send("200");
    } else {
        next();
    }
});

結果：

7、示例下載

git：https://coding.net/u/zhangguo5/p/NodeJS001/git

git：https://coding.net/u/zhangguo5/p/NodeJSExpress/git

8、做業

8.一、請安裝好node.js環境，測試版本，在控制檯寫一個方法用於計算1-100間的全部能被3整除的數，並調用。

8.二、請將8.1中的方法單獨存放到一個math.js文件中，同時在math.html頁面與node的控制檯中調用

8.三、在開發工具IDE中集成node.js開發環境，建立一個node.js項目，向控制檯輸出「Hello World!」

8.四、使用記事本在c:\根目錄下寫一個server.js文件實現一個最簡單的web服務器，請求時響應當前系統時間。

8.五、將8.4的功能在IDE中完成，請注意端口號不能被佔用，若是提示佔用錯誤能夠修改端口號爲1025-65535之間

8.六、完成一個圖書管理的功能，圖書包含（編號，名稱，做者，圖片，價格），實現：

a)、非AJAX的CRUD，使用Node.js+Express+ejs的動態技術。

b)、AJAX的CRUD，使用Node.js+Express+jQuery+HTML技術實現。固然也可使用Vue2+axios。

c)、使用RestFul風格的服務完成第個做業，get,post,delete,put請。

9、視頻

https://www.bilibili.com/video/av17977069/