node.js - 连接前端和后端 MERN 堆栈

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

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

Answer 4

这是我的 express+react 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());

所以 express 服务器知道 React 在哪里。

查看 npm 包Express-react-engine。