Как прочитать параметры запроса POST в Nuxtjs?
есть ли простой способ прочитать параметры запроса POST в функции asyncData nuxtjs?
Вот пример:
Форма.vue:
<template>
<form method = "post" action = "/clickout" target = "_blank">
<input type = "hidden" name = "id" v-model = "item.id" />
<input type = "submit" value = "submit" />
</form>
</template>
отправка предыдущих маршрутов формы на следующую следующую страницу:
Clickout.vue
async asyncData(context) {
// some way how to get the value of POST param "id"
return { id }
}
@BoussadjraBrahim, извините, вот оно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Наконец, я нашел следующий способ, как это решить. Я не уверен, что это лучший способ, во всяком случае, он работает :)
Мне нужно было добавить промежуточное ПО сервера сервер-промежуточное ПО/postRequestHandler.js
const querystring = require('querystring');
module.exports = function (req, res, next) {
let body = '';
req.on('data', (data) => {
body += data;
});
req.on('end', () => {
req.body = querystring.parse(body) || {};
next();
});
};
nuxt.config.js
serverMiddleware: [
{ path: '/clickout', handler: '~/server-middleware/postRequestHandler.js' },
],
Clickout.vue
async asyncData(context) {
const id = context.req.body.id;
return { id }
}
Я рекомендую не использовать поведение элемента form по умолчанию, попробуйте определить обработчик отправки следующим образом:
<template>
<form @submit.prevent = "submit">
<input type = "hidden" name = "id" v-model = "item.id" />
<input type = "submit" value = "submit" />
</form>
</template>
и отправьте метод следующим образом:
methods:{
submit(){
this.$router.push({ name: 'clickout', params: { id: this.item.id } })
}
}
в целевом компоненте выполните:
asyncData(context) {
return this.$route.params.id;
}
Спасибо Boussadjra, мы хотели бы сохранить его как форму POST, чтобы боты не следовали/отправляли эту форму. Я знаю, что это не стандартный способ обработки форм в приложении nuxt. Решение, которое я описал ниже, работает для меня. Спасибо, в любом случае.
Когда asyncData вызывается на стороне сервера, у вас есть доступ к объектам req и res запроса пользователя.
export default {
async asyncData ({ req, res }) {
// Please check if you are on the server side before
// using req and res
if (process.server) {
return { host: req.headers.host }
}
return {}
}
}
исх. https://nuxtjs.org/guide/async-data/#use-code-req-code-code-res-code-objects
Может быть, это немного поздно, но я думаю, что это может помочь.
В вашем файле .vue получите объект маршрута nuxt router:
this.$route
Он хранит некоторую полезную информацию, такую как путь, хэш, параметры и запрос.
Взгляните на это для более подробной информации об этом.
пожалуйста, приведите пример