SpringBoot接受vue3请求（axios）

环境：

JDK：jdk1.8

springboot：2.4.1

vue3网络工具：axios

一、Vue请求场景（相关配置略，主要说明请求内容）

1.1 GET模式

export const pageArticle = (curPage?: number, pageSize?: number) => {
  const url = `pro/app/articlePage/${curPage}/${pageSize}`;
  return http.request<ResultTable>("get", baseUrlApi(url));
};

这是一个请求文章分页页面数据的方法，

说明：const url = `pro/app/articlePage/${curPage}/${pageSize}`;是请求url，注意两端不是英文单引号，curPage是当前页码，pageSize是每页请求数量。使用的是路径参数。baseUrlApi是使用的代理模式。

1.2 POST模式

export const pageItemPage = (
  curPage?: number,
  pageSize?: number,
  data?: object
) => {
  const url = `pro/page/itemPage/${curPage}/${pageSize}`;
  return http.request<ResultTable>("post", baseUrlApi(url), { data });
};

这是一个请求某商品的分页数据。

说明，除了get请求中的相关参数外，额外增加了一个参数：data，可为空，这个参数是form表单中的数据。

form表单构造为：

const form = reactive({
    mark: "day7",
    phone: "android"
  });

data参数会以RequstPayload的数据格式传送到后端。

二、SpringBoot中接受请求（相关配置略，主要说处理请求部分）

2.1 接受请求主体代码

//声明接口controller，返回以json格式返回
@RestController
//整个类的接口前缀
@RequestMapping("/pro")
public class ShopProAction {

    @GetMapping("/app/articlePage/${curPage}/${pageSize}")
    public VueMsgVo<PageQuery<ArticleVo>> artPage(@PathVariable("curPage") Integer curPage, @PathVariable("pageSize") Integer pageSize) {
        curPage = curPage == null ? 1 : curPage;
        pageSize = pageSize == null ? 15 : pageSize;
        //具体查询方法，省略，根据具体业务，在service中实现
        PageQuery<ArticleVo> artPage = new PageQuery<>();
        return VueMsgVo.success(artPage);
    }

    @PostMapping("/page/itemPage/${curPage}/${pageSize}")
    public VueMsgVo<PageQuery<ArticleVo>> itemPage(@PathVariable("curPage") Integer curPage, @PathVariable("pageSize") Integer pageSize, @RequestBody ItemForm form) {
        curPage = curPage == null ? 1 : curPage;
        pageSize = pageSize == null ? 15 : pageSize;
        //具体查询方法，省略，根据具体业务，在service中实现
        PageQuery<ArticleVo> artPage = new PageQuery<>();
        return VueMsgVo.success(artPage);
    }
}

说明：

1，artPage是get请求（@GetMapping），使用@PathVariable注解，接受路径参数。

2，itemPage是post请求（@PostMapping），除了路径参数外，还接受了一个实体参数ItemForm。

2.1 使用@RequestBody，注意这里因为vue的请求使用reque payload方式，所以这里必须使用@RequestBody注解。

2.2 itemForm实体对应vue中的data，实体类名可以随便起，但是字段属性（mark，phone）必须对应，不然值为空。

2.3 如果不想新建ItemForm实体类，也可以使用json接受，@RequestBody JSONObject form 声明接受参数，然后，String mark=form.getString("mark"); 取值。

注意：如果vue中data为null（不是mark或phone为null），后台会报错，因为requestbody接收不到任何参数，会被认为该请求不是目标接口。