如何在 Nuxtjs 中读取 POST 请求参数？答案

【问题标题】：How to read POST request parameters in Nuxtjs?如何在 Nuxtjs 中读取 POST 请求参数？
【发布时间】：2019-06-14 19:44:04
【问题描述】：

是否有一些简单的方法可以读取 nuxtjs asyncData 函数中的 POST 请求参数？

这是一个例子：

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

将之前的表单路由提交到以下 nuxt 页面：

Clickout.vue

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

【问题讨论】：

请举个例子
@BoussadjraBrahim，对不起，在这里。

标签： javascript vue.js vuejs2 vue-component nuxt.js

【解决方案1】：

最后我找到了以下方法来解决这个问题。我不确定这是否是最好的方法，无论如何它有效:)

我需要添加服务器中间件server-middleware/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 }
}

【讨论】：

【解决方案2】：

我建议不要使用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 应用程序中处理表单的标准方法。我在下面描述的解决方案对我有用。无论如何，谢谢。

【解决方案3】：

在服务器端调用 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

【讨论】：

【解决方案4】：

也许有点晚了，但我认为这可能会有所帮助。

在您的 .vue 文件中获取 nuxt 路由器路由对象：

this.$route

它存储一些有用的信息，如路径、哈希、参数和查询。

查看this 了解更多详情。

【讨论】：