json rest api_JSON-Server作为前端开发中的伪REST API-CSDN博客

json rest api

介绍 ( Introduction )

Frontend development is changing day by day and we have to learn a lot more stuff. When we start learning a new framework or library, the first thing that is recommended to build a todo list which helps in doing all CRUD functions. But there is no solid backend/library available to make use of it to build a todo list.

前端开发日新月异，我们必须学习更多的知识。当我们开始学习新的框架或库时，建议首先建立一个有助于执行所有CRUD功能的待办事项列表。但是没有可靠的后端/库可用来构建待办事项列表。

Simulate a backend server and a REST API with a simple JSON file.

使用简单的JSON文件模拟后端服务器和REST API。

To overcome that problem json-server came into the picture. With it, we can make a fake REST api. I have used it in my app and thought of sharing it to the frontend community.

为了克服这个问题，json-server出现了。有了它，我们可以制作一个假的REST API。我已经在我的应用程序中使用过它，并想将其共享给前端社区。

JSON Server is an npm package that you can create a REST JSON webservice. All we need is a JSON file and that will be used as our backend REST.

JSON Server是一个npm软件包，您可以创建REST JSON Web服务。我们需要的只是一个JSON文件，它将用作我们的后端REST。

安装JSON服务器 ( Installing JSON Server )

You can either install it locally for specific project or globally. I will go with locally.

您可以在本地为特定项目安装它，也可以在全球范围内安装它。我会和当地人一起去。

$npm install -D json-server

Above is a single line command to install the json server. -D Package will appear in your devDependencies. I am not going to explain about that much here. If you want to learn more about that go through the docs for npm install. Check JSON Server version using json-server -v.

上面是安装json服务器的单行命令。 -D软件包将出现在您的devDependencies中 。我不会在这里解释太多。如果您想了解更多信息，请阅读npm install 文档。使用json-server -v检查JSON服务器版本。

JSON文件 ( JSON file )

As per the standard convention, I am going to name the file db.json, you can name it as per your needs.

按照标准约定，我将命名文件db.json ，您可以根据需要将其命名。

{
  "Todos": [
    {
      "id": 1,
      "todo": "Check Todo"
    },
    {
      "id": 2,
      "todo": "New Todo"
    }
  ]
}

For simplicity I have included two elements into the Todos array. You can add more also.

为简单起见，我在Todos数组中包含了两个元素。您也可以添加更多。

启动JSON服务器 ( Start the JSON Server )

$ json-server --watch db.json

Your JSON Server will be running on port

3000.

3000上运行。

Now that we have our server and API running, we can test it and access it with a tool like POSTman or Insomnia.

现在我们已经运行了服务器和API，我们可以对其进行测试并使用POSTman或Insomnia之类的工具进行访问。

These are REST clients that help us run http calls.

这些是REST客户端，可帮助我们运行http调用。

CRUD操作 ( CRUD Operations )

Moving onto the CRUD operations. This is how we can access our data using RESTful routes.

进入CRUD操作。这就是我们可以使用RESTful路由访问数据的方式。

Routing Url's
[GET] http://localhost:3000/Todos
[POST] http://localhost:3000/Todos post params:!
[PUT] http://localhost:3000/Todos post params:!
[DELETE] http://localhost:3000/Todos/id

通过POSTman测试 ( Testing via POSTman )

GET请求 (GET Request)

POST请求 (POST Request)

PUT请求 (PUT Request)

删除请求 (DELETE Request)

结论 ( Conclusion )

Now we can see that db.json file can make REST webservice. Also we can make custom URIs with a mapping file. I will cover those area in the next article continuation of this.

现在，我们可以看到db.json文件可以构成REST Web服务。我们还可以使用映射文件创建自定义URI。我将在下一篇文章的后续部分中讨论这些领域。

I hope this article will remove each and every Frontend developers pain (banging the head) for a backend server to test with. Further, you can checkout the code in my github repo and also refer official json-server docs for more operations

我希望本文能够消除每个前端开发人员的痛苦（不停地尝试）以进行后端服务器测试。此外，您可以在我的github存储库中检出代码，还可以参考json-server官方文档进行更多操作

If you have any queries, let me know in comments.

如有任何疑问，请在评论中让我知道。