本文主要有以下内容

运用postman和axios前端库别离演示后端参数的传递和数据的获取，后端接口主要有以下几种状况：

• get办法进行参数传递和数据获取，后端没有运用注解
• get办法进行参数传递和数据获取，后端运用@RequestParam注解
• post办法进行参数传递，后端没有运用注解
• post办法进行参数传递，后端运用@RequestParam注解
• post办法进行参数传递，后端运用@RequestBody注解
• post办法进行传递时的几种Content-type设置

get办法

get办法进行数据获取，不传递参数

在进行数据获取的时分，后端接口有时分不需求传递参数，此刻只需求运用get办法进行数据获取就能够。

话不多说，上菜！后端有一个分页查询用户的接口，后端接口如下：这仨个参数不需求传递

@GetMapping("list_user.do")
public ResponseData<PageData<List<UserVO>>> getUsersByCondition(@RequestParam(defaultValue = "1") Integer currentPage,
                                @RequestParam(defaultValue = "10") Integer currentSize,
                                @RequestParam(required = false) String username){
  ResponseData<PageData<List<UserVO>>> responseData = new ResponseData<>();
  responseData.setStatus(ResponseConstant.REQUEST_ERROR_CODE);
  responseData.setMsg(ResponseConstant.REQUEST_ERROR);
  Page<UserEntity> userEntities = userService.getUsersWithLikeUsername(currentPage, currentSize, username);
  PageData<List<UserVO>> pageData = new PageData<>();
  if (userEntities.getContent().isEmpty()) {
    return responseData;
   }
  List<UserVO> userVOS = userEntities.getContent().stream().map((userEntity) -> {
    UserVO userVO = new UserVO();
    BeanUtils.copyProperties(userEntity, userVO);
    return userVO;
   }).collect(Collectors.toList());
  pageData.setTotalElements(userEntities.getTotalElements());
  pageData.setCurrentPage(userEntities.getNumber() + 1);
  pageData.setTotalPage( userEntities.getTotalPages()).setCurrentSize(userEntities.getSize()).setData(userVOS);
  responseData.setData(pageData).setStatus(ResponseConstant.REQUEST_OK_CODE).setMsg(ResponseConstant.REQUEST_SUCCESS);
  return responseData;
}

运用postman工具测验作用如下图：证明接口没问题。只需求访问到接口就能够！

前端建立的环境是React-18.2 + Antd-5.2.0 + Axios1.3.4;给出恳求数据的代码如下

useEffect(()=>{
  axios.get("http://127.0.0.1:8080/user/list_user.do").then((result)=>{
    console.log(result);
   })
},)

恳求成果如下图所示：证明这样就能够运用get办法进行数据的获取。比较简单！

get办法进行参数传递，后端没有运用注解

不需求传递参数的接口毕竟是少数，因此常常看到一些后端接口需求传递一些参数进行数据信息的获取，如传递用户id获取用户的详细信息，传递订单号检查订单的详细信息等状况。以展现用户详细为例阐明此种接口该怎么恳求数据。后端接口如下所示

@GetMapping("detail.do")
public ResponseData<UserVO> getUserDetailById(Long userId){
  log.info("userId = {}",userId);
  ResponseData<UserVO> responseData = new ResponseData<>();
  responseData.setStatus(ResponseConstant.REQUEST_ERROR_CODE)
     .setMsg(ResponseConstant.REQUEST_ERROR);
  Optional<UserVO> detailOpt = userService.getUserDetailByIdWithOpt(userId);
  detailOpt.ifPresent(userVO -> Optional.of(userVO.getId()).ifPresent((uId) -> responseData.setData(userVO)
                                     .setStatus(ResponseConstant.REQUEST_OK_CODE)
                                     .setMsg(ResponseConstant.REQUEST_SUCCESS)));
  return responseData;
}

在这种状况下，只需求确保前端键值对的key和后端接口形参保持共同(这儿为userId)，即在url的?之后的字符串为userId=id，只要这种状况下才能正确传递参数。

postman测验：

如果参数没有保持共同，如运用user/id=userId的方法将会导致后端参数为空，进而可能导致服务反常。

下图为postman接口测验和后端接口反常展现

Java接口接收到参数为null。

经过Postman展现了测验成果以及怎么正确获取数据之后，接下来就运用axios进行参数的传递和数据的获取

useEffect(()=>{
  axios.get("http://127.0.0.1:8080/user/detail.do",{
    params:{
      userId:2,
     }
   }).then((result)=>{
    console.log(result);
   })
},)

接口回来信息如下图

get办法进行参数传递，后端运用@RequestParam

修正getUserDetailById的参数列表，运用@RequestParam注解

 public ResponseData<UserVO> getUserDetailById(@RequestParam Long userId){
   // 其他不变
  }

在后端是这种状况的条件下，前端的键值对的key和Java接口的形参userId仍然保持共同，就能够正确传递参数，如上面所示。

当后端接口装备@RequestParam(name= "id")时，此刻前端传递的键值对的键要和name的值保持共同才能正确传递的参数，即这儿的key为id，postman演示作用如下

public ResponseData<UserVO> getUserDetailById(@RequestParam(name ="id" ) Long userId){
  // 其他不变
}

post办法

post办法进行参数传递 非 JSON格局

当恳求办法为post时，首先要了解Content-type特点的三个取值：

Content-type的三种取值：

• ‘Content-Type: application/json ‘: 数据以json格局发送到后端
• ‘Content-Type: application/x-www-form-urlencoded’：恳求体中的数据以普通表单[键值对key=value]的方法发送到后端
• ‘Content-Type: multipart/form-data’：以类似这种 boundary=—-WebKitFormBoundaryzODWbCB3XjzhvhHL 方法切割参数，既能够传递文件，也能够传递键值对。

后端Post接口形参的几种状况：

• 没有运用@RequestParam和@RequestBody
• 运用了@RequestParam
• 运用了@RequestBody

在前两种情形下，和get办法中传递参数的办法是相同的，只不过需求前端需求运用post办法。

用login接口予以阐明：

@PostMapping("login.do")
public ResponseData<UserVO> login(String username, String password) {
  ResponseData<UserVO> responseData = new ResponseData<>();
  responseData.setStatus(ResponseConstant.REQUEST_ERROR_CODE)
     .setMsg(ResponseConstant.REQUEST_USER_ERROR);
  UserVO user = userService.getUserByUsernameAndPassword(username, password);
  // 依据userId判别是否查询到user
  Optional.ofNullable(user.getId()).ifPresent((userVO) ->{
    responseData.setData(user);
    responseData.setMsg(ResponseConstant.REQUEST_LOGIN_OK)
       .setStatus(ResponseConstant.REQUEST_OK_CODE);
   });
  return responseData;
}

此刻前端在传递参数时除了Content-type:application/json外，都能够正常传递参数[需求保持参数名共同]。如果后端装备了@RequestParam的name特点，则和name特点的值相同。

在这种办法下前端能够运用Content-Type: application/x-www-form-urlencoded或许Content-Type: multipart/form-data办法进行参数传递。

运用axios进行传参代码；

useEffect(()=>{
  axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
  // axios.defaults.headers["Content-Type"] = "multipart/form-data"; // ok
  axios.post("http://127.0.0.1:8080/user/login.do",{
    username:"react911",
    password:'react911'
   }).then((result)=>{
    console.log("loginInfo =",result);
   })
},)

需求阐明的是，咱们能够不装备Content-type特点进行传递参数，能够运用下列两个JS对象，axios自己会出手！

• FormData: 对应multipart/form-data
• URLSearchParams: 对应application/x-www-form-urlencoded

前端代码如下：

​
// const formData = new FormData();
const formData = new URLSearchParams();
formData.append("username","xiputerst");
formData.append("password","xipu123")
​
useEffect(()=>{
  // axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
  // axios.defaults.headers["Content-Type"] = "multipart/form-data"; // ok
  axios.post("http://127.0.0.1:8080/user/login.do",formData).then((result)=>{
    console.log("loginInfo =",result);
   })
},)

Content-type:application/x-www-form-urlencoded办法的恳求如下所示

Content-type:mutipart/form-data的参数传递办法

JSON办法传递数据

有些时分，后端接口运用@RequestBody注解一个实体类时，就需求参数以json办法传递。

@PostMapping("add_user.do")
public ResponseData<UserVO> createNewUser(@RequestBody UserDTO newUser){
​
  log.info("newUser = {}",newUser);
  ResponseData<UserVO> responseData = new ResponseData<>();
  responseData.setStatus(ResponseConstant.REQUEST_ERROR_CODE)
     .setMsg(ResponseConstant.REQUEST_ERROR);
​
  UserVO newUserVO = userService.createNewUserEntity(newUser);
  Optional<Long> optionalLong = Optional.ofNullable(newUserVO.getId());
  optionalLong.ifPresent((id) ->{
    responseData.setStatus(ResponseConstant.REQUEST_OK_CODE)
       .setMsg(ResponseConstant.REQUEST_SUCCESS)
       .setData(newUserVO);
   });
​
  return responseData;
}

如果此刻还以mutipart/form-data的办法传递参数，则会出错。

正确的参数传递办法：

运用axios进行参数传递

留意：axios在默认的状况下post运用的便是json格局,在不指定content-type的状况下，具体拜见这儿。JS代码如下

const newUser ={
  "username":'axios-post-jsonData',
  "password":"password-axios",
  "nickName":"axios是一个基于Promise封装的库",
  "phoneNumber":"1112223344"
}
​
axios.post("http://127.0.0.1:8080/user/add_user.do",newUser).then((result)=>{
  console.log("newUser =",result);
})

在这儿也能够看到Content-type:'application/json;

总结

基于上面所描述的那样，虽然分了很多种状况去评论这个问题，但实际上就只需求留意一下post办法传参

post办法

• 后端运用RequestBody注解了参数，则以json的办法传递
• 其他状况不论使没运用@RequestParam只需求确保传递的key和形参或许@RequestParam的name特点的值保持共同就能够。至于Content-type特点是什么，并不重要，只要在传递文件的时分才强制为mutipart/form-data.

get办法

• 参数共同即可，没有Content-type关系

你认为这就结束了？

不知道是否考虑过这么一种搭配办法，get办法传递json数据？你可能没见过，可是他的确存在，

@GetMapping("test.do")
public ResponseData<UserVO> testGetJson(@RequestBody UserEntity user){
  log.info("user = {}",user);
  ResponseData<UserVO> responseData = new ResponseData<>();
  UserVO userVO = new UserVO();
  BeanUtils.copyProperties(user,userVO);
  responseData.setData(userVO).setStatus(ResponseConstant.REQUEST_OK_CODE).setMsg(ResponseConstant.REQUEST_SUCCESS);
  return responseData;
}

postman接口测验

发现没有!!!get办法传递json数据是能够的！可是为什么工作中没人这么用？以及为什么没有展现axios的代码去演示这个，

前者的答案就参阅这儿吧，至于后者吧，好像前面的参阅连接也给答案了，但！！最重要的是axios不支持get传递json数据。

人家postman测验得好好的，为什么要运用axios？axios是什么东西，axios他没这个能力，你知道吧！手动狗头.jpg

一定是有什么特别的缘分，才让咱们在这儿相遇。祝君好运！

参阅资料：

• MDN_FormData
• MDN_表单进阶
• axios_post恳求
• axios_恳求编码
• SOF_http-get-with-request-body