Node.js歷險記之express框架入門篇

阿新 • • 發佈：2019-02-05

開啟微信掃一掃，關注微信公眾號【資料與演算法聯盟】

轉載請註明出處：http://blog.csdn.net/gamer_gyt
博主微博：http://weibo.com/234654758
Github：https://github.com/thinkgamer

寫在前面的話

Express 是一種保持最低程度規模的靈活 Node.js Web 應用程式框架，為 Web 和移動應用程式提供一組強大的功能。

環境說明

Ubuntu 16.04

安裝express

假設已經安裝了nodejs

mkdir myapp
cd myapp

實用npm init 命令為應用程式建立package.json檔案關於package.json的更多資訊參考：

https://docs.npmjs.com/files/package.json
npm init 輸入相應的資訊

安裝express框架，如果要將express儲存到依賴庫中後面跟–save，否則不跟

npm install express –save

這裡解釋下這個 –save，就是把安裝的express 和對應的版本號寫進packages.json檔案中，如果事先在package.json中寫入了依賴，那麼直接執行npm install即可
在此基礎上我們來建立我們的HelloWorld
建立app.js，新增以下內容

var express = require 
('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello World!');
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

執行node app.js 報錯

Cannot find module ‘express’

分析：在安裝express時已經指定了 –save，我也嘗試了 -g ，但是依舊還是這個問題，後來查資料發現說是 -g安裝的位置（使用者目錄）與node安裝路徑的位置不在同一個目錄導致的，需要配置以下NODE_PATH，ok，我們來配置下環境變數

vim ~/.bashrc

加入（/home/master/.nvm/versions/node/v6.9.5/bin 是我node的位置）

#nodejs
export NODE_PATH=/home/master/.nvm/versions/node/v6.9.5/bin
export PATH=$PATH:$NODE_PATH

此時再執行node app.js ，瀏覽器訪問 localhost:3000
express

express應用程式生成器

除了手動建立程式的各個檔案，我們也可以使用express應用程式生成器生成整個框架

1 . 安裝

npm install express-generator -g
可以使用-h來檢視幫助

[email protected]:~/Desktop$ express -h
  Usage: express [options] [dir]
  Options:
    -h, --help           output usage information
        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory

2 . 建立myapp的應用程式

express –view=pug myapp

[email protected]:~/Desktop$ express --view=pug myapp
   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www
   install dependencies:
     $ cd myapp && npm install
   run the app:
     $ DEBUG=myapp:* npm start

3 . 安裝依賴

cd myapp
npm install

4 . 啟動服務

npm start

Express 的基本路由

路由由於確定應用程式如何響應對特定端點的請求機會，包含一個URL（或路徑）和一個特定的請求方法（GET，POST等）。每個路由都有一個或多個處理程式函式，這些函式在路由匹配時執行。
路由定義採用以下結構：

app.METHOD(PATH, HANDLER)

其中：

app 是espress的例項
METHOD是HTTP請求方法
PATH是伺服器上的路徑
HANDLER是在路由匹配時執行的函式

路由方法派生自HTTP方法之一，以下程式碼是為訪問應用程式根目錄的GET和POST方法定義的路由示例

// GET method route
app.get('/', function (req, res) {
  res.send('GET request to the homepage');
});
// POST method route
app.post('/', function (req, res) {
  res.send('POST request to the homepage');
});

Express 支援對英語HTTP方法的以下路由方法：get，post，put，head，delete，options，trace，copy，lock，mkcol，move，purge，propfind，proppatch，unlock，report，mkactivity，ceckout，merge，msearch，notify，subscribe，unsubscribe，patch，connect。

有一種特殊的路由方法：app.all() ，他並非派生自HTTP方法，該方法用於在所有請求方法的路徑中裝入中介軟體函式。在以下示例中，無論使用GET。POST，PUT，DELETE還是http模組中支援的其他任何HTTP請求方法，都將為針對 “/secret” 的請求執行處理程式。

app.all('/',function(req,res,next){
  console.log('Accessing the secret section...');
  next();  //pass control to the next handle
});

路由路徑
路由路徑與請求方法相結合，用於定義可以在其中提出請求的端點。路由路徑可以是字串，字串模式或正則表示式。以下是基於字串路由的一些示例：

// 此路由路徑將請求與根路由 / 匹配。
app.get('/',function(req,res){
  res.send('root');
});
//此路由路徑將請求與 /about 匹配。
app.get('about',function(req,res){
  res.send('about');
});
//此路由路徑將請求與 /random.text 匹配。
app.get('/random.text',function(req,res){
  res.send('random.text');
});
//以下是基於字串模式的路由路徑的一些示例。
//此路由路徑將匹配 acd 和 abcd。
app.get('/ab?cd',function(req,res){
  res.send('ab?cd')
});
//此路由路徑將匹配 abcd、abbcd、abbbcd 等。
app.get('/ab+cd',function(req,res){
  res.send('ab+cd');
});
//此路由路徑將匹配 abcd、abxcd、abRABDOMcd、ab123cd 等。
app.get('ab*cd',function(req,res){
  res.send('ab*cd');
});
//此路由路徑將匹配 /abe 和 /abcde。
app.get('/ab(cd)?e',function(req,res){
  res.send('/a/');
});
//基於正則表示式的路由路徑的示例：
//此路由路徑將匹配名稱中具有“a”的所有路由。
app.get(/a/,function(req,res){
  res.send('/a/');
});
// 此路由路徑將匹配 butterfly 和 dragonfly，但是不匹配 butterflyman、dragonfly man 等。
app.get(/.*fly$/,function(req,res){
  res.send('/.*fly$/');
});

路由處理程式

你可以提供多個回撥函式，以類似與中介軟體的行為方式來處理請求，唯一例外是這些回撥函式可能呼叫 next(‘route’) 來繞過省區的路由回撥，你可以使用此機制對路由施加先決條件，在滅有路由繼續執行當前路由的情況下，可將控制權傳遞給後續路由。路由處理程式的形式可以是一個函式，一組函式，或者兩者的結合，如下示例所示：

//單個回撥函式可以處理一個路由。例如：
app.get('/example/a',function(req,res){
  res.send('Hello from A');
});
//多個回撥函式可以處理一個路由（確保您指定 next 物件）。例如：
app.get('/example/b', function(req,res,next){
  console.log('the respnse will be sent by the next function');
  next();
},function(req,res){
  res.send('Hello from B');
});
//一組回撥函式可以處理一個路由。例如：
var cb0 = function(req,res,next){
  console.log('CB0');
  next();
};
var cb1 = function(req,res,next){
  console.log('CB1');
  next();
};
var cb2 = function(res,res){
  res.send('Hello from C');
};
app.get('/example/c',[cb0,cb1,cb2]);
//獨立函式與一組函式的組合可以處理一個路由。例如：
var ab1 = function(req,res,next){
  console.log('AB1');
  next();
};
var ab2 = function(req,res,next){
  console.log('AB2');
  next();
}
app.get('/example/d',[ab1,ab2],function(req,res,next){
  console.log('the response will be sent by the next function ...');
  next();
},function(req,res){
  res.send('Hello from D');
});

響應方法

下表中響應獨享（res）的方法可以向客戶機發送響應，並終止請求/響應迴圈。如果沒有從路由處理程式呼叫其中任何方法，客戶機請求將保持掛起狀態。

方法	描述
res.download()	提示將要下載檔案。
res.end()	結束響應程序。
res.json()	傳送 JSON 響應。
res.jsonp()	在 JSONP 的支援下發送 JSON 響應。
res.redirect()	重定向請求。
res.render()	呈現檢視模板。
res.send()	傳送各種型別的響應。
res.sendFile	以八位元流形式傳送檔案。
res.sendStatus()	設定響應狀態碼並以響應主體形式傳送其字串表示

app.route()

你可以使用app.route() 為路由路徑建立可連結的路由處理程式，因為在單一位置指定路徑，所以可以減少冗餘和輸入錯誤，有關路由的更多資訊，請參閱：http://expressjs.com/zh-cn/4x/api.html#router

//以下是使用 app.route() 定義的鏈式路由處理程式的示例。
app.route('/book')
  .get(function(req,res){
    res.send('Get a random book');
  })
  .post(function(req,res){
    res.send('add a book');
  })
  .put(function(req,res){
    res.send('update the book');
  });

express.Router

使用express.Router類來建立可安裝的模組化路由處理程式，Router例項是完整的中介軟體和路由系統，因此，常常將其稱為” 微型應用程式”。以下示例將路由器建立為模組，在其中裝入中介軟體，定義一些路由，然後安裝在主應用程式的路徑中。
在應用程式中建立birds.js檔案，寫入以下內容：

var express = require('express')
var router = express.Router();
// middleware that is specific to this router
router.use(function(req,res,next){
  console.log('Time:' ,Date.now());
  next();
});
// define the home page route
router.get('/',function(req,res){
  res.send('Birds home page');
});
// define the about route
router.get('/about',function(req,res){
  res.send('About birds');
})
module.exports = router

在app.js中引用

var birds = require('./birds');
var express = require('express');
var app = express();
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});
app.use('/birds',birds);

此應用程式現在可針對 /birds 和 /birds/about 的請求，呼叫特定於此路由的 timeLog 中間價函式。

在Express中提供靜態檔案

為了提供諸如影象、CSS 檔案和 JavaScript 檔案之類的靜態檔案，請使用 Express 中的 express.static 內建中介軟體函式。

將包含靜態資源的目錄的名稱傳遞給 express.static 中介軟體函式，以便開始直接提供這些檔案。例如，使用以下程式碼在名為 public 的目錄中提供影象、CSS 檔案和 JavaScript 檔案：

app.use(express.static(‘public’));

現在便可以引用public目錄下的檔案

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Express 相對於靜態目錄查詢檔案，因此靜態目錄的名稱不是此 URL 的一部分。
要使用多個靜態資源目錄，請多次呼叫 express.static 中介軟體函式：

app.use(express.static(‘public’));
app.use(express.static(‘files’));

Express 以您使用 express.static 中介軟體函式設定靜態目錄的順序來查詢檔案。

要為 express.static 函式提供的檔案建立虛擬路徑字首（路徑並不實際存在於檔案系統中），請為靜態目錄指定安裝路徑，如下所示：

app.use(‘/static’, express.static(‘public’));

現在，可以裝入具有 /static 路徑字首的 public 目錄中的檔案。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

然而，向 express.static 函式提供的路徑相對於您在其中啟動 node 程序的目錄。如果從另一個目錄執行 Express 應用程式，那麼對於提供資源的目錄使用絕對路徑會更安全：

app.use(‘/static’, express.static(__dirname + ‘/public’));

Express框架的入門篇基本就是上邊這些內容了，截止到這裡我們並沒有演示一個完整的例子，那麼下面我們來看一個表單提交的例子，在以上程式碼的基礎上。

使用GET方式提交表單

1：建立靜態資料夾

在專案myapp 目錄下建立public （存放img，js，css檔案）和templates（存放html檔案）

2：app.js 如下

var express = require('express');
// var birds = require('./birds');
var app = express();
app.use(express.static('public'));  //static file
app.use(express.static('templates'));  //static file
//
// app.listen(3000, function () {
//   console.log('Example app listening on port 3000!');
// });
app.get('/index.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})
app.get('/form_get', function (req, res) {
   // 輸出 JSON 格式
   response = {
       username:req.query.username,
       email:req.query.email,
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
var server = app.listen(3000, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("應用例項，訪問地址為 http://%s:%s", host, port)
})

3：index.html 如下(位於根目錄的templates資料夾下)

<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="http://127.0.0.1:3000/css/index.css">
</head>
<div class="login-main">
<h3 align="center">------------Login-------------</h3>
    <form role="form" method="get" action="http://127.0.0.1:3000/form_get">
            <input class="incon" name="username" type="text" placeholder="username">
            <input class="incon" name="email" type="text" placeholder="email">
            <input class="btnincon"  type="submit" value="登入">
            <hr style="height:1px;border:none;border-top:1px solid darkgray;" />
    </form>
</table>
</div>
</body>
</html>

4：index.css

/*登入註冊樣式 */
hr{margin-bottom: 5px;}
.loginbody{ background-repeat: no-repeat; background-size:cover;}
.login-main{width:400px; height: 300px;margin: auto; overflow: hidden; margin-top:8%; border-radius: 4px; border: 1px solid darkgray;
    box-shadow: -10px 10px 20px gray;}
.login-main h3{ text-indent: 0.5em;}
.incon{ width: 360px; font-size: 16px; margin-left:20px; margin-top:20px; height: 38px; border-radius: 2px; text-indent: 1em;}
.btnincon{ width: 200px; font-size: 16px; margin-left:100px; margin-top:20px; height: 38px; border-radius: 2px; text-indent: 1em;}

5：檢視效果

express

輸入相應內容
express

使用POST方式提交表單

1：修改html檔案

把html檔案中的method改為 post，action中的form_get 改成form_post

2：在app.js中新增

var bodyParser = require('body-parser');
// 建立 application/x-www-form-urlencoded 編碼解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.post('/form_post', urlencodedParser, function (req, res) {
   // 輸出 JSON 格式
   response = {
       username:req.bod.username,
       email:req.body.email,
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

3：執行

npm install body-parser –save

重新測試會看到同樣的效果

檔案上傳功能

1：index.html

<html>
<head>
<title>檔案上傳表單</title>
</head>
<body>
<h3>檔案上傳：</h3>
選擇一個檔案上傳: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<input type="submit" value="上傳檔案" />
</form>
</body>
</html>

2：app.js

var express = require('express');
var app = express();
var fs = require("fs");
var bodyParser = require('body-parser');
var multer  = require('multer');
app.use(express.static('public'));
app.use(express.static('templates'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}).array('image'));
app.get('/index.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})
app.post('/file_upload', function (req, res) {
   console.log(req.files[0]);  // 上傳的檔案資訊
   var des_file = __dirname + "/" + req.files[0].originalname;
   fs.readFile( req.files[0].path, function (err, data) {
        fs.writeFile(des_file, data, function (err) {
         if( err ){
              console.log( err );
         }else{
               response = {
                   message:'File uploaded successfully',
                   filename:req.files[0].originalname
              };
          }
          console.log( response );
          res.end( JSON.stringify( response ) );
       });
   });
})
var server = app.listen(3000, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("應用例項，訪問地址為 http://%s:%s", host, port)
})

執行

npm install fs –save
npm install multer –save

效果圖