7
votes

Comment lire les paramètres de requête POST dans Nuxtjs?

Existe-t-il un moyen simple de lire les paramètres de requête POST dans la fonction nuxtjs asyncData?

Voici un exemple:

Form.vue: em >

async asyncData(context) {
    // some way how to get the value of POST param "id"
    return { id }
}

envoi des itinéraires de formulaire précédents vers la page nuxt suivante:

Clickout.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>

javascript vue.js vue-component nuxt.js vuejs2

2 commentaires

veuillez donner un exemple

@BoussadjraBrahim, désolé, la voici.

4 Réponses :

6
votes

Enfin, j'ai trouvé la manière suivante de résoudre ce problème. Je ne sais pas si c'est le meilleur moyen, de toute façon cela fonctionne :)

J'avais besoin d'ajouter un middleware serveur server-middleware/postRequestHandler.js

async asyncData(context) {
    const id = context.req.body.id;
    return { id }
}

nuxt.config.js

serverMiddleware: [
        { path: '/clickout', handler: '~/server-middleware/postRequestHandler.js' },
    ],

Clickout.vue

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

0 commentaires

2
votes

Je recommande de ne pas utiliser le comportement par défaut de l'élément form , essayez de définir un gestionnaire d'envoi comme suit:

     asyncData(context) {

         return  this.$route.params.id;
    }

et soumettez la méthode comme suit: p>

  methods:{
     submit(){
       this.$router.push({ name: 'clickout', params: { id: this.item.id } })
     
        }
     }

dans le composant cible faire:

<template>
<form @submit.prevent="submit">
     <input type="hidden" name="id" v-model="item.id" />
     <input type="submit" value="submit" />
</form>
</template>

2 commentaires

Merci Boussadjra, nous aimerions le garder sous forme de formulaire POST pour empêcher les robots de suivre / soumettre ce formulaire. Je sais que ce n'est pas une manière standard de gérer les formulaires dans l'application nuxt. La solution que j'ai décrite ci-dessous fonctionne pour moi. Merci quand même.

le vote négatif avec un commentaire pourrait être plus utile

1
votes

Lorsque asyncData est appelé côté serveur, vous avez accès aux objets req et res de la requête utilisateur.

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

réf. https://nuxtjs.org / guide / async-data / # use-code-req-code-code-res-code-objets

0 commentaires

0
votes

Il est peut-être un peu tard, mais je pense que cela pourrait aider.

Dans votre fichier .vue , récupérez l'objet route du routeur nuxt:

this.$route

0 commentaires