带你从零使用用JSON-Server搭建一个后端完成简易全栈项目

大海是蓝色blue
663 阅读6分钟

前言

工欲善其事，必先利其器，搭建一个简易的后端服务使用 json-server 是非常简单且快速的，它可以帮助你迅速建立一个 RESTful API 服务。json-server 是一个基于 Node.js 的工具，可以用来模拟后端服务器的行为。

什么是 RESTful API 服务？

这里我们需要解释一下什么是 RESTful API服务，为什么要构建他。API 大家应该知道，它是软件之间沟通的桥梁，想象一下，你有一个手机应用和一个网站后端服务器。手机应用需要获取服务器上的数据，比如用户信息、商品列表之类的，这时候就需要一个接口来让它们进行通信，这个接口就是 API。

RESTful API和传统接口不同，它围绕资源的操作（获取、创建、更新、删除）来设计接口。而传统接口可能有各种各样的设计方式，不一定是以资源为中心的。 RESTful API 把一切都看成是资源。资源可以是数据，像用户信息、订单信息；也可以是服务，比如查询天气的服务。每个资源都有一个唯一的标识符，通常是一个 URL（Uniform Resource Locator）。

举个例子来说，一个电商网站的商品就是资源。它的每一件商品可能有一个对应的 URL，像 example.com/api/product…，其中 “123” 可能是这个商品的编号，通过这个 URL 就可以对这个商品资源进行操作。

json-server做了什么？

理解了什么是 RESTful API 之后，相信你也对json-server有了一个初步的了解，他能做到的事情就是它可以模拟一个完整的后端 API。不需要编写任何服务器端代码，只需提供一个 JSON 文件，json-server 就会自动生成相应的 API 端点。

说一万遍定义，不如自己上手试一下，我们现在就可以来用node安装 json-server

安装 json-server

首先，你需要全局安装 json-server。打开命令行工具并输入以下命令：


npm install -g json-server

这将安装 json-server 到你的系统中，使得你可以在任何地方通过命令行访问它。

创建 JSON 文件

接下来，创建一个新的 JSON 文件来模拟数据库。例如，你可以创建一个名为 db.json 的文件，内容如下：

{
 "users": [
    {
      "id": "1",
      "name": "谭弘权"
    },
    {
      "id": "2",
      "name": "熊凯闻"
    },
    {
      "id": "3",
      "name": "王睿"
    }
  ],
  "posts": [
    {
      "id": "1",
      "title": "React Hooks 入门",
      "author": "1",
      "comments": [
        "1",
        "2"
      ]
    },
    {
      "id": "2",
      "title": "REACT + JSON-Server 全栈快跑",
      "content": "react component ",
      "userId": 2
    }
  ]
}

每个键都是一个资源，就像在 REST API 中一样。users 和 posts 是数组，表示多个条目.

启动 json-server

保存 db.json 文件后，在同一目录下打开命令行工具，并使用以下命令启动 json-server：

json-server --watch db.json --port3001

image.png

这样就创建了两个端点，点击进行可以看到我们写在 db.json 的数据，作为资源暴露在了端点上。 --watch 参数告诉 json-server 监视 db.json 文件的变化。如果文件有更新，服务器会自动重启以反映最新的数据。

image.png 默认情况下，json-server 会在 http://localhost:3000 上启动。你可以通过添加 -p 参数来指定其他端口，如 -p 5000。

现在 我们对 http://localhost:3001 这个url就可以发送请求并实现想要的操作了，我们今天给大家介绍两个方法去实现这个操作，用fetch API 或者 Apifox 来与 http://localhost:3001 这个 URL 交互，以实现对 API 端点的 CRUD 操作。

APIfox

Apifox 是一款集API调试、Mock、自动化测试等功能于一体的 API 开发协作工具.

大家可以点击官网去自行下载一下 Apifox - API 文档、调试、Mock、测试一体化协作平台。

安装完成之后打开软件，点击新建项目，自已随便取一个名字然后创建

image.png 然后点击 新建接口 image.png 会出现以下页面

image.png 在输入框中输入我们想要建立接口的端点，即我们刚刚用db.json 创建的呢两个，我们先用http://localhost:3001/users 试一试！ 这里默认的是 GET 请求，即从指定端点获取数据

image.png 输入http://localhost:3001/users 之后，点击发送，在下方的body就能看到我们请求之后得到的数据了 除了 GET 操作之外，我们还可以实现各种操作，比如删除指定的数据，和更新指定的数据等等。

我们来试试删除操作，将 GET 换成 DELETE 然后在端口上面加上 /1 指定删除 id 为1的数据

image.png 现在去 db.json 里看，就会发现 id=“1”的数据已经消失了

image.png

是不是很牛，可以直接通过一款工具，去发送各种我们想要的请求。

接下来是fetch api这个操作

Fetch api

fetch 是现代 JavaScript 中发起 HTTP 请求的推荐方式。它返回一个 Promise，可以用来处理异步操作，并且支持流式响应处理。使用 fetch，你可以轻松地与 json-server 提供的 RESTful API 交互，执行 CRUD（创建、读取、更新、删除）操作。我们这里简单介绍几个操作。

 GET 请求：获取所有用户

假设我们想要从 http://localhost:3001/users 获取所有用户的列表。我们可以使用 fetch 发送一个 GET 请求，并将响应转换为 JSON 格式。


// 发送 GET 请求获取所有用户
fetch('http://localhost:3001/users')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json(); // 将响应转换为 JSON
  })
  .then(data => console.log(data)) // 处理数据
  .catch(error => console.error('There was a problem with the fetch operation:', error));

解释：

  • fetch('http://localhost:3001/users'): 发送一个 GET 请求到 /users 端点。
  • .then(response => {...}): 处理响应对象。我们首先检查 response.ok 是否为 true，以确保请求成功。如果不是，抛出一个错误。
  • response.json(): 将响应体解析为 JSON 格式。
  • .then(data => console.log(data)): 在控制台中打印返回的数据。
  • .catch(error => ...): 捕获并处理任何可能发生的错误。
 GET 请求：获取特定用户

如果你想获取特定用户的详细信息，可以通过在 URL 中添加用户的 ID 来实现。例如，获取 id 为 2 的用户：

const userId = 2;

fetch(`http://localhost:3001/users/${userId}`)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with the fetch operation:', error));

解释：

  • fetch([http://localhost:3001/users/${userId})]: 使用模板字符串动态生成 URL，发送 GET 请求获取指定用户的详细信息。
DELETE 请求：删除用户

要删除一个用户，可以使用 DELETE 请求，并在 URL 中提供用户的 ID。json-server 会根据提供的 ID 删除相应的用户记录。

javascript
深色版本
const userId = 2;

fetch(`http://localhost:3001/users/${userId}`, {
  method: 'DELETE'
})
  .then(response => {
    if (response.ok) {
      console.log('User deleted successfully');
    } else {
      console.error('Failed to delete user');
    }
  })
  .catch(error => console.error('There was a problem with the fetch operation:', error));

解释：

  • method: 'DELETE': 指定请求方法为 DELETE。
  • fetch([http://localhost:3001/users/${userId})]: 动态生成 URL，发送 DELETE 请求删除指定用户。

通过 fetch API，你可以非常方便地与 json-server 提供的 RESTful API 进行交互。fetch 提供了简洁的语法、内置的 Promise 支持以及与现代 JavaScript 异步编程模式（如 async/await）的良好集成。无论是获取数据、创建新资源、更新现有资源还是删除资源，fetch 都能帮助你快速实现这些操作。

END

无论是初学者还是有经验的开发者，掌握这些工具和技术都将为你的项目开发带来极大的便利。json-server 和 fetch API 的结合，使得你可以专注于前端逻辑的实现，而无需过多关注后端的搭建和维护。Apifox 则进一步简化了 API 的管理和测试流程，帮助你更快地迭代和优化你的应用。

avatar
文章
阅读
粉丝