ExpressJS с промежуточным программным обеспечением NuxtJS, передающим данные постов на страницу

Question

Может кто-нибудь помочь мне понять, как передать данные из почтового запроса на загруженную страницу.Я не знаю, как отправить данные на страницу, которая будет загружена.

Я хочу иметь возможность обработать запрос 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()

Answer 1

Я считаю, что источником вашей проблемы является разрыв между реализацией Nuxt Express, устареванием / конфликтами версий промежуточного программного обеспечения bodyParser и / или системой событий Node.

Я бы лично сделал шаг назад, удалив пользовательскую экспресс-маршрутизацию, обработал бы тело, анализируя себя в промежуточном программном обеспечении, и воспользовался бы магазином 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,
}

---

middleware/index.js

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>

---

Ниже приведен пример проекта, приведенного выше.Отправьте данные JSON с помощью клиентского приложения (почтальон, веб-форма и т. Д.), Чтобы просмотреть опубликованные данные, отображаемые на странице.

Живой код: https://glitch.com/edit/#!/terrific-velociraptor

Живой пример: https://terrific -velociraptor.glitch.me /