简单易懂：如何用React和json-server搭建一个社交媒体应用（1）

本文链接：https://blog.csdn.net/ksjdskla/article/details/130078016

本系列介绍如何用React和json-server库搭建一个社交媒体应用，实现发帖，评论，搜索，注册登录，关注，分页加载等功能。本文介绍json-server在该项目的使用。

React是一个流行的前端框架，作为该项目的前端。那什么是json-server呢？

JSON Server 是一个可以帮助开发人员快速搭建 RESTful API 服务器的工具，它使用 JSON 文件作为数据存储。使用 JSON Server，你可以在几分钟内创建一个完整的 RESTful API 服务器，而无需编写任何后端代码。你只需要创建一个 JSON 文件，定义你的数据模型和 API 接口，然后启动 JSON Server，就可以开始使用 RESTful API 服务了。JSON Server 支持常见的 HTTP 方法，如 GET、POST、PUT、PATCH 和 DELETE，同时还支持查询参数、过滤器、排序和分页等功能。JSON Server 还提供了一个基于 Web 的管理界面，可以方便地查看和编辑数据。

其中提到的RESTful API，简单理解就是用 HTTP 方法（如 GET、POST、PUT、PATCH 和 DELETE）来操作资源。

json-server可以让我们几乎不用写后端代码即可搭建一个完整的应用。如何安装json-server呢？

确保你已经安装了 Node.js 和 npm。你可以在终端中输入以下命令来检查它们是否已经安装：
```
node -v
npm -v
```
如果输出了版本号，则说明已经安装成功。如果没有，可以去nodejs官网下载并安装。
在终端中输入以下命令来安装 JSON Server：
```
npm install -g json-server
```
其中，-g 参数表示全局安装，这样就可以在任何地方使用 JSON Server 命令了。

创建一个 JSON 文件，用于存储数据。例如，你可以创建一个名为 db.json 的文件，并在其中定义数据模型和 API 接口。
其中，对我们的社交媒体应用而言，db.json可以是这个样子的：

{
  "posts": [
    {
      "id": 1,
      "title": "odio curabitur convallis duis consequat dui nec nisi volutpat eleifend donec",
      "body": "Etiam pretium iaculis justo. In hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus. Nulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi. Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque. Quisque porta volutpat erat.",
      "userId": 3,
      "tags": [
        "eget",
        "dolor",
        "vel"
      ],
      "reactions": 6
    },
    {
      "id": 2,
      "title": "praesent id massa id nisl venenatis lacinia aenean sit amet justo morbi",
      "body": "Suspendisse potenti. Cras in purus eu magna vulputate luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel augue.",
      "userId": 4,
      "tags": [
        "a",
        "montes",
        "vestibulum"
      ],
      "reactions": 2
    }
  ]
}

上面只包含了2条posts，也就是2条贴文的数据。之后还可以定义其他的条目，比如users,comments等。每个条目都是一个数组，而条目里面的数据都是以对象的形式存储的，比如每一个帖子都有id，标题，正文，标签，点赞数等属性。

在终端中进入到存储数据的目录中，输入以下命令来启动 JSON Server：

json-server --watch db.json -p 3001

其中，–watch 参数表示监视文件变化，当文件发生变化时，JSON Server 会自动重新加载数据。-p 表示使用的端口号，因为之后我们React应用想使用3000端口号，所以这里指定3001。db.json 是你创建的 JSON 文件名。

启动成功后，你可以在浏览器中访问 http://localhost:3001 来查看 JSON Server 的 Web 界面，也可以使用 HTTP 方法来访问和操作数据资源。比如，我们刚刚在posts中加入了两条数据，我们可以通过使用http://localhost:3001/posts这个url来访问他。在浏览器中输入该url后，返回的数据如下：

[
  {
    "id": 1,
    "title": "odio curabitur convallis duis consequat dui nec nisi volutpat eleifend donec",
    "body": "Etiam pretium iaculis justo. In hac habitasse platea dictumst. Etiam faucibus cursus urna. Ut tellus. Nulla ut erat id mauris vulputate elementum. Nullam varius. Nulla facilisi. Cras non velit nec nisi vulputate nonummy. Maecenas tincidunt lacus at velit. Vivamus vel nulla eget eros elementum pellentesque. Quisque porta volutpat erat.",
    "userId": 3,
    "tags": [
      "eget",
      "dolor",
      "vel"
    ],
    "reactions": 6
  },
  {
    "id": 2,
    "title": "praesent id massa id nisl venenatis lacinia aenean sit amet justo morbi",
    "body": "Suspendisse potenti. Cras in purus eu magna vulputate luctus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum sagittis sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vel augue.",
    "userId": 4,
    "tags": [
      "a",
      "montes",
      "vestibulum"
    ],
    "reactions": 2
  }
]

以上就是安装 JSON Server 的步骤，如果一切顺利，你应该可以顺利地启动 JSON Server 并开始使用它了。顺便说一句，这些数据可以随机生成，比如我使用的是https://www.mockaroo.com/。

后续会介绍如何搭建React前端~