Express框架學習
(一導學) 框架入門
這個也是是一個開發框架，是一個第三方模塊，使用這個框架可以很方便的創建網站服務器
我們先來看看它的特點：
1.提供了方便簡潔的路由定義方式
2.對獲取HTTP請求參數進行了簡化處理
3.對模板引擎支持程度高，方便渲染動態HTML頁面
4.提供了中間件機制有效控制HTTP請求(對請求的攔截)
5.擁有大量第三方中間件對功能進行擴展
其實框架就是一些API，學習框架就是學習還有熟悉它的API
對比一下原生的路由還有獲取請求參數的處理實現方式
- 簡單的上手實現
- 首先我們的要npm下載
npm install express
- 引入express模塊，這個返回一個構造函數，它是我們的express核心的api之一
const express = require('express');
- 創建服務器 並且監聽端口
- 創建路由，接受請求
// 引入express框架
const express = require('express'); //返回的值 是一個方法！
// 創建網站服務器
const app = express();
app.get('/', (req, res) => {
// send()
// 1. send方法內部會檢測響應內容的類型
// 2. send方法會自動設置http狀態碼
// 3. send方法會幫我們自動設置響應的內容類型及編碼
res.send('Hello. Express');
})
app.get('/list', (req, res) => {
res.send({ name: '張三', age: 20 })
})
// 監聽端口
app.listen(3000);
console.log('網站服務器啟動成功');
(二) 中間件
什么是中間件？？這個就是一堆方法，說白了就對請求的預處理。你可以設置多個中間件處理同一個數據流，他們之間有不同的執行處理順序，中間件就是一個閥門！
中間件的構成
主要是有兩個部分：Express提供的方法，第二個就是處理函數（回調）
主要我們這里有一個next
語法結構
app.get('/request', (req, res, next) => {
req.name = "張三";
//next方法就是是否允許把請求傳遞給下一個處理中間件，直到結束
next();
});
app.get('/request', (req, res) => {
res.send(req.name);
});
app.user中間件
這個是一個中間件，比較特殊，它不區分請求的方式，它必須放在所有的中間件的前面，next非常的重要！他可以移交控制器，如果你寫next就會卡着不動彈
語法實例
// 引入express框架
const express = require('express');
// 創建網站服務器
const app = express();
// 接收所有請求的中間件
// app.use 接收請求， 但是不指定請求方式get或者poset，只要喲請求就有這個東西，如何next傳遞走
app.use((req, res, next) => {
console.log('請求走了app.use中間件');
next()
})
// 這里我們的第一個請求做了 規定，當客戶端訪問/request請求的時候走當前中間件
app.use('/request', (req, res, next) => {
console.log('請求走了app.use / request中間件')
next()
})
// 如果你訪問的list那么值錢的user use('/request', (req, res, next)就不會走了
app.get('/list', (req, res) => {
res.send('/list')
})
app.get('/request', (req, res, next) => {
req.name = "張三";
next();
})
app.get('/request', (req, res) => {
res.send(req.name)
})
// 監聽端口
app.listen(3000);
console.log('網站服務器啟動成功');
中間件應用
運用非常的廣泛：
路由守衛 ，路由保護，客戶端在訪問需要登錄的頁面時，可以先使中間件判斷用戶登錄狀態，用戶如果未登錄，則攔截請求，直接響應禁止用戶進入需要登錄的頁面。
網站維護公告，在所有路由的最上面定義接收所有請求的中間件，直接為客戶端做出響應，網站正在維護中。
自定義404頁面
示例代碼塊
// 引入express框架
const express = require('express');
// 創建網站服務器
const app = express();
// // 網站公告
// app.use((req, res, next) => {
// res.send('當前網站正在維護...')
// })
//只要你想訪問管理頁面，就攔截下來 判斷你是否登錄登錄了就放開你，沒有的話，就戒掉你
app.use('/admin', (req, res, next) => {
// 用戶沒有登錄
let isLogin = true;
// 如果用戶登錄
if (isLogin) {
// 讓請求繼續向下執行
next()
} else {
// 如果用戶沒有登錄 直接對客戶端做出響應
res.send('您還沒有登錄 不能訪問/admin這個頁面')
}
})
app.get('/admin', (req, res) => {
res.send('您已經登錄 可以訪問當前頁面')
})
// 這里的邏輯就是：如果你所有的路由頁面都沒有匹配到就過來這里，告你沒有找到對應的資源
app.use((req, res, next) => { //app.use就是指定匹配路由
// 為客戶端響應404狀態碼以及提示信息
res.status(404).send('當前訪問的頁面是不存在的')
})
// 監聽端口
app.listen(3000);
console.log('網站服務器啟動成功');
錯誤處理中間件
在程序執行的過程中，不可避免的會出現一些無法預料的錯誤，比如文件讀取失敗，數據庫連接失敗。
錯誤處理中間件是一個集中處理錯誤的地方。它接收從別的地方丟過來的錯誤
當程序出現錯誤時，調用next()方法，並且將錯誤信息通過參數的形式傳遞給next()方法，即可觸發錯誤處理中間件。
如何定義一個錯誤處理中間件？
- 丟與普通的錯誤還有支持Promise Api的異步代碼如何捕獲並且丟給處理中間件？
// 引入express框架
const express = require('express');
const fs = require('fs');
// 創建網站服務器
const app = express();
//注意！我們的錯誤有兩種，一種是同步的錯誤，一種是異步的錯誤，處理方式是不一樣的。異步錯誤可以
//通過回調函數捕獲，也可以通過try catch捕獲。但是這個不能捕獲其他的api
app.get('/index', (req, res, next) => {
// throw new Error('程序發生了未知錯誤')
fs.readFile('./01.js', 'utf8', (err, result) => {
if (err != null) {
next(err)//這個就是異步的解決方式 如果發生了錯誤就把這個erro傳出去給錯誤處理中間件
} else {
res.send(result)
}
})
// res.send('程序正常執行')
})
// 錯誤處理中間
app.use((err, req, res, next) => {
res.status(500).send(err.message);
})
// 監聽端口
app.listen(3000);
console.log('網站服務器啟動成功');
- 異步函數錯誤怎么捕獲？和處理，注意它不能捕獲其他的錯誤
// 引入express框架
const express = require('express');
const fs = require('fs');
const promisify = require('util').promisify;
// 這個的把原理的方法包裝了起來，放回一個方法
const readFile = promisify(fs.readFile);
// 創建網站服務器
const app = express();
app.get('/index', async(req, res, next) => {
try {
await readFile('./aaa.js')
} catch (ex) {
next(ex); //把這個錯誤傳遞走
}
})
// 錯誤處理中間
app.use((err, req, res, next) => {
res.status(500).send(err.message);
})
// 監聽端口
app.listen(3000);
console.log('網站服務器啟動成功');
(三) 路由
構建模塊化路由的基礎代碼
我們希望把路由分離出去，某些頁面的業務處理邏輯是不同的路由
簡單的創建
// 引入express框架
const express = require('express');
// 創建網站服務器
const app = express();
// 創建路由對象
const home = express.Router();
// app.use是一個中間件
// 為路由對象匹配請求路徑
app.use('/home', home);
// 創建二級路由
home.get('/index', (req, res) => {
res.send('歡迎來到博客首頁頁面')
})
// 端口監聽
app.listen(3000);
構建模塊化路由
這里指的是把路由分離出去
主要的代碼
- hoem.js路由
const express = require('express');
const home = express.Router();
home.get('/index', (req, res) => {
res.send('歡迎來到博客首頁頁面')
});
module.exports = home;
- admin.js路由
const express = require('express');
const admin = express.Router();
admin.get('/index', (req, res) => {
res.send('歡迎來到博客管理頁面')
});
module.exports = admin;
- app.js路由
// 引入express框架
const express = require('express');
// 創建網站服務器
const app = express();
const home = require('./route/home');
const admin = require('./route/admin');
// 配置模塊化路由
app.use('/home', home);
app.use('/admin', admin);
// 端口監聽
app.listen(3000);
(四) 關於請求的數據處理
兩個對比，一個是原生的實現一個是框架的實現
如何獲取get請求參數
req.query即可獲取GET參數，框架內部會將GET參數轉換為對象並返回。
語法結構
// 接收地址欄中問號后面的參數
// 例如: http://localhost:3000/?name=zhangsan&age=30
app.get('/', (req, res) => {
console.log(req.query); // {"name": "zhangsan", "age": "30"}
});
如何獲取post請求參數
Express中接收post請求參數需要借助第三方包 body-parser
語法結構
// 引入body-parser模塊
const bodyParser = require('body-parser');
// 配置body-parser模塊，攔截所有請求，會把請求轉化為對象，然后給這日些對象添加一個屬性這個屬性叫body。這個extended:false參數是false的時候說明 先用queryString系統模塊對參數處理一遍。true的時候使用名為QS的第三方模塊 把請求轉化為對象
// bodyParser.urlencoded({ extended: false })放回的一個函數
app.use(bodyParser.urlencoded({ extended: false }));
// 接收請求
app.post('/add', (req, res) => {
// 接收請求參數
console.log(req.body);
})
app.use()里的形參是一個函數~
驗證代碼
// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 創建網站服務器
const app = express();
// 這個是一個對象，里面是的a是2 {a :2}
app.use(fn({ a: 2 })) //user可以直接使用函數
function fn(obj) {
return function(req, res, next) {
if (obj.a == 1) {
console.log(req.url)
} else {
console.log(req.method)
}
next() //移交控制權
}
}
//路由
app.get('/', (req, res) => {
// 接收post請求參數
res.send('ok')
})
// 端口監聽
app.listen(3000);
路由參數(這個也是一個請求的處理解析函數)
這個比較好用，專門拿來做get的參數處理
這個是比較nb的東西，也是處理請求參數
// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 創建網站服務器
const app = express();
// 這額： id： name實際上是一個占位符號
app.get('/index/:id/:name/:age', (req, res) => {
// 接收post請求參數。這個屬性 是expers框架下的構建的，parmas存儲的就是一個值對象
res.send(req.params) // 你拿到的是{ id：123 ，name：laoli，age：18 }
})
//你的發送格式： localhost:3000/index/123/laoli/18
// 端口監聽
app.listen(3000);