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

Question

J'utilise reactjs et Java Spring Boot. J'essaye de construire un panneau d'administration - qui emploiera un POST au lieu de la demande de GET - pour mettre à jour des données de panneau de site. J'ai utilisé GET - comme je ne pouvais pas faire fonctionner cela, mais maintenant les données sont plus complexes, je pense que je dois essayer de le faire fonctionner comme un POST. Je suis sûr que la partie axios pousse les données vers le serveur - je peux le voir dans la charge utile - mais quand j'imprime les paramètres du système, ils apparaissent comme nulles?

l'action reactjs

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)); 
     }); 
    } 
} 

mais mon problème réside dans la méthode Java.

//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

Si vous utilisez params de requête, qui est présenté à titre @RequestParam(), vous devez appeler le service comme

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

requis = false signifie que les queryparams sont facultatifs. Donc, si vous ne fournir un param il sera nul

Voici une meilleure solution:

Utilisez une classe POJO comme

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

    public EditPane() {} 

    // Getter and Setters 
} 

Ressaisissez votre méthode Post:

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

Answer 2

La solution à ceci - est la suivante.

Dans le côté JS pour axios - utilisez 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)); 
     }); 
    } 
} 

côté Java - ramasser les variables via ce qui suit.

1. créer un modèle qui associe les 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; 
     } 
    } 

puis reconfigurer le mappage comme suit

//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();      
}