nodeJS express路由學習req.body與req.query方法實例詳解

Posted on by

引言

所謂 路由 就是根據不同的 url 地址展示不同的內容或頁面

形象點 舉個栗子🌰：

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

你輸入一串號碼，就可以撥號給指定的聯系人

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

假如我們有一臺提供 Web 服務的服務器的網絡地址是192.168.1.66:8080 然後我們的服務器下掛載有如下一個資源

192.168.1.66:8080/home.html 假設這個url是訪問網站主頁

192.168.1.66:8080/about.html 假設這個url是訪問內容詳情

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

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

路由發展到今天 可以分為前端路由和後端路由 該內容瞭解即可

前端路由

隨著前後端分離的web開發模式出現，前端出現SPA單頁面應用，這個SPA單頁面應用就需要用路由進行頁面內容切換。

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

這種路由規則中需要帶上 #。服務器並不會解析 hash，也就是說 # 後的內容 Web 服務都會自動忽略，但是 JavaScript 是可以通過 window.location.hash 讀取到的，讀取到路徑加以解析之後就可以響應不同路徑的邏輯處理。

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

也就是說，前端路由有兩種實現方式：

hash

history

學過VUE的童鞋應該非常熟悉路由，特別是vue-router

後端路由

這個就沒什麼好說的瞭，以前沒有前後端分離，全是後端路由主導。

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

當然現在的後端路由比較偏向後臺網絡接口這些，供前端發起Ajax請求拿數據。

Express路由教學

在 Express 中，路由指的是客戶端的請求與服務器處理函數之間的映射關系。

一個Express路由長這樣：

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

參數解析：

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

上一張黑馬的圖 形象展示 路由匹配過程(黑馬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表單，方便發起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頁面掛載到服務器下

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

運行效果：

可以看到，服務器路由成功路由到瞭不同的url請求，

但是這裡似乎出現瞭一個小小的bug

······

詳解req處理數據的方法

我們的post路由在req處理前端發來的數據時，無法用req.query獲取前端發送來的數據

因為提交數據的鍵值對在請求的body中，默認是underfined

要解決這個問題很簡單

首先我們要知道，express提供有如下幾個方法，用於處理前端請求 發來數據

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

2,req.query 常用於get

3,req.params 常用於post

4,req.param 已經不被express官方推薦使用瞭

這裡隻講 1 和 2

req.query

首先 query用於get請求

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

那麼通過query可以得到?後面的鍵值對參數，

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

req.body

而我們post請求提交數據的鍵值對是在請求的body中，且默認是underfined,

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

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

話不多，直接上操作：

npm install body-parser

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

有瞭以上兩步小操作，從此隨心所欲的用req.body操作post數據

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

const express = require('express')
const app = express()
//對body-parser進行配置
const bodyParser = require('body-parser');
//設置完畢之後，會在req對象上面新增一個req.body的一個對象
app.use( bodyParser.urlencoded({extended: true}) )
// 掛載靜態資源，使之同源不跨域，方便測試
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 ')
})

以上就是nodeJS express路由學習req.body與req.query方法實例詳解的詳細內容，更多關於nodeJS express路由方法的資料請關註WalkonNet其它相關文章！

推薦閱讀：