时间戳

首页 > 解决方案 > 我们在什么文件中将 react 前端文件夹文件与后端文件夹文件与 server.js 和 mysql 数据库连接连接起来？

node.js - 我们在什么文件中将 react 前端文件夹文件与后端文件夹文件与 server.js 和 mysql 数据库连接连接起来？

问题描述

我有带有反应组件和前端 css 库的前端文件夹文件。

在不同的文件夹中，我有带有 mysql 连接的 server.js 路由的后端文件。

当我在屏幕上输入输入时，输入不会保存到 mysql 数据库中。

问题：

  1. 在什么文件中，我应该将我的前端与后端连接起来？
  2. 我应该使用什么语句来连接我的前端和后端？
  3. 要启动前端，我使用：npm start 和启动后端，我使用：nodemon server.js。

问题：当我连接前端和后端时，我应该打开什么文件以便前端与后端对话->两者都开始？

标签： node.jsreactjs

解决方案

问题 1 答案 您可以通过多种方式做到这一点。我已经使用 Serverjs 完成了此操作，并以以下方式做出反应。

        const express = require('express');
        const bodyParser = require('body-parser');
        const cors = require('cors');
        const port = 80085;
        const app = express();
        const token = 'impossiblylongimportanttokenhere';

        let nextId = 7;

您需要导入 CORS、解析器、Express 以用于路由目的。假设您将拥有一个登录名，您将需要一个身份验证器功能。请注意，这只是为了开发。

        function authenticator(req, res, next) {
  const { authorization } = req.headers;
  if (authorization === token) {
    next();
  } else {
    res.status(403).json({ error: 'User must be logged in to do that.' });
  }
}

完成开发后，您可能希望将其替换为更安全的东西。使用app作为我们的路由器 express 有几种 CORS 方法可以让我们开始使用，如 postget

如果我们有一个名为friends 的数组并且我们想通过ID 找到那个朋友，下面是一个例子。

    app.get('/api/friends/:id', authenticator, (req, res) => {
      const friend = friends.find(f => f.id == req.params.id);

      if (friend) {
        res.status(200).json(friend);
      } else {
        res.status(404).send({ msg: 'Friend not found' });
      }
    });

最好的部分是 express 有一个名为 listen 的方法，只要我们在与 server.js 位于相同文件位置的 cli 上点击 NPM RUN 就会启动该方法。确保指定您的系统尚未使用的端口

    app.listen(port, () => {
      console.log(`server listening on port ${port}`);
    });

问题 2 为了连接到我们这边的 Server.js，您需要使用 axios 进行 GET/POST 等调用，以调用您在上面示例中的 server.js 中创建的任何路由

    .post('/api/friends', this.state.addFriend)

最重要的是您需要运行多个终端，以便后端和前端同时运行。首先从后端开始。

推荐阅读