SpringBoot和Vue接口如何調(diào)用傳參

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

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

SpringBoot和Vue接口調(diào)用傳參

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

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

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

Query String Parameters
Form Data
Request Payload

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

GET請(qǐng)求

我們發(fā)送get請(qǐng)求時(shí)，參數(shù)是通過url的形式進(jìn)行傳遞，即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請(qǐng)求

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

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

若content-type為application/json，則參數(shù)會(huì)以request payload的形式進(jìn)行傳遞，數(shù)據(jù)格式為json形式，請(qǐng)求表單的參數(shù)在request payload中，不會(huì)出現(xiàn)在請(qǐng)求的url中，使用原生的Ajax post請(qǐng)求不指定請(qǐng)求頭默認(rèn)的參數(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注解對(duì)應(yīng)傳參方式

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

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

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

params 傳參（推薦） – params
formData傳參 – data （需要修改Content-Type）
Qs傳參 – data ，需要手動(dòng)處理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調(diào)用

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

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

通過data傳參

springboot 接口

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

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

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

請(qǐng)求信息：

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調(diào)用

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

axios對(duì)應(yīng)的封裝方法

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

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

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


// 利用axios對(duì)象的create方法，創(chuàng)建axios實(shí)例（其他的配置：基礎(chǔ)路徑、超時(shí)時(shí)間）
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);
    });
  });
}
// 對(duì)外暴露
export default request