正文 

当前位置： 首页 > 知识 >

vue + nuxt.js - 如何读取从外部请求接收到的 POST 请求参数

     2023-02-22     34

关键词：

【中文标题】vue + nuxt.js - 如何读取从外部请求接收到的 POST 请求参数【英文标题】：vue + nuxt.js - How to read POST request parameters received from an external request 【发布时间】：2020-04-16 03:20:52 【问题描述】：

我有一个向我的 nuxt 应用程序提交发布请求的外部表单。我目前正在努力找出如何在我的 nuxt 页面中访问这些 POST 请求参数？

到目前为止，我找到了“asyncData”方法，但是当我尝试通过“params”对象访问提交的参数时，它总是“未定义”。我这里哪里错了？

"asyncData" nuxt reference

我的nuxt页面中的示例代码，假设“email”是从外部提交的请求参数

export default 
 asyncData( params ) 
    console.log('asyncData called...' + params.email);
    return email: params.email;
,

外部html表单

<body>
    <form action="https://..." target="_blank" method="post">
        <input name="email" class="input" type="text" placeholder="Email" maxlength="255"></input>
        <input name="submit" class="btn" type="submit" value="Ok"></input>
    </form>
</bod>

【问题讨论】：

asyncData(req)你试过吗？ 是的，但是访问请求正文及其编码参数有点困难，请参阅下面的答案 【参考方案1】：

我找到了一种方法，如"asyncData" nuxt reference 中所述，您可以将请求和响应对象传递给“asyncData(req,res)”调用。

这里是一个示例 - 假设“电子邮件”是 post 参数之一。 querystring 是 node.js 的一个模块，允许你将请求体解析成一个数组。

小备注 - 这似乎只适用于 nuxt 页面级别的组件，但不适用于较低级别的组件

<script>
export default 
  asyncData( req, res ) 
     if (process.server) 
        const qs = require('querystring');
        var body = '';
        var temp = '';
        while(temp = req.read()) 
            body += temp;
          
        var post = qs.parse(body);
        return data: post;
    
  ,
  data() 
     return 
          data: '',
     
  ,
  mounted() 
      console.log(this.data['email']);
  ,
</script>

【讨论】：

【参考方案2】：

Nuxt.js 不能自己处理这些事情。 https://nuxtjs.org/api/configuration-servermiddleware

您应该为这种情况实现自己的中间件。

而asyncData 与处理入站 POST 数据无关。

【讨论】：

这并不完全正确，请参阅 asyncData() 描述，它允许您将请求和响应对象传递到方法调用 link

Vue.js 和 Nuxt.js

...麻烦，因为整个nuxt的工作方式之间的可见性为0%。问题：如何注册全局组件。如何在客户端行为的某些用户上切换nuxt中的布局。在哪里编写vue.use(somep 查看详情

如何使用 Nuxt.js 从缓存中排除组件？

】如何使用Nuxt.js从缓存中排除组件？【英文标题】：HowtoexcludecomponentfromcachingusingNuxt.js?【发布时间】：2021-08-1411:18:15【问题描述】：我正在尝试在Nuxt.js中使用Vue.jskeep-aliveprop，我正在尝试缓存除一个之外的所有组件，这是我想... 查看详情

使用带有 Nuxt js 的 axios 从 Directions API 获取数据时的跨域读取阻塞 (CORB)

】使用带有Nuxtjs的axios从DirectionsAPI获取数据时的跨域读取阻塞(CORB)【英文标题】：Cross-OriginReadBlocking(CORB)whengetdatafromDirectionsAPIusingaxioswithNuxtjs【发布时间】：2019-02-0700:57:11【问题描述】：在我的Nuxt项目中，我使用vue2-google-maps库... 查看详情

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试

】如何在Vue.js/Nuxt.js中为RepositoryFactory编写测试【英文标题】：HowtowritetestforRepositoryFactoryinVue.js/Nuxt.js【发布时间】：2022-01-2106:03:34【问题描述】：夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium... 查看详情

如何在 nuxt.js (vue.js) 中配置动态 og 标签？

】如何在nuxt.js(vue.js)中配置动态og标签？【英文标题】：HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】：2018-05-3112:59:18【问题描述】：我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情

如何在 nuxt.js 中挑选 bootstrap-vue.js 模块？

】如何在nuxt.js中挑选bootstrap-vue.js模块？【英文标题】：Howtocherry-pickbootstrap-vue.jsmodulesinnuxt.js?【发布时间】：2019-04-0512:03:04【问题描述】：我无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】：Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】：2017-10-2807:01:42【问题描述】：我在Nuxt.js(Vue.js)中开发网络应用程序首先，vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情

vue + nuxt.js - 如何根据域有不同的样式？

】vue+nuxt.js-如何根据域有不同的样式？【英文标题】：vue+nuxt.js-Howtohavedifferentstylesbasedondomain?【发布时间】：2020-04-1709:12:14【问题描述】：我有一个带有单个vue+nuxt应用程序的多域站点，每个站点需要具有不同的样式。关于如何... 查看详情

Vue.js (Nuxt) 返回 JSON 数据

...9:40:34【问题描述】：我尝试使用Nuxt.js制作JSONAPI。但是我请求了一个URL并且返回了html代码（网站的源代码。如：view-source:https://website.com）。我怎样才能让JSON改为返回？API代码如下：<template><div& 查看详情

如何在 nuxt.js 中安装 trading-vue-js 插件？

】如何在nuxt.js中安装trading-vue-js插件？【英文标题】：Howtoinstalltrading-vue-jspluginsinnuxt.js?【发布时间】：2020-11-2901:39:27【问题描述】：我尝试使用nuxt.js和trading-vue-js插件（如Tradingview.com）制作网站。所以我在我的项目中安装了tradi... 查看详情

Vue-Router 和 i18n 与 Nuxt

...*将i18n和vue-router与Nuxt.js集成**我还没有解决的两个问题：如何在我的router.js文件 查看详情

如何使用 @vue/composition-api 和 nuxt.js 获取 vue-apollo 实例

】如何使用@vue/composition-api和nuxt.js获取vue-apollo实例【英文标题】：Howtogetanvue-apolloinstancewith@vue/composition-apiandnuxt.js【发布时间】：2020-04-0905:51:05【问题描述】：如何配置vue-apollo，与@vue/apollo-composable结合，与@vue/composition-api或Vue3.... 查看详情

nuxt实践

...应用的中间件pages用于组织应用的路由及视图。Nuxt.js框架读取该目录下所有的.vue文件并自动生成对应的路由配置。plugins用于组织那些需要在根vue.js应用实例化之前需要运行的Jav 查看详情

基于vue.js的ssr技术—nuxt.js

为什么要使用Nuxt.jsNuxt基于一个强大的模块化架构。你可以从50多个模块中进行选择，让你的开发变得更快、更简单。对PWA的支持、添加谷歌分析到你的网页或生成网站地图，这些功能都无需重新发明轮子来获得。Nuxt.js默认会优... 查看详情

Vue.js 和 Nuxt.js 中的 Firebase 存储 CORS 错误

】Vue.js和Nuxt.js中的Firebase存储CORS错误【英文标题】：FirebaseStorageCORSerrorinVue.jsandNuxt.js【发布时间】：2021-12-3020:32:31【问题描述】：我正在尝试从我的Web应用程序(Vue.js+Nuxt.js)下载存储在firebase-storage上的.pdf但是出现了这个错误访... 查看详情

如何测试 nuxt.js asyncData 并获取钩子

】如何测试nuxt.jsasyncData并获取钩子【英文标题】：Howtotestnuxt.jsasyncDataandfetchhooks【发布时间】：2020-12-1715:34:59【问题描述】：我一直在尝试测试使用nuxt（asyncData和fetch挂钩）的文件，我在测试vue.js正常生命周期时没有问题，但我... 查看详情

如何在 nuxt.js 中编写全局路由器功能

】如何在nuxt.js中编写全局路由器功能【英文标题】：howtowriteglobalrouter-functioninnuxt.js【发布时间】：2018-01-1213:11:55【问题描述】：我正在将Vue.js与Nuxt.js一起使用，但路由器的功能出现问题。在纯Vue中，我可以这样写main.js：valroute... 查看详情

从 Nuxt 删除对任何 GAFAM（此处为 google api）的请求

】从Nuxt删除对任何GAFAM（此处为googleapi）的请求【英文标题】：RemoverequeststoanyGAFAM(googleapihere)fromNuxt【发布时间】：2022-01-2111:48:50【问题描述】：是否有任何简单的方法可以删除Nuxt.Js中对谷歌字体api“fonts.gstatic.com”的任何查询... 查看详情