vue中傳參params和data的區(qū)別
1、使用data傳參
前端請求方式為post
import request from '@/utils/request'
// 新增banner
export function saveBanner(data){
return request({
url:'/system/banner/saveBanner',
method:'post',
data:data
})
}
后端接口接收
/**
* 保存導(dǎo)航圖
*
* @param sysBanner
* @return
*/
@PostMapping("/saveBanner")
public AjaxResult saveBanner(@RequestBody SysBanner sysBanner) {
return sysBannerService.saveBanner(sysBanner);
}
2、使用params傳參
前端請求
//查詢導(dǎo)航圖列表信息
export function getBannerList(query){
return request({
url: '/system/banner/list',
method: 'get',
params: query
})
}
后端接收
- 接收時(shí)的請求方式為GetMapping
- 并且入?yún)⒁膊恍枰狜RequestBody注解
3、總而言之
如果前端請求的方式是 post，并且后端的HTTP請求為 @PostMapping，那么后端的參數(shù)上面要寫 @RequestBody ，而且前端傳遞參數(shù)的時(shí)候要寫 data，因?yàn)槭?Json 傳參。 因?yàn)橛胮ost請求使用data傳參的時(shí)候，參數(shù)是放在請求體中的，所以地址欄上也不顯示具體的參數(shù)。
如果是以get形式的傳參，并且傳的是一個(gè)對象，就用params，他會(huì)把你參數(shù)的內(nèi)容 最后分散到你地址欄后面的問號(hào)（？）后面，如上面的例子最后的地址就是：http://localhost:8888/user/list/1/20?name=zhansan
到此這篇關(guān)于vue中傳參params和data的區(qū)別的文章就介紹到這了,更多相關(guān)vue 傳參params和data內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
vue中elementUI表單循環(huán)驗(yàn)證方式
這篇文章主要介紹了vue中elementUI表單循環(huán)驗(yàn)證方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
解決Element中el-date-picker組件不回填的情況
這篇文章主要介紹了解決Element中el-date-picker組件不回填的情況，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
element ui中表單el-form的label如何設(shè)置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3 構(gòu)建 Web Components使用詳解
這篇文章主要為大家介紹了Vue3 構(gòu)建 Web Components使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
基于VUE實(shí)現(xiàn)判斷設(shè)備是PC還是移動(dòng)端
這篇文章主要介紹了基于VUE實(shí)現(xiàn)判斷設(shè)備是PC還是移動(dòng)端,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
vue3中Fragment特性的一個(gè)bug需要注意事項(xiàng)
這篇文章主要介紹了vue3中Fragment特性的一個(gè)bug，需要留意的注意事項(xiàng)示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-01-01
vue中利用simplemde實(shí)現(xiàn)markdown編輯器（增加圖片上傳功能）
這篇文章主要介紹了vue中利用simplemde實(shí)現(xiàn)markdown編輯器（增加圖片上傳功能）,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04