scene / Function description :
   
Framework for recent relearning front end vue, The request was made using axios, I simply wrote a back-end , Implementation of a student list crud,web Layer uses springmvc, And use jq Of $.ajax The mode has been tested and the interface is OK .

Problems :
     Once again, it has been ensured that the back-end interface can receive jquery Of $.ajax Sent post request , But the front end uses vue, Send a request to pass axios To send , The back end cannot get data .

Cause of the problem :
     Requested Content-Type Set to application/x-www-form-urlencoded, So this one Post The request is considered to be HTTP
POST Form request , The parameter appears in the form data, The parameter form is key=value&key1=value1 This form , Back end access usage @RequestParam;
Other cases such as using native AJAX Of POST Request if no request header is specified Request
Header, Default Content-Type yes text/plain;charset=UTF-8, perhaps application/json
, The parameter appears in the Request payload block , The parameter form is standard json format , use @RequestParam Cannot get , Need to use @RequestBody obtain .
     stay axios use Post When sending data , The default is to put the json Submitted to the back end in the request body , It belongs to the second way mentioned above .
    
Solution :
The first one , Front end solution : Add request header information , And re encapsulate the request parameters
let params = 'studentno=' + this.student.studentno +
        '&name=' + this.student.name +
        '&phone=' + this.student.phone +
        '&email=' + this.student.email
axios.post(url, params,{headers: {'Content-Type':
'application/x-www-form-urlencoded'}})    

It's disgusting to see this kind of concatenation , You can choose another way :

Reference document link :
https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
<https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format>

Here is a copy of the solution given in the reference document , Need to know more about viewable documents .

Using application/x-www-form-urlencoded format

By default, axios serializes JavaScript objects to JSON. To send data in the 
application/x-www-form-urlencoded format instead, you can use one of the
following options.

Browser

In a browser, you can use the URLSearchParams
<https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams> API as
follows:
const params = new URLSearchParams(); params.append('param1', 'value1');
params.append('param2', 'value2'); axios.post('/foo', params);
Note that URLSearchParams is not supported by all browsers (see caniuse.com
<http://www.caniuse.com/#feat=urlsearchparams>), but there is a polyfill
<https://github.com/WebReflection/url-search-params> available (make sure to
polyfill the global environment).

Alternatively, you can encode data using the qs <https://github.com/ljharb/qs>
 library:
const qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 }));
Or in another way (ES6),
import qs from 'qs'; const data = { 'bar': 123 }; const options = { method:
'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data:
qs.stringify(data), url, }; axios(options);
    
The second kind , Back end solution : Use the @RequestBody Annotation substitution @RequestParam
@ResponseBody
@RequestMapping(value="/save",method=RequestMethod.POST)
public Map<String, String> save(@RequestBody Student
student)// Automatically encapsulate parameters into student object

The codes are not listed in detail , List only the key parts .