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

前往低代码交流专区

更多推荐