Express使用手記：核心入門

glyn7338 9年前發布 | 43K 次閱讀 Express 中間件 Node.js擴展

入門簡介

Express是基于nodejs的web開發框架。優點是易上手、高性能、擴展性強。

易上手 ：nodejs最初就是為了開發高性能web服務器而被設計出來的，然而相對底層的API會讓不少新手望而卻步。express對web開發相關的模塊進行了適度的封裝，屏蔽了大量復雜繁瑣的技術細節，讓開發者只需要專注于業務邏輯的開發，極大的降低了入門和學習的成本。
高性能 ：express僅在web應用相關的nodejs模塊上進行了適度的封裝和擴展，較大程度避免了過度封裝導致的性能損耗。
擴展性強 ：基于中間件的開發模式，使得express應用的擴展、模塊拆分非常簡單，既靈活，擴展性又強。

環境準備

首先，需要安裝nodejs，這一步請自行解決。接著，安裝express的腳手架工具 express-generator ，這對于我們學習express很有幫助。

npm install -g express-generator

第一個demo

利用之前安裝的腳手架工具，初始化我們的demo項目。

/tmp mkdir express-demo
  /tmp cd express-demo 
  express-demo express
create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www
install dependencies:
     $ cd . && npm install
run the app:
     $ DEBUG=express-demo:* npm start</code></pre> 
  
按照指引，安裝依賴。并啟動服務 
  npm install 
  然后，啟動服務器。 
  express-demo  npm start
> ex1@0.0.0 start /private/tmp/ex1
> node ./bin/www</code></pre> 
  
訪問瀏覽器，邁出成功的第一步。 
   
  目錄結構介紹 
  看下demo應用的目錄結構。大部分時候，我們的應用目錄結構跟這個保持一致就可以了。也可以根據需要自行調整，express并沒有對目錄結構進行限制。 
  從目錄結構可以大致看出，express應用的核心概念主要包括： 路由 、 中間件 、 模板引擎 。 
  express-demo tree -L 1
.
├── app.js # 應用的主入口
├── bin  # 啟動腳本
├── node_modules # 依賴的模塊
├── package.json # node模塊的配置文件
├── public # 靜態資源，如css、js等存放的目錄
├── routes # 路由規則存放的目錄
└── views # 模板文件存放的目錄
5 directories, 2 files</code></pre> 
  
核心概念簡介 
  上面提到，express主要包含三個核心概念：路由、中間件、模板引擎。 
  注意，筆者這里用的是 核心概念 這樣的字眼，而不是 核心模塊 ，為什么呢？這是因為，雖然express的中間件有它的定義規范，但是express的內核源碼中，其實是沒有所謂的 中間件 這樣的模塊的。 
  言歸正傳，三者簡要的來說就是。 
   
   中間件 ：可以毫不夸張的說，在express應用中，一切皆中間件。各種應用邏輯，如cookie解析、會話處理、日志記錄、權限校驗等，都是通過中間件來完成的。 
   路由 ：地球人都知道，負責尋址的。比如用戶發送了個http請求，該定位到哪個資源，就是路由說了算。 
   模板引擎 ：負責視圖動態渲染。下面會介紹相關配置，以及如何開發自己的模板引擎。 
   
  核心概念：路由 
  路由分類 
  粗略來說，express主要支持四種類型的路由，下面會分別舉例進行說明 
   
   字符串類型 
   字符串模式類型 
   正則表達式類型 
   參數類型 
   
  分別舉例如下，細節可參考 官方文檔 。 
  var express = require('express');
var app = express();
// 路由：字符串類型
app.get('/book', function(req, res, next){
    res.send('book');
});
// 路由：字符串模式
app.get('/user/*man', function(req, res, next){
    res.send('user');  // 比如： /user/man, /user/woman
});
// 路由：正則表達式
app.get(/animals?$/, function(req, res, next){
    res.send('animal');  // 比如： /animal, /animals
});
// 路由：命名參數
app.get('/employee/:uid/:age', function(req, res, next){
    res.json(req.params);  // 比如：/111/30，返回 {"uid": 111, "age": 30}
});
app.listen(3000);</code></pre> 
  
路由拆分 
  當你用的應用越來越復雜，不可避免的，路由規則也會越來越復雜。這個時候，對路由進行拆分是個不錯的選擇。 
  我們分別看下兩段代碼，路由拆分的好處就直觀的體現出來了。 
  路由拆分前 
  var express = require('express');
var app = express();
app.get('/user/list', function(req, res, next){
    res.send('/list');
});
app.get('/user/detail', function(req, res, next){
    res.send('/detail');
});
app.listen(3000);</code></pre> 
  
這樣的代碼會帶來什么問題呢？無論是新增還是修改路由，都要帶著 /user 前綴，這對于代碼的可維護性來說是大忌。這對小應用來說問題不大，但應用復雜度一上來就會是個噩夢。 
  路由拆分后 
  可以看到，通過 express.Router() 進行了路由拆分，新增、修改路由都變得極為便利。 
  var express = require('express');
var app = express();
var user = express.Router();
user.get('/list', function(req, res, next){
    res.send('/list');
});
user.get('/detail', function(req, res, next){
    res.send('/detail');
});
app.use('/user', user); // mini app，通常做應用拆分
app.listen(3000);</code></pre> 
  
核心概念：中間件 
  一般學習js的時候，我們都會聽到一句話：一切皆對象。而在學習express的過程中，很深的一個感受就是：一切皆中間件。比如常見的請求參數解析、cookie解析、gzip等，都可以通過中間件來完成。 
  工作機制 
  貼上官網的 一張圖 鎮樓，圖中所示就是傳說中的中間件了。 
   
  首先，我們自己編寫一個極簡的中間件。雖然沒什么實用價值，但中間件就長這樣子。 
   
   參數 ：三個參數，熟悉 http.createServer() 的同學應該比較眼熟，其實就是req（客戶端請求實例）、res（服務端返回實例），只不過進行了擴展，添加了一些使用方法。 
   next ：回調方法，當next()被調用時，就進入下一個中間件。 
   
  function logger(req, res, next){
    console.log('here comes request');
    next();
} 
  來看下實際例子： 
  var express = require('express');
var app = express();
app.use(function(req, res, next) {
    console.log('1');
    next();
});
app.use(function(req, res, next) {
    console.log('2');
    next();
});
app.use(function(req, res, next) {
    console.log('3');
    res.send('hello');
});
app.listen(3000);</code></pre> 
  
請求 http://127.0.0.1:3000，看下控制臺輸出，以及瀏覽器返回內容。 
  middleware git:(master)  node chains.js 
1
2
3 
   
  應用級中間件 vs 路由級中間件 
  根據作用范圍，中間件分為兩大類： 
   
   應用級中間件 
   路由級中間件。 
   
  兩者的區別不容易說清楚，因為從本質來講，兩類中間件是完全等同的，只是使用場景不同。同一個中間件，既可以是應用級中間件、也可以是路由級中間件。 
  直接上代碼可能更直觀。參考下面代碼，可以簡單粗暴的認為： 
   
   應用級中間件： app.use() 、 app.METHODS() 接口中使用的中間件。 
   路由級中間件： router.use() 、 router.METHODS() 接口中使用的中間件。 
   
  var express = require('express');
var app = express();
var user = express.Router();
// 應用級
app.use(function(req, res, next){
    console.log('收到請求，地址為：' + req.url);
    next();
});
// 應用級
app.get('/profile', function(req, res, next){
    res.send('profile');
});
// 路由級
user.use('/list', function(req, res, next){
    res.send('/user/list');
});
// 路由級
user.get('/detail', function(req, res, next){
    res.send('/user/detail');
});
app.use('/user', user);
app.listen(3000);</code></pre> 
  
開發中間件 
  上面也提到了，中間件的開發是是分分鐘的事情，不贅述。 
  function logger(req, res, next){
    doSomeBusinessLogic(); // 業務邏輯處理，比如權限校驗、數據庫操作、設置cookie等
    next();  // 如果需要進入下一個中間件進行處理，則調用next();
} 
  常用中間件 
  包括但不限于如下。更多常用中間件，可以點擊 這里 
   
   body-parser 
   compression 
   serve-static 
   session 
   cookie-parser 
   morgan 
   
  核心概念：模板引擎 
  模板引擎大家不陌生了，關于express模板引擎的介紹可以參考 官方文檔 。 
  下面主要講下使用配置、選型等方面的內容。 
  可選的模版引擎 
  包括但不限于如下模板引擎 
   
   jade 
   ejs 
   dust.js 
   dot 
   mustache 
   handlerbar 
   nunjunks 
   
  配置說明 
  先看代碼。 
  // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); 
  有兩個關于模版引擎的配置： 
   
   views ：模版文件放在哪里，默認是在項目根目錄下。舉個例子： app.set('views', './views') 
   view engine ：使用什么模版引擎，舉例： app.set('view engine', 'jade') 
   
  可以看到，默認是用 jade 做模版的。如果不想用 jade 怎么辦呢？下面會提供一些模板引擎選擇的思路。 
  選擇標準 
  需要考慮兩點：實際業務需求、個人偏好。 
  首先考慮業務需求，需要支持以下幾點特性。 
   
   支持模版繼承(extend) 
   支持模版擴展(block) 
   支持模版組合(include) 
   支持預編譯 
   
  對比了下， jade 、 nunjunks 都滿足要求。個人更習慣 nunjunks 的風格，于是敲定。那么，怎么樣使用呢？ 
  支持nunjucks 
  首先，安裝依賴 
  npm install --save nunjucks 
  然后，添加如下配置 
  var nunjucks = require('nunjucks');
nunjucks.configure('views', {
    autoescape: true,
    express: app
});
app.set('view engine', 'html');</code></pre> 
  
看下 views/layout.html 
  <!DOCTYPE html>
<html>
<head>
    <title>
        {% block title %}
            layout title
        {% endblock %}
    </title>
</head>
<body>
<h1>
    {% block appTitle %}
        layout app title
    {% endblock %}
</h1>
<p>正文</p>
</body>
</html></code></pre> 
  
看下 views/index.html 
  {% extends "layout.html" %}
{% block title %}首頁{% endblock %}
{% block appTitle %}首頁{% endblock %} 
  開發模板引擎 
  通過 app.engine(engineExt, engineFunc) 來注冊模板引擎。其中 
   
   engineExt：模板文件后綴名。比如 jade 。 
   engineFunc：模板引擎核心邏輯的定義，一個帶三個參數的函數（如下） 
   
  // filepath: 模板文件的路徑
// options：渲染模板所用的參數
// callback：渲染完成回調
app.engine(engineExt, function(filepath, options, callback){

// 參數一：渲染過程的錯誤，如成功，則為null
// 參數二：渲染出來的字符串
return callback(null, 'Hello World');

});</code></pre> 
  
比如下面例子，注冊模板引擎 + 修改配置一起，于是就可以愉快的使用后綴為 tmpl 的模板引擎了。 
  app.engine('tmpl', function(filepath, options, callback){

// 參數一：渲染過程的錯誤，如成功，則為null
// 參數二：渲染出來的字符串
return callback(null, 'Hello World');

});
app.set('views', './views');
app.set('view engine', 'tmpl');</code></pre> 
  
相關鏈接 
  模板引擎對比： 點擊這里 
  express模版引擎介紹： 點擊這里 
  開發模版引擎： 點擊這里 
  更多內容 
  前面講了一些express的入門基礎，感興趣的同學可以查看官方文檔。篇幅所限，有些內容在后續文章展開，比如下面列出來的內容等。 
   
   進程管理 
   會話管理 
   日志管理 
   性能優化 
   調試 
   錯誤處理 
   負載均衡 
   數據庫支持 
   HTTPS支持 
   業務實踐 
   。。。 
   
    
  來自：http://imweb.io/topic/57c8cb417f226f687b365634


                    
                         本文由用戶 glyn7338 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1472801632929.html
                         Express 中間件 Node.js擴展

Express使用手記：核心入門

入門簡介

Express是基于nodejs的web開發框架。優點是易上手、高性能、擴展性強。

高性能：express僅在web應用相關的nodejs模塊上進行了適度的封裝和擴展，較大程度避免了過度封裝導致的性能損耗。

擴展性強：基于中間件的開發模式，使得express應用的擴展、模塊拆分非常簡單，既靈活，擴展性又強。

環境準備

第一個demo

目錄結構介紹

核心概念簡介

核心概念：路由

路由分類

路由拆分

核心概念：中間件

工作機制

應用級中間件 vs 路由級中間件

開發中間件

常用中間件

核心概念：模板引擎

可選的模版引擎

配置說明

選擇標準

支持nunjucks

開發模板引擎

相關鏈接

更多內容

相關經驗

相關資訊

相關文檔

目錄

Express使用手記：核心入門

入門簡介

Express是基于nodejs的web開發框架。優點是易上手、高性能、擴展性強。

高性能 ：express僅在web應用相關的nodejs模塊上進行了適度的封裝和擴展，較大程度避免了過度封裝導致的性能損耗。

擴展性強 ：基于中間件的開發模式，使得express應用的擴展、模塊拆分非常簡單，既靈活，擴展性又強。

環境準備

第一個demo

目錄結構介紹

核心概念簡介

核心概念：路由

路由分類

路由拆分

核心概念：中間件

工作機制

應用級中間件 vs 路由級中間件

開發中間件

常用中間件

核心概念：模板引擎

可選的模版引擎

配置說明

選擇標準

支持nunjucks

開發模板引擎

相關鏈接

更多內容

相關經驗

相關資訊

相關文檔

目錄

高性能：express僅在web應用相關的nodejs模塊上進行了適度的封裝和擴展，較大程度避免了過度封裝導致的性能損耗。

擴展性強：基于中間件的開發模式，使得express應用的擴展、模塊拆分非常簡單，既靈活，擴展性又強。