vue前端向后端传递参数
疯狂的小强呀 人气:4前端向后端传递参数
get方法传参
get方法传参,我们只需要把要传递的参数拼接到要发送的路径地址后面。
实例
前端:
export default { data () { return { name: "david", //要传递的值1 age: 20, //要传递的值2 } }, methods: { //在method里面定义一个向后端传递参数的方法,我这里使用的是async await方法向后端传递参数(注:async await是配套使用的),'http://localhost:33333/api/'是我后端接收参数的地址 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);//对于返回值做了一个处理 }, }, }
后端:
@router.get('/api/{name}/{age}') def Search(name,age): #name,age是我们传递过来的值 pass
post方法传参
post方法允许我们定义并传递一个参数对象,在传值的时候我们可以一眼就看出自己传递的参数
实例
export default { data () { return { params:{ name: "david", //要传递的值1 age: 20, //要传递的值2 } } }, methods: { //在method里面定义一个向后端传递参数的方法,我这里使用的是async await方法向后端传递参数(注:async await是配套使用的),'http://localhost:33333/api/'是我后端接收参数的地址 async fetch() { const { data: resp } = await this.$http.post('http://localhost:33333/api/',this.params); if (resp == 400) return this.$message.error(resp.msg);//对于返回值做了一个处理 }, }, }
后端:
class QueryForm(BaseModel): name:str="" age:int=0 @router.post('/api/') def Search(form:QueryForm): #这里我们定义了一个和前端传递过来的一样的参数类型的form用来接收前端传递过来的值 pass
温馨提示:传递参数的时候我们要注意前后端一致,前端用post传递参数,后端用post接收参数;前端用get传递参数,后端用get接收参数
vue前后端传参问题
前后端可通过get方式或者post方式连接
get方式传参,可以使用header传参
- this.$axios .get("路由地址"+"?参数1=参数1值&参数2="+参数2值)
post方式传参,可以body传参,也可以使用params传参
- body传参:this.$axios({methos:"post" url:"路由地址" data:{参数1:"参数1值",参数2:"参数2值"}})
- params传参:const params = {{参数1:"参数1值",参数2:"参数2值"}; this.$axios({methos:"post" url:"路由地址",params:params,})
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容