Express 新手概述

Ozzie發表於2020-01-26
Express

安裝

  1. 建立一個目錄，並將此目錄作為當前的工作目錄

    $ mkdir myapp
$ cd myapp

  2. 初始化專案

    npm init -y

  3. 開啟 package.json，注意 "main" 為 index.js，這是它預設的入口檔案，將其修改為 app.js

  4. 安裝 express

    $ npm install express --save
    • 安裝 Node 模組時，如果指定了 --save 引數，那麼此模組將被新增到 package.json 檔案中 dependencies 依賴列表中。 然後通過 npm install 命令即可自動安裝依賴列表中所列出的所有模組
    • 如果只是臨時安裝 Express，不想將它新增到依賴列表中，只需略去 --save 引數即可： 
      $ npm install express

Hello World

  1. 注意，這裡建立的是一個最簡單的應用，並且只有一個檔案，這和 Express 應用生成器 建立的完全不一樣，Express 應用生成器所建立的應用框架包含多個 JavaScript 檔案、Jade 模板 和 針對不同用途的子目錄

  2. 進入 myapp 目錄，建立 app.js（這裡的命名源於之前 package.json 修改的命名）

    // app.js
var express = require('express');
var app = express();
app.get('/', function(req, res) {
    res.send('Hello World!');
});
var server = app.listen(3000, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
})

  3. 命令列啟動

    node app.js

  4. 開啟 http://localhost:3000/ 就可以看到結果了

Express 生成器

  1. 通過應用生成器工具 express-generator 可以快速構建一個應用的框架

    $ npm install express-generator -g
    • 在終端中使用 -h 引數可以列出所有可用的命令列引數 
      $ express -h
Usage: express [options] [dir]
Options:
--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 (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
--no-view        use static html instead of view engine
-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
-h, --help           output usage information

  2. 建立名為 myapp 的應用

    $ express myapp

  3. 安裝依賴檔案

    $ cd example
$ npm install

  4. 啟動專案

    $ npm start

  5. 注，該生成器建立的應用一般有：

    .
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

簡單路由案例

對 Express 路由做一個簡單的介紹

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

  2. 每一個路由都可以有一個或者多個處理器函式，當匹配到路由時，這些函式將被執行

  3. 路由的定義由如下結構組成：app.METHOD(PATH, HANDLER)

    • app 是一個 express 例項
    • METHOD 是請求方式中的一個
    • PATH 是伺服器端的路徑
    • HANDLER 是當路徑匹配成功時需要執行的函式

  4. 下面展示幾個簡單的路由案例：
    開啟 routes 之中的 index.js，並將下面的程式碼修改

    // index.js
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

    修改為：

    // 對網站首頁的訪問返回 "Hello World!" 字樣
router.get('/', function (req, res) {
  res.send('Hello World!');
});
// 網站首頁接受 POST 請求
router.post('/', function (req, res) {
  res.send('Got a POST request');
});
// /user 節點接受 PUT 請求
router.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});
// /user 節點接受 DELETE 請求
router.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user');
});

託管靜態檔案

  1. 通過 express 內建的 express.static 可以託管靜態檔案，比如 JavaScript 檔案、CSS 檔案、圖片等

  2. 將靜態檔案資源所在的目錄作為引數傳遞給 express.static 中介軟體就可以提供靜態資原始檔的訪問了

  3. 託管案例

    • 在 example/public/images 目錄下存放一個如下的圖片（命名為 logo.png）：
    • 開啟 example/app.js，新增上使用中介軟體的程式碼： 
      // app.js
app.use(express.static('public'));
    • 現在，public 目錄下面的檔案就可以訪問了，開啟 http://localhost:3000/images/logo.png，即可檢視圖片
    • 注：所有檔案的路徑都是相對於存放目錄的，因此，存放靜態檔案的目錄名不會出現在 URL 中

  4. 如果你的靜態資源存放在多個目錄下面，你可以多次呼叫 express.static 中介軟體，需新增上使用中介軟體的程式碼：

    // app.js
app.use(express.static('public'));
app.use(express.static('files'));

  5. 若要想通過 express.static 訪問的檔案都存放在一個 虛擬（virtual）目錄 （即目錄根本不存在）下面，可以通過靜態資源目錄指定一個掛在路徑方式，如下所示：

    // app.js
app.use('/static', express.static('public'));
    • 現在，你就可以通過帶有 /static 字首的地址來訪問 public 目錄下面的檔案了
    • 可將之前的 http://localhost:3000/images/logo.png 改為 http://localhost:3000/static/images/logo.png
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章