Express 新手概述

安裝

建立一個目錄，並將此目錄作為當前的工作目錄
```
$ mkdir myapp
$ cd myapp
```
初始化專案
```
npm init -y
```
開啟 package.json，注意 "main" 為 index.js，這是它預設的入口檔案，將其修改為 app.js
- 關於 package.json 的作用，請參考：Specifics of npm’s package.json handling
安裝 express
```
$ npm install express --save
```
- 安裝 Node 模組時，如果指定了 --save 引數，那麼此模組將被新增到 package.json 檔案中 dependencies 依賴列表中。然後通過 npm install 命令即可自動安裝依賴列表中所列出的所有模組
- 如果只是臨時安裝 Express，不想將它新增到依賴列表中，只需略去 --save 引數即可：
```
$ npm install express
```

Hello World

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

進入 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);
})

命令列啟動
```
node app.js
```
開啟 http://localhost:3000/ 就可以看到結果了

Express 生成器

通過應用生成器工具 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

建立名為 myapp 的應用
```
$ express myapp
```
安裝依賴檔案
```
$ cd example
$ npm install
```
啟動專案
```
$ npm start
```
- 開啟 http://localhost:3000/ 即可檢視結果

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

.
├── 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 路由做一個簡單的介紹

路由（Routing）是由一個 URL（或者叫路徑）和一個 特定的 HTTP（如 GET、POST）方法，涉及到應用如何響應客戶端對某個網站節點的訪問
每一個路由都可以有一個或者多個處理器函式，當匹配到路由時，這些函式將被執行
路由的定義由如下結構組成：app.METHOD(PATH, HANDLER)
- app 是一個 express 例項
- METHOD 是請求方式中的一個
- PATH 是伺服器端的路徑
- HANDLER 是當路徑匹配成功時需要執行的函式

下面展示幾個簡單的路由案例：
開啟 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');
});

託管靜態檔案

通過 express 內建的 express.static 可以託管靜態檔案，比如 JavaScript 檔案、CSS 檔案、圖片等
將靜態檔案資源所在的目錄作為引數傳遞給 express.static 中介軟體就可以提供靜態資原始檔的訪問了
託管案例
- 在 example/public/images 目錄下存放一個如下的圖片（命名為 logo.png）：
- 開啟 example/app.js，新增上使用中介軟體的程式碼：
```
// app.js
app.use(express.static('public'));
```
- 現在，public 目錄下面的檔案就可以訪問了，開啟 http://localhost:3000/images/logo.png，即可檢視圖片
- 注：所有檔案的路徑都是相對於存放目錄的，因此，存放靜態檔案的目錄名不會出現在 URL 中
如果你的靜態資源存放在多個目錄下面，你可以多次呼叫 express.static 中介軟體，需新增上使用中介軟體的程式碼：
```
// app.js
app.use(express.static('public'));
app.use(express.static('files'));
```
若要想通過 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 協議》，轉載必須註明作者和本文連結

Express 新手概述

安裝

Hello World

Express 生成器

簡單路由案例

託管靜態檔案

相關文章