1. 程式人生 > >使用NodeJS的Express4.X框架寫WEB應用

使用NodeJS的Express4.X框架寫WEB應用

Express 3.0 與 4.0的特性改變

Express 3.0 Express 4.0
bodyParser body-parser
compress compression
cookieSession cookie-session
logger morgan
cookieParser cookie-parser
session express-session
favicon static-favicon
response-time response-time
error-handler errorhandler
method-override method-override
timeout connect-timeout
vhost vhost
csrf csurf

安裝Express, 並建立一個WEB專案

首先安裝好NodeJS。
安裝Express 4:

> npm install express -gd

其中選項-g表示全域性安裝,目標模組將會被安裝到NODE_PATH的lib裡面node_modules資料夾中,全域性使用。-d選項表示一併安裝依賴模組。沒有-g選項的話會在當前目錄(通常是專案目錄)建立一個node_modules目錄。

安裝成功後,命令列會提示 npm info ok

express 4.0之後將命令工具分出來了(建立一個APP的工具),因此還需安裝express-generator。沒它建立不了應用程式。

> npm install -g express-generator #全域性安裝-g
> express -V # 檢查express的版本

安裝好以後,可以使用express的命令,建立專案了。

> express -e firstweb # 在當前目錄下會建立firstweb目錄
> cd firstweb # 進入專案目錄
> npm install # 在專案目錄中,下載依賴庫來構建專案。

啟動專案:

> npm start

Express4中引入了著名的debug模組,所以debug模式更方便的研究Node中的模組,其使用方法:https://www.npmjs.org/package/debug
使用DEBUG方式啟動專案:

> DEBUG=firstweb ./bin/www # 用文字編輯器看看這個www檔案的內容!

Express專案的目錄結構

  • bin, 存放啟動專案的指令碼檔案
  • node_modules, 存放所有的專案依賴庫
  • public,靜態檔案(css,js,img)
  • routes,路由檔案(MVC中的C,controller)
  • views,頁面檔案(Ejs模板)
  • package.json,專案依賴配置及開發者資訊
  • app.js,應用核心配置檔案,程式啟動檔案

package.json檔案

package.json用來宣告專案基本資訊和使用的模組,這樣在新的環境部署時,只要在package.json檔案所在的目錄執行npm install命令即可安裝所需要的模組了。

{
  "name": "first",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "ejs": "~2.4.1",
    "express": "~4.13.4",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  }
}

裡面的scripts屬性,是用於定義操作命令的,可以非常方便的增加啟動命令,比如預設的start,用npm start代表執行node ./bin/www命令。

編寫業務處理程式

比如,編寫一個檢視文章的功能:新增一個article的路由控制代碼。
在routes目錄下面新建一個article.js檔案,來具體實現業務羅輯。
url為http://localhost:3000/article/id/xxxx
每個文章有一個id,一串數字,返回json資料。
article.js檔案內容如下:

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

/* GET data listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a article');
});

router.get(/^\/id\/(\d+)$/, function(req, res, next) {
    var article_id = req.params[0];
    res.send("article id is : " + article_id);
});

module.exports = router;

以上程式碼完成了路由控制代碼,之後,將它掛在路由路徑上:
在app.js新增以下程式碼

var article = require('./routes/article.js');
app.use('/article', article);

獨立編寫程式:不使用Express工具生成專案結構

以上的專案是用express-generator工具生成的。
也可以不用他,自己從零開始寫。
程式和上面一樣,隨意放到任何目錄都可以,但是要注意一點,需要設定NODE_PATH這個環境變數,並指向安裝的擴充套件包的根目錄。比如,WINDOWS下預設是:C:\Users\fd\AppData\Roaming\npm\node_modules
如果不指定這個目錄,那麼就需要在專案目錄下再執行一次本地安裝:npm install express
否則,會報錯:Cannot find module ‘express’