Vue与Springboot传参

PS：restful api接口规范中，有四种请求方法，分别为get、post、delete、put。
但我认为，传参其实就只有两种方式，一种通过url传参，另一种通过提交表单传参。
所以下面的内容，我按传参方式整理。
最后放一个链接，如果不清楚下文中三种参数注解，可以看我之前的文章
后端获取前端数据三种方式

一、url传参

url传参有两种形式
1、/get/{param}：这种形式通常用于分页时

// 模块化 js
getList(param) {
    return request({
      url: `/get/${param}`,
      method: 'get'
    })
  }

说明：url处，` 这个符号并不是单引号’’，是tab键上的一个符号，该符号在es6中运用，被称为模板字符串，这里只做简单说明，依旧不了解的可以自行去查阅一下相关资料。
在该符号范围内所有的字符都只会被认为是字符串，也就是说不存在特殊字符这一概念，举个例子，就好比是我们在纸上书写的内容，写的什么就是什么，仅有一种情况会违背前面的说法，即在该符号内存在${}表达式时。

// vue页面调用方法 js
	fetchData(currentPage = 1){
      this.currentPage = currentPage;
      teacher.getList(this.currentPage).then(response => {
        ...
      })
    }

// java
@GetMapping("get")
    public Object getTest(@PathVariable("param") int currentPage) {
        ...
        return object;
    }

2、/get?id = params

// 模块化 js
getList(params) {
    return request({
      url: `/get`,
      method: 'get',
      params: params //params
    })
  }

说明：关于参数处的简写，当参数名正好为params时，可以简写成params，否则必须写完整，这里涉及到了es6的对象简写：

const name = "Amy"
const age = 18
es5 传统方式
const person1 = {name: name, age: age}
es6 对象简写： 使用范围，仅限于key的名称与value的名称相同时
const person2 = {name, age}

// vue页面调用方法 js
	fetchData(currentPage = 1){
      this.currentPage = currentPage;
      teacher.getList({currentPage: this.currentPage}).then(response => {
        ...
      })
    }

说明：细看vue页面getList处的传参，你会发现传的是一个对象数据，如果像上面那样，直接传一个值，在调试时，会发现url是这样的：
/get?0 = params.value ，这样你后端程序就无法取到你传过去的值（你总不至于将下面的java代码片段中的注解写成 @ResquestParam(“0”) ）

// java
@GetMapping("get")
    public Object getTest(@RequestParam("params") int currentPage) {
        ...
        return object;
    }

二、提交表单传参

提交表单传参

// 模块化 js
postList(data) {
    return request({
      url: `/post`,
      method: 'post',
      data: data //data
    })
  }

说明：上文url传参处，方法二里用到了params键，在表单传递里用的是data，除了名称改变，其他基本一致，数据会自动封装成json格式传给后端

// vue页面调用方法 js
	fetchData(){
      teacher.getList(this.data).then(response => {
        ...
      })
    }

// java
@PostMapping("post")
    public Object postTest(@RequestBody Object object) {
        ...
        return object;
    }