【数据模拟】还在愁没有后端接口测试?快来使用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
相关文章
|
23天前
|
存储 JSON 安全
商品详情(item getAPI接口)json数据格式参考
某东商品详情(item get API接口)的JSON数据格式参考如下
|
27天前
|
JSON API 数据格式
商品详情(item getAPI接口)json数据格式参考
淘宝商品详情(item get API接口)返回的JSON数据格式是一个复杂且灵活的结构,包含多个字段和对象。以下是一个简化的JSON数据格式参考:
|
26天前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据:从编码到解码
在现代Web开发中,JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据,包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法,可以显著提升JSON处理的性能,确保系统快速稳定运行。
|
29天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
105 1
|
1月前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应
|
20天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
2月前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
29天前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
124 0
|
2月前
|
JavaScript 前端开发
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
367 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
|
2月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。