搭建全web的API接口神器json-server详解

1,329 阅读2分钟

json-server-安装及基本使用

能json-server快速地根据已有json文件,生成接口

使用步骤

全局安装json-server

以前安装过的全局包:nodemon,nrm

它是依赖于nodejs的第三方包,它是一个独立的工具,并不限于某个项目,可以全局安装。

npm i json-server -g

如果是mac本,可能需要加sudo,即:sudo npm i json-server -g

1.准备空文件夹

在任意目录下,准备一个空文件夹,取名mock-server(可改成其它名字)

2.创建json文件

在文件夹中新建一个名为db.json文件(可改其它名称,注意名字是是英文

在任意目录下,准备一个空文件夹,取名mock-server(可改成其它名字) image.png

3.初始化结构

在db.json文件中,按json格式的要求,去定义一个对象:

  • 键值对格式
  • 双引号括起来
{
  "assets": [
        { "id": 1, "name": "外套", "price": 99 },
        { "id": 2, "name": "裤子", "price": 34 },
        { "id": 3, "name": "鞋", "price": 25.4 },
        { "id": 4, "name": "头发", "price": 19900 }
    ]
}

4.启动接口服务

根据上面创建的db.json自动地生成接口。

进入到上一步创建的文件夹下

此文件夹下,打开命令行窗口,输入命令json-server db.json -p 8888 (json-server后有空格)

image.png

5.测试

在浏览器中访问上面地址

注意:

  • 产生的接口地址中的assets是与db.json中的属性名是对应的。
  • db.json的内容必须是json格式。
  • 属性名 ---> 接口的地址
  • 属性值 ---> 接口返回数据 (数组|对象)

RESTful接口

目标

了解restFul风格的定义

问题导入

在写接口时,每个程序员都有自己的写法:取不同的名字,例如:实现添加资产

A同学: localhost:3000/addAsset | delAsset

B同学: localhost:3000/insertAsset | deleteAsset

C同学: localhost:3000/tjzj | sczj

RESTful接口

针对上述问题,提出一套约定。RESTful接口的规范是通过:

  • 请求方式来决定操作类别(添加,删除,修改,查询)
  • 用名词来表示要操作的目标

json-server提供的就是符合restful规则的接口。

测试

以上面启动的服务为例:一旦服务启动成功,就会自动生成如下接口地址。

接口地址请求方式操作类型
localhost:3000/assetsGET获取全部数据
localhost:3000/assets/1GET获取单个数据
localhost:3000/assetsPOST添加操作 。参数: {name,price}
localhost:3000/assets/1DELETE删除操作
localhost:3000/assets/1PUT完整修改。参数:{name,price}
localhost:3000/assets/1PATCH局部修改。参数:{name}

以上接口就是符合restful要求的接口规则。

参考文档