基於Node.js的Express框架基礎

一.Express是什麼

基於Node.js平臺，快速、開放、極簡的 Web 開發框架

二.Express框架的特色

• 提供簡潔的路由定義方式
• 對獲取HTTP請求參數進行簡化處理
• 對模板引擎的支持程度高,方便渲染動態HTM頁面
• 提供中間件機制有效控制HTTP請求
• 擁有大量第三方中間件對功能進行擴展

三.使用

Express的使用很簡單,在你的項目中執行如下安裝代碼

npm install express
複製代碼

四.原生Node.js與Express的一些區別

1.路由的對比

node.js

app.on('request', (req, res) => {
     // 獲取客戶端的請求路徑
     let { pathname } = url.parse(req.url);
     // 對請求路徑進行判斷 不一樣的路徑地址響應不一樣的內容
     if (pathname == '/' || pathname == 'index') {
        res.end('歡迎來到首頁');
     } else if (pathname == '/list') {
        res.end('歡迎來到列表頁頁');
     } else if (pathname == '/about') {
        res.end('歡迎來到關於咱們頁面')
     } else {
        res.end('抱歉, 您訪問的頁面出遊了');
     }
 });
複製代碼

express

// 當客戶端以get方式訪問/時
 app.get('/', (req, res) => {
     // 對客戶端作出響應
     res.send('Hello Express');
 });

 // 當客戶端以post方式訪問/add路由時
 app.post('/add', (req, res) => {
    res.send('使用post方式請求了/add路由');
 });
複製代碼

2.獲取請求參數的對比

node.js

app.on('request', (req, res) => {
    // 獲取GET參數
    let {query} = url.parse(req.url, true);
    // 獲取POST參數
    let postData = '';
    req.on('data', (chunk) => {
        postData += chunk;
    });
    req.on('end', () => {
        console.log(querystring.parse(postData)
    })); 
 });
複製代碼

express

app.get('/', (req, res) => {
    // 獲取GET參數
    console.log(req.query);
 });

 app.post('/', (req, res) => {
    // 獲取POST參數
    console.log(req.body);
 }) 
複製代碼

五.Express建立web服務器

使用Express框架建立web服務器及其簡單，調用express模塊返回的函數便可。

// 引入Express框架
 const express = require('express');
 // 使用框架建立web服務器
 const app = express();
 // 當客戶端以get方式訪問/路由時
 app.get('/', (req, res) => {
    // 對客戶端作出響應 send方法會根據內容的類型自動設置請求頭
    res.send('Hello Express'); // <h2>Hello Express</h2> {say: 'hello'}
 });
 // 程序監聽3000端口
 app.listen(3000);
複製代碼

六.中間件

1.什麼是中間件

中間件就是一堆方法，能夠接收客戶端發來的請求、能夠對請求作出響應，也能夠將請求繼續交給下一個中間件繼續處理。

2.中間鍵的構成

中間件主要由兩部分構成，中間件方法以及請求處理函數。 中間件方法由Express提供，負責攔截請求，請求處理函數由開發人員提供，負責處理請求。

app.get('請求路徑', '處理函數')   // 接收並處理get請求
 app.post('請求路徑', '處理函數')  // 接收並處理post請求
複製代碼

能夠針對同一個請求設置多箇中間件，對同一個請求進行屢次處理。 默認狀況下，請求從上到下依次匹配中間件，一旦匹配成功，終止匹配。 能夠調用next方法將請求的控制權交給下一個中間件，直到遇到結束請求的中間件。

app.get('/request', (req, res, next) => {
     req.name = "張三";
     next();
 });
 app.get('/request', (req, res) => {
     res.send(req.name);
 });
複製代碼

3.app.use中間件

app.use匹配全部的請求方式，能夠直接傳入請求處理函數，表明接收全部的請求。

app.use((req, res, next) => {
     console.log(req.url);
     next();
 });
複製代碼

app.use 第一個參數也能夠傳入請求地址，表明不論什麼請求方式，只要是這個請求地址就接收這個請求。

app.use('/admin', (req, res, next) => {
     console.log(req.url);
     next();
 });
複製代碼

4.中間件的應用

• 路由保護，客戶端在訪問須要登陸的頁面時，能夠先使用中間件判斷用戶登陸狀態，用戶若是未登陸，則攔截請求，直接響應，禁止用戶進入須要登陸的頁面。
• 網站維護公告，在全部路由的最上面定義接收全部請求的中間件，直接爲客戶端作出響應，網站正在維護中。
• 自定義404頁面

5.錯誤處理中間件

在程序執行的過程當中，不可避免的會出現一些沒法預料的錯誤，好比文件讀取失敗，數據庫鏈接失敗。 錯誤處理中間件是一個集中處理錯誤的地方。

app.use((err, req, res, next) => {
     res.status(500).send('服務器發生未知錯誤');
 })
複製代碼

當程序出現錯誤時，調用next()方法，而且將錯誤信息經過參數的形式傳遞給next()方法，便可觸發錯誤處理中間件。

app.get("/", (req, res, next) => {
     fs.readFile("/file-does-not-exist", (err, data) => {
         if (err) {
            next(err);
         }
     });
});
複製代碼

6.捕獲錯誤

在node.js中，異步API的錯誤信息都是經過回調函數獲取的，支持Promise對象的異步API發生錯誤能夠經過catch方法捕獲。 異步函數執行若是發生錯誤要如何捕獲錯誤呢？

try catch 能夠捕獲異步函數以及其餘同步代碼在執行過程當中發生的錯誤，可是不能其餘類型的API發生的錯誤。

app.get("/", async (req, res, next) => {
     try {
         await User.find({name: '張三'})
     }catch(ex) {
         next(ex);
     }
 });
複製代碼

七. Express框架請求處理

1.構建模塊化路由

const express = require('express') 
 // 建立路由對象
 const home = express.Router();
 // 將路由和請求路徑進行匹配
 app.use('/home', home);
  // 在home路由下繼續建立路由
 home.get('/index', () => {
          // /home/index
         res.send('歡迎來到博客展現頁面');
 });
複製代碼

// home.js
 const home = express.Router(); 
 home.get('/index', () => {
     res.send('歡迎來到博客展現頁面');
 });
 module.exports = home;
複製代碼

// admin.js
 const admin = express.Router();
 admin.get('/index', () => {
     res.send('歡迎來到博客管理頁面');
 });
 module.exports = admin;
複製代碼

// app.js
 const home = require('./route/home.js');
 const admin = require('./route/admin.js');
 app.use('/home', home);
 app.use('/admin', admin);
複製代碼

2.GET參數的獲取

Express框架中使用req.query便可獲取GET參數，框架內部會將GET參數轉換爲對象並返回。

// 接收地址欄中問號後面的參數
 // 例如: http://localhost:3000/?name=zhangsan&age=30
 app.get('/', (req, res) => {
    console.log(req.query); // {"name": "zhangsan", "age": "30"}
 });
複製代碼

3.POST參數的獲取

Express中接收post請求參數須要藉助第三方包 body-parser。

// 引入body-parser模塊
 const bodyParser = require('body-parser');
 // 配置body-parser模塊
 app.use(bodyParser.urlencoded({ extended: false }));
 // 接收請求
 app.post('/add', (req, res) => {
    // 接收請求參數
    console.log(req.body);
 }) 
複製代碼

4.Express路由參數

app.get('/find/:id', (req, res) => { 
     console.log(req.params); // {id: 123} 
 });
複製代碼

localhost:3000/find/123
複製代碼

5.靜態資源的處理

經過Express內置的express.static能夠方便地託管靜態文件，例如img、CSS、JavaScript 文件等。

app.use(express.static('public'));
複製代碼

如今，public 目錄下面的文件就能夠訪問了。

http://localhost:3000/images/kitten.jpg
 http://localhost:3000/css/style.css
 http://localhost:3000/js/app.js
 http://localhost:3000/images/bg.png
 http://localhost:3000/hello.html 
複製代碼

八.express-art-template模板引擎

1.模板引擎

爲了使art-template模板引擎可以更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基礎上封裝了express-art-template。

使用npm install art-template express-art-template命令進行安裝。

// 當渲染後綴爲art的模板時 使用express-art-template
 app.engine('art', require('express-art-template'));
  // 設置模板存放目錄
 app.set('views', path.join(__dirname, 'views'));
  // 渲染模板時不寫後綴 默認拼接art後綴
 app.set('view engine', 'art');
 app.get('/', (req, res) => {
     // 渲染模板
     res.render('index');
 }); 
複製代碼

2.app.locals 對象

將變量設置到app.locals對象下面，這個數據在全部的模板中均可以獲取到。

app.locals.users = [{
     name: '張三',
     age: 20
 },{
     name: '李四',
     age: 20
}]
複製代碼