json-server 模拟接口服务

前端开发经常需要模拟接口请求，可以通过 json-server 实现。

1. 安装 json-server

在前端项目的终端命令行中执行

npm i json-server

2. 创建数据源

在项目中新建文件 db.json ，与 package.json 同级，内容为模拟的数据

• 注意 json 文件对格式的显示，整个数据用 {} 包裹，每一项数据为一个属性
• 属性和字符串都需要用双引号包裹

{
  "dataList": [
    {
      "id": 1,
      "title": "文章1"
    },
    {
      "id": 2,
      "title": "文章2"
    },
    {
      "id": 3,
      "title": "文章3"
    }
  ]
}

3. 添加启动接口服务的脚本

在 package.json 的 scripts 选项中添加 （端口可以自定义为其他值）

"serve": "json-server db.json --port 3000"

4. 启动接口服务

vscode 中直接启动

如下图显示，即启动成功

5. 访问接口

浏览器中访问 http://localhost:3000/dataList，可见模拟的数据