這幾天天天搞到這么晚，我看今天的內(nèi)容看起不多啊，不知道為什么學(xué)著學(xué)著就到了這么晚。今天的內(nèi)容還是有點(diǎn)多哈，有點(diǎn)自我矛盾了，再次一一道來。
首先今天先看到路由的概念，什么叫做路由？
路由就是映射關(guān)系，在express中路由指的是客戶端請(qǐng)求和服務(wù)器處理函數(shù)的映射關(guān)系，路由有三部分組成：請(qǐng)求類型、請(qǐng)求url和處理函數(shù)。
app.get(url，callback)其實(shí)就跟我們前面所說的監(jiān)聽事件一樣一一樣的。
const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.send('收到get請(qǐng)求')
})
app.listen(80, () => console.log('express server running at http://127.0.0.1'))
這就是一個(gè)最簡單的路由。路由的匹配過程，每當(dāng)一個(gè)請(qǐng)求到達(dá)服務(wù)器器后，需要先經(jīng)過路由匹配，當(dāng)請(qǐng)求類型和url匹配成功后才會(huì)調(diào)用后面的請(qǐng)求函數(shù)。、
用法
最簡單的用法就是像我們上面那樣直接掛在實(shí)例上，這也是不推薦的，因?yàn)橐粋€(gè)請(qǐng)求就要掛一個(gè)很麻煩很繁瑣。
科學(xué)的方法應(yīng)該是創(chuàng)建路由模塊。
分為五個(gè)步驟：
分別是創(chuàng)建路由js文件、調(diào)用express.Router創(chuàng)建路由對(duì)象、掛載路由、向外導(dǎo)出路有對(duì)象最后我們的入口文件需要導(dǎo)入，在通過app.use去注冊
// 1.導(dǎo)入express
const express = require('express')
// 2.創(chuàng)建路由對(duì)象
const router = express.Router()
// 3.掛載路由
// 3.1掛載路由獲取用戶的信息
router.get('/user/:id', (req, res) => {
res.send(req.params)
})
// 3.2掛載路由接受用戶發(fā)送的請(qǐng)求
router.post('/post', (req, res) => {
res.send('post成功')
})
// 4.向外共享路由成員
module.exports = {
express,
router
}
const express = require('./02模塊化路由')
const app = express.express()
// 注冊路由
app.use(express.router)
app.listen(80, () => console.log('express server running at http://127.0.0.1'))
這里說一下app.use昨天也看到了，他其實(shí)就是一個(gè)用來注冊全局中間件的。然后我們還可以為路由掛載前綴，也是通過app.use來添加方法同昨天基本一樣
中間件
指的是業(yè)務(wù)流程的中間處理環(huán)節(jié)。
就是當(dāng)客戶請(qǐng)求到達(dá)服務(wù)器后，可連續(xù)調(diào)用多個(gè)中間件對(duì)這個(gè)請(qǐng)求進(jìn)行預(yù)處理，最后通過路由發(fā)送出來。
中間件的本質(zhì)是一個(gè)函數(shù)根路有類似但是多了一個(gè)參數(shù)，next參數(shù)。
next是一個(gè)函數(shù)它的作用就是實(shí)現(xiàn)多個(gè)中間件連續(xù)調(diào)用的關(guān)鍵，把流轉(zhuǎn)關(guān)系轉(zhuǎn)給下一個(gè)中間件或者路由，每個(gè)中間件都有一個(gè)next一個(gè)轉(zhuǎn)下去轉(zhuǎn)到路由沒有了就響應(yīng)給客戶端了。
2.1
我們先看到全局生效的中間件，意思就是客戶發(fā)起的任何請(qǐng)求，他都會(huì)觸發(fā)，直接通過app.use來注冊即可
const express = require('express')
const app = express()
// 中間件
const mw = function(req, res, next) {
// res.send('這是中間件環(huán)節(jié)')
console.log('這是中漸漸環(huán)節(jié)')
next()
}
// 通過app。use定義為全局生效的中間件
app.use(mw)
app.get('/user', (req, res) => {
res.send('這是get請(qǐng)求')
})
app.post('/post', (res, req) => {
res.send('這是一個(gè)post請(qǐng)求')
})
app.listen(80, () => {
console.log('http://127.0.0.1');
})
中間件的作用：
多個(gè)中間件共享同一個(gè)res和req，所以可以在上游的中間件定義好這些對(duì)象，下游直接用包括路由也可以用
怎么來定義多個(gè)全局中間件，直接通過app.use定義多個(gè)即可就像昨天所說的托管靜態(tài)資源，有多個(gè)目錄就注冊多個(gè)
2.2
局部中間件
不是用app.use只對(duì)部分的路由有效，路由 的參數(shù)規(guī)則 也發(fā)生了改變
const express = require('express')
const app = express()
const mw = function(req, res, next) {
req.time = Date.now()
next()
}
app.get('/', mw, (req, res) => {
res.send('局部生效' + req.time)
})
app.get('/user', (req, res) => res.send('沒有生效') + req.time)
app.listen(80, ()=> {
console.log('http://127.0.0.1');
})
定義多個(gè)局部中間件
寫多個(gè)函數(shù)過后在參數(shù)這里可以用逗號(hào)隔開，也可以直接寫一個(gè)數(shù)組
有一個(gè)注意事項(xiàng)：就是一定要在路由之前去注冊中間件，不然路由執(zhí)行完了誰還來執(zhí)行中間件。
2.3
中間件的分類
①應(yīng)用級(jí)別中間件
就是通過get、post、use綁定到app上的中間件
②路由級(jí)別中間件
就是在我們剛才的路由模塊里面來穿插的一個(gè)中間件
③錯(cuò)誤級(jí)別中間件
這個(gè)有點(diǎn)說法
它是專門用來捕獲錯(cuò)誤信息的而且形參變?yōu)榱怂膫€(gè)
他也是唯一一個(gè)卸載路由后面的中間件
const express = require('express')
const { rename } = require('fs')
const app = express()
app.get('/', (req, res) => {
// 1.人為拋出一個(gè)錯(cuò)誤，一旦有錯(cuò)后面的響應(yīng)就不會(huì)執(zhí)行了
throw new Error('服務(wù)器內(nèi)部發(fā)生錯(cuò)誤')
res.send('我不能執(zhí)行出來')
})
// 2.錯(cuò)誤中間件
app.use((err,req,res,next) => {
// 2.1向服務(wù)器打印錯(cuò)誤
console.log(err.message);
// 2.2向客戶端發(fā)送錯(cuò)誤
res.send(err.message)
// 這樣做 好處就是，前面如果發(fā)生了錯(cuò)誤導(dǎo)致了整個(gè)服務(wù)器已經(jīng)崩潰了，什么都執(zhí)行不了了，這樣一來，就可以正常輸出錯(cuò)誤信息，正常執(zhí)行后面代碼
})
app.listen(80, () => console.log('express server running at http://127.0.0.1'))
④內(nèi)置中間件
三個(gè)內(nèi)置的中間件分別是express.static這個(gè)已經(jīng)說過了前面
express.json這是拿來解析json格式數(shù)據(jù)的
express.urlencoded這是拿來解析urlencoded格式數(shù)據(jù)的
后面兩個(gè)一般會(huì)配合req.body來拿請(qǐng)求體數(shù)據(jù)再給他們拿來解析了
const express = require('express')
const app = express()
// 注意這是中間件 所以必須配置到路由之前
app.use(express.json())
app.use(express.urlencoded({extended : false}))
app.post('/', (req, res) => {
// 通過req.body可以拿到請(qǐng)求體數(shù)據(jù)
// postman在測試的時(shí)候選擇body里面的raw再把text選擇json就可以發(fā)送json數(shù)據(jù)了
console.log(req.body);
// 沒有解析之前對(duì)于json數(shù)據(jù)是undefined
})
// 測試urlencoded數(shù)據(jù)體
// 這個(gè)數(shù)據(jù)體的格式是x-www-form-urlencoded
// 固定寫法
app.post('/user', (req, res) => {
// 沒解析前時(shí)空對(duì)象
console.log(req.body);
})
app.listen(80, () => console.log('express server running at http://127.0.0.1'))
⑤第三方中間件 直接npm安裝導(dǎo)入通過app.use注冊即可使用
2.4
自定義中間件
這里做一個(gè)案例自定義一個(gè)類似于express.urlencoded功能的中間件可以解析請(qǐng)求體數(shù)據(jù)
const express = require('express')
const app = express()
// 4.利用node里面的一個(gè)內(nèi)置模塊解析請(qǐng)求體數(shù)據(jù)，在node里面內(nèi)置了一個(gè)querystring模塊是專門用來處理查詢字符串的，這個(gè)模塊提供的
// parse（）函數(shù)可以把查詢字符串轉(zhuǎn)換為對(duì)象
const qs = require('querystring')
// 1.定義中間件
app.use((req, res, next) => {
// 2.監(jiān)聽data事件，因?yàn)榧热皇欠?wù)器，那么肯定會(huì)接收到癩子客戶端的請(qǐng)求，如果有時(shí)候請(qǐng)求量過大，就會(huì)分批次傳給服務(wù)器數(shù)據(jù)，所以data事件可能觸發(fā)多次
// 就需要把每一次的數(shù)據(jù)最后拼接起來
let str = ''
req.on('data', chunk => {
str += chunk
})
// 3.req的end事件當(dāng)請(qǐng)求體接收完畢會(huì)自動(dòng)出發(fā)end事件可以在這里處理完整的請(qǐng)求體數(shù)據(jù)
req.on('end', () => {
console.log(str);
str = qs.parse(str)
console.log(str);
// 5.講解洗出來的對(duì)象給到req.body
req.body = str
next()
})
})
app.post('/', (req, res) => {
res.send(req.body)
})
app.listen(80, () => console.log('http://127.0.0.1'))
然后將自定義中間件進(jìn)行了一個(gè)模塊化
// 4.利用node里面的一個(gè)內(nèi)置模塊解析請(qǐng)求體數(shù)據(jù)，在node里面內(nèi)置了一個(gè)querystring模塊是專門用來處理查詢字符串的，這個(gè)模塊提供的
// parse（）函數(shù)可以把查詢字符串轉(zhuǎn)換為對(duì)象
const qs = require('querystring')
// 因?yàn)閯e人導(dǎo)入進(jìn)來是直接注冊使用所以可以把a(bǔ)pp開服務(wù)器等一些多余的代碼省略就保存app.use里面的
const bodyParse = (req, res, next) => {
// 2.監(jiān)聽data事件，因?yàn)榧热皇欠?wù)器，那么肯定會(huì)接收到癩子客戶端的請(qǐng)求，如果有時(shí)候請(qǐng)求量過大，就會(huì)分批次傳給服務(wù)器數(shù)據(jù)，所以data事件可能觸發(fā)多次
// 就需要把每一次的數(shù)據(jù)最后拼接起來
let str = ''
req.on('data', chunk => {
str += chunk
})
// 3.req的end事件當(dāng)請(qǐng)求體接收完畢會(huì)自動(dòng)出發(fā)end事件可以在這里處理完整的請(qǐng)求體數(shù)據(jù)
req.on('end', () => {
console.log(str);
str = qs.parse(str)
console.log(str);
// 5.講解洗出來的對(duì)象給到req.body
req.body = str
next()
})
}
module.exports = bodyParse
const bodyParse = require('./自定義中間件模塊化')
const express = require('express')
const app = express()
app.use(bodyParse)
app.post('/', (req, res) => {
// res.send('收到get請(qǐng)求')
console.log(req.body);
})
app.listen(80, () => console.log('express server running at http://127.0.0.1'))
我們繼續(xù)看到用express來寫接口
分為了三個(gè)步驟
創(chuàng)建基本服務(wù)器、創(chuàng)建 api路由模塊、編寫get接口
這是路由模塊
// 2.寫api路由模塊 就是將路由模塊化 因?yàn)槟沁呉脒M(jìn)來需要用use來注冊同時(shí)掛載api前綴
const express = require('express')
const router = express.Router()
// 3.編寫get接口
router.get('/get', (req, res) => {
// 3.1首先拿到用戶傳過來的數(shù)據(jù)
let data = req.query
// 3.2把數(shù)據(jù)發(fā)送給客戶端
res.send({
status : 0, // 0表示成功 1表示失敗
msg : 'get請(qǐng)求成功',
data : data //把數(shù)據(jù)返回給客戶端
})
})
// 4.編寫post接口
router.post('/post', (req, res) => {
// 4.1客戶端發(fā)過來的數(shù)據(jù)
let data = req.body
res.send({
status : 0,
msg : 'post請(qǐng)求成功',
data : data
})
})
module.exports = router
其實(shí)主要就是通過req的那幾個(gè)屬性拿到數(shù)據(jù)后，再通過send方法發(fā)給客戶端，下面是入口文件主要就是開啟服務(wù)器，然后解析下數(shù)據(jù)
// 1.創(chuàng)建基本web服務(wù)器
const express = require('express')
const app = express()
// 2.1導(dǎo)入路由模塊 并掛載前綴
const router = require('./router')
// 4.2注冊內(nèi)置中間件 不然req.body解析不出來
app.use(express.urlencoded({extended : false}))
// 5.cors解決跨域
const cors = require('cors')
app.use(cors())
app.use('/api', router)
app.listen(80, ()=> {
console.log('http://127.0.0.1');
})
有些東西要把后面看了才知道哈我只是先拿上來了。
cors和jsonp
我們剛才這個(gè)案例其實(shí)是有bug的，就是有跨域的問題，我們創(chuàng)建一個(gè)html文件通過button來獲取數(shù)據(jù)這個(gè)時(shí)候就會(huì)因?yàn)閰f(xié)議不同而被同源策略組織。
我們前面也說過解決跨域一個(gè)是cors一個(gè)是jsonp，這里肯定不能用jsonp因?yàn)樗恢С謌et，那么怎么來用cors呢？
直接三部曲安裝導(dǎo)入加注冊就解決了跨域問題了，就這么簡單。
4.1
什么是cors
就是由一系列http響應(yīng)頭組成，同源策略碰到這個(gè)頭就會(huì)解除限制。
cors一般是在服務(wù)器進(jìn)行配置，客戶端不需要。
下面是一些了解性內(nèi)容
響應(yīng)頭部：
第一個(gè)res.setHeader（‘Access-Control-Allow-Orign’，‘http：wwwssss。聰明、’）
這是表示只允許后面這個(gè)網(wǎng)站的域來訪問，如果為*那就表示允許任何域來訪問了
第二個(gè)是前面的基礎(chǔ)上為Allow-Headers
我們的cors默認(rèn)值只有9個(gè)請(qǐng)求頭如果超出了這個(gè)九個(gè)頭就必然失敗請(qǐng)求，在這個(gè)九個(gè)之外的可以通過這個(gè)代碼來添加上來
第三個(gè)前面的基礎(chǔ)上-Methods
cors默認(rèn)只支持get post head 除此之外的需要用這個(gè)來設(shè)置。
4.2
現(xiàn)在不是了解內(nèi)容了。
cors請(qǐng)求分類
大體上分為簡單請(qǐng)求和預(yù)檢請(qǐng)求。
什么叫做簡單請(qǐng)求
滿足兩個(gè)條件：
一個(gè)是請(qǐng)求方式在默認(rèn)的三個(gè)之內(nèi)，一個(gè)是http請(qǐng)求頭不能超過默認(rèn)的九個(gè)
什么是預(yù)檢請(qǐng)求
三個(gè)條件達(dá)到其中一種都是
一個(gè)是請(qǐng)求頭在九個(gè)之外，一個(gè)是請(qǐng)求方式在三個(gè)之外，還有一個(gè)就是發(fā)送過來的數(shù)據(jù)是json數(shù)據(jù)
那么他們的區(qū)別是什么呢
很簡單，簡單請(qǐng)求只會(huì)發(fā)送一次請(qǐng)求，而預(yù)檢請(qǐng)求會(huì)發(fā)送兩次請(qǐng)求，為什么？
因?yàn)轭A(yù)檢請(qǐng)求會(huì)在服務(wù)器與客戶端正是連接之前，提前發(fā)一個(gè)option的請(qǐng)求作為預(yù)檢，看服務(wù)器能否跟這個(gè)格式的請(qǐng)求相連接，只有請(qǐng)求成功了才會(huì)開始正式請(qǐng)求，攜帶真實(shí)數(shù)據(jù)。
今天最后一個(gè)內(nèi)容jsonp接口
首先要注意一下，如果說已經(jīng)配置了cors那么必須在配置cors之前去聲明jsonp接口，不然會(huì)錯(cuò)亂的。
做這個(gè)接口之前我們先來回應(yīng)一下jsonp的一個(gè)知識(shí)，首先它是來解決跨域的，我們通過script標(biāo)簽把函數(shù)傳進(jìn)來再去調(diào)用接口這種方式就叫jsonp
// 1.創(chuàng)建基本web服務(wù)器
const express = require('express')
const app = express()
// 2.1導(dǎo)入路由模塊 并掛載前綴
const router = require('./router')
// 4.2注冊內(nèi)置中間件 不然req.body解析不出來
app.use(express.urlencoded({extended : false}))
// 6.jsonp接口必須寫在coes之前
app.get('/api/jsonp', (req, res) => {
// 6.1獲取回調(diào)函數(shù)的名字
let fn = req.query.callback
// 6.2定義你要發(fā)送回去的數(shù)據(jù)對(duì)象
let data = {name : '張三', age : 15}
// 6.3模擬函數(shù)調(diào)用
let fnDiao = `${fn}(${JSON.stringify(data)})`
// 6.4數(shù)據(jù)返回回去
res.send(fnDiao)
})
// 5.cors解決跨域
const cors = require('cors')
const { json } = require('body-parser')
app.use(cors())
app.use('/api', router)
app.listen(80, ()=> {
console.log('http://127.0.0.1');
})
