Question

react客户端如何通过express连接到服务器？很多教程都谈到了Superagent和axios，这增加了我的困惑。在反应的上下文中，服务器端路由上是否有任何资源？谢谢

Answer 1

在MERN堆栈中，您不一定要将整个堆栈视为单个实体。 Mongo，ReactJS和NodeJS服务器都可以独立工作。让我们为了便于理解，让我们所有人都在不同的服务器上。那就是我们可以在一台服务器上安装Mongo，在另一台服务器上安装ReactJS，在第三台服务器上安装带有Express的NodeJS，然后它也将是一个MERN堆栈应用程序。

MERN应用程序的工作原理如下

例如，让我们有一个应用程序，显示班级中所有学生的详细信息。首先，在React应用程序中，让我们假设您选择一个类，然后React前端将向nodejs服务器发送查询。该查询将包含特定的类名。现在，nodejs将向mongo db发送一个查询，询问该类的学生的详细信息，并将其发送回节点服务器。然后，节点服务器将详细信息发送到前端，并将更新它。

如果您要求连接，除了查询数据外，根本没有连接。您可以使用其他前端而不是使用reactjs前端，它将为您提供相同的详细信息。 React，Mongo和Node都能够在各自的领域独立工作。

Axios是一个基于promise的HTTP客户端，用于浏览器和node.js.

Answer 2

他们是完全独立的。无论是使用axios，本机Javascript fetch，jQuery AJAX等...它们中的每一个都在浏览器中运行并向nodejs发出GET / POST请求。您将在nodejs中定义相应的GET / POST路由以响应这些请求并返回JSON响应数据以供它们使用。

我首先会忘记完全反应。而是使用返回JSON响应的各种GET / POST路由构建一个express API。使用像postman这样的简单客户端进行测试。一旦掌握了它，就可以从前端Javascript框架开始使用这些服务。

Answer 3

这是我的快递+反应api的剪辑：

var express = require('express');
var router = express.Router();

router.get('/', function (req, res) {
    res.render('index', {myjson: "myValue"});
})

module.exports = router;

基本上我将json字符串发送到index.jsx，在那里渲染前端。

我也将快递设为：

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());

因此快递服务器知道React的位置。

查看npm包Express-react-engine。

Answer 4

堆栈，React，Node.Js和MongoDB的所有元素都可以独立使用。它们可以安装在不同的服务器中，并且可以通过Fetch，Axios或任何其他工具进行通信。

连接前端和后端MERN堆栈

4 个答案: