Почему сервер получает пустые данные?

Question

[Anonymous]

Всем привет. Написал такой код для страницы:

<template>
    <main class="main">
        <div class="admin-panel">
            <h1 class="admin-panel__title">Создание поста</h1>
            <form class="admin-panel__form" @submit.prevent>
            <input type="text" v-model="post.title">
            <textarea class="admin-panel__textarea" v-model="post.text"></textarea>
            <input type="submit" @click="sendFormData()">
            </form>
        </div>
    </main>
</template>

<script>
import axios from 'axios'
export default {
    name: "AdminPanel",
    data() {
        return {
            post: {
                title: '',
                text: '',
            },   
        }
    },
    methods: {
        sendFormData() {
            const data = JSON.stringify(this.post);
            axios.post('http://localhost:5000/api/create-post', () => {
                body: data
            })
            .then((response) => {
                console.log(response);
            })
        }
    }
}

</script>

<style scoped>
.main {
    min-height: 100vh;
    min-width: 100vw;
    background-color: #1D1C18;
}

.admin-panel__title {
    font-size: 24px;
    color: #FFF;
    padding: 20px 0 0;
    margin: 0;
    text-align: center;
}

.admin-panel__button {
    width: 100px;
    height: 30px;
    color: aqua;
    font-size: 16px;
}
</style>

Необходимо отправить запрос на сервер, чтобы он эти данные внес в БД MongoDB.
Но сервер почему-то получает пустые данные. Почему?

Answer 1

[Aetae]

Откуда ты эту хрень взял?

axios.post('http://localhost:5000/api/create-post', () => {
  body: data
})

Во-первых: axios принимает параметром объект, а не функцию возвращающую объект.
Во-вторых: axios.post вообще сразу принимает body:

axios.post('http://localhost:5000/api/create-post', data)

В-третьих: даже если бы оно принимало функцию(что не так) - конструкция

() => {
  body: data
}

на самом деле расшифровывается так:

() => { // начало блока кода
  // метка body указывающий на висящую в воздухе переменную data
  body: data
  // никакого возврата из функции
} // конец блока кода

чтобы оно воспринималось как объект, можно, например, заключать в скобки:

() => ({
  body: data
})

Comments

[Anonymous]

Я пробовал по-разному. В любом случае пустая отправка. Куда копать-то?

[Дмитрий Кузнецов]

Никита Савченко, Посмотрите что отправляется в браузере (вкладка Network в браузере)

[Дмитрий Кузнецов]

Никита Савченко, к тому же, если вы "пробовали по разному", в том числе и правильно, то нужно учитывать, что сервер то же должен правильно получать данные. В вашем вопросе этот момент был упущен.

[Aetae]

Никита Савченко, отправка в любом случае не пустая. Даже твой кривой вариант отправит значения в виде строки:

() => {
  body: data
})

(axios всё непонятное отправляет как строку).

Разбирайся с сервером.

[Anonymous]

Aetae, пробую так посмотреть что было отправлено:

const Router = require('express').Router;
const router = new Router();

router.post('/create-post', (req, res) => {
    console.log(req.body);
    res.send(req.body)
})

module.exports = router

Однако, мне выводит:
{}