广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue前端如何向后端传递参数
  • 699
分享到

vue前端如何向后端传递参数

2024-04-02 19:04:59 699人浏览 泡泡鱼
摘要

目录前端向后端传递参数get方法传参post方法传参Vue前后端传参问题前端向后端传递参数 get方法传参 get方法传参,我们只需要把要传递的参数拼接到要发送的路径地址后面。 实例

前端向后端传递参数

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,})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue前端如何向后端传递参数

本文链接: https://www.lsjlt.com/news/150322.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作