Reactjs/Java Spring Boot - RequestMethod.POST - null values

Question

I am using reactjs and Java Spring Boot. I am trying to build an admin panel - that will use a POST instead of GET request - to update site panel data.

I had been using GET - as I couldn't get this to work, but now the data is more complex I feel I have to try and get it work as a POST. I am sure the axios part is pushing data to the server - I can see it in the payload - but when I system print out the params they come up as null?

the reactjs action

import axios from 'axios';

import CONFIG from './_configApi';//add config api

import { fetchInitPane } from './initPaneAction';

export const FETCH_EDIT_PANE_SUCCESS = 'FETCH_EDIT_PANE_SUCCESS'
export const FETCH_EDIT_PANE_FAILURE = 'FETCH_EDIT_PANE_FAILURE'

export function editPaneSuccess(response) {
  return {
    type: FETCH_EDIT_PANE_SUCCESS,
    payload: response
  }
}

export function editPaneFail(response) {
  return {
    type: FETCH_EDIT_PANE_FAILURE,
    payload: response
  }
}

export function fetchEditPane(data) {
  let url = CONFIG.EDIT_PANE_API;
  return function (dispatch) {     
   /*axios.get(url, {
      params: data
    })*/
    axios.post(url, data)
      .then(function (response) {

      response = null;

        dispatch(editPaneSuccess(response));      
      dispatch(fetchInitPane(null));
      })
      .catch(function (error) {
        dispatch(editPaneFail(error));
      });
  }
}

but my problem lies in the Java method.

//api/editPane
@RequestMapping(value = {"/api/editPane"}, method = RequestMethod.POST)
@CrossOrigin(origins = {"*"})
public ResponseEntity<?> editpane(
        @RequestParam(value="tile1", required=false) String tile1,
        @RequestParam(value="tile2", required=false) String tile2,
        @RequestParam(value="about", required=false) String about,
        @RequestParam(value="privacy", required=false) String privacy           
        //HttpServletRequest request
        ) throws Exception {

            JSONObject loggedUser = getLoggedInUser();
            String role = (String) loggedUser.get("role");
            //check to make sure they are an admin user - this is sensitive data
            //System.out.println("role"+ role);

            System.out.println("tile1"+ tile1);
            System.out.println("tile2"+ tile2);
            System.out.println("about"+ about);
            System.out.println("privacy"+ privacy);


            if(role.equals("1")){
                //create api admin instance
                //AdminModel myApiAdmin = new AdminModel(); 

                //find matching row
                Long id = (long) 0;
                TblSitePages sitePages = tblSitePagesRepository.findById(id);

                //tile1
                if(tile1 != sitePages.getTile1()){
                    //sitePages.setTile1(tile1);
                }           
                //tile2
                if(tile2 != sitePages.getTile2()){
                    //sitePages.setTile2(tile2);
                }   
                //about
                if(about != sitePages.getAbout()){
                    sitePages.setAbout(about);
                }                   
                //privacy
                if(privacy != sitePages.getPrivacy()){
                    sitePages.setPrivacy(privacy);
                }

                tblSitePagesRepository.saveAndFlush(sitePages);

                JSONObject response = ResponseWrapper(null, "success", "Updating site pane data");
                return new ResponseEntity<>(response, HttpStatus.OK);                   
            } else{

                JSONObject response = ResponseWrapper(null, "error", "Not an admin");
                return new ResponseEntity<>(response, HttpStatus.OK);
            }
}   

Answer 1

The solution to this - is the following.

In the JS side for axios - use POST.

import axios from 'axios';

import CONFIG from './_configApi';//add config api

import { fetchInitPane } from './initPaneAction';

export const FETCH_EDIT_PANE_SUCCESS = 'FETCH_EDIT_PANE_SUCCESS'
export const FETCH_EDIT_PANE_FAILURE = 'FETCH_EDIT_PANE_FAILURE'

export function editPaneSuccess(response) {
  return {
    type: FETCH_EDIT_PANE_SUCCESS,
    payload: response
  }
}

export function editPaneFail(response) {
  return {
    type: FETCH_EDIT_PANE_FAILURE,
    payload: response
  }
}

export function fetchEditPane(data) {
  let url = CONFIG.EDIT_PANE_API;
  return function (dispatch) {     
    axios.post(url, data)
      .then(function (response) {

      response = null;

        dispatch(editPaneSuccess(response));      
      dispatch(fetchInitPane(null));
      })
      .catch(function (error) {
        dispatch(editPaneFail(error));
      });
  }
}

on the Java side - pick up the variables via the following.

1. create a model that maps the variables

-

package controller;

    public class EditPane {
        private String tile1;
        private String tile2;
        private String about;
        private String privacy;
        private String terms;

        public String getTile1() {
            return tile1;
        }
        public void setTile1(String tile1) {
            this.tile1 = tile1;
        }


        public String getTile2() {
            return tile2;
        }
        public void setTile2(String tile2) {
            this.tile2 = tile2;
        }

        public String getAbout() {
            return about;
        }
        public void setAbout(String about) {
            this.about = about;
        }


        public String getPrivacy() {
            return privacy;
        }
        public void setPrivacy(String privacy) {
            this.privacy = privacy;
        }

        public String getTerms() {
            return terms;
        }
        public void setTerms(String terms) {
            this.terms = terms;
        }
    }

then reconfigure the mapping as follows

//api/editPane
@RequestMapping(value = {"/api/editPane"}, method = RequestMethod.POST)
@CrossOrigin(origins = {"*"})
public ResponseEntity<?> editpane(
        @RequestBody EditPane editPane
        ) throws Exception {
            String tile1 = editPane.getTile1();
            String tile2 = editPane.getTile2();
            String about = editPane.getAbout();
            String privacy = editPane.getPrivacy();
            String terms = editPane.getTerms();                     
}   

Answer 2

If you use query params, which is shown as @RequestParam(), you need to call the service like

http://localhost:8080/api/editPane?title1="value"&title2="value"

required=false means that the queryparams are optional. So if you dont provide a param it will be null

Here is a better Solution:

Use a pojo class like

public class EditPane {
    private String title1;
    private String title2;
    private String about;
    private String privacy;

    public EditPane() {}

    // Getter and Setters
}

Rewrite your Post Method:

@RequestMapping(value = {"/api/editPane"}, method = RequestMethod.POST)
@CrossOrigin(origins = {"*"})
public ResponseEntity<?> editpane(@RequestBody EditPane editPane) {
  //doSuff();
}