容易混淆-論query和params在前后端中的區別

lentrue 發布于2019-08-23 17:03 / 1368人閱讀

摘要：前言最近在學，試著做一個前后端都有的項目然后就遇到了和這倆兄弟你說他們倆長得也不像吧可這用法實在是太類似了這不，專門寫篇文章來區分這哥倆分別會從路由和接收兩個角度講路由中的傳參假設我們現在需要實現一個路由切換，點擊之切換到組件并傳遞一個值和

前言

最近在學node，試著做一個前后端都有的項目
然后就遇到了query和parmas這倆兄弟
你說他們倆長得也不像吧
可這用法實在是太類似了
這不，專門寫篇文章來區分這哥倆
分別會從vue路由和Node接收兩個角度講

vue路由中的傳參

假設我們現在需要實現一個路由切換，點擊之切換到W組件
并傳遞一個id值和一個age值

我們運用router-link來寫
然后一連串的疑惑就產生了



routes:{ ??? }

對于query和parmas來說

A用name還是path？

routes要怎么寫？

url長什么樣？

會有什么隱藏的坑么

query：

name和path都可以用

前者的routes基于name設置

{
  path: "/hhhhhhh", //這里可以任意
  name: "W",  //這里必須是W
  component: W
}

然后就把path匹配添加到url上去

http://localhost:8080/#/hhhhhhh?id=1234&age=12

后者基于path來設置routes

{
  path: "/W", //這里必須是W
  name: "hhhhhhhh",  //這里任意
  component: W
}

url:

http://localhost:8080/#/W?id=1234&age=12

這兩種方法，都可以自定義path的樣式，
不過一個是在router-link to里面定義，一個則是在routes里面定義

在接收參數的時候都是使用this.$route.query.id

parmas：

這里只能用name不能用path，不然會直接無視掉params中的內容

然后在routes中添加

{
      path:"/W/:id/:age",
      name:"W",
      component:W
}

這里的name與上面router-link中的name保持一致

url就取決于這個path的寫法

http://localhost:8080/#/W/1234/12

注意，path里面的/w可以任意寫，寫成/hhhhh也可以
但是！
/:id和/:age不能省略，且不能改名字

不寫的話，第一次點擊可以實現組件跳轉
且可以通過this.$route.parmas.id獲取到傳過來的id值，但如果
刷新頁面，傳過來的id值和age值就會丟失

從這也能看出params比query嚴格

Node中的req.query和req.params

在后端中，要接受前端的axios請求
于是我們又碰到了這哥倆

什么樣的axios請求對應什么樣的接受方式？
還有不止是req.query,req.params,又混進來一個req.body
好家伙，亂成一鍋粥

假設前端現在用axios向后端發送一個請求，發送id值請求后端的數據

req.query

axios.get(`/api/?id=1234`)

或者

axios.get(`/api`，{ params:{id:"1234" })

在前端里面，router怎么發送的就怎么收
query發送的就用this.$route.query接收
params發送的就用this.$route.params接收

但是在這里，雖然第二種方式里面有params
但這兩種我們都要用req.query.id來獲取里面的id值

router.get("/api",function(req,res){
console.log(req.query.id)
.......
})

req.params

那如果直接把id值寫進發送的url里面呢

axios.get(`/api/1234`)

看這個形式有沒有覺得很眼熟
它跟上面params的url非常像
我們就反向操作一下

router.get("/api/:id",function(req,res){
    console.log(req.params.id)
    .......
    })

如果它是這么請求的

axios.get(`/api/1234-12`)

中間用-或者&隔開
那我們也可以在獲取時的路徑上這么寫

router.get("/api/:id-:age",function(req,res){
    console.log(req.params.id)
    console.log(req.params.age)
    .......
    })

req.body

上面兩個都是處理get請求的
而這位小兄弟就是用來處理post請求的
(需要安裝body-parser中間件）

axios.post(`/api`,{ id:"1234" })

我們就用req.body來接收

router.get("/api",function(req,res){
console.log(req.body.id)
.......
})

總結

我們歸納了query和params在前端路由以及后端接收中的區別
容易混淆的東西還是得多寫，多總結

希望這篇文章對大家分清它們的使用場景有所幫助

GPU云服務器云服務器容易混淆的問題騰訊云服務器1核2g和2核4g區別在哪里 php在html中的在linux中的作用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103738.html

論驗證碼安全性

摘要：驗證碼的作用就是為了強制人機交互，但是幾乎所有的圖片驗證碼都存在安全性問題，可以被機器輕易破解。現在主流的驗證碼識別技術就是圖像識別，如果說我做一個無圖驗證碼是不是就能很大程度上防止機器破解呢沒錯，就是驗證碼。驗證碼的作用就是為了強制人機交互，但是幾乎所有的圖片驗證碼都存在安全性問題，可以被機器輕易破解。現在主流的驗證碼識別技術就是圖像識別，如果說我做一個無圖驗證碼是不是就能很大程度...

SolomonXie 2019-08-19 18:10 評論0 收藏0
Dva + Ant Design 前后端分離之 React 應用實踐

摘要：數據緩存對于一個應用來說，緩存是很重要的一步。所以，比較常見的方法就是將數據緩存在中。什么時候做數據緩存例用戶信息緩存參見在中配置了檢測中的是否存在。源站鏈接 https://tkvern.com 繼 Rails 從入門到完全放棄擁抱 Elixir + Phoenix + React + Redux 這篇文章被噴之后，筆者很長一段時候沒有上社區逛了。現在 tkvern 又回歸了，給...

tainzhi 2019-08-20 14:03 評論0 收藏0
Nuxt.js 基礎入門教程

摘要：原文鏈接開發一個單頁面應用，相信很多前端工程師都已經學會了，但是單頁面應用有一個致命的缺點，就是極不友好。基于它，我們可以快速開發一個基于的單頁面應用。只有數據流存在相關配置時可用。引入后，所有頁面均有效。原文鏈接 Vue 開發一個單頁面應用，相信很多前端工程師都已經學會了，但是單頁面應用有一個致命的缺點，就是 SEO 極不友好。除非，vue 能在服務端渲染（ssr）并直接返回已經渲...

yedf 2019-08-26 11:37 評論0 收藏0
前后端通訊的幾種方式

摘要：使用方法服務器接收其它類型的事件服務器端中在傳輸數據時將頭中的設置為使用方法屬性使用二進制的數據類型連接服務器選擇的下屬協議只讀鏈接狀態只讀未發送至服務器的字節數只讀服務器選擇的擴展只讀關閉前的回調函數連接失敗后的回調函數從服務器接受到 EventSource 使用方法 var evtSource = new EventSource(url); // 服務器URL 接收 evtSour...

U2FsdGVkX1x 2019-08-23 13:07 評論0 收藏0