The front-end passes parameters to the back-end
The get method passes parameters
The get method passes parameters, we only need to splice the parameters to be passed to the path address to be sent.
Example
front end:
export default {
data () {
return {
name: "david", //The value to be passed 1 age: 20, //The value to be passed 2 }
},
methods: {
//Define a method to pass parameters to the backend in the method. I am using the async await method here to pass parameters to the backend (Note: async await is used in conjunction), 'http://localhost:33333/api/' is the address where my backend receives parameters async fetch() {
const { data: resp } = await this.$('http://localhost:33333/api/'+this. param1+'/'+this. param2);
if (resp == 400) return this.$();//A processing was made to the return value },
},
}rear end:
@('/api/{name}/{age}')
def Search(name,age):
#name,age is the value we passed passPost method pass parameters
The post method allows us to define and pass a parameter object. When passing the value, we can see the parameters we pass at a glance.
Example
export default {
data () {
return {
params:{
name: "david", //The value to be passed 1 age: 20, //The value to be passed 2 }
}
},
methods: {
//Define a method to pass parameters to the backend in the method. I am using the async await method here to pass parameters to the backend (Note: async await is used in conjunction), 'http://localhost:33333/api/' is the address where my backend receives parameters async fetch() {
const { data: resp } = await this.$('http://localhost:33333/api/',);
if (resp == 400) return this.$();//A processing was made to the return value },
},
}rear end:
class QueryForm(BaseModel):
name:str=""
age:int=0
@('/api/')
def Search(form:QueryForm):
#Here we define a form of the same parameter type as the front-end passed by the parameter to receive the value passed by the front-end passWarm reminder: When passing parameters, we should pay attention to the consistency of the front and back ends. The front end uses post to pass parameters, and the back end uses post to receive parameters; the front end uses get to pass parameters, and the back end uses get to receive parameters.
Vue front and back end transmission issues
The front and back ends can be connected through get or post
Get method to pass parameters, you can use the header to pass parameters
- this.$axios.get("Route Address"+"? Parameter 1=Parameter 1 value & Parameter 2="+Parameter 2 value)
Post method to pass parameters, you can pass parameters by body, or use params to pass parameters
- body parameter: this.$axios({methos:"post" url:"Route address" data:{parameter 1: "parameter 1 value", parameter 2: "parameter 2 value"}})
- params pass parameter: const params = {{parameter 1: "parameter 1 value", parameter 2: "parameter 2 value"}; this.$axios({methos:"post" url:"Route address",params:params,})
The above is personal experience. I hope you can give you a reference and I hope you can support me more.