Javascript 如何使用Express后端向用户呈现react页面？

我的节点/express服务器运行在

http://localhost:3000/

我正在处理post请求（来自某个客户机）点击我的节点服务器，我正在使用express router处理它

router.post("/", (req, res) => {
  let empid = req.body.empid;
  let depid = req.body.depid;
  let empdetails = //Fetch data from DB by passing empid & depid
  res.send(empdetails);
});

在最后一步中，我希望使用运行在

http://localhost:5000/

将EMP详细信息传递给react页面

如何做到这一点？有没有其他方法可以实现这一点

您可以使用从后端、从为

get

请求设置的路由器获取数据，并使用react将其映射到UI，例如，在节点服务器中设计一个get请求：

router.get("/api/empdetails", (req, res) => {
  EmpDetails.find()
    .then(EmpDetails=> res.json(EmpDetails))
    .catch(err => res.status(404).json({ err:err }));
});  // for example from a mongodb server getting data with mongoose

然后在前端，在react组件中：

import axios from "axios"

state={
 empDetails:[]    
  }

componentDidMount() {
     axios
    .get("http://localhost:3000/api/empdetails")
    .then(res => 
      this.setState({empDetails:res.data})
    })
    .catch(err => {
      console.log(err);
    });
  }
render(){
const {empDetails} = this.state
let empDetailsMarkup = empDetails ? (empDetails.map(empDetail => {  
 <p>empDetail.name</p> })) : null // assuming there is a name for each empDetail and this will print it to the screen
  return(<div>{empDetails}</div>)

}

从“axios”导入axios
陈述={
详细信息：[]
}
componentDidMount（）{
axios
.get（“http://localhost:3000/api/empdetails")
。然后（res=>
this.setState（{empDetails:res.data}）
})
.catch（错误=>{
控制台日志（err）；
});
}
render（）{
const{empDetails}=this.state
让empDetailsMarkup=empDetails？（empDetails.map（empDetail=>{
empDetail.name
}）：null//假设每个empDetail都有一个名称，这将把它打印到屏幕上
返回（{empDetails}）
}

您是否询问如何呈现包含react应用程序的初始页面？或者你是在问如何查询你的服务器以获取数据？@Cully我最初的发帖请求不会来自react页面。它将来自使用表单提交的普通HTML客户端。但是我想使用react呈现结果。RESTAPI不是双向的，客户端/react应用程序需要发送请求来启动对话或获取数据。但是，如果您想要实现所描述的需求，那么您必须使用它将数据发送到react应用程序，而无需get请求。因此，您可能会让一个用户在一个页面上使用表单提交数据，并且您希望将该数据显示给另一个查看另一页面的用户？您的第二个页面将必须使用套接字或轮询。您可以使用它完全按照自己的意愿操作如何在React中处理POST数据并将POST数据传递给axios.get（“）在我的示例中，您将html页面或任何内容中的数据发布到node.js后端服务器，然后使用node.js中的router.get函数设置get请求。在react组件中，使用componentDidMount，您通过axios获取此数据并将其设置为组件状态。但是，当我的html页面将详细信息发布到node.js服务器时，res.json（EmpDetails）将响应发送到html页面。然后我们如何在nodejs和react页面之间建立连接？