成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

lentrue / 1376人閱讀

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

前言

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

vue路由中的傳參

假設(shè)我們現(xiàn)在需要實(shí)現(xiàn)一個(gè)路由切換，點(diǎn)擊之切換到W組件
并傳遞一個(gè)id值和一個(gè)age值

我們運(yùn)用router-link來寫
然后一連串的疑惑就產(chǎn)生了



routes:{ ??? }

對于query和parmas來說

A用name還是path？

routes要怎么寫？

url長什么樣？

會(huì)有什么隱藏的坑么

query：

name和path都可以用

前者的routes基于name設(shè)置

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

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

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

后者基于path來設(shè)置routes

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

url:

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

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

在接收參數(shù)的時(shí)候都是使用this.$route.query.id

parmas：

這里只能用name不能用path，不然會(huì)直接無視掉params中的內(nèi)容

然后在routes中添加

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

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

url就取決于這個(gè)path的寫法

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

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

不寫的話，第一次點(diǎn)擊可以實(shí)現(xiàn)組件跳轉(zhuǎn)
且可以通過this.$route.parmas.id獲取到傳過來的id值，但如果
刷新頁面，傳過來的id值和age值就會(huì)丟失

從這也能看出params比query嚴(yán)格

Node中的req.query和req.params

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

什么樣的axios請求對應(yīng)什么樣的接受方式？
還有不止是req.query,req.params,又混進(jìn)來一個(gè)req.body
好家伙，亂成一鍋粥

假設(shè)前端現(xiàn)在用axios向后端發(fā)送一個(gè)請求，發(fā)送id值請求后端的數(shù)據(jù)

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

或者

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

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

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

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

那如果直接把id值寫進(jìn)發(fā)送的url里面呢

axios.get(`/api/1234`)

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

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

如果它是這么請求的

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

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

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

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

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

我們就用req.body來接收

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103738.html

相關(guān)文章

  • 論驗(yàn)證碼安全性

    摘要：驗(yàn)證碼的作用就是為了強(qiáng)制人機(jī)交互，但是幾乎所有的圖片驗(yàn)證碼都存在安全性問題，可以被機(jī)器輕易破解?，F(xiàn)在主流的驗(yàn)證碼識(shí)別技術(shù)就是圖像識(shí)別，如果說我做一個(gè)無圖驗(yàn)證碼是不是就能很大程度上防止機(jī)器破解呢沒錯(cuò)，就是驗(yàn)證碼。 驗(yàn)證碼的作用就是為了強(qiáng)制人機(jī)交互，但是幾乎所有的圖片驗(yàn)證碼都存在安全性問題，可以被機(jī)器輕易破解。現(xiàn)在主流的驗(yàn)證碼識(shí)別技術(shù)就是圖像識(shí)別，如果說我做一個(gè)無圖驗(yàn)證碼是不是就能很大程度...

    SolomonXie 評論0 收藏0

  • Dva + Ant Design 前后端分離之 React 應(yīng)用實(shí)踐

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

    tainzhi 評論0 收藏0

  • Nuxt.js 基礎(chǔ)入門教程

    摘要：原文鏈接開發(fā)一個(gè)單頁面應(yīng)用，相信很多前端工程師都已經(jīng)學(xué)會(huì)了，但是單頁面應(yīng)用有一個(gè)致命的缺點(diǎn)，就是極不友好?；谒覀兛梢钥焖匍_發(fā)一個(gè)基于的單頁面應(yīng)用。只有數(shù)據(jù)流存在相關(guān)配置時(shí)可用。引入后，所有頁面均有效。 原文鏈接 Vue 開發(fā)一個(gè)單頁面應(yīng)用，相信很多前端工程師都已經(jīng)學(xué)會(huì)了，但是單頁面應(yīng)用有一個(gè)致命的缺點(diǎn)，就是 SEO 極不友好。除非，vue 能在服務(wù)端渲染（ssr）并直接返回已經(jīng)渲...

    yedf 評論0 收藏0

  • 前后端通訊的幾種方式

    摘要：使用方法服務(wù)器接收其它類型的事件服務(wù)器端中在傳輸數(shù)據(jù)時(shí)將頭中的設(shè)置為使用方法屬性使用二進(jìn)制的數(shù)據(jù)類型連接服務(wù)器選擇的下屬協(xié)議只讀鏈接狀態(tài)只讀未發(fā)送至服務(wù)器的字節(jié)數(shù)只讀服務(wù)器選擇的擴(kuò)展只讀關(guān)閉前的回調(diào)函數(shù)連接失敗后的回調(diào)函數(shù)從服務(wù)器接受到 EventSource 使用方法 var evtSource = new EventSource(url); // 服務(wù)器URL 接收 evtSour...

    U2FsdGVkX1x 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<