Express 介紹

Express 框架

根據官方的介紹，Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架，能夠輕鬆的建立各類 web 或者移動端應用

今天就來簡單的瞭解一下 Express 框架

安裝

首先安裝 Express ,新建一個工做文件夾，並命名爲 myapp ，在此文件夾下進行環境的初始化：

npm init

官方推薦的入口文件名爲 app.js

entry point: (index.js) app.js

固然也可使用 npm 默認的 index.js 的文件名

接下來安裝 Express

npm install express --save

環境準備完成，如今嘗試建立一個 Express 應用

進入 myapp 目錄，新建一個 app.js 的文件，複製以下代碼：

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

app.get('/',(req,res)=>{
    res.send('這是一個 Express 應用')
})；

var server=app.listen(3000,()=>{
    console.log('服務已啓動 http://localhost:3000')
})

上面的代碼啓動一個服務並監遵從 3000 端口進入的全部鏈接請求。他將對全部 (/) URL 或 路由 返回 「這是一個 Express 應用」 字符串。對於其餘全部路徑所有返回 404

啓動這個應用

node app.js

Express 應用生成器

Express 應用生成器能夠快速建立一個應用的骨架

安裝：

npm install express-generator -gd

安裝完畢，建立一個名爲myapp的應用：

express myapp

這條命令會在當前目錄下建立 myapp 文件夾，並生成應用骨架

安裝依賴包

cd myapp
npm install

依賴安裝完成就能夠啓動此app了

Windows 平臺在 cmd 內輸入：

set DEBUG=myapp & npm start

Mac 或者 Linux 平臺輸入：

DEBUG=myapp npm start

而後在瀏覽器中打開 http://localhost:3000/ 網址就能夠看到這個應用了

當應用首次啓動之後，下次啓動只須要輸入 npm start 就好了

打開 package.json 文件，應用程序的啓動其實是依賴於這句代碼：

"scripts": {
    "start": "node ./bin/www"
  }

路由

Express 的主要內容有兩個：

• 路由
• 中間件

先來講路由

路由（Routing）是由一個 URI（或者叫路徑）和一個特定的 HTTP 方法（GET、POST 等）組成的，涉及到應用如何響應客戶端對某個網站節點的訪問。

每個路由均可以有一個或者多個處理器函數，當匹配到路由時，這個或者這些函數將被執行。

先寫一個簡單的路由

在 routes 目錄下新建一個 orders.js 的文件：

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

router.get('/',function(req,res,nest){
    res.render('orders',{msg:'訂單首頁'})
})
router.get('/list',function(req,res,next){
    res.send('訂單列表')
})

//導出
module.exports=router;

頁面文件寫好之後須要在在app.js中進行掛載，

var orders=require('./routes/orders');
···
app.use('/orders',orders)

這兩句最好和其餘的路由組件寫在一塊兒

在地址欄輸入對應的 url 便可打開響應的頁面

路由方法實例：

// 對網站首頁的訪問返回 "Hello World!" 字樣
app.get('/', function (req, res) {
  res.send('Hello World!');
});

// 網站首頁接受 POST 請求
app.post('/', function (req, res) {
  res.send('Got a POST request');
});

// /user 節點接受 PUT 請求
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});

// /user 節點接受 DELETE 請求
app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user');
});

中間件

中間件（Middleware） 是一個函數，它能夠訪問請求對象（request object (req)）, 響應對象（response object (res)）, 和 web 應用中處於請求-響應循環流程中的中間件，通常被命名爲 next 的變量。

中間件的分類：

• 應用級中間件
• 路由級中間件
• 錯誤處理中間件
• 內置中間件
• 第三方中間件

應用級中間件

應用級中間件綁定到 app 對象 使用 app.use() 和 app.METHOD()， 其中， METHOD 是須要處理的 HTTP 請求的方法，例如 get , put , post 等

var app = express();

// 沒有掛載路徑的中間件，應用的每一個請求都會執行該中間件
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 掛載至 /user/:id 的中間件，任何指向 /user/:id 的請求都會執行它
app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 路由和句柄函數(中間件系統)，處理指向 /user/:id 的 GET 請求
app.get('/user/:id', function (req, res, next) {
  res.send('USER');
});

在執行完一箇中間件以後，next() 會使程序繼續執行下一個中間件，若是沒有 next()，程序則不會往下執行。

在向頁面發送內容時，程序也不會往下執行

咱們也能夠裝在一組中間件

app.use('/user/:id',function(req,res,next){
    console.log('Request URL:', req.originalUrl);
    next();
},function(req,res,next){
    console.log('Request Type:', req.method);
    next();
})

路由級中間件

路由級中間件和應用級中間件同樣，只是它綁定的對象爲 express.Router()。

在上一節中，咱們本身寫的 orders.js ，其內容就是一個路由級中間件

路由級使用 router.use() 或 router.VERB() 加載。

上述在應用級建立的中間件系統，可經過以下代碼改寫爲路由級：

var app = express();
var router = express.Router();

// 沒有掛載路徑的中間件，經過該路由的每一個請求都會執行該中間件
router.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 一箇中間件棧，顯示任何指向 /user/:id 的 HTTP 請求的信息
router.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 一箇中間件棧，處理指向 /user/:id 的 GET 請求
router.get('/user/:id', function (req, res, next) {
  // 若是 user id 爲 0, 跳到下一個路由
  if (req.params.id == 0) next('route');
  // 負責將控制權交給棧中下一個中間件
  else next(); //
}, function (req, res, next) {
  // 渲染常規頁面
  res.render('regular');
});

// 處理 /user/:id， 渲染一個特殊頁面
router.get('/user/:id', function (req, res, next) {
  console.log(req.params.id);
  res.render('special');
});

// 將路由掛載至應用
app.use('/', router);

錯誤處理中間件

錯誤處理中間件和其餘中間件定義相似，只是要使用 4 個參數，而不是 3 個，其簽名以下： (err, req, res, next)。

app.use(function(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

在其餘 app.use() 和路由調用後，最後定義錯誤處理中間件，好比：

var bodyParser = require('body-parser');
var methodOverride = require('method-override');

app.use(bodyParser());
app.use(methodOverride());
app.use(function(err, req, res, next) {
  // 業務邏輯
});

在咱們建立的這個app中，app.js 內的錯誤處理中間件是這樣寫的：

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

錯誤中間件執行時，會調用 views 目錄下的 error.jade 文件，在頁面中打印詳細的錯誤信息

內置中間件

express.static(root,[options])

express.static 是 Express 惟一內置的中間件。它基於 serve-static，負責在 Express 應用中提託管靜態資源。

在 app.js 文件內也能夠找到這個內置中間件

app.use(express.static(path.join(__dirname, 'public')));

詳細信息參閱官方文檔：www.expressjs.com.cn/guide/using-middleware.html

第三方中間件

經過使用第三方中間件從而爲 Express 應用增長更多功能。

安裝所需功能的 node 模塊，並在應用中加載，能夠在應用級加載，也能夠在路由級加載。

實際上，咱們建立的這個應用已經引入了兩個第三方的中間件，在 package.json 中就能夠找到

"dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
}

其中 body-parser 和 cookie-parser 就是兩個第三方中間件

模板引擎

Express 默認的模板引擎是 jade 。如今 jade 已經改名爲 pug ，沒錯，似李，巴扎嘿！

pug 的語法請參閱 pug 文檔：

https://pug.bootcss.com/api/g...

咱們在 views 目錄下建立一個 orders.jade 的文件

doctype html
html
  head
    title 訂單
  body
    h1 #{msg}
    p before the time begian

而後使用路由渲染它：

router.get('/',function(req,res,nest){
    res.render('orders',{msg:'訂單首頁'})
})

在向主頁請求時，orders.jade 會被渲染爲 HTML 文檔

進程管理器

在編寫程序時，咱們發現，每次更改文件以後，都須要在命令行內中止當前的服務，而後輸入 npm start ，很麻煩。咱們須要一款自動刷新的工具

這裏介紹一下 pm2

安裝：

npm install pm2 -gd

安裝完畢，運行咱們的程序吧：

還記得咱們以前說的 npm start 的啓動路徑沒

> pm2 start ./bin/www --watch

[PM2] Applying action restartProcessId on app [www](ids: 0)
[PM2] [www](0) ✓
[PM2] Process successfully started
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬──────────┬──────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem      │ user     │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼──────────┼──────────┼──────────┤
│ www      │ 0  │ fork │ 14448 │ online │ 0       │ 0s     │ 0%  │ 8.6 MB   │ pureview │ enabled  │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴──────────┴──────────┴──────────┘
 Use `pm2 show <id|name>` to get more details about an app

當顯示 status 爲 online 時，說明程序啓動成功

如今能夠打開 http://localhost:3000 就能夠看到運行的程序了

從命令行中咱們能夠看出咱們的 app 名稱， id ，狀態，內存和 cpu 佔用，監視狀態等信息

啓動完成以後咱們就能夠根據咱們程序的id進行控制了

下次啓動能夠輸入

pm2 start 0 --watch

別忘了 --watch ,沒有它，程序是沒法自動刷新的

中止應用：

pm2 stop 0

重啓

pm2 restart 0

顯示程序信息

pm2 show 0

刪除程序

pm2 delete 0

查看程序列表

pm2 list

好了，此次關於 Express 的介紹就到這裏了，謝謝你們

官方文檔地址：http://www.expressjs.com.cn