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

快捷導(dǎo)航

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

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

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

引言

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

形象點舉個栗子??：

電話的撥號界面咱們都見過都使用過

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

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

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

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

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

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

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

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

前端路由

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

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

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

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

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

hash

history

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

后端路由

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

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

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

Express路由教學(xué)

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

一個Express路由長這樣：

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

參數(shù)解析：

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

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

GET/POST路由演示

const express = require('express')
const app = express()
// 這是一個get路由 地址：http://192.168.123.53:80/myget 需用get請求
app.get('/myget', (req,res) => {
    console.log(req.query)
    console.log("這是get路由,你好 router")
})
// 這是一個post路由 地址：http://192.168.123.53:80/mypost 需用post請求
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 ')
})

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

<!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頁面掛載到服務(wù)器下

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

運行效果：

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

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

······

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

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

因為提交數(shù)據(jù)的鍵值對在請求的body中，默認(rèn)是underfined

要解決這個問題很簡單

首先我們要知道，express提供有如下幾個方法，用于處理前端請求發(fā)來數(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請求

舉個常見的get請求 http://127.0.0.1:8080/myget?id=2&name=binbin

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

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

req.body

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

你可以用body-parser或者multer來解析

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

話不多，直接上操作：

npm install body-parser

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

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

上終極版后臺代碼，完美無bug：

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