json-server的基本使用

news2024/12/24 20:32:19

1、mock是什么?

mockjs 作用:生成随机数据,拦截 Ajax 请求

目的:很多时候前端开发页面的过程中,后端的接口并没有写好,这个时候需要前端自己定义接口及接口的返回数据的结构体,这个时候就需要用到mock数据,有了mock接口之后,前端就像是有完整的后端一样,等待后端接口开发完成之后,前端就直接将 请求的地址切换到后端服务器就可以无缝切换接口的服务了。

市场:目前市场上mock 大概分为两类:在线mock 网站 本地项目中进行mock 【中大型项目中一般都是使用本地mock 】
官网链接:http://mockjs.com/

今天介绍的json-server就是个存储json数据的server,json-server 支持CORS和JSONP跨域请求。

2、搭建json-server环境

初始化项目

# 在任意位置创建一个文件夹,进入其中,打开dos窗口(命令行窗口),输入
npm init -y

在这里插入图片描述

安装json-server

npm i json-server  -D

在这里插入图片描述

3、创建json数据——db.json

在项目根目录下创建db.json,并写上合法的json数据
在这里插入图片描述

{
  "person": [
    {
      "id": 1,
      "name": "张无忌",
      "age": 30
    },
    {
      "id": 2,
      "name": "张三丰",
      "age": 100
    },
    {
      "id": 3,
      "name": "赵敏",
      "age": 18
    },
    {
      "id": 4,
      "name": "灭绝师太",
      "age": 88
    }
  ],
  "books": [
    {
      "id": 1,
      "name": "九阳神功",
      "price": 99.99
    },
    {
      "id": 2,
      "name": "乾坤大挪移",
      "price": 19.99
    },
    {
      "id": 3,
      "name": "九阴白骨爪",
      "price": 9.99
    },
    {
      "id": 4,
      "name": "降龙十八掌",
      "price": 99
    }
  ],
  "bookAuthors":[
    {
      "bookId":1,
      "authorsid":1,
      "name":"赵四",
      "company":"东北文化传媒"
    },
    {
      "bookId":2,
      "authorsid":2,
      "name":"宝强",
      "company":"河北传媒"
    },
    {
      "bookId":3,
      "authorsid":3,
      "name":"邓哥",
      "company":"深圳好事多磨公司"
    },
        {
      "bookId":4,
      "authorsid":4,
      "name":"超哥",
      "company":"超哥传奇有限公司"
    }
  ]
}

注意:每个键后面的值,只能是对象或者数组。

4、修改package.json配置

在package.json下增加如下代码:

  "scripts": {
    "server":"json-server db.json"
  },

5、启动服务

在命令行运行: npm run server

json-server把db.json 根节点的每一个key,当作了一个router。我们可以根据这个规则来编写测试数据。
在这里插入图片描述

6、JSON-SERVER的各种请求:

可以使用postman等工具测试以下请求

6.1、GET 请求数据列表

获取所有的书籍
localhost:3000/books

6.2、GET 请求指定ID的数据

localhost:3000/books/1

6.3、GET 请求指定字段值的数据

指定多个条件,用&符号连接。

localhost:3000/books?id=1&name=九阳神功
获取id为1和name为九阳神功的书籍,返回结果是数组(就算只有一条数据)

6.4、GET 数据分页

http://localhost:3000/books?_page=1&_limit=2
_page表示页码
_limit表示每页的条数

6.5、GET 数据排序

localhost:3000/books?_sort=price&_order=asc
asc 升序 desc 降序

6.6、GET 区间查询

http://localhost:3000/books?price_gte=40&price_lte=100
查找price的值大于等于40 而 小于等于100的记录

6.7、GET 搜索(模糊查询)

搜索所有属性值里包括“阳”的记录,模糊查询。在所有属性中进行查询。
http://localhost:3000/books?q=阳

采用_like来设置匹配某个字符串(或正则表达式)
http://localhost:3000/books?name_like=阳

6.8、GET 关联查询

http://localhost:3000/books/1?_embed=bookAuthors
查询books中id为1,并把bookAuthors中 bookId为1的数据关联出来。前提:db.json中必须有对应的数据内容

6.9、POST 添加数据

请求方式为:POST

  • localhost:3000/books

  • 设置请求头:

    ​ ajax里:Headers:{ Content-Type:‘application/json’ }

    ​ postman工具里:在body -> raw–>json

    {
      "id": 5,
      "name": "武穆遗书",
      "price": 120.99
    }

6.10、delete 删除数据

请求方式为:DELETE

http://localhost:3000/books/5
删除的时候,一般都需要传递一个唯一的标识(id)

6.11、put 修改数据

PUT 方法,常用来更新已有资源,若资源不存在,它也会进行创建

http://localhost:3000/books/5

{
    "name": "武穆遗书",
    "price": 120.99
}

PUT方法会更新整个资源对象,前端没有给出的字段,会自动清空。所以,要么我们在ajax的data中给出完整的对象信息,要么采用PATCH方法。

7、其他内容

7.1、修改端口号

json-server 默认是 3000 端口,我们也可以自己指定端口,可以通过命令方式修改,命令有点长,直接修改配置文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server":"json-server db.json --port 9090"
  },

7.2、json-server 的相关启动参数

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/568327.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【活动】云计算的优势与发展趋势

写在前面 人生是一场消耗,要把美好的时光放在喜欢的人与事上。 一、前言 云计算作为一种新兴的信息技术应用解决方案,可以帮助企业解决IT资源利用率低、IT基础设施的建设和维护成本高、IT系统的安全和稳定性问题等痛点,提高企业的业务灵活性…

react表格行下载文件方法总结

一、前言 下载文件时,后台接口返回的响应体是文件流格式的,前端接收时如果不进行处理,就会无法正确下载文件(有可能会直接打开文件等)。 在此记录下react的表格行使用file-saver下载文件的方法。(注意不同…

文件包含的本质、预处理符号、# vs ##

何为头文件? 在C语言中,文件包含是一种常见的编程技术,它允许程序员在一个源文件中使用另一个源文件中的函数或变量。 文件包含通常使用#include预处理指令来实现。#include指令告诉预处理器将文件的内容插入到当前文件的指定位置中。 例如&a…

今天面了个阿里拿 38K 出来的,让我见识到了测试界的天花板

一直觉得自己的技术已经很不错了,直到最近遇到了一个阿里来的大佬 5年测试,应该是能达到资深测试的水准,即不仅能熟练地开发业务,而且还能熟悉项目开发,测试,调试和发布的流程,而且还应该能全面…

第04章 IDEA的安装与使用

【Why IDEA ?】 【注】JetBrains官方说明: 尽管我们采取了多种措施确保受访者的代表性,但结果可能会略微偏向 JetBrains 产品的用户,因为这些用户更有可能参加调查。 此外,2022年,某美国软件开发商在对近千名专业的J…

chatgpt赋能python:Python中的Split函数:去空操作详解

Python中的Split函数:去空操作详解 在Python编程中,我们经常需要对字符串进行操作。而字符串的分割操作在其中是非常常见的操作。Python中的split函数便是用来实现字符串分割的函数。不过,在使用split函数时通常还需要经过去除空格等操作。 …

Inno软件打包发布并后台安装相关驱动

bat安装 bat脚本的具体书写可自行百度。 其主要思路是将Driver文件存放在Bin下面,先安装Bin,然后在执行bat脚本来安装driver 具体些步骤: (1)编写一个install.bat的脚本 echo off ::下面三行代码是不显示dos界面 i…

加急!指定日本| 教育学老师9天获邀请函申报CSC

S老师拟申报今年的国家留学基金委(CSC)公派访问学者项目,因所在高校要求提前上报,所以委托时只留给我们11天申请时间,且指定日本高校。最终我们在第9天获得熊本大学邀请函,提前完成了客户的委托。 S老师背景…

Android平台GB28181设备接入模块如何对接NV21、YV12、RGB、YUV等外部数据

技术背景 我们在对接Android平台GB28181设备接入模块的开发者时,遇到这样的场景,除了Android设备(如执法记录仪、智能安全帽等)自带的camera或camera2前后摄像头数据外,还有些场景是需要外部编码前或编码后数据&#…

淡季不淡,满帮一季度净利创历史新高的背后原因是什么?

进入五月,经济复苏的成果越发体现在很多基础行业的表现中。经济的“大动脉”货运行业,也迎来一份新答卷。 北京时间5月22日美股盘前,数字货运平台满帮集团(NYSE:YMM,简称:满帮),发布…

预约直播领券,1%服务费,视频号618大促激励来了!

视频号直播6.18大促激励计划来了! 激励有效期为2023年05月31日20:00:00至2023年06月18日23:59:59;参与对象为活动期间满足视频号开播条件的。 通过视频号直播选择“购物”类目开播开通橱窗功能的商家和达人,可参与4大激励计划。 预约领券激…

pix2pixHD---model---生成器

然后是model的搭建: 在creat_model函数中: import torch def create_model(opt):if opt.model pix2pixHD:from .pix2pixHD_model import Pix2PixHDModel, InferenceModelif opt.isTrain:model Pix2PixHDModel()else:model InferenceModel()else:fro…

【FFH】OpenHarmony——ArkTs应用开发+正则表达式

【FFH】OpenHarmony——ArkTs应用开发正则表达式 文章目录 【FFH】OpenHarmony——ArkTs应用开发正则表达式1. 前言——系列介绍2. 本文摘要及背景2.1 摘要2.2 背景2.3 MindMap 3. 正则表达式在ArkTs的使用3.1 变量 RegExp3.2 使用3.3 贪婪模式与懒惰模式:eye_speech_bubble:Ar…

从HelloWorld深入源码了解SpringSecurity底层逻辑

文章目录 一、环境搭建1、创建项目测试1.1、搭建基础项目1.2、整合Spring Security 二、实现原理1、Spring Security的实现原理1.1、Spring Security 如何完成认证和授权1.2、Security Filters 2、 Spring Security默认配置和如何自定义配置 三、整个HelloWorld的流程分析三、H…

流程用例的签名保障,Python接口自动化框架封装案例!

目录 前言: 1.项目背景及需求 2.框架整体架构设计 3.接口管理模块的封装 4.用例管理模块的封装 5.请求模块的封装 6.签名模块的封装 7.案例展示及代码实现 结语: 前言: 随着互联网技术的不断发展,人们对于软件质量的要求…

臻图信息跟进新基建建设,构建“智慧铁路”“指挥调度”管理系统

铁路作为国民经济的骨干、国家关键性基础建设,在社会经济发展中起到关键性作用,交通在全天运行、运量多、运价少、占地面积小和安全环保等方面有着显著的优势。 近年来,我国高度重视铁路发展,2020年8月国铁集团出台《新时代交通强…

Windows系统自带远程桌面和远程协助怎么连接?

随着IT技术的发展和远程办公的兴起,在日常工作中,远程桌面和远程协助等功能已经成为很多用户需要掌握的技能之一。而对于使用Windows系统的用户来说,Windows系统自带的远程桌面和远程协助功能,更是令人欣喜的利器。下面我们就来一…

油猴安装教程及ChatGPT配置

文章目录 目录 文章目录 前言 一. 安装油猴 二、使用步骤 三.安装插件 (ChatGPT) 四. 脚本推荐 前言 作者简介: zuiacsn 座右铭: 抱怨身处黑暗,不如提灯前行 内容介绍: 油猴 油猴(Tampermonkey)指的是一个流行的用户脚本管理器,它能使…

GAMES202作业1

目录 Shadow MapCalcLightMVP函数useShadowMap函数Bias函数 最终效果 PCF两个采样函数PCF函数最终效果 PCSSfindBlocker函数PCSS函数最终效果 参考 先放上公式: 后面的积分项是我们在作业0中就做好的blinnphong项,我们要求的就是积分项前,等…

认识 Protobuf 及其简单使用

文章目录 一、序列化与反序列化1.1 序列化1.2 反序列化1.3 序列化与反序列化的使用场景 二、初识 Protobuf三、Protobuf 的安装四、Protobuf 的使用案例4.1 创建并编写 .proto 文件的基本规范与语法4.2 编译 .proto 文件4.3 序列化与反序列化的使用 五、总结 ProtoBuf 的使用特…