vue 传参params和data

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue 传参params和data

小码哥呀   2022-06-03 我要评论

1、使用data传参

前端请求方式为post

import request from '@/utils/request'

// 新增banner
export function saveBanner(data){
  return request({
    url:'/system/banner/saveBanner',
    method:'post',
    data:data
  })
}

在这里插入图片描述

后端接口接收

/**
 * 保存导航图
 * 
 * @param sysBanner
 * @return
 */
@PostMapping("/saveBanner")
public AjaxResult saveBanner(@RequestBody SysBanner sysBanner) {
	return sysBannerService.saveBanner(sysBanner);
}

在这里插入图片描述

2、使用params传参

前端请求

在这里插入图片描述

//查询导航图列表信息
export function getBannerList(query){
  return request({
    url: '/system/banner/list',
    method: 'get',
    params: query
  })
}

后端接收

  • 接收时的请求方式为GetMapping
  • 并且入参也不需要@RequestBody注解

在这里插入图片描述

3、总而言之

如果前端请求的方式是 post,并且后端的HTTP请求为 @PostMapping,那么后端的参数上面要写 @RequestBody ,而且前端传递参数的时候要写 data,因为是 Json 传参。 因为用post请求使用data传参的时候,参数是放在请求体中的,所以地址栏上也不显示具体的参数。

如果是以get形式的传参,并且传的是一个对象,就用params,他会把你参数的内容 最后分散到你地址栏后面的问号(?)后面,如上面的例子最后的地址就是:http://localhost:8888/user/list/1/20?name=zhansan

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们