Vue3 initiates get and post requests through axios and the corresponding springboot backend reception method

topic

• Preface
• Storage format of parameters in front-end requests
• • application/json
  • multipart/form-data
  • application/x-www-form-urlencoded
• Two ways to send requests by axios
• • Send get request using axios
  • Use axios to send post requests, the backend supports receiving single fields
  • Use axios to send post requests, and the backend receives json objects as a whole
• Summarize
• References

Preface

This week, I am working on a small front-end separate conference system, and the front-end usesVue3, the backend usesSpringboot. I thoughtFront-end interactionIt's very simple, just send data directly. I didn't expect to encounter many problems. Specifically, it is: 1. How should get and post requests be backendPass parameters; 2. The front-end request body is inStorage of parametersWhat are the formats and how should the backend receive for different storage methods? 3. http message headercontent-typeWhat is the function? 4. Character setcodingHow should it be specified;
Next, let’s solve these problems one by one!

Note: There is no need to specify content-type in all requests for axios, that is, the headers object is not required to be passed in the following code. It seems that they will automatically infer based on the parameters you passed in.

Storage format of parameters in front-end requests

Parameters must be passed in front-end interactions. When sending a request, we need to be at the head of the message.headersSpecifycontent-typeproperty. There are three common storage formats for parameters, and they will be analyzed one by one.

application/json

Parametersjson objectThe format sent by the front-end can be directlyjavascriptLanguage objects, backend needs to use@RequestBodyAnnotation receive parameters, cannot be used@RequestParamCome to receive.

advantage

• The front-end sends data easily, just pass the parameter object in

shortcoming

• The backend must have corresponding parameter classes to receive, which is not convenient when only one parameter is transmitted.

  postJson() {
  let config = {
  headers: {‘Content-Type’: “multipart/json, charset=UTF-8”}
  };
  let data = {
  fileName: ‘I love you China’
  };
  this.$axios
  .post(‘/api/file/testconttype’, data, config);
  }

multipart/form-data

form-data is a special data format in the browser. When the data sent by the current end is in form-data format, the storage format of the parameters isParameter name = parameter value & parameter name = parameter value, can be passedRequestParamAnnotation receive parameters.

advantage

• The backend is convenient to receive, and can receive a certain parameter separately

shortcoming

• The front-end parameter object must beFormDataTypes, attributes need to be one by oneappendGo in

  postFormdata() {
  let config = {
  headers: {‘Content-Type’: “multipart/form-data, charset=UTF-8”}
  };
  // formdata object
  let data = new FormData();

  ('fileName', 'I love you China')
  
   this.$axios
   .post('/api/file/testconttype', data)
  

  • 1
  • 2
  • 3
  • 4
  AI writing code

  }

application/x-www-form-urlencoded

Axios uses json format by default, if necessaryx-www-form-urlencodedFormat, you need to useQSLibrary, if you want to know, please search for it yourself. I personally think the above two methods are enough, and you can send it.Single parameter, can also be sentOverall json object。

Two ways to send requests by axios

In vue3 I usedaxiosThe module provides two request methods, namely thegetRequest andpostask. Here we briefly talk about the difference between the two request methods: the parameters of the get request will be bound to the URL, while the parameters of the post request will be placed in the request body.

Send get request using axios

Because the get request has no message body, all parameters are in the Url. So if you need to pass parameters when sending a get request using axios, useparamsAttribute specified, the value can be a js object; it can be used when receiving it in the backend.@RequestParamAnnotation reception.

get() {
   let data = {
        fileName: 'I love you China'
    };
    this.$axios
    .get('/api/file/testconttype', {
        params: data
    })
    .then(response => {
        alert();
    })
 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

AI writing code

Backend usage@RequestParamAnnotation reception.

@RequestMapping("/testconttype")
public String test(@RequestParam String fileName) {
    (fileName);
    String s = new String((StandardCharsets.UTF_8), StandardCharsets.UTF_8);
    (s);
    return s;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

AI writing code

Use axios to send post requests, the backend supports receiving single fields

If the backend supports receiving a single field, the frontend must beFormDataFormat orx-www-form-urlencodedFormat, so the parameter object cannot be a simple js object. The specific code is as follows:

postFormdata() {
     let config = {
         headers: {'Content-Type': "multipart/form-data, charset=UTF-8"}
     };
     // formdata object
     let data = new FormData();

     ('fileName', 'I love you China')

     this.$axios
     .post('/api/file/testconttype', data)
 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

AI writing code

Backend usage@RequestParamAnnotation reception.

@RequestMapping("/testconttype")
public String test(@RequestParam String fileName) {
    (fileName);
    String s = new String((StandardCharsets.UTF_8), StandardCharsets.UTF_8);
    (s);
    return s;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

AI writing code

Use axios to send post requests, and the backend receives json objects as a whole

The front-end can send simple js objects to the back-end, which can be used by the back-end.@ResponseBodyJust receive the annotation.

postJson() {
     let config = {
         headers: {'Content-Type': "multipart/json, charset=UTF-8"}
     };
     let data = {
         fileName: 'I love you China'
     };
     this.$axios
     .post('/api/file/testconttype', data, config);
 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

AI writing code

Backend usage@RequestBodyAnnotation reception.

Summarize

• If sentgetRequest, pass it directly into the normaljs objectThat's right, axios will automatically process it so that the backend can pass@RequestParamAnnotation receive parameters.
• If you use post request, the backend wants to receiveSingle parameter, it needs to be passed inFormDataType parameters, the backend can still pass@RequestParamAnnotation receive parameters.
• If you use post request, the backend wantsOverall reception parameters, then the front end passes it directly into a simple onejs objectJust use the backend@RequestBodyAnnotation reception.

References

axios encoding format
Use of @RequestBody annotation
Content-type detailed explanation, including content-type that should be used when downloading files
axios official website