【问题标题】:Connecting frontend and backend MERN stack连接前端和后端 MERN 堆栈
【发布时间】:2018-09-22 02:31:59
【问题描述】:
react 客户端如何通过 express 连接到服务器?许多教程都在谈论 Superagent 和 axios,这让我更加困惑。在反应的上下文中,服务器端路由是否有任何资源?谢谢
【问题讨论】:
-
-
如果你希望服务器端路由与 express 进行反应,你可以使用 next.js(github.com/zeit/next.js),否则你可以使用 axios 直接从你的反应应用程序中访问 api,在开发中反应与运行3000 和您的快速服务器可能在 3000 以外的单独服务器上运行
标签:
node.js
reactjs
express
mern
【解决方案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。
【解决方案2】:
它们是完全独立的。无论是使用 axios、原生 Javascript fetch、jQuery AJAX 等等……它们都在浏览器中运行,并向 nodejs 发出 GET/POST 请求。您将在 nodejs 中定义相应的 GET/POST 路由来响应这些请求并返回 JSON 响应数据供它们使用。
我会从完全忘记 react 开始。而是使用各种返回 JSON 响应的 GET/POST 路由构建一个 express API。使用像postman 这样的简单客户端进行测试。一旦掌握了这一点,就可以从前端 Javascript 框架开始使用这些服务。
【解决方案3】:
这是我的 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。
【解决方案4】:
堆栈的所有元素都可以独立使用,React、Node.Js 和 MongoDB。
它们可以安装在不同的服务器上,使用 Fetch、Axios 或任何其他工具进行通信。