如何在React中无需NodeJS的情况下提供JSON文件?

huangapple go评论57阅读模式
英文:

How to serve JSON file via React without NodeJS?

问题

我在不使用NodeJS的情况下使用React。我使用以下命令创建了它:

npx create-react-app my-app

我想通过链接提供一个静态JSON文件或其内容(我已经在项目中有该文件),以便其他软件可以通过调用此链接作为API来集成它。

我按照这个答案的方法操作,但生成的内容是一个包含HTML标签的网页,而我实际上想要的是只返回JSON文件或其数据,供其他人请求。

英文:

I am using React without NodeJS. I created it using

npx create-react-app my-app

I want to serve a static JSON file or its content (I already have the file in the project) via a link so that it can be integrated by other software by calling this as API.

I followed this answer but the generated content is a webpage consists of HTML tags, but what I actually want is to return only either the JSON file or its data for people to request.

答案1

得分: 1

步骤1 - 只需访问https://replit.com/并在那里注册...注册后,您将在那里看到您的仪表板,创建一个新的"repel",当它要求选择模板时,只需选择"NODE JS"选项如何在React中无需NodeJS的情况下提供JSON文件?

步骤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 - 现在,在那里您将看到一个package.json文件,请将其代码替换为以下代码。

{
  "name": "jsonserver",
  "version": "1.0.0",
  "description": "JSON服务器",
  "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行代码和您的文件编号匹配。
如何在React中无需NodeJS的情况下提供JSON文件?

步骤5 - 现在只需点击网站顶部中央的按钮运行代码,在输出框中,它将显示带有URL的输出,您可以使用该URL访问JSON文件。

如何在React中无需NodeJS的情况下提供JSON文件?

英文:

step 1 -just go to https://replit.com/ and sign up there... after signup you will have your dashboard there create a new repel and when it asks for template just choose the "NODE JS" option 如何在React中无需NodeJS的情况下提供JSON文件? .

step 2- now just paste the below code in your index.js file.

DONT FORGET TO CHANGE YOUR FILE NAME AT LINE 3 from db.json to your file name.

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);

Step 3 - now there you will see a package .json file replace its code with the following code.

{
  "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"
  }
}

Step 4- now upload you json file. from upload file options present at left menu. BUt make sure that index.json line 3 code and your file number match.
如何在React中无需NodeJS的情况下提供JSON文件?

step 5: Now just run the code from button at center top of website and in output box it will show outbut with url using which you can access the json file.

如何在React中无需NodeJS的情况下提供JSON文件?

huangapple
  • 本文由 发表于 2023年6月6日 16:40:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76412860.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定