【问题标题】:Connecting frontend and backend MERN stack连接前端和后端 MERN 堆栈
【发布时间】:2018-09-22 02:31:59
【问题描述】:

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

【问题讨论】:

  • 你的意思是要通过 Socket 连接吗?
  • 如果你希望服务器端路由与 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 或任何其他工具进行通信。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2022-11-26
          • 2020-03-19
          • 2021-07-06
          • 2020-12-03
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多