Почему-то форма не отправляет post данные?

Question

[maksymNejmet]

Почему-то форма не отправляет данные.

Компонент формы:

<template>
<div>

  <div class="w-full ml-auto mr-auto text-center mt-7">
    <h1 class="text-red-900 mb-7 font-bold text-2xl uppercase">event Creation Form</h1>
    <form class="w-full" @submit.prevent="onSubmit">
      <div class="mb-4">
        <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title</label>
        <my-input v-model:value="title" type="text" id="title" class="text-sm" placeholer="enter a title" required></my-input>
      </div>

      <div class="m-4">
        <label for="description" class="block mb-2 text-sm font-medium text-gray-900">Description</label>
        <my-input v-model:value="description" id="description" placeholder="enter a description" class="text-sm" type="text" required>
        </my-input>
      </div>


      <div class="m-4">
        <label for="startDate" class="block mb-2 text-sm font-medium text-gray-900">Start Date</label>
        <my-input :min="Date.now()" v-model:value="startDate" id="startDate" placeholder="enter a startDate" class="text-sm" type="date" required>
        </my-input>
      </div>

      <div class="m-4">
        <label for="endDate" class="block mb-2 text-sm font-medium text-gray-900">End Date</label>
        <my-input :min="Date.now()" v-model:value="endDate" id="endDate" placeholder="enter a endDate" class="text-sm" type="date" required>
        </my-input>
      </div>

      <div class="mb-4">
        <my-button>Save</my-button>
      </div>
    </form>
  </div>
</div>
</template>

<script>
import MyInput from "@/components/UI/MyInput.vue";
import MyButton from "@/components/UI/MyButton.vue";
import {actionTypes} from "@/store/modules/add-event.";

export default {
  name: "EventPostForm",
  components: { MyButton, MyInput},
  data(){
    return {
      title:'',
      description:'',
      startDate:'',
      endDate:''
    }
  },
  methods:{
    onSubmit(){
      this.$store.dispatch(actionTypes.addEvent,this.$route.params.id,{
        title:this.title,
        description:this.description,
        startDate: this.startDate,
        endDate:this.endDate
      }).then(event=>{
        console.log(event),
            this.$router.push({name:'editUser'})
      })
    }

  }
}
</script>

<style scoped>

</style>

Axios модуль:

import axios from "@/api/axios";

const getEvents=apiUrl=>{
    return axios.get(apiUrl)
}
const addEvent=(id,credentials)=>{
    return axios.post(`/user/${id}`,credentials)
}
export default {
    getEvents,
    addEvent
}

Vuex модуль:

import events from "@/api/events";

const state={
    data: null,
    isLoading: false,
    error: null
}

export const mutationTypes={
    addEventStart:'[add-event] addEventStart',
    addEventSucess:'[add-event] addEventSucess',
    addEventFailure:'[add-event] addEventFailure'
}

export const actionTypes={
    addEvent:'[add-event] addEvent'
}

const mutations={
    [mutationTypes.addEventStart](state){
        state.isLoading=true
    },
    [mutationTypes.addEventSucess](state,payload){
        state.isLoading=false
        state.data=payload
    },
    [mutationTypes.addEventFailure](state,payload){
        state.isLoading=false
        state.error=payload
    }
}

const actions={
    [actionTypes.addEvent](context,apiUrl,credentials){
        return new Promise(resolve => {
            context.commit(mutationTypes.addEventStart)
            events.addEvent(apiUrl,{credentials})
                .then(response=>{
                    context.commit(mutationTypes.addEventSucess,response.data.events)
                    resolve(response.data.events)
                })
                .catch(err=>{
                    context.commit(mutationTypes.addEventFailure,err.response.data.errors)
                })
        })
    }
}

export default {
    state,
    mutations,
    actions
}

Ошибка:"Invalid Content-Type undefined"

Answer 1

[StepsOnes]

В компоненте EventPostForm.vue, измените строку, которая отправляет данные на сервер, на следующую строку:

this.$store.dispatch(actionTypes.addEvent, this.$route.params.id, {
  title: this.title,
  description: this.description,
  startDate: this.startDate,
  endDate: this.endDate
}).then(event => {
  console.log(event);
  this.$router.push({ name: "editUser" });
});

Здесь store dispatch вызывает новое действие `addEvent`. Это действие принимает два аргумента: `context` и `payload`. `context` - это объект контекста, который хранит методы, геттеры, мутации и действия store. `payload` - это объект, содержащий данные, которые должны быть отправлены на сервер. В данном случае, он передает параметры события: заголовок, описание, дату начала и дату окончания.

Кроме того, измените метод `addEvent()` файла events.js следующим образом:

const addEvent = (id, credentials) => {
  return axios.post(`/user/${id}`, credentials);
};

export default { getEvents, addEvent };

Здесь просто исправлено неправильное использование одинарных кавычек при указании URL запроса в фактическое использование обратных кавычек.

После внесения этих изменений форма должна отправлять данные на сервер.

Comments

[maksymNejmet]

Не работает,ничего не добавляет.Вот express endpoint:

app.post('/user/:id', async(req, res) => {
    try {
        const title = req.body.title;
        const description = req.body.description;
        const startDate = new Date(req.body.startDate);
        const endDate = new Date(req.body.endDate);
        const events = await User.findById(req.params.id).select('events');

        validateDate(startDate, endDate, events.events)

        const eventDate = {
            title: title,
            description: description,
            startDate: startDate,
            endDate: endDate
        };

        const updatedUser = await User.findByIdAndUpdate(
            req.params.id,
            {
                $push: { events: {eventDate} },
                $inc: { eventsCount: 1 }
            },
            {new: true}
        )

        res.json(updatedUser);
    } catch (error) {
        res.status(500).json({
            status: 'error',
            errorMessage: error.message
        });
    }
});

Вот express характеристики:

const express=require('express')
const bodyParser=require('body-parser')
const cors=require('cors')
const morgan=require('morgan')
const mongoose=require('mongoose')
const db='mongodb://localhost:27017/user'
const User=require('../DB/models/users')
const validateDate=require('./validateDate')



mongoose
    .connect(db)
    .then((res)=>console.log('Connected to Db'))
    .catch((error)=>{
        console.log(error)
    })

const Port=8081

const app=express()

app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors())

[StepsOnes]

maksymNejmet, через postman тестил роуты бэка?

[maksymNejmet]

через postman и json и form-urlencoded-все ок

[StepsOnes]

А ошибки от axios летят на фронте?

[maksymNejmet]

хотя теперь почему-то тоже перестало form-urlencoded реагировать

[maksymNejmet]

почему-то вообще перестал работать с какими-либо данными!

[maksymNejmet]

Изменил endpoint:

app.post('/user/:id', async(req, res) => {
    try {
        const contentType = req.get('Content-Type');
        let eventDate;
        if (contentType === 'application/json') {
            const title = req.body.title;
            const description = req.body.description;
            const startDate = new Date(req.body.startDate);
            const endDate = new Date(req.body.endDate);

            const events = await User.findById(req.params.id).select('events');
            validateDate(startDate, endDate, events.events)

            eventDate = {
                title: title,
                description: description,
                startDate: startDate,
                endDate: endDate
            };
        } else if (contentType === 'application/x-www-form-urlencoded') {
            const title = req.body.title;
            const description = req.body.description;
            const startDate = new Date(req.body.startDate);
            const endDate = new Date(req.body.endDate);

            const events = await User.findById(req.params.id).select('events');
            validateDate(startDate, endDate, events.events)

            eventDate = {
                title: title,
                description: description,
                startDate: startDate,
                endDate: endDate
            };
        } else {
            throw new Error(`Invalid Content-Type ${contentType}`);
        }

        const updatedUser = await User.findByIdAndUpdate(
            req.params.id,
            {
                $push: { events: eventDate },
                $inc: { eventsCount: 1 }
            },
            {new: true}
        )

        res.json(updatedUser);
    } catch (error) {
        res.status(500).json({
            status: 'error',
            errorMessage: error.message
        });
    }
});

Теперь в postman-все нормально,а вот с формой-вообще не работает.

Ошибка такая-"Invalid Content-Type undefined"

[StepsOnes]

В заголовках с фронта в формате json отправляешь на бэк? Если нет, то добавь:

const { data } = await axios.post('/api', {
headers: {
"Content-Type": "application/json"
}
})

Должно помочь)

[maksymNejmet]

StepsOnes, куда добавить?

[StepsOnes]

Сделай так:

const addEvent = (id, credentials) => {
  return axios.post(`/user/${id}`, credentials, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
};

Также у тебя есть опечатка в функции addEvent Vuex модуля, где ты забыл заключить путь в кавычки:

const actions={
  [actionTypes.addEvent](context,apiUrl,credentials){
      return new Promise(resolve => {
          context.commit(mutationTypes.addEventStart)
          // здесь нужно заключить путь в кавычки
          events.addEvent(apiUrl,{credentials})
              .then(response=>{
                  context.commit(mutationTypes.addEventSucess,response.data.events)
                  resolve(response.data.events)
              })
              .catch(err=>{
                  context.commit(mutationTypes.addEventFailure,err.response.data.errors)
              })
      })
  }
}

Вместо этого должно быть написано следующее:

const actions={
  [actionTypes.addEvent](context,apiUrl,credentials){
      return new Promise(resolve => {
          context.commit(mutationTypes.addEventStart)
          events.addEvent(apiUrl, credentials)
              .then(response=>{
                  context.commit(mutationTypes.addEventSucess,response.data.events)
                  resolve(response.data.events)
              })
              .catch(err=>{
                  context.commit(mutationTypes.addEventFailure,err.response.data.errors)
              })
      })
  }
}

[StepsOnes]

maksymNejmet, в свой post запрос

[maksymNejmet]

все равно ошибка content type==undefined

[StepsOnes]

maksymNejmet, а get запросы фронту отдаются?

[StepsOnes]

Попробуй добавить код, который выводит ошибку после неудачной отправки запроса. Например:

const addEvent = (id, credentials) => {
  return axios.post(`/user/${id}`, credentials, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .catch(error => {
     console.log(error);
  });
};

Таким образом, вы получите причину ошибки и сможете понять, что не так.

Удостоверьтесь, что функция addEvent возвращает корректный ответ. Если ваша функция axios возвращает некорректный ответ, это может быть причиной проблем при отправке данных.

Если вы использовали Vue DevTools для отслеживания ваших действий, проверьте, что ваша функция действительно вызывается при отправке формы. Если нет, проверьте, что вы правильно привязали метод @submit.prevent к вашей форме.

[maksymNejmet]

github:

https://github.com/locki13freja/problem-with-form/...

Чтобы легче было понять