vue中使用axios--get和post參數的發送

在vue中使用axios

獲取get請求的/api/personer路徑

1.axios封裝文件中

base.js

//路徑配置文件
const base = {
    psrList:'myApi/api/personer'           //分頁字段查詢
}
export default base

index.js

//請求的方法
import base from './base' //引入配置文件
import axios from 'axios' //引入axios
/*
    以下封裝的函數一定要有return值！！

*/
const api = {
    /*
   個人中心數據查詢
    */
    personalQuery(params) {
        return axios.get(base.psrList, {
            params
        })
    }
}

export default api

2.調用axios

        getTableData( ) { //此處進行axios獲取后台數據
            api.personalQuery({  //寫數據
                page: 1,
                pageSize: 3
            }).then(res => {
                console.log(res);
            })
        }

3.后端寫接口獲取前台數據的規范

get

后端接收：req.query.page
前端發送：api.sendPage({ page:1 })

router.get('/api/personer', async (req, res) => {
//獲取前台數據
    console.log(req.query);
    let page = req.query.page||1;
    let pageSize = req.query.pageSize;
}

post

方法1. 實參使用api.sendPath(path)的形式傳參，后端接口使用req.body.data獲取前端傳送數據 ，當實參只有一個時默認使用這種

后端接收：req.body.data
前端發送：api.sendPath(path)

方法2. 實參使用{data:api.sendPath({data:path,aaa:1})}的形式傳參，后端接口使用req.body.data.data獲取前端傳送數據

后端接收：req.body.data.data | req.body.data.aaa
前端發送：{data:api.sendPath({data:path,aaa:1})}