关于前端传参问题

淡水千痕 · 发表于 2022-5-25 11:59

如图所示：postman这样调用才可以通过

下图：swagger测试也可以通过。

前端如果用axios调用post如何写？是传到body的数据格式错误吗？求大佬们指导一下！

//页面调用方法
//arr为一个数组（["2022-1-1","2022-1-2"]）

const res = await batchSave(JSON.stringify(arr))

//api接口
export function batchSave (data){
  return Ajax.post(
'/calendarInfo/batchSave',
data,
{
   timeout:999999,
   headers:{
      "Content-Type": "application/json;charset=UTF-8",
   }
}
  )
}

纸偶 · 发表于 2022-5-25 14:55

不用转成JSON，直接传对象就可以了

SpeII · 发表于 2022-5-25 15:10

[JavaScript] 纯文本查看 复制代码

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

注：此处是官方示例：https://www.npmjs.com/package/axios

lcbreak · 发表于 2022-5-25 15:18

[JavaScript] 纯文本查看 复制代码

const arr = ["2022-01-11", "2022-02-18", "2022-03-01", "2022-04-09", "2022-05-21"]
    axios.post("/calendarInfo/batchSave", arr).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })

根你的需求大概就是这样，建议看看axios文档。

淡水千痕 · 发表于 2022-5-25 16:08

大佬们有空帮我项目调用一下看看怎么写？
我在Vue项目无法调用成功！
但是postman和swagger都可以
大佬们帮我测试一下接口如果代码调用可以吗
地址：http://rqh35x.natappfree.cc/cyy/calendarInfo/getList
参数{
"dateStr": 2022
}

mysticalspear · 发表于 2022-5-25 16:34

json是键值对啊你直接传数组肯定不得行吧

mysticalspear · 发表于 2022-5-25 16:37

https://blog.csdn.net/qq_42277520/article/details/108605405

lcbreak · 发表于 2022-5-25 20:22

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>

<body>
    <div id="app">
        <div v-for="item in list" :key="item" class="content">{{item}}</div>
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const API = "http://rqh35x.natappfree.cc/cyy/calendarInfo/getList"
    const param = { "dateStr": 2022 }

    const app = {
        data() {
            return {
                list: []
            }
        },
        methods: {
            // 使用axios获取接口参数
            getCalendarInfoList() {
                axios.post(API, param).then(res => {
                    console.log(res);
                    this.list = res.data.data
                }).catch(err => {
                    console.log(err);
                })
            }
        },
        created() {
            this.getCalendarInfoList()
        }
    }
    Vue.createApp(app).mount('#app')
</script>

</html>

根据你的接口，简单弄了一个demo，获取数据正常

淡水千痕 · 发表于 2022-5-26 09:52

lcbreak 发表于 2022-5-25 20:22
[mw_shl_code=html,true]

谢谢，问题找到了。代{过}{滤}理问题导致的

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 关于前端传参问题