如何在没有 NodeJS 的情况下通过 React 提供 JSON 文件？

Question

我正在使用 React，而不使用 NodeJS。我用

创建了它

npx create-react-app my-app

我想通过链接提供静态 JSON 文件或其内容（我已经在项目中拥有该文件），以便其他软件可以通过将其调用为 API 来集成它。

我遵循了这个答案，但生成的内容是一个由 HTML 标签组成的网页，但我真正想要的是仅返回 JSON 文件或其数据以供人们请求。

Answer 1

第 1 步 - 只需前往 https://replit.com/ 并在那里注册...注册后，您将在仪表板中创建一个新的排斥，当它要求模板时，只需选择“NODE JS”选项.

第 2 步 - 现在只需将以下代码粘贴到您的 index.js 文件中。

不要忘记将第 3 行的文件名从 db.json 更改为您的文件名。

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 5000;

server.use(middlewares);
server.use(router);

server.listen(port);

第 3 步 - 现在您将看到一个包 .json 文件，将其代码替换为以下代码。

{
  "name": "jsonserver",
  "version": "1.0.0",
  "description": "��#\u0000 \u0000j\u0000s\u0000o\u0000n\u0000s\u0000e\u0000r\u0000v\u0000e\u0000r\u0000\r\u0000 \u0000",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/geekyvinayak/jsonserver.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/geekyvinayak/jsonserver/issues"
  },
  "homepage": "https://github.com/geekyvinayak",
  "dependencies": {
    "json-server": "^0.17.0",
    "nodemon": "^2.0.20"
  }
}

第 4 步 - 现在上传 json 文件。从左侧菜单中的上传文件选项。但请确保 index.json 第 3 行代码与您的文件号匹配。

第 5 步：现在只需从网站顶部中心的按钮运行代码，在输出框中它将显示输出，但带有 url，您可以使用它访问 json 文件。