时间戳

首页 > 解决方案 > 如何在 Next js 上将数据从快递服务器发送到客户端？

javascript - 如何在 Next js 上将数据从快递服务器发送到客户端？

问题描述

我有一个带有 express 的下一个 js web 应用程序。我想将数据发布到此网页，在我的服务器上获取它并将其传递到我的下一个 js 页面。我是下一个 js 和 express 的新手。以下是我的 server.js 代码：-

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.use(express.json());

  server.post("/posts", (req, res) => {
    req.body.data
    console.log("Post data : ",req.body.data)
    console.log("JSON Response : ",res.json());
  });

  // server.get('/posts/', (req, res) => {
  //   console.log("Post data again : ",res.body.data)
  //   return app.render(req, res, '/posts', { id: "Pritam" })
  // })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

当我使用 get request 时，我可以使用 return app.render(req, res, '/posts', { name: "Pritam" }) 将数据从我的服务器发送到客户端，但是当我尝试做同样的事情时发布我无法在我的客户上接收任何数据。最初，我尝试在查询参数中传递值，它工作正常。以下是我的posts.js 代码：-

import React, { Component } from 'react'

class Posts extends Component {
  static async getInitialProps ({ query: { id } }) {
    console.log("Response is ")
    return { postId: id }
  }
  render () {
    return (
      <div>
        <p>Post data {this.props.postId}</p>
      </div>
    )
  }
}


export default Posts;

正如@JasperBernales 所建议的那样，我对我的 server.js 进行了以下更改：-

  server.post("/api/agreement", (req, res) => {
    req.body.data
    res.send("ESAnup")
    console.log("Post data agreement: ",req.body.data)
    console.log("JSON Response agreement : ",res.json());
  });

我还为 api/agreement.js 创建了一个目录，其中包含以下代码：-

export default function handle(req, res) {
  console.log("Request Body",req.body.data) // The request body
  console.log("Request Query :",req.query) // The url querystring
   console.log(req.cookies) // The passed cookies
   res.json({ title: 'Hello World JSON' })
   res.end('Hello World')
}

我能够看到我的服务器响应，但我仍然无法在我的客户端上获取它。我正在尝试在 Postman 上对其进行测试。

我想从我的服务器代码创建一个端点，以将数据发送到我的客户端并在 getInitialProps 中接收该数据并将其呈现在我的客户端。非常感谢任何帮助或建议。谢谢。

标签： javascriptnode.jsreactjsexpressnext.js

解决方案

nextjs 9 支持结帐api 路由。

基本上你需要在文件夹下创建一个名为api的pages文件夹。

sample.js例如，您在文件夹中命名了一个文件

export default function handle(req, res) {
  console.log(req.body) // The request body
  console.log(req.query) // The url querystring
  console.log(req.cookies) // The passed cookies
  res.end('Hello World')
}

然后此文件夹中的每个文件都将被称为路由，您可以像/api/sample在客户端中一样调用它。

推荐阅读