SpringBoot和Vue接口如何調用傳參

更新時間：2025年02月22日 16:32:28 作者：小劉愛搬磚

本文總結了SpringBoot和Vue.js中接口調用的常見傳參方式,包括GET、POST請求的參數(shù)傳遞方式,以及SpringBoot中常用的注解進行參數(shù)接收的方法,文章詳細介紹了Axios請求的封裝方法,并提供了一些實際的代碼示例

SpringBoot和Vue接口調用傳參

簡單總結一下常用的傳參方式，一些前后端分離項目接口調試時經(jīng)常出現(xiàn)傳參格式錯誤問題。

前后端進行交互時方法一般就分為get和post，至于后面的delete和put都是基于post進行封裝而出的。

Http請求中不同的請求方式會設置不同的Content-Type,參數(shù)的傳遞方式就會不一樣，主要分為以下三種：

Query String Parameters
Form Data
Request Payload

下面使用的axios請求都是經(jīng)過封裝的，文章最后有對應的封裝方法

GET請求

我們發(fā)送get請求時，參數(shù)是通過url的形式進行傳遞，即url中？后面拼接的參數(shù)，以&做連接，參數(shù)直接表現(xiàn)在url中。

例如：

http://localhost:8801/api/selectDetail?id=1&userName="zhang"

前端通過query String parameters 方式傳參，axios中指明使用params

export function selectList(params) {
  return request({
    url: 'api/xxx/selectList',
    method: 'get',
    params
  })
}

POST請求

Post請求有兩種傳遞參數(shù)的形式：form data和request payload的形式

發(fā)起post請求時若未指定content-type，則默認content-type為application/x-www-form-urlencoded,參數(shù)是在請求體中，參數(shù)以form data的形式傳遞，不會出現(xiàn)在請求的url中。

若content-type為application/json，則參數(shù)會以request payload的形式進行傳遞，數(shù)據(jù)格式為json形式，請求表單的參數(shù)在request payload中，不會出現(xiàn)在請求的url中，使用原生的Ajax post請求不指定請求頭默認的參數(shù)就是出現(xiàn)在request payload中。

前端通過formData方式傳參，axios中指明使用data

export function selectList(data) {
  return request({
    url: 'api/xxx/selectList',
    method: 'post',
    data
  })
}

前端通過request payload方式傳參

export function selectList(data) {
  return request({
    url: 'api/xxx/selectList',
    method: 'post',
    data
  })
}

SpringBoot注解對應傳參方式

@RequestParam() 默認接收application/x-www-form-urlencoded編碼格式的參數(shù)

@RequestBody() 默認接收json格式的參數(shù)

1.spring通過 @requestParam (queryParam)（路徑傳參-默認傳參注解）接收的參數(shù)都是url拼接將參數(shù)放到query String parameters，前端可以通過下面三種方式傳參

params 傳參（推薦） – params
formData傳參 – data （需要修改Content-Type）
Qs傳參 – data ，需要手動處理header “Content-Type”: “application/x-www-form-urlencoded”

spring boot接口

@GetMapping(value = "/hello")
    public ResponseEntity getUser(@RequestParam String username){  
}
//http://lcoalhost:8080/hello?username=1111

axios調用

#params 傳參
export function find(params){
  return request({
    url: `${API}/info/find`,
    method: 'get',
    params:params
  })
}

2.spring通過@requestBody，通過post提交消息主體中參數(shù)，參數(shù)值為json格式，默認就是json格式不需要進行處理

通過data傳參

springboot 接口

@PostMapping
public ResponseEntity<Record> add(@RequestBody Record record) {
    return ResponseEntity.ok(this.recordService.insert(record));
}

axios調用方法（這里的axios是經(jīng)過封裝后的）

export function add(data){
  return request({
    url: `${API}/record/add`,
    method: 'post',
    data
  })
}

請求信息：

POST http://localhost:5138/record/
Content-Type: application/json
--- 參數(shù)內(nèi)容
{
  "objective": 1.0,
  "objRate": 1.0,
  "objDate": "2022/1/8 12:05:00",
  "outputPrice": 1.0,
}

3.@pathVariable(@pathParam)url路徑中參數(shù)

拼接url

springboot接口

@DeleteMapping(value = "/job/{id}")
    public ResponseEntity delete(@PathVariable(value = "id", required = false, defaultValue = "0") Long id){
}
//http://localhost:8080/job/1

axios調用

export function queryById(id){
  return request({
    url: `${API}/info/queryById/${id}`,
    method: 'get'
  })
}

axios對應的封裝方法

// 封裝axios：使用請求與響應攔截器
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入qs
import qs from 'qs'
import useUserStore from '@/store/modules/user'

// 利用axios對象的create方法，創(chuàng)建axios實例（其他的配置：基礎路徑、超時時間）
const service = axios.create({
  //基礎路徑
  baseURL: '/',
  timeout: 5000, // 超時時間的設置
})
// 第二步：request實例添加請求與響應攔截器
service.interceptors.request.use((config) => {
  // 獲取用戶倉庫內(nèi)的token，登錄成功后攜帶公共參數(shù)
  let userStore = useUserStore()
  if(userStore.token) {
    config.headers['Authorization'] = userStore.token
  }
  return config
})

// 第三步：配置相應攔截器
service.interceptors.response.use(
  (response) => {
    // 獲取返回成功數(shù)據(jù)的狀態(tài)碼code和錯誤信息message
    const { code, message } = response.data;
    if(code) {
      // 有狀態(tài)碼判斷是否為200,除此皆為異常響應
      if(code == 200) {
       return response.data
      }
      else if (code < 200 || code > 300) {
        ElMessage({
          message: message || '系統(tǒng)出錯',
          type: 'error'
        });
        return Promise.reject('error')
      }
      else {
        // 其他類型的狀態(tài)碼
        ElMessage.error(message)
        return Promise.reject(response.data)
      }
    } else {
      // 未返回狀態(tài)碼直接返回響應信息
      ElMessage.error('系統(tǒng)服務連接失敗')
      return Promise.reject(response)
    }
  },
  (error) => {
    // 失敗的回調：處理http網(wǎng)絡錯誤
    //定義一個變量：存儲網(wǎng)絡錯誤信息
    let message = ''
    if(error.code === 'ECONNABORTED') {
      message = '連接超時中止，請稍后重試！'
    } else {
      // http狀態(tài)碼
      const status = error.response.status
      switch (status) {
        case 401:
          message = '無權訪問'
          break
        case 404:
          message = '請求地址錯誤'
          break
        default:
          message = '網(wǎng)絡出現(xiàn)問題'
          break
      }
    }
    // 提示錯誤信息
    ElMessage({
      type: 'error',
      message,
    })
    return Promise.reject(error)
  },
)


// 利用axios對象的create方法，創(chuàng)建axios實例（其他的配置：基礎路徑、超時時間）
interface ReqParamsType {
  url:string
  data?: any
  params?:any
  method?:string,
  type?:string
  timestamp?:boolean
  timeout?:number
}
const request = ({
   url,
   data,
   params,
   method= 'post',
   type='json',
   timestamp = false,
   timeout,
 }:ReqParamsType): Promise<T> => {
  let config = {
    method,
    url,
    baseURL: '/',
    withCredentials: true,
    responseType: 'json',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'X-Requested-With': 'XMLHttpRequest'
    },
    timestamp: timestamp,
    timeout: timeout
  };
  if (method === 'get') {
    if (timestamp) {
      config.url += config.url.indexOf('?') > 0 ? '&' : '?';
      config.url += `timestamp=${+new Date()}`;
    }
    Object.assign(config, {
      params
    });
  }
  else {
    if (type === 'form') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
      Object.assign(config, {
        data: qs.stringify(data)
      });
      config.url = config.url+'?'+qs.stringify(data)
    } else if (type === 'json') {
      config.headers['Content-Type'] = 'application/json';
      Object.assign(config, {
        data: data
      });
    } else if (type === 'formData') {
      let formData = new FormData();
      for (let i in data) {
        if(data[i] != null) {
          formData.append(i, data[i]);
        }
      }
      config.headers['Content-Type'] = 'multipart/form-data';
      Object.assign(config, {
        data: formData
      });
    }else if(type === 'picture'){
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
      Object.assign(config, {
        data: data
      });
    }
    if(timestamp) {
      const code = `${(new Date()).getTime()}_${Math.round(Math.random()*10000)}`
    }
  }
  return new Promise((resolve, reject) => {
    service(config).then((response) => {
      resolve(response);
    }, (error) => {
      reject(error);
    }).catch((error) => {
      reject(error);
    });
  });
}
// 對外暴露
export default request

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

SpringBoot開啟異步調用方法
這篇文章主要為大家詳細介紹了SpringBoot開啟異步調用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
Java8?stream流的map()方法你會使用了嗎
在日常的開發(fā)工作中經(jīng)常碰到要處理list中數(shù)據(jù)的問題。本文主要帶大家了解下Java8?stream流中map()方法的使用，感興趣的小伙伴可以跟隨小編一起學習一下
2022-12-12
Spring?Boot?Yaml配置高級用法
這篇文章主要介紹了Spring?Boot?Yaml配置高級用法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12
Spring的異常處理@ExceptionHandler注解解析
這篇文章主要介紹了Spring的異常處理@ExceptionHandler注解解析,當一個Controller中有方法加了@ExceptionHandler之后,這個Controller其他方法中沒有捕獲的異常就會以參數(shù)的形式傳入加了@ExceptionHandler注解的那個方法中,需要的朋友可以參考下
2023-12-12
SpringBoot集成JmsTemplate(隊列模式和主題模式)及xml和JavaConfig配置詳解
這篇文章主要介紹了SpringBoot集成JmsTemplate(隊列模式和主題模式)及xml和JavaConfig配置詳解，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-08-08
關于SpringSecurity配置403權限訪問頁面的完整代碼
本文給大家分享SpringSecurity配置403權限訪問頁面的完整代碼，配置之前和配置之后的詳細介紹，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2021-06-06
淺析Java 數(shù)據(jù)結構常用接口與類
本篇文章主要介紹了Java中的數(shù)據(jù)結構，Java工具包提供了強大的數(shù)據(jù)結構。需要的朋友可以參考下
2017-04-04
Java實現(xiàn)FutureTask的示例詳解
在并發(fā)編程當中我們最常見的需求就是啟動一個線程執(zhí)行一個函數(shù)去完成我們的需求，而在這種需求當中，我們需要函數(shù)有返回值。Java給我們提供了這種機制，去實現(xiàn)這一個效果:FutureTask。本文為大家準備了Java實現(xiàn)FutureTask的示例代碼，需要的可以參考一下
2022-08-08
java通過AES生成公鑰加密數(shù)據(jù)ECC加密公鑰
這篇文章主要為大家介紹了java通過AES生成公鑰加密數(shù)據(jù)ECC加密公鑰實現(xiàn)案例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
Java消息隊列RabbitMQ之消息模式詳解
這篇文章主要介紹了Java消息隊列RabbitMQ之消息模式詳解,RabbitMQ提供了一種qos(服務質量保證)功能,即在非自動確認消息的前提下,如果一定數(shù)目的消息(通過基于Consumer或者Channel設置Qos的值)未被確認前,不進行消費新的消息,需要的朋友可以參考下
2023-07-07