带有NuxtJS中间件的ExpressJS将post数据传递到页面

有人能帮我理解如何将post请求中的数据传递到加载的nuxt页面吗。我不知道如何将数据发送到将要加载的页面

我希望能够处理POST请求，然后将该数据发送到下一页以供使用。我愿意接受建议，但我找不到合适的文档、教程或示例来完成这项任务

我不想在这里使用axios（带有JSON类型的响应），因为我更喜欢发送POST数据并加载新页面。因此，若页面被重新加载，POST数据必须再次提交

const express = require('express')
const bodyParser = require('body-parser')

const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

app.set('port', port)

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Routes added
  app.post('/events/booking', function (req, res, next) {
    console.log('REQUEST:', req.body)
    res.set('eventId', req.body.eventId)
    res.set('moreData', ['some', 'more', 'data'])
    next()
  })

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  console.log('Server listening on http://' + host + ':' + port) // eslint-disable-line no-console
}
start()

---

我认为问题的根源在于Nuxt的Express实现、bodyParser中间件的弃用/版本冲突和/或节点事件系统之间的断开

我个人会退一步，删除定制的express路由，自己在中间件中处理正文解析，并利用Vuex存储

---

store/index.js

export const state = () => ({
  postBody: null,
  postError: null
})

export const mutations = {
  postBody: (state, postBody) => {
    state.postBody = postBody;
  },
  postError: (state, postError) => {
    state.postError = postError;
  },
}

export const getters = {
  postBody: state => state.postBody,
  postError: state => state.postError,
}

export default ({req, store}) => {
  if (process.server && req && req.method === 'POST') {
    return new Promise((resolve, reject) => {
      req.on('data', data => resolve(store.commit('postBody', JSON.parse(data))));
      req.on('error', data => reject(store.commit('postError', JSON.parse(data))));
    })
  }
}

---

middleware/index.js

export const state = () => ({
  postBody: null,
  postError: null
})

export const mutations = {
  postBody: (state, postBody) => {
    state.postBody = postBody;
  },
  postError: (state, postError) => {
    state.postError = postError;
  },
}

export const getters = {
  postBody: state => state.postBody,
  postError: state => state.postError,
}

export default ({req, store}) => {
  if (process.server && req && req.method === 'POST') {
    return new Promise((resolve, reject) => {
      req.on('data', data => resolve(store.commit('postBody', JSON.parse(data))));
      req.on('error', data => reject(store.commit('postError', JSON.parse(data))));
    })
  }
}

---

pages/index.vue

<template>
  <div>
    <h1>Test page</h1>
    <div v-if="postBody">
      <h2>post body</h2>
      <p>{{postBody}}</p>
    </div>
    <div v-if="postError">
      <h2>post error</h2>
      <p>{{postError}}</p>
    </div>
    <div v-if="!postError && !postBody">
      Please post JSON data to this URL to see a response
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    middleware: 'post-data', 
    computed: mapGetters({
      postBody: 'postBody',
      postError: 'postError'
    })
  }
</script>

测试页
柱体
{{postBody}}

后置错误
{{postError}}

请将JSON数据发布到此URL以查看响应
从“vuex”导入{mapGetters}
导出默认值{
中间件：“发布数据”，
计算：mapGetters({
postBody:“postBody”，
postError:“postError”
})
}

---

下面是上述项目的一个实例。使用客户端应用程序（Postman、web表单等）发布JSON数据，以查看页面上呈现的发布数据

实时代码：

实例：