javascript - Nuxtjs中如何读取POST请求参数?

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

有没有一些简单的方法来读取 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 }
}

最佳答案

最后我找到了以下解决方法。我不确定这是否是最好的方法,但它确实有效:)

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

关于javascript - Nuxtjs中如何读取POST请求参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54289615/

相关文章:

javascript - substr 给出错误的值 - javascript

javascript - Leaflet vectorGrid.slicer错误

javascript - Vuex axios 调用无法处理 422 响应

javascript - 如果我们在 .js 中拥有所有详细信息,.vue .js 文件之间有什么区别?

javascript - VueJs 2 在一个html页面中隐藏和显示DIV

javascript - HEAD 中 LINK 和 STYLE 元素的评估顺序

javascript - 在 Angular 2 中使用 CKEditor 的自定义配置文件

javascript - vue-属性-装饰器 : Prop being mutated?

vue.js - 根据收到的参数设置动态类

vuejs2 - 我的 laravel./vuejs 应用程序中未使用 momentjs 时出现弃用警告