Vue Axios Post delivery JavaBean to background __java

Source: Internet
Author: User

Front desk is vue+element, the background is spring boot set up the SSM project, now the demand is that the front form needs to pass the relevant Java bean to the background, because not familiar with the pure front and back end separation, so using the traditional jsp+vue+element

Through a variety of methods and Baidu, or 400 background parsing error, or passed the data are null, because the page other methods are used Axios, so do not want to use Ajax, and finally think of a curve to save the nation's way:

Idea: The foreground passes the JSON object, receives the JSON object in the background, converts the JSON object into a Java bean by Com.google.gson.Gson

Here are a few holes to notice:

1: Foreground data must be converted to JSON object Json.parse (Json.stringify (FormData))

2: Add head information:

headers:{' content-type ': ' Application/json;charset=utf-8 '}

3: Backstage with @requestbody receive


The following is the source code: marked red is the place to pay attention to

Front desk:

Editsubmit:function () {
Let Formdata=this.form;
formdata.role_id=this.role_id;

Let Admininfo=json.parse (Json.stringify (FormData));//need to be converted to a JSON object Axios.post (' ${ctx}/updateadmininfo ',
Admininfo,
{
headers:{
' Content-type ': ' Application/json;charset=utf-8 '/here plus head info
}
}
)
. Then (
function (params) {
if (params.data.code== ' C1000 ') {
this. $message. Success ("successful Renewal");
Reload data
}else{
this. $message. Error ("update failed");
}
})

},

Background:

@RequestMapping (value = "/updateadmininfo", method = requestmethod.post) public string Update (@RequestBody string AdminS TR) {
Gson gson= new Gson ();
Admininfo admin = Gson.fromjson (adminstr, Admininfo.class);

Related code implementation omitted

... return null, or be a very, very, very.

}

At present this method is feasible, just contact Vue, the other is not clear

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.