腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

nodeJS?express路由學(xué)習(xí)req.body與req.query方法實(shí)例詳解

更新時(shí)間：2022年09月26日 15:15:00 作者：冰鎮(zhèn)生鮮

這篇文章主要為大家介紹了nodeJS?express路由學(xué)習(xí)req.body與req.query方法實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

所謂路由就是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁(yè)面

形象點(diǎn) 舉個(gè)栗子??：

電話的撥號(hào)界面咱們都見過都使用過

你輸入一串號(hào)碼，就可以撥號(hào)給指定的聯(lián)系人

路由也是這個(gè)道理，你請(qǐng)求不同的 url 地址，服務(wù)器給你展示不同的內(nèi)容或頁(yè)面。

假如我們有一臺(tái)提供 Web 服務(wù)的服務(wù)器的網(wǎng)絡(luò)地址是192.168.1.66:8080 然后我們的服務(wù)器下掛載有如下一個(gè)資源

192.168.1.66:8080/home.html 假設(shè)這個(gè)url是訪問網(wǎng)站主頁(yè)

192.168.1.66:8080/about.html 假設(shè)這個(gè)url是訪問內(nèi)容詳情

192.168.1.66:8080/person.html 假設(shè)這個(gè)url是訪問個(gè)人主頁(yè)

那么這個(gè)時(shí)候，你只要在瀏覽器地址欄輸入不同地址，就可以路由到不同頁(yè)面

路由發(fā)展到今天可以分為前端路由和后端路由 該內(nèi)容了解即可

前端路由

隨著前后端分離的web開發(fā)模式出現(xiàn)，前端出現(xiàn)SPA單頁(yè)面應(yīng)用，這個(gè)SPA單頁(yè)面應(yīng)用就需要用路由進(jìn)行頁(yè)面內(nèi)容切換。

在 HTML5 的 history API 出現(xiàn)之前，前端的路由都是通過 hash 來(lái)實(shí)現(xiàn)的，hash 能兼容低版本的瀏覽器。

這種路由規(guī)則中需要帶上 #。服務(wù)器并不會(huì)解析 hash，也就是說(shuō) # 后的內(nèi)容 Web 服務(wù)都會(huì)自動(dòng)忽略，但是 JavaScript 是可以通過 window.location.hash 讀取到的，讀取到路徑加以解析之后就可以響應(yīng)不同路徑的邏輯處理。

而history 是 HTML5 才有的新 API，可以用來(lái)操作瀏覽器的 session history。

也就是說(shuō)，前端路由有兩種實(shí)現(xiàn)方式：

hash

history

學(xué)過VUE的童鞋應(yīng)該非常熟悉路由，特別是vue-router

后端路由

這個(gè)就沒什么好說(shuō)的了，以前沒有前后端分離，全是后端路由主導(dǎo)。

無(wú)論是jsp，php，還是asp····這些用戶能通過URL訪問到的頁(yè)面，大多是通過后端路由匹配之后再返回給瀏覽器的。瀏覽器在地址欄中切換不同的URL時(shí)，每次都向后臺(tái)服務(wù)器發(fā)出請(qǐng)求，服務(wù)器響應(yīng)請(qǐng)求，在后臺(tái)拼接html文件返回給前端，并且每次切換頁(yè)面時(shí)，瀏覽器都會(huì)刷新頁(yè)面。

當(dāng)然現(xiàn)在的后端路由比較偏向后臺(tái)網(wǎng)絡(luò)接口這些，供前端發(fā)起Ajax請(qǐng)求拿數(shù)據(jù)。

Express路由教學(xué)

在 Express 中，路由指的是客戶端的請(qǐng)求與服務(wù)器處理函數(shù)之間的映射關(guān)系。

一個(gè)Express路由長(zhǎng)這樣：

express實(shí)例對(duì)象.請(qǐng)求方法("請(qǐng)求路徑",處理函數(shù)(請(qǐng)求對(duì)象req,響應(yīng)對(duì)象res))

參數(shù)解析：

express實(shí)例對(duì)象來(lái)自 const app = new express(); 這個(gè)app就是實(shí)例對(duì)象
請(qǐng)求方法常見的有 GET、POST
請(qǐng)求路徑相對(duì)路徑就好比如 /home
處理函數(shù)就是我們熟知的http內(nèi)置模塊那些

上一張黑馬的圖形象展示路由匹配過程(黑馬yyds??)

GET/POST路由演示

const express = require('express')
const app = express()
// 這是一個(gè)get路由 地址：http://192.168.123.53:80/myget 需用get請(qǐng)求
app.get('/myget', (req,res) => {
    console.log(req.query)
    console.log("這是get路由,你好 router")
})
// 這是一個(gè)post路由 地址：http://192.168.123.53:80/mypost 需用post請(qǐng)求
app.post('/mypost', (req,res) => {
    console.log(req.query)
    console.log("這是post路由,你好 router")
})
app.listen(80, () => {
    console.log('express server running at http://192.168.123.53:80/form.html ')
})

為了更加直觀的看到這兩個(gè)路由，我們寫個(gè)前端頁(yè)面，簡(jiǎn)單的form表單，方便發(fā)起post和get請(qǐng)求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表單 方便post get</title>
</head>
<body>
    <form method="get" action="http://192.168.123.53:80/myget">
        姓名：<input type="text" name="name">
        <input type="submit" value="get提交表單">
    </form>
<hr>
    <form method="post" action="http://192.168.123.53:80/mypost">
        愛好<input type="text" name="hobby">
        <input type="submit" value="post提交表單">
    </form>
</body>
</html>

并且在之前的nodeJS代碼中添加一行代碼，將html頁(yè)面掛載到服務(wù)器下

// 掛載靜態(tài)資源，使之同源不跨域，方便測(cè)試
app.use(express.static('public'))

運(yùn)行效果：

可以看到，服務(wù)器路由成功路由到了不同的url請(qǐng)求，

但是這里似乎出現(xiàn)了一個(gè)小小的bug

······

詳解req處理數(shù)據(jù)的方法

我們的post路由在req處理前端發(fā)來(lái)的數(shù)據(jù)時(shí)，無(wú)法用req.query獲取前端發(fā)送來(lái)的數(shù)據(jù)

因?yàn)樘峤粩?shù)據(jù)的鍵值對(duì)在請(qǐng)求的body中，默認(rèn)是underfined

要解決這個(gè)問題很簡(jiǎn)單

首先我們要知道，express提供有如下幾個(gè)方法，用于處理前端請(qǐng)求發(fā)來(lái)數(shù)據(jù)

1,req.body 極佳的選擇，但需要導(dǎo)入第三方body-parse模塊才可使用

2,req.query 常用于get

3,req.params 常用于post

4,req.param 已經(jīng)不被express官方推薦使用了

這里只講 1 和 2

req.query

首先 query用于get請(qǐng)求

舉個(gè)常見的get請(qǐng)求 http://127.0.0.1:8080/myget?id=2&name=binbin

那么通過query可以得到?后面的鍵值對(duì)參數(shù)，

讓我們回顧一下前面的代碼就可以形象理解了：

req.body

而我們post請(qǐng)求提交數(shù)據(jù)的鍵值對(duì)是在請(qǐng)求的body中，且默認(rèn)是underfined,

你可以用body-parser或者multer來(lái)解析

但是解析body不是nodejs默認(rèn)提供的，你需要載入body-parser中間件才可以使用req.body；

話不多，直接上操作：

npm install body-parser

//對(duì)body-parser進(jìn)行配置
const bodyParser = require('body-parser');
//設(shè)置完畢之后，會(huì)在req對(duì)象上面新增一個(gè)req.body的一個(gè)對(duì)象
app.use( bodyParser.urlencoded({extended: true}) )

有了以上兩步小操作，從此隨心所欲的用req.body操作post數(shù)據(jù)

上終極版后臺(tái)代碼，完美無(wú)bug：

const express = require('express')
const app = express()
//對(duì)body-parser進(jìn)行配置
const bodyParser = require('body-parser');
//設(shè)置完畢之后，會(huì)在req對(duì)象上面新增一個(gè)req.body的一個(gè)對(duì)象
app.use( bodyParser.urlencoded({extended: true}) )
// 掛載靜態(tài)資源，使之同源不跨域，方便測(cè)試
app.use(express.static('public'))
// 這是一個(gè)get路由 地址：http://192.168.123.53:80/myget 需用get請(qǐng)求
app.get('/myget', (req,res) => {
    console.log(req.query)
    console.log("這是get路由,你好 router")
})
// 這是一個(gè)post路由 地址：http://192.168.123.53:80/mypost 需用post請(qǐng)求
app.post('/mypost', (req,res) => {
    console.log(req.body)
    console.log("這是post路由,你好 router")
})
app.listen(80, () => {
    console.log('express server running at http://192.168.123.53:80/form.html ')
})