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

解决这个问题的方法如下。

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