[英]How to read POST request parameters in Nuxtjs?
是否有一些简单的方法如何在 nuxtjs asyncData 函数中读取 POST 请求参数?
下面是一个例子:
表单.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 }
}
我建议不要使用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;
}
在服务器端调用 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.