Node.js和Express簡單入門

阿新 • • 發佈：2019-01-13

僅僅入門如何用Node.js和Express搭建一個web伺服器，沒有說明太多概念性的東西。

一、 Nodejs簡介

==Node是JavaScript語言的伺服器執行環境。==

所謂“執行環境”有兩層意思：首先，JavaScript語言通過Node在伺服器執行，在這個意義上，Node有點像JavaScript虛擬機器；其次，Node提供大量工具庫，使得JavaScript語言與作業系統互動（比如讀寫檔案、新建子程序），在這個意義上，Node又是JavaScript的工具庫。

Node內部採用Google公司的V8引擎，作為JavaScript語言直譯器；通過自行開發的libuv庫，呼叫作業系統資源。

二、Node.js的下載和安裝

2.1 Node.js下載

官網會根據你當前的作業系統，提供給你最合適的版本去下載。

2.2 安裝

下載成功之後是一個msi檔案，雙擊安裝即可。安裝成功後，相應的環境變數都會自動配置，不需要我們再去手動配置。

一路next就可以安裝成功。

2.3 測試Node.js是否安裝成功

安裝成功之後，可以在window控制檯檢視是否安裝成功。

輸入下面的命令檢視node的版本。
node -v
直接輸入node然後回車，就可以讓node去執行我們的js程式碼了。
node

2.4 使用Node.js執行JavaScript程式碼

新建一個nodeproject目錄，新建一個js檔案。01_hello.js

var num1 = 10;
var num2 = 20;
console.log(num1 + num2);

在windows控制檯中，切換目錄到js檔案所在目錄。然後輸入

node 01_hello.js

三、Node.js中的一些基本概念澄清

3.1 Node.js不是JS應用、而是JS執行平臺

看到Node.js這個名字，初學者可能會誤以為這是一個Javascript應用，事實上，Node.js採用C++語言編寫而成，是一個Javascript的執行環境。

既然不是Javascript應用，為何叫.js呢？因為Node.js是一個Javascript的執行環境。提到Javascript，大家首先想到的是日常使用的瀏覽器，現代瀏覽器包含了各種元件，包括渲染引擎、JavaScript引擎等，其中Javascript引擎負責解釋執行網頁中的Javascript程式碼。作為Web前端最重要的語言之一，Javascript一直是前端工程師的專利。不過，Node.js是一個後端的Javascript執行環境（支援的系統包括Linux、Windows），這意味著你可以編寫系統級或者伺服器端的Javascript程式碼，交給Node.js來解釋執行，

3.2 Node.js與JavaScript的關係

JavaScript包括3個部分：ECMAScript-262、BOM、DOM。BOM與瀏覽器相關，DOM和HTML頁面相關。Node.js中只是包括了ECMAScript-262。所以我們以前的一些關於BOM的操作和DOM的操作都是基於瀏覽器端執行的，在Node.js中是無法使用的。

3.3 Node.js中幾個全域性變數

global：表示Node所在的全域性環境，類似於瀏覽器的window物件。需要注意的是，如果在瀏覽器中宣告一個全域性變數，實際上是聲明瞭一個全域性物件的屬性，比如var x = 1等同於設定window.x = 1，但是Node不是這樣，至少在模組中不是這樣（REPL環境的行為與瀏覽器一致）。在模組檔案中，宣告var x = 1，該變數不是global物件的屬性，global.x等於undefined。這是因為模組的全域性變數都是該模組私有的，其他模組無法取到。
process：該物件表示Node所處的當前程序，允許開發者與該程序互動。
console：指向Node內建的console模組，提供命令列環境中的標準輸入、標準輸出功能。

3.4 Node.js中的幾個全域性函式

setTimeout()：用於在指定毫秒之後，執行回撥函式。實際的呼叫間隔，還取決於系統因素。間隔的毫秒數在1毫秒到2,147,483,647毫秒（約24.8天）之間。如果超過這個範圍，會被自動改為1毫秒。該方法返回一個整數，代表這個新建定時器的編號。
clearTimeout()：用於終止一個setTimeout方法新建的定時器。
setInterval()：用於每隔一定毫秒呼叫回撥函式。由於系統因素，可能無法保證每次呼叫之間正好間隔指定的毫秒數，但只會多於這個間隔，而不會少於它。指定的毫秒數必須是1到2,147,483,647（大約24.8天）之間的整數，如果超過這個範圍，會被自動改為1毫秒。該方法返回一個整數，代表這個新建定時器的編號。
clearInterval()：終止一個用setInterval方法新建的定時器。
require()：用於載入模組。
Buffer()：用於操作二進位制資料。

3.5 Node.js的核心模組

如果只是在伺服器執行JavaScript程式碼，用處並不大，因為伺服器指令碼語言已經有很多種了。Node.js的用處在於，它**本身**還提供了一系列功能模組，與作業系統互動。這些核心的功能模組，不用安裝就可以使用，下面是它們的清單。

http：提供HTTP伺服器功能。
url：解析URL。
fs：與檔案系統互動。
querystring：解析URL的查詢字串。
child_process：新建子程序。
util：提供一系列實用小工具。
path：處理檔案路徑。
crypto：提供加密和解密功能，基本上是對OpenSSL的包裝。

三、搭建web應用

使用Node.js搭建web伺服器，一般使用一些框架來幫助完成。

express 是一個開源的node.js專案框架，初學者使用express可以快速的搭建一個Web專案，express中已經集成了Web的http伺服器建立、請求和檔案管理以及Session的處理等功能，所以express是非常適合初學者的入門學習。

3.1 安裝Express框架

使用node.js自帶的包管理器npm安裝。

建立一個專案目錄，Node_Hello。進入該目錄，建立一個package.json檔案，檔案內容如下：

{
  "name": "Node_Hello",
  "description": "nodejs hello world app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "4.x"
  }
}

上面程式碼定義了專案的名稱、描述、版本等，並且指定需要4.0版本以上的Express。

==從控制檯首先進入剛才的專案目錄==，然後輸入如下命令，則會開始下載Express。

npm install

下載完成

3.2 建立啟動檔案

在上面的專案目錄下，新建一個啟動檔案，名字暫叫 ==index.js== 。書寫如下程式碼：

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('<h1>你好，這是我們的第一個nodejs專案</h1>');
});
app.listen(8080);

3.3 執行index.js檔案

node index.js

3.4 使用瀏覽器訪問

在瀏覽器輸入下面的地址就可以訪問我們剛剛搭建的web網站了。

http://127.0.0.1:8080

四、使用Webstorm搭建Node.js web應用

使用webstorm搭建Node.js應用更加方便。

4.1 下載WebStorm，並安裝

下載完成後，直接安裝即可。

4.2 建立Node + Express應用

4.3 Project目錄結構

app.js：啟動檔案，或者說入口檔案

package.json：儲存著工程的資訊及模組依賴，當在 dependencies 中新增依賴的模組時，執行 npm install ，npm 會檢查當前目錄下的 package.json，並自動安裝所有指定的模組

node_modules：存放 package.json 中安裝的模組，當你在 package.json 新增依賴的模組並安裝後，存放在這個資料夾下

public：存放 image、css、js 等檔案

routes：存放路由檔案

views：存放檢視檔案或者說模版檔案

bin：存放可執行檔案(www)

4.4 各個主要檔案的說明

4.4.1 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');

// 生產一個express的例項
var app = express();

// view engine setup
/*
設定 views 資料夾為存放檢視檔案的目錄,
即存放模板檔案的地方,__dirname 為全域性變數,
儲存當前正在執行的指令碼所在的目錄。
 */
app.set('views', path.join(__dirname, 'views'));
//設定模板引擎為ejs
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'));
//載入解析json的中介軟體
app.use(bodyParser.json());
//載入解析urlencoded請求體的中介軟體。  post請求
app.use(bodyParser.urlencoded({extended: false}));
//載入解析cookie的中介軟體
app.use(cookieParser());
//設定public資料夾為放置靜態檔案的目錄
app.use(express.static(path.join(__dirname, 'public')));

// 路由控制器。
app.use('/', index);  // http://localhost:3000
app.use('/users', users);   //http://localhost:3000/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');
});

//把app匯出。  別的地方就可以通過 require("app") 獲取到這個物件
module.exports = app;

4.4.2 bin/www

#!/usr/bin/env node //表明是node可執行檔案

/**
 * Module dependencies.
 */
//引入我們在app.js中匯出的app模組
var app = require('../app');
//引入debuger模組，列印除錯日誌
var debug = require('debug')('hello:server');
//引入http模組
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);  //設定埠號

/**
 * Create HTTP server.
 */
//建立Http伺服器
var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
//監聽指定的埠
server.listen(port);
//監聽error事件。 onError是發生錯誤的時候的回撥函式
server.on('error', onError);
//監聽listening事件
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

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

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

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

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

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

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

  // handle specific listen errors with friendly messages
  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;
  }
}
/**
 * Event listener for HTTP server "listening" event.
 */

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

4.4.3 routes/index.js

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: '育知同創' });
});

module.exports = router;
/*
 生成一個路由例項用來捕獲訪問主頁的GET請求，
 匯出這個路由並在app.js中通過app.use('/', routes);
 載入。這樣，當訪問主頁時，就會呼叫res.render('index', { title: '育知同創' });
 渲染views/index.ejs模版並顯示到瀏覽器中。
 */

4.4.4 對路由寫法的優化

在前面的==app.js中==，每個模板都有新增一次路由比較麻煩，其實應該把新增路由的事情專門交給index.js來做。也就是可以把多個路由放在一個路由檔案中。

//載入路由檔案
var index = require('./routes/index');  //去掉
var users = require('./routes/users');  //去掉
// 路由控制器。
app.use('/', index);  // http://localhost:3000  //去掉
app.use('/users', users);   //http://localhost:3000/users   //去掉

可以改成：

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

==index.js==檔案優化成： 這樣管理起來就方便很多

module.exports = function (app) {
  //一個get請求的路由  http://localhost:3000
  app.get("/", function (req, res) {
      res.render("index", {title:"育知同創abc"})
  });
  //又一個請求路由：http://localhost:3000/abc
  app.get("/abc", function (req, res) {
      res.render("index", {title:"育知同創" + req.path})
  });
}

4.4.5 ejs模板

模板引擎（Template Engine）是一個將頁面模板和要顯示的資料結合起來生成 HTML 頁面的工具。如果說上面講到的 express 中的路由控制方法相當於 MVC 中的控制器的話，那模板引擎就相當於 MVC 中的檢視。

模板引擎的功能是將頁面模板和要顯示的資料結合起來生成 HTML 頁面。它既可以運行在伺服器端又可以執行在客戶端，大多數時候它都在伺服器端直接被解析為 HTML，解析完成後再傳輸給客戶端，因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時候模板引擎也可以執行在客戶端，即瀏覽器中，典型的代表就是 XSLT，它以 XML 為輸入，在客戶端生成 HTML 頁面。但是由於瀏覽器相容性問題，XSLT 並不是很流行。目前的主流還是由伺服器執行模板引擎。

在 MVC 架構中，模板引擎包含在伺服器端。控制器得到使用者請求後，從模型獲取資料，呼叫模板引擎。模板引擎以資料和頁面模板為輸入，生成 HTML 頁面，然後返回給控制器，由控制器交回客戶端。

==ejs 是模板引擎的一種，它使用起來十分簡單，而且與 express 整合良好。==

我們通過以下兩行程式碼設定了模板檔案的儲存位置和使用的模板引擎：(app.js檔案中進行的設定)

app.set('views', __dirname + '/views');
app.set('view engine', '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>

說明：

ejs 的標籤系統非常簡單，它只有以下三種標籤：

<% code %>：JavaScript 程式碼。
<%= code %>：顯示替換過 HTML 特殊字元的內容。(也就是說如果code中有標籤，則會原樣輸出，不會讓瀏覽器解析)
<%- code %>：顯示原始 HTML 內容。(如果有a標籤，在瀏覽器端這則會看到一個超連結)

路由程式碼：

router.get('/', function(req, res, next) {
  res.render('index', { title: "<a href='http://www.baidu.com'>百度 </a>"});
});

// 則會用title的值去替換ejs中的相應的程式碼。

則生成的程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>&lt;a href=&#39;http://www.baidu.com&#39;&gt;百度 &lt;/a&gt;</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>&lt;a href=&#39;http://www.baidu.com&#39;&gt;百度 &lt;/a&gt;</h1>
    <p>Welcome to <a href='http://www.baidu.com'>百度 </a></p>
  </body>
</html>