vue前端向后端传递参数

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接收参数