vue前端如何向后端传递参数
短信预约 -IT技能 免费直播动态提醒
前端向后端传递参数
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是我们传递过来的值
passpost方法传参
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,})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
