json-server的基本使用

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.mfbz.cn/a/23866.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ReactRouterDom-v5v6用法与异同

本文作者系360奇舞团前端开发工程师 简介: React Router Dom是React.js中用于实现路由功能的常用库。在React应用中,路由可以帮助我们管理页面之间的导航和状态,并实现动态加载组件。本文将深入探讨React Router Dom的两个主要版本&#xff1…

【微电网】含风、光、储联合发电的微电网优化调度研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

Jupyter程序安装和使用指南【操作示例】

Jupyter Notebook(简称Jupyter)是一个交互式编辑器,它支持运行40多种编程语言,便于创建和共享文档。Jupyter本质上是一个Web应用程序,与其他编辑器相比,它具有小巧、灵活、支持实时代码、方便图表展示等优点。下面分别为大家演示如…

辅助生成: 低延迟文本生成的新方向

大型语言模型如今风靡一时,许多公司投入大量资源来扩展它们规模并解锁新功能。然而,作为注意力持续时间不断缩短的人类,我们并不喜欢大模型缓慢的响应时间。由于延迟对于良好的用户体验至关重要,人们通常使用较小的模型来完成任务…

EnjoyVIID部署

1、下载 git clone https://gitee.com/tsingeye/EnjoyVIID.git 2、导入数据库 创建表enjoyviid 导入数据库(修改数据库文件里的编码) EnjoyVIID/sql/tsingeye-viid.sql 3、修改配置 vim EnjoyVIID/tsingeye-admin/src/main/resources/application-dev.yml 修改数据库连接、re…

接口测试--apipost接口断言详解

在做接口测试的时候,会对接口进行断言,一个完整的接口测试,包括:请求->获取响应正文->断言。 一、apipost如何进行断言 apipost的断言设置实在后执行脚本中进行编写的。apipost本身提供了11中断言: apt.asser…

Linux-0.11 kernel目录进程管理asm.s详解

Linux-0.11 kernel目录进程管理asm.s详解 模块简介 该模块和CPU异常处理相关,在代码结构上asm.s和traps.c强相关。 CPU探测到异常时,主要分为两种处理方式,一种是有错误码,另一种是没有错误码,对应的方法就是error_c…

URP自定义屏幕后处理

回到目录 大家好,我是阿赵。这次来说一下URP渲染管线里面怎样使用后处理效果,还有怎样去自定义后处理效果。 一、使用URP自带的后处理效果 要使用URP自带的后处理效果,方法很简单,和Unity内置渲染管线的PostProcessing后处理很…

任务7 课程信息管理系统

系列文章 任务7 课程信息管理系统 已知课程的信息包括:课程编号,课程名称,课程性质(必修、选修),课时,学分,考核方式(考试、考查课),开课学期&a…

Ubuntu22.04安装MySQL8

在 Ubuntu 22.04 上安装 MySQL 8,可以按照以下步骤进行: 安装MySQL需要在root用户下 sudo su -更新软件包列表: sudo apt update安装 MySQL 8: sudo apt install mysql-server安装过程中会提示设置 MySQL root 用户的密码。 确认…

(学习日记)AD学习 #4

写在前面: 由于时间的不足与学习的碎片化,写博客变得有些奢侈。 但是对于记录学习(忘了以后能快速复习)的渴望一天天变得强烈。 既然如此 不如以天为单位,以时间为顺序,仅仅将博客当做一个知识学习的目录&a…

波奇学C++:模板和STL

什么是模板?为什么我们需要模板? 先假设一个场景,我们要编写一个函数交换a,b两个数的值 void swap(int& a,int& b) {int cmpa;ab;ba; } swap函数可以帮我们交换两个int型的值,那如果要交换的类型是float,do…

【linux解压和打包文件】

TOC 打包成zip文件 指令 zip zip -r -q -o html.zip html/ -r 参数表示递归打包包含子目录的全部内容,-q 参数表示为安静模式,即不向屏幕输出信息,-o 表示输出文件,需在其后紧跟打包输出文件名。解压zip文件 1.unzip -q …

【HMS Core】【ML Kit】活体检测FAQ合集

【问题描述1】 使用示例代码集成活体检测SDK时,报错state code -7001 【解决方案】 使用示例代码前请详细阅读示例工程中的“README”文件。您需要完成以下操作后才可以运行示例代码。 在AppGallery Connect网站下载自己应用的“agconnect-services.json”文件&a…

服务(第三十二篇)nginx做缓存服务器

nginx作为缓存服务配置语法 1、proxy_cache_path 配置语法(即缓存路径配置语法) Syntax:proxy_cache_path path [levelslevels] [use_temp_pathon|off] keys_zonename:size [inactivetime] [max_sizesize] [manager_filesnumber] [manager_s…

深度学习常用名词解析

深度学习: 英文DL(Deep Learning),指多层的人工神经网络和训练它的方法。一层大量的神经网络会把大量的矩阵数字作为输入,通过非线性激活方法获取权重,再产生另一个数据集和作为输出。 Epoch: 在模型训练的时候含义是训练集中的…

减肥瘦身自律APP软件开发功能有哪些?

减肥瘦身是很多女人一生都在奋斗的目标,如果找不对方法,减肥效果事倍功半还可能会反弹,所以越来越多的人推崇健康科学的减肥理念,把瘦身的重心转移到饮食和运动管理上,于是市场上出现了减肥瘦身自律类的APP软件&#x…

vue实现二维码识别功能 读取二维码内容

我们可以访问 https://www.wwei.cn/?frombdtp 在输入框中输入文本 然后 点击生成二维码 他就会给我生成一个对应信息的二维码图片 我们可以复制到本地 打开vue项目 先引入依赖 npm install canvas jsqr然后组件编写代码如下 <template><div><input type&qu…

数据结构-查找(顺序查找与二分查找的讲解与代码实现)

顺序查找概念&#xff1a;从表的另一端开始&#xff0c;一次将记录的关键字和给定值进行比较&#xff0c;若某个记录的关键字和给定的值相等&#xff0c;则查找成功&#xff0c;反之则查找失败。 ASL:平均查找长度 pi查找概率&#xff0c;ci查找次数 eg&#xff1a;序列1&…

二分搜索树层序遍历

二分搜索树的层序遍历&#xff0c;即逐层进行遍历&#xff0c;即将每层的节点存在队列当中&#xff0c;然后进行出队&#xff08;取出节点&#xff09;和入队&#xff08;存入下一层的节点&#xff09;的操作&#xff0c;以此达到遍历的目的。 通过引入一个队列来支撑层序遍历…
最新文章