【数据模拟】还在愁没有后端接口测试?快来使用json-server零编码实现强大的后端接口

简介: 【数据模拟】还在愁没有后端接口测试?快来使用json-server零编码实现强大的后端接口

前言

在写前端项目时,你是否会遇到以下情况:

  • 与后端进度不一致,急需接口测试项目功能
  • 压根没有后端接口,而自己又迫切需要模拟接口模拟数据进行测试

若你正需要一套强大的,能够符合你心意的模拟的后端数据接口,那么json-server将是你的不二之选

json-server介绍

使用json-server我们只需要提供一个json文件,或者写几行简单的js脚本就可以模拟出RESTful API的接口。

安装

使用npm全局安装:

npm install -g json-server

入门

创建JSON文件

创建一个db.json包含一些数据的文件:

{
    "posts": [
        {
            "id": 1,
            "title": "json-server",
            "author": "typicode"
        },
        {
            "id": 2,
            "title": "json-server2",
            "author": "typicode2"
        }
    ],
    "comments": [
        {
            "id": 1,
            "body": "some comment",
            "postId": 1
        },
        {
            "id": 2,
            "body": "some comment2",
            "postId": 2,
            "author": {
                "name": "typicode"
            }
        },
        {
            "id": 3,
            "body": "some comment3",
            "postId": 1
        }
    ],
    "profile": {
        "name": "typicode"
    }
}

JSON文件中一级的key值就是一个接口的名称,如上所示会生成三个接口:

  • /posts
  • /comments
  • /profile

key值对应的数组内就是该接口的数据。

同时在comments的数据中有一个postId字段(注意不是postsId)对应的是posts中的id,表示comments是与posts相关联的(类似于后端的表关联)

启动JSON server

控制台运行启动db.json

json-server --watch db.json

启动成功:

在这里插入图片描述

默认启动使用的端口号是3000,此时直接访问:http://localhost:3000/posts就会得到posts中的数据:

在这里插入图片描述

指定端口号

使用--port指定端口号为5000

json-server --watch db.json --port 5000

接口使用

对于 JSON server生成的接口,可以同时使用 POSTPUTPATCHDELETE 请求,对应的更改将自动安全地保存到 db.json文件中

简单使用

# 获取所有的posts信息
GET    /posts
 
# 获取id=1的posts信息
GET    /posts/1
# 或
GET    /posts/?id=1
 
# 添加posts信息,请求body中必须包含posts的属性数据,json-server自动保存。
POST   /posts
 
# 修改posts中id=1的数据,请求body中必须包含posts的属性数据
PUT    /posts/1
# 或
PUT       /posts/?id=1
# PATCH请求补丁式修改
PATCH  /posts/1
 
# 删除posts中id=1的信息
DELETE /posts/1
 

筛选

一级筛选

# 获取posts中title=json-server并且author=typicode的数据
GET /posts?title=json-server&author=typicode

使用 . 访问深层属性

# 获取comments中author.name=typicode的数据
GET /comments?author.name=typicode

在这里插入图片描述

使用判断条件

可以用的判断条件为:

  • _gte : 大于等于
  • _lte : 小于等于
  • _ne : 不等于
  • _like : 包含
# 查询posts中id不等于1的数据
GET /posts?id_ne=1

GET /posts?id_lte=1
GET /posts?title_like=server

连接表查询

# 查询posts中id=1对应的comments中的数据
GET /posts/1/comments

在这里插入图片描述

分页

_page: 第几页
_limit:一页多少条

GET /posts?_page=1
GET /posts?_page=2&_limit=1
  • 默认一页10条
  • 后台会返回总条数,总条数的数据在响应头:X-Total-Count

排序

_sort:排序的字段
_order:排序的方式:升序asc(默认),降序desc

# 根据id升序查询posts中数据
GET /posts?_sort=id&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc

支持多个字段排序:

GET /posts?_sort=id,title&_order=desc,asc

_start:片开始的位置
_end_limit:片结束的位置

Array.slice完全一样工作(即_start具有包容性和_end排他性)

# 查询posts中下标0(包含下标0)到下标1(不包含下标1)之间的数据,即第1条
GET /posts?_start=0&_end=1
# 查询posts中id=1对应的comments中的数据的下标1到下标3之间的数据
GET /posts/1/comments?_start=1&_end=3

全文搜索

q:搜索内容

# 搜索posts中包含typicode2的数据
GET /posts?q=typicode2

关系

同时获取子资源

_embed:需要包含的子资源

GET /posts?_embed=comments

获取包含子资源comments中数据(根据comments中的postIdposts中的id相对应进行查询)的posts数据

posts对应的comments子资源会存放到postscomments字段中

在这里插入图片描述

GET /posts/1?_embed=comments

获取postsid=1并且包含其对应的子资源comments数据的数据
在这里插入图片描述

同时获取父资源

_expand:需要包含的父资源

GET /comments?_expand=post

在这里插入图片描述

GET /comments/1?_expand=post

在这里插入图片描述

获取或创建嵌套资源

GET  /posts/1/comments
POST /posts/1/comments
相关文章
|
16天前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
33 1
|
13天前
|
存储 JSON Go
在Gin框架中优雅地处理HTTP请求体中的JSON数据
在Gin框架中优雅地处理HTTP请求体中的JSON数据
|
17天前
|
JSON JavaScript 数据格式
vue写入json数据到文本中+vue引入cdn的用法
vue写入json数据到文本中+vue引入cdn的用法
40 10
|
13天前
|
SQL JSON Java
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
本文为Spring Boot增删改查接口的小白入门教程,介绍了项目的构建、配置YML文件、代码编写(包括实体类、Mapper接口、Mapper.xml、Service和Controller)以及使用Postman进行接口测试的方法。同时提供了SQL代码和完整代码的下载链接。
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
|
14天前
|
JSON 数据格式
Blob格式转json格式,拿到后端返回的json数据
文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。
29 0
Blob格式转json格式,拿到后端返回的json数据
|
1天前
|
XML JSON 前端开发
C#使用HttpClient四种请求数据格式:json、表单数据、文件上传、xml格式
C#使用HttpClient四种请求数据格式:json、表单数据、文件上传、xml格式
21 0
|
1天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
5 0
|
28天前
|
JavaScript 前端开发 测试技术
ChatGPT与接口测试
ChatGPT与接口测试,测试通过
32 5
|
4天前
|
前端开发 NoSQL 关系型数据库
探索后端开发:从零到精通的旅程
【9月更文挑战第36天】在数字时代,后端开发是构建强大、可靠和高效应用程序的核心。本篇文章将带你踏上一段奇妙之旅,从基础概念到高级实践,揭示后端开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的知识和启发。让我们一起探索后端开发的世界,发现它的无限可能!
18 3
|
5天前
|
前端开发 JavaScript 数据库
探索后端开发:从新手到专家的旅程
【9月更文挑战第35天】在数字世界的后台,后端开发是支撑起整个互联网的骨架。本文将带你走进后端的世界,从基础概念到高级应用,一起探索如何构建强大而灵活的后端系统。无论你是初学者还是有经验的开发者,都能在这段旅程中找到新的启示和成长的机会。

热门文章

最新文章