post請求：
1：js中

export function listCheckinApply(query) {
  return request({
    url: '/aaa/bbb/ccc',  // 路徑
    method: 'post',
    data: query //參數(shù)
  })
}

2：使用
首先引入方法js：

    import {listCheckinApply} from 'xxx.js'

調(diào)用方法

 /*查詢條件*/
    let formData = reactive({
        applyStatus: '',
        checkinType: '',
        areaName: '',
    })
    // 提交
    const onSubmit = (values) => {
    // formData 是參數(shù)，Object類型
        listCheckinApply(formData).then(resp => {
            loading.value = true
            console.log("resp", resp)
            if (resp.code === 200) {
                // adjustApplyInfo.value = resp.rows.filter(item => {
                //     return item.applyStatus !== '0'
                // })
                adjustApplyInfo.value = resp.rows
            }
            finished.value = true;
            loading.value = false
        })
    };

3：瀏覽器請求

4：后臺參數(shù)接收

get請求：
第一種：通過params對象傳遞，將參數(shù)以鍵值對的形式傳遞,當(dāng)傳遞的參數(shù)為多個時，瀏覽器會自動拼接&進(jìn)行分割
1：js中

export  function  getApplyGuestInfo(query) {
    return request({
        url: 'xxx/xxx/xxx',  //路徑
        method: 'get',
        params: query //參數(shù)
    })
}

2：使用
首先引入方法js：

import {getApplyGuestInfo} from 'xxx.js'

調(diào)用方法

 getApplyGuestInfo({applyId: route.params.id}).then(resp => {
        if (resp.code == 200) {
            // 賦值
        }
    })

3：瀏覽器請求

4：后臺參數(shù)接收

上面這種是傳遞了一個參數(shù)，下面看一下傳遞多個參數(shù)的，和上面一樣，只不過url上進(jìn)行了&分割
1：js中

export function getAdjustApply(query) {
    return request({
        url: '/xxx/ccc/list',
        method: 'get',
        params:query
    })
}

2：使用
首先引入方法js：

 import {getAdjustApply} from 'xxx.js'

調(diào)用：形如：
{name:“小張”,age:20,sex:“0”}

const onSubmit = () => {
        getAdjustApply({accommodationType:formData.accommodationType,status:formData.status,areaNameBefore:formData.areaNameBefore}).then(resp => {
            loading.value = true
            console.log("resp", resp)
            if (resp.code === 200) {
                adjustApplyInfo.value = resp.rows
            }
            finished.value = true;
            loading.value = false
        })
    };

3：瀏覽器請求，以&分割

4：后臺參數(shù)接收

還有一種傳遞方式就是直接在路徑上進(jìn)行拼接，比如：

export function getDetailInfoAboutAdjustRoom(id,name) {
    return request({
        url: "/xxc/ccc/vvv?id=" + id+"&name="+name,
        method: "get",
    });
}

第二種：Restful風(fēng)格傳遞參數(shù)，比如：/xxx/ccc/vvv/{參數(shù)名}
1：js中

export  function getApplyInfo(id) { // id為參數(shù)名
    return request({
        url: '/xxx/ccc/vvv/'+id,
        method: 'get'
    })
}

2：使用
首先引入方法js：

  import { getApplyInfo} from 'xxx.js'

調(diào)用方法
我這里的參數(shù)是直接從路由中獲取的

getApplyInfo(route.params.id).then(resp => {
         if(resp.code === 200){
           //處理邏輯
          } 
    })

3：瀏覽器請求

4：后臺參數(shù)接收

注意：

1：@PathVariable:需要接收前端傳遞的參數(shù)必須要加上這個注解

2：@PathVariable(name="")和@PathVariable(value="")都可以

3：可以使用@RequestMapping或者@GetMapping 這兩種方式
這兩種方式在接受參數(shù)的區(qū)別在于： 
	@RequestMapping 可以指定GET、POST請求方式；
	@GetMapping等價于@RequestMapping的GET請求方式
比如上面例子中如果使用@RequestMapping 那么就應(yīng)該寫為：
@RequestMapping(value = "getApplyInfo/{id}", method= RequestMethod.GET )

如圖所示：

今天就先記錄到這里吧，后面有其他方式了再過來更新。
描述有誤的地方歡迎大家指正，大家有問題可加qq，876942434。一起進(jìn)步~
步~文章來源地址http://www.zghlxwxcb.cn/news/detail-691082.html

到了這里，關(guān)于前端post,get請求傳參方式 以及后臺接收的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！