前端（React）如何与后端（Express）交互？

Posted 2023-02-19

【中文标题】前端（React）如何与后端（Express）交互？

【英文标题】：How does front-end (React) interact with back-end (Express)?

【发布时间】：2018-11-14 10:36:22

【问题描述】：

我正在使用 MongoDB、Express、React 和 Node 构建一个全栈应用程序。我从事过只有前端编程的项目，也从事过只有后端编程的项目。我使用 ejs 为 Express 创建视图，所以我不确定它如何与通过 React 创建的前端视图一起工作。另外，我不确定 CRUD 操作将如何与 React 一起使用。我的想法很模糊。

我所知道的是，在package.json中，运行程序时将两者结合在一起。就是这样。即使这样我也不确定。我的问题是：Express 如何与 React 交互？

我正在寻找的答案涉及联系。它在哪里以及如何点击在一起？如果 React 创建视图，那么 Express 是如何连接到这些视图的？我在导入文件吗？我是在 React 组件中编写 ExpressJS 吗？它如何将数据库中的数据显示到视图上？ app.get('/',...) 足够了吗？ Express 如何知道在发布该数据时要使用哪些文件？

【问题讨论】：

简而言之，后端暴露一组 api 和前端（无论是 react、angular 还是其他）都会消耗它

React（客户端）可以向您创建的 Express API 端点发出请求（获取、发布等）。当您提出这些请求时，您还可以附加数据。当 Express 收到请求时，您可以看到它来自哪个端点，以及传递了哪些数据。 Express 对客户端一无所知，它是手动请求各种 Express 端点 url 的客户端。如果您有用户视图，则向 my-express-server.com/user 发出请求并等待响应。快递服务器应处理请求并传递响应负载。

在你的 json 文件中使用 "proxy" : "localhost:3000/"

【参考方案1】：

在 json 文件中使用快速添加代理连接 react 的简单方法。

 
    "name": "create-react-app",
    "version": "0.1.0",
    "private": true,
    "devDependencies": 
        "husky": "^0.14.3",
        "lint-staged": "^7.0.0",
        "prettier": "^1.11.0",
        "react-scripts": "^1.0.17"
    ,
    "dependencies": 
        "bootstrap": "^4.1.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-router-dom": "^4.2.2",
        "sanitize.css": "^5.0.0",
    ,
    "scripts": 
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "precommit": "lint-staged"
    ,
    "proxy": "http://localhost:3000/",
    "lint-staged": 
        "*.js,json,css,md": [
        "prettier --write",
        "git add"
        ]