Express - Hello World!

今天就要來安裝主角之一的 Express 了!

一樣開啟虛擬機器我應該是可以不用多說了 XD

先確認自己的 node 是不是 NVM 的 node 喲

建立專案

1
2
3
4

$ cd /vagrant/
$ mkdir API
$ cd API/
$ npm init

自己輸入專案的相關內容吧，不知道的就直接按 enter 空白丟給他~

就會產生 package.json 了!

安裝 Express

1
2
3

// 在專案目錄底下 (/vagrant/API/)

$ npm install express -save

下 -save 的原因是要將 express 加入 package.json 中

離開虛擬機，其實我們也可以在虛擬機資料夾看到剛剛建立的專案了，

現在開始就可以使用自己喜歡的編輯器來開啟這個專案資料夾，我個人偏好使用 Sublime Text

要執行專案時再回終端機即可

Express Hello World!

在 API 資料夾中建立一個 app.js

內容是:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

javascript
var express = require('express');
var app = express();

app.get('/', function(req, res){
  res.send('Hello World');
});

app.listen(3000, function() {
    console.log('Listening on port %d', server.address().port);
});

儲存後，回到終端機，將 express 跑起來:

1
2

vagrant@vagrant-ubuntu-trusty-64:/vagrant/API$ node app.js
Listening on port 3000

開啟瀏覽器，瀏覽 http://192.168.33.10:3000 (url 視個人環境而定)

出現 Hello World! Express! 啦～～ 又一個 Hello World 啦~~

是不是有比 Node.js 的範例更簡潔一點呢?

簡單分析一下這段 code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 引入 express module
var express = require('express');

// 產生一個 express instance - app
var app = express();

// Express 的重點所在! 稍後解釋
app.get('/', function(req, res){
  res.send('Hello World');
});

// 讓 express server 跑在 port 3000
app.listen(3000, function() {
    console.log('Listening on port %d', server.address().port);
});

以上概念基本上都和 Node.js 概念差不多

值得一提的是 Express 的 Routing:

1
2
3

app.get('/', function(req, res){
  res.send('Hello World');
});

最前面有提到 HTTP 的動詞 GET, POST, PUT, DELETE …

在這邊就必須用上了！

我們可以看一下 express 的 API reference

app.get 的 .get 就是代表 HTTP GET

如果後面接 .post 就是 HTTP POST, 等等都同樣概念

API reference 中提到，

1

router.VERB(path, [callback...], callback)

path 的意思就是要開放給 client 的路由, 透過不同的路由導向不同的動作

中間的 [callback...] 是 middleware 這個之後會再解釋

最後一個 callback 是用來處理 request 及 response

在這個例子中，client 並沒有丟參數，因此不需要對 request 作處理，

而 server 要回應 response

所以使用了 res.send('Hello World'); 來回傳資料

是不是很簡單勒!

專案產生器

或許有人會使用 express-generator 來產生 expresss 專案目錄

雖然它很方便，一次建立好專案結構，並且安裝一些常用搭配的套件，

但是由於在尚未了解 express 的運作原理，

一開始一次建立完整我認為過快，因此先不建議這樣用，

當然，如果已經很熟練很了解 express 中可以使用的東西了，使用產生器當然是節省時間囉~

1
2

$ npm install -g express-generator
$ express /tmp/foo && cd /tmp/foo

下一篇會講解如何簡單操作 MongoDB!