vue前端如何向后端傳遞參數(shù)

更新時(shí)間：2022年06月01日 10:27:18 作者：瘋狂的小強(qiáng)呀

這篇文章主要介紹了vue前端如何向后端傳遞參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

前端向后端傳遞參數(shù)

get方法傳參

get方法傳參，我們只需要把要傳遞的參數(shù)拼接到要發(fā)送的路徑地址后面。

實(shí)例

前端：

export default {
? data () {
? ? return {
? ? ? name: "david", //要傳遞的值1
? ? ? age: 20, //要傳遞的值2
? ? }
? },
? methods: {
? //在method里面定義一個(gè)向后端傳遞參數(shù)的方法，我這里使用的是async await方法向后端傳遞參數(shù)（注：async await是配套使用的）,'http://localhost:33333/api/'是我后端接收參數(shù)的地址
? ? async fetch() {
? ? ? const { data: resp } = await this.$http.get('http://localhost:33333/api/'+this. param1+'/'+this. param2);
? ? ? if (resp == 400) return this.$message.error(resp.msg);//對(duì)于返回值做了一個(gè)處理
? ? },
? },
}

后端：

@router.get('/api/{name}/{age}')
def Search(name,age):
? ? #name,age是我們傳遞過(guò)來(lái)的值
? ? pass

post方法傳參

post方法允許我們定義并傳遞一個(gè)參數(shù)對(duì)象，在傳值的時(shí)候我們可以一眼就看出自己傳遞的參數(shù)

實(shí)例

export default {
? data () {
? ? return {
? ? ? params:{
? ? ? ?name: "david", //要傳遞的值1
? ? ? ?age: 20, //要傳遞的值2
? ? ? }?
? ? }
? },
? methods: {
? //在method里面定義一個(gè)向后端傳遞參數(shù)的方法，我這里使用的是async await方法向后端傳遞參數(shù)（注：async await是配套使用的）,'http://localhost:33333/api/'是我后端接收參數(shù)的地址
? ? async fetch() {
? ? ? const { data: resp } = await this.$http.post('http://localhost:33333/api/',this.params);
? ? ? if (resp == 400) return this.$message.error(resp.msg);//對(duì)于返回值做了一個(gè)處理
? ? },
? },
}

后端：

class QueryForm(BaseModel):
? ? name:str=""
? ? age:int=0
? ??
@router.post('/api/')
def Search(form:QueryForm):
? ? #這里我們定義了一個(gè)和前端傳遞過(guò)來(lái)的一樣的參數(shù)類型的form用來(lái)接收前端傳遞過(guò)來(lái)的值
? ? pass

溫馨提示：傳遞參數(shù)的時(shí)候我們要注意前后端一致，前端用post傳遞參數(shù)，后端用post接收參數(shù)；前端用get傳遞參數(shù)，后端用get接收參數(shù)

vue前后端傳參問(wèn)題

前后端可通過(guò)get方式或者post方式連接

get方式傳參，可以使用header傳參

this.$axios .get("路由地址"+"?參數(shù)1=參數(shù)1值&參數(shù)2="+參數(shù)2值)

post方式傳參，可以body傳參，也可以使用params傳參

body傳參：this.$axios({methos:"post" url:"路由地址" data:{參數(shù)1："參數(shù)1值",參數(shù)2："參數(shù)2值"}})
params傳參：const params = {{參數(shù)1："參數(shù)1值",參數(shù)2："參數(shù)2值"}; this.$axios({methos:"post" url:"路由地址",params:params,})

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: