SpringBoot和Vue接口如何調用傳參

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

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

SpringBoot和Vue接口調用傳參

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

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

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

Query String Parameters
Form Data
Request Payload

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

GET請求

我們發(fā)送get請求時，參數是通過url的形式進行傳遞，即url中？后面拼接的參數，以&做連接，參數直接表現在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請求有兩種傳遞參數的形式：form data和request payload的形式

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

若content-type為application/json，則參數會以request payload的形式進行傳遞，數據格式為json形式，請求表單的參數在request payload中，不會出現在請求的url中，使用原生的Ajax post請求不指定請求頭默認的參數就是出現在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編碼格式的參數

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

1.spring通過 @requestParam (queryParam)（路徑傳參-默認傳參注解）接收的參數都是url拼接將參數放到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提交消息主體中參數，參數值為json格式，默認就是json格式不需要進行處理

通過data傳參

springboot 接口

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

axios調用方法（這里的axios是經過封裝后的）

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

請求信息：

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

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

拼接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) => {
  // 獲取用戶倉庫內的token，登錄成功后攜帶公共參數
  let userStore = useUserStore()
  if(userStore.token) {
    config.headers['Authorization'] = userStore.token
  }
  return config
})

// 第三步：配置相應攔截器
service.interceptors.response.use(
  (response) => {
    // 獲取返回成功數據的狀態(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 || '系統出錯',
          type: 'error'
        });
        return Promise.reject('error')
      }
      else {
        // 其他類型的狀態(tài)碼
        ElMessage.error(message)
        return Promise.reject(response.data)
      }
    } else {
      // 未返回狀態(tài)碼直接返回響應信息
      ElMessage.error('系統服務連接失敗')
      return Promise.reject(response)
    }
  },
  (error) => {
    // 失敗的回調：處理http網絡錯誤
    //定義一個變量：存儲網絡錯誤信息
    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 = '網絡出現問題'
          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

總結

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

您可能感興趣的文章:

Java實現Redis哨兵的示例代碼
這篇文章主要介紹了Java實現Redis哨兵的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
SpringBoot使用maven指定依賴包的版本(解決示例)
我們在使用A依賴的時候,這個依賴有引入了第三方B依賴,這時候我想指定B依賴的版本號,下面?zhèn)€大家分享解決示例,對SpringBoot maven依賴包相關配置方法感興趣的朋友一起看看吧
2024-04-04
Mybatis防止sql注入原理分析
這篇文章主要介紹了Mybatis防止sql注入原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2021-12-12
java 8 lambda表達式list操作分組、過濾、求和、最值、排序、去重代碼詳解
java8的lambda表達式提供了一些方便list操作的方法,主要涵蓋分組、過濾、求和、最值、排序、去重,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-01-01
微服務Springcloud之Feign的基本使用
這篇文章主要介紹了微服務Springcloud之Feign的基本使用,Spring?Cloud集成Feign并對其進行了增強，使Feign支持了Spring?MVC注解,需要的朋友可以參考下
2023-03-03
Java 注解的使用實例詳解
這篇文章主要介紹了Java 注解的使用實例詳解的相關資料,需要的朋友可以參考下
2016-12-12
Mybatis中特殊SQL的執(zhí)行
這篇文章主要介紹了Mybatis中特殊SQL的執(zhí)行，介紹內容包括模糊查詢、批量刪除、動態(tài)設置表名、添加功能獲取自增的主鍵等相關資料，需要的小伙伴可以參考一下
2022-04-04
java在原字符中插入新字符或字符串實例
這篇文章主要介紹了java在原字符中插入新字符或字符串實例，具有很好的價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
java圖論弗洛伊德和迪杰斯特拉算法解決最短路徑問題
這篇文章主要為大家介紹了java圖論弗洛伊德算法和迪杰斯特拉算法解決最短路徑的問題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2021-11-11
JAVA垃圾收集器與內存分配策略詳解
這篇文章介紹了JAVA垃圾收集器與內存分配策略，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-07-07