Reactjs/Java Spring Boot - RequestMethod.POST - 空值

Question

我正在使用reactjs和Java Spring Boot。我正在嘗試構建一個管理面板 - 它將使用POST而不是GET請求 - 來更新站點面板數據。

我一直在使用GET--因爲我無法得到這個工作，但現在的數據更復雜，我覺得我必須嘗試讓它作爲POST工作。我確信axios部分正在將數據推送到服務器 - 我可以在有效負載中看到它 - 但是當我係統打印出參數時，它們會顯示爲空？

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

，但我的問題出在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

如果您使用的查詢參數，其顯示爲@RequestParam（），您需要調用服務就像

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

需要= false意味着該queryparams是可選的。所以，如果你不提供PARAM這將是空

這裏是一個更好的解決方案：

使用POJO類像

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

    public EditPane() {} 

    // Getter and Setters 
} 

改寫後你的方法：

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

Answer 2

對此的解決方案如下。

在axios的JS方面 - 使用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)); 
     }); 
    } 
} 

在Java端 - 通過以下方式獲取變量。

1. 創建變量映射的模型

-

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

然後重新配置的映射如下

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