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})}