Express - Hello World!

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

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

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

建立專案

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

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

就會產生 package.json 了!

安裝 Express

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

$ npm install express -save

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

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

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

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

Express Hello World!

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

內容是:

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 跑起來:

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 :

// 引入 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:

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 中提到,

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 中可以使用的東西了,使用產生器當然是節省時間囉~

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

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