当前位置: 首页 > news >正文

json-server单独使用或者在react中进行使用

json-server

  • json-server使用教程
    • 修改json-server端口号启动
    • 1、全局安装json-server
    • 2、在根目录生成一个db.json
    • 3、启动 访问
  • react中进行使用
    • react中修改json-server启动端口号
    • 1、 第一步也是安装,和第一种一样
    • 2、在根路径下定义一个__json_server_mock__文件夹
    • 3、在react中进行编辑
    • 4、启动 运行
  • 增删改查
    • 1.接口规则-RESTful
    • 2.以axios作为增删改查请求
    • **实例代码**
  • **如有问题请联系小编,及时进行更改**

json-server使用教程

修改json-server端口号启动

json-server --watch db.json --port 3004

1、全局安装json-server

安装:npm i json-server -g

2、在根目录生成一个db.json

在json文件中定义以下类型

{"list": [{"id": 1,"name": "吃饭","flag": false},{"id": 2,"name": "睡觉","flag": true},{"id": 3,"name": "打豆豆","flag": true}],"login":{"username":"admin","password":"123456"}
}

3、启动 访问

启动json-server: json-server --watch db.json

访问抛出的接口就能够在浏览器中获取
在这里插入图片描述

react中进行使用

react中修改json-server启动端口号

yarn run json-server --port 3004 

1、 第一步也是安装,和第一种一样

2、在根路径下定义一个__json_server_mock__文件夹

在该文件夹下定义db.json文件
在这里插入图片描述

3、在react中进行编辑

在package.json中的script 添加"json-server":
"json-server __json_server_mock__/db.json --watch"

4、启动 运行

npm run json-server \ yarn run json-server

增删改查

1.接口规则-RESTful

目标:了解一种接口定义规范resetful

接口规范:如何定义接口地址,请求方式,传参方式,对应不同的请求操作行为。
具体规则

接口地址请求方式操作行为
/listGET查询所有列表
/list/:idGET查询单个详情 /list/1
/listPOST添加,提交的参数在请求体
/list/:idDELETE删除 /list/1
/list/:idPUT修改 /list/1 + 请求体{name,cTime} 全部修改
/brands/:idPATCH修改 /brands/1 + 请求体{name} 个别修改

查询的时候还有一下规则:

  • 1、http://localhost:3000/db 访问的是db.json文件下的所有内容;
  • 2、http://localhost:3000/layoutList?categoryName= 模拟接口参数可筛选该目录下内容
  • 3、分页查询 参数为 _start, _end, _limit,并可添加其它参数筛选条件
    如:http://localhost:3000/posts?_start=6&_limit=3
    http://localhost:3000/posts?_start=3&_end=6
  • 4、排序 参数为_sort, _order
    如:http://localhost:3000/posts?_sort=id&_order=asc
    http://localhost:3000/posts?_sort=user,views&_order=desc,asc
  • 5、操作符 _gte, _lte, _ne, _like
    _gte大于,_lte小于, _ne非, _like模糊查询
  • 6、q全局搜索(模糊查询)

这个表格可以作为接口调用的参考。

2.以axios作为增删改查请求

axios的使用:

  • 查询所有

  • 查询单个

  • 添加操作

  • 删除操作

  • 修改操作

实例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="./axios.min.js"></script><script>// - 查询所有axios.get('http://localhost:3000/list').then(res=>{// res 响应报文对象(响应状态行+响应头+响应主体)// res.data 就是响应主体(返回的数据)console.log(res.data)}).catch(err=>{// 错误对象console.log(err)})// - 查询单个axios.get('http://localhost:3000/list/2').then(res=>{console.log(res.data)}).catch(err=>{console.log(err)})// - 添加操作// 第二个参数:请求体传参对象axios.post('http://localhost:3000/list',{name: '奥拓',flag: '干饭人'}).then(res=>{console.log('添加成功')})// - 删除操作axios.delete('http://localhost:3000/list/4').then(res=>{console.log('删除成功')})// - 修改操作// 第二个参数:请求体传参对象axios.patch('http://localhost:3000/list/3',{name: '奥拓'}).then(res=>{console.log('修改成功')})axios.put('http://localhost:3000/list/3',{name: '奥迪'}).then(res=>{console.log('修改成功')})// - 带查询参数// 1. 自己手动在地址栏拼接?后的键值对  ?id=2&name=宝马// 2. 可以传对象提交多个筛选条件 // 3. get()中第二个参数可以用来提交参数对象  {params:{更多筛选条件}}// json-server提供模糊查询  字段_likeaxios.get('http://localhost:3000/list',{params:{name_like: '奥'}}).then(res=>{console.log(res.data)}).catch(err=>{console.log(err)})</script>
</body></html>

如有问题请联系小编,及时进行更改

相关文章:

json-server单独使用或者在react中进行使用

json-serverjson-server使用教程修改json-server端口号启动1、全局安装json-server2、在根目录生成一个db.json3、启动 访问react中进行使用react中修改json-server启动端口号1、 第一步也是安装&#xff0c;和第一种一样2、在根路径下定义一个__json_server_mock__文件夹3、在…...

【6G 新技术】6G数据面介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…...

【AI绘图学习笔记】深度前馈网络(一)

有关深度前馈网络的部分知识&#xff0c;我们已经在吴恩达的机器学习课程中有过了解了&#xff0c;本章主要是对《深度学习》花书中第六章&#xff1a;深度前馈网络的总结笔记。我希望你在看到这一章的时候&#xff0c;能回忆起机器学习课程中的一些环节或者细节&#xff0c;这…...

目标检测笔记合集

目标检测笔记合集1. 必看的两篇目标检测论文2. 必速看的深度学习目标检测的论文集及概述2.1 一份Slide&#xff08;PPT)两张表格带你快速了解目标检测2.2 最新目标检测算法回顾2022笔记合集3.目标检测的应用与需求4.目标检测的定义与挑战5.目标检测损失函数的进展6.目标检测IOU…...

《计算机网络》期末复习笔记

文章目录一、一些英文名词的标签&#xff08;方便记忆&#xff09;二、OSI七层协议三、综合题3.0 知识点储备3.1 在Internet 网中&#xff0c;某计算机的IP 地址是11001010.01100000.00101100.01011000 &#xff0c;请回答下列问题3.2 假定发送方要发送的数据为10000101。采用C…...

linux下安装SonarQube

目录1. 准备安装环境2. 安装postgres数据库3. 安装SonarQube4. 使用SonarQube1. 准备安装环境 这里安装SonarQube的系统环境是Red Hat Enterprise Linux release 8.7 &#xff0c;然后将jdk的压缩包&#xff08;jdk-17.0.2_linux-x64_bin.tar.gz&#xff09;和sonarQube的压缩…...

MyBatis-Plus(狂神)

一.特点 无侵入&#xff1a;只做增强不做改变&#xff0c;引入它不会对现有工程产生影响&#xff0c;如丝般顺滑损耗小&#xff1a;启动即会自动注入基本 CURD&#xff0c;性能基本无损耗&#xff0c;直接面向对象操作强大的 CRUD 操作&#xff1a;内置通用 Mapper、通用 Serv…...

Python3实现写作

导语T_T没有科研梦想的人半夜过来水篇文章~~~让Python学会写写歌&#xff0c;创创作~~~纯属娱乐~~~改编自PyTorch官网的一个教程&#xff0c;不过我用TF写的&#xff0c;然后生成英文变成了生成中文~~~Lets Go~~~相关文件百度网盘下载链接: https://pan.baidu.com/s/1VUEFR82Cq…...

UEFI实战--------HII之uni文件

uni文件 HII的实现涉及到多种不同类型的文件&#xff0c;uni文件是其中最简单的一种&#xff0c;它用来存放各种语言的字符串以实现本地化。本节主要参考自《edk-ii-uni-specification.pdf》&#xff0c;后面简称为参考文档。 关于uni文件的作用&#xff0c;在参考文档中做了如…...

基于Spring Boot集成MyBatis-3.5.9操作数据库

记录&#xff1a;382场景&#xff1a;在Spring Boot 2.6.3中集成MyBatis 3.5.9操作数据库。实现MyBatis的查、增、改、删操作数据库示例。MyBatis官网&#xff1a;http://www.mybatis.org/MyBatis源码&#xff1a;https://github.com/mybatis/1.初始化准备1.1创建Maven工程使用…...

了解国外SEO负面压制的现状与应对策略!

随着全球化的发展&#xff0c;越来越多的企业和品牌开始将目光转向海外市场&#xff0c;而谷歌作为全球最大的搜索引擎之一&#xff0c;也成为了外贸企业最主要的搜索引擎之一。 然而&#xff0c;随着谷歌的不断发展&#xff0c;国外SEO负面压制的现状也愈发严峻&#xff0c;外…...

Yolov5-交通标志检测与识别

项目介绍 上一篇文章介绍了基于卷积神经网络的交通标志分类识别Python交通标志识别基于卷积神经网络的保姆级教程&#xff08;Tensorflow&#xff09;&#xff0c;并且最后实现了一个pyqt5的GUI界面&#xff0c;并且还制作了一个简单的Falsk前端网页实现了前后端的一个简单交互…...

Linux内核Thermal框架详解五、Thermal Core(4)

本文部分内容参考Linux Thermal 学习笔记 - 爱码网。特此致谢&#xff01; 接前一篇文章Linux内核Thermal框架详解四、Thermal Core&#xff08;3&#xff09; 三、相关源码及分析 2. thermal_register_governors 上一回说到这一段代码&#xff1a; for (__governor __gove…...

gcc 编译的过程

#include <stdio.h> #define PI 3.14 int main(int argc, char const *argv[]) { //打印IP的值printf("PI %lf\n", PI);return 0; }编译的过程&#xff1a;预处理、编译、汇编、链接1.预处理&#xff1a;宏替换、删除注释、头文件包含、条件编译 -E &#xf…...

Hadoop入个门

文章目录1️⃣、Hadoop概述1.1、Hadoop是什么1.2、三大发行版本1.3、优势1.4、组成HDFSYARNMapReduceHDFS、YARN、MapReduce三者关系1.6、大数据技术生态体系image-202303111027195802️⃣、Hadoop运行环境搭建2.1、虚拟机环境准备2.2、克隆虚拟机2.3、在hadoop2上安装JDK2.4、…...

python 从0到批量下载某站视频

简介&#xff1a;真实从0到1&#xff0c;童叟无欺&#xff5e; 目标&#xff1a;用python批量下载某站搜索视频&#xff0c;以“CG 服装”为例 本章主要介绍如何用python把搜索到的视频直接下载到自己的本地文件夹中&#xff5e; 介绍一下工作流1. 下载并安装python2. 测试pyt…...

【深度学习】神经网络和深度学习--卷积和池化的作用

深度学习通常指训练大型深度的神经网络的过程。 与传统的神经网络模型相比&#xff0c;深度学习模型在结构上与之非常相似&#xff1b;不同的是&#xff0c;深度学习模型的“深度”更大&#xff0c;“深度”的体现就是神经网络层数多&#xff0c;神经网络每一层的结点数多。 本…...

锦正茂风冷系列电源JCP-10-80的技术参数

JCP-10-80为高稳定度的双极性恒流电源&#xff0c;广泛应用于电磁铁、亥姆霍兹线圈等感性负载的励磁。电源采用线性电源结构&#xff0c;输出电流稳定度高&#xff0c;纹波和噪声低。电源输出电流可在正负额定电流*值之间连续变化&#xff0c;电流平滑连续过零&#xff0c;可使…...

Idea+maven+spring-cloud项目搭建系列--11-1 dubbo(zookeeper,nacos)注册中心

前言&#xff1a;dubbo rpc 服务需要将服务提供者和消费者信息进行注册&#xff0c;以便于消费端可以完成远程接口调用&#xff1b;注册中心是 Dubbo 服务治理的核心组件&#xff0c;Dubbo 依赖注册中心的协调实现服务&#xff08;地址&#xff09;发现&#xff0c;自动化的服务…...

Python3入门教程||Python3 迭代器与生成器||Python3 函数

Python3 迭代器与生成器 迭代器 迭代是 Python 最强大的功能之一&#xff0c;是访问集合元素的一种方式。。 迭代器是一个可以记住遍历的位置的对象。 迭代器对象从集合的第一个元素开始访问&#xff0c;直到所有的元素被访问完结束。迭代器只能往前不会后退。 迭代器有两…...

快速幂算法

快速幂算法 文章目录快速幂算法一、简单介绍二、计算7107^{10}710三、一般化1、计算ana^nan的快速方法&#xff1a;2、时间复杂度分析&#xff1a;四、代码五、参考资料一、简单介绍 ​ 快速幂&#xff08;Exponentiation by squaring&#xff0c;平方求幂&#xff09;是一种简…...

Hudi:问题总结(2)Flink-1.13.1消费kafka并插入hudi

问题一&#xff1a;java.lang.ClassNotFoundException: com.google.protobuf.MessageOrBuilder) 解决&#xff1a;字面意思&#xff0c;没找到类&#xff0c;将protobuf-java-3.2.0-jar包放到fink/lib/下 如果报commons-cli相关的错&#xff0c;就将commons-cli-1.4.jar放到f…...

Application工具方法

//注册这个接口registerActivityLifecycleCallbacks(activityLifecycleCallbacks);}Overridepublic void onTerminate() {//注销这个接口。unregisterActivityLifecycleCallbacks(activityLifecycleCallbacks);super.onTerminate();}public static List<Activity> activi…...

电脑游戏怎么录屏?其实很简单,只需要简单3步

电脑游戏一直是游戏爱好者最热衷的游戏之一。但是&#xff0c;有时候我们想分享我们在游戏中的精彩时刻&#xff0c;或者记录我们的游戏过程以便后续观看和学习。在这种情况下&#xff0c;录屏就成了必不可少的工具。但是&#xff0c;许多人可能不知道电脑游戏怎么录屏。在本文…...

【设计模式】go语言中的 [函数选项,单例,工厂,责任链] 常用的设计模式

文章目录前言一、函数选项模式二、单例模式三、工厂模式四、责任链模式前言 宿舍每人 温度38℃&#xff0b; 大寄 设计模式很重要&#xff0c;设计模式其实就是为了解决某一类问题而形成的代码写法&#xff0c;设计模式很多&#xff0c;但是并不是每个都很常用&#xff0c;我们…...

2017系统分析师案例分析真题背记内容

前言 以下内容仅为个人根据当年系分案例真题问题整理的偏需要记背的考点答案&#xff0c;方便个人背诵和记忆使用。方便文字转语音&#xff0c;所以内容全为纯文字内容&#xff0c;以下内容仅供参考。 背记内容 微服务 微服务中应该包含的内容有&#xff1a;资源、对资源的…...

C++和C的区别

答&#xff1a;从宏观角度和微观角度分析微观角度&#xff1a;函数原型有区别&#xff0c;在c中&#xff0c;函数原型有参数和没有参数是不同的&#xff0c;并且允许申明多个同名的函数&#xff0c;只要他们的参数列表不同或者返回值不同即可&#xff0c;但是在c语言中不能。C引…...

【React教程】一、React简介

一、React简介 React是一个用于构建用户界面的JavaScript库&#xff0c;它是Facebook的内部项目&#xff0c;用来架设Instagram的网站,并于2013年5月开源。React主要用于构建Ul&#xff0c;很多人认为React 是 MVC 中的 V&#xff08;视图&#xff09;。由于拥有较高的性能&…...

运动蓝牙耳机什么牌子好,比较好的运动蓝牙耳机推荐

现在市面上的运动蓝牙耳机越来越多&#xff0c;在选择耳机的时候应该如何入手呢&#xff1f;最重要的是需要按照自己的需求来选择&#xff0c;但在耳机的配置上不能忽视的是耳机的防水等级&#xff0c;运动耳机对防水等级的要求更高&#xff0c;这样能够更好地防御汗水浸湿耳机…...

[深入理解SSD系列 闪存实战2.1] NAND FLASH特性串烧 | 不了解闪存特性,你能用好闪存产品吗?

前言 为了利用好闪存, 发挥闪存的优势, 以达到更好的性能和使用寿命, 那自然要求了解闪存特性。 闪存作为一种相对较新的存储介质, 有很多特别的特性。 一.闪存的特性 凡是采用Flash Memory的存储设备,可以统称为闪存存储。我们经常谈的固态硬盘(SSD),可以由volatile/…...

DJI ROS dji_sdk 源码分析|整体框架

DJI ROS dji_sdk 源码分析|整体框架launch文件CMakeLists.txtcpp文件main.cppOSDK 是一个用于开发无人机应用程序的开发工具包&#xff0c;基于OSDK 开发的应用程序能够运行在机载计算机上&#xff08;如Manifold 2&#xff09;&#xff0c;开发者通过调用OSDK 中指定的接口能够…...

HT32合泰单片机开发环境搭建和配置教程

HT32合泰(Holtek)单片机开发环境搭建安装教程 前言 最近在准备合泰杯的比赛&#xff0c;在看合泰官方的PPT和数据手册学习&#xff0c;顺便做个合泰单片机的开发环境搭建教程。 合泰杯比赛发放的开发板是ESK32-30501&#xff0c;用的单片机是HT32F52352。 合泰杯官网地址&a…...

动态内存分配之伙伴算法

伙伴算法 伙伴算法是一种在计算机内存管理中使用的算法&#xff0c;用于分配和释放内存。它是一种基于二叉树的动态内存分配算法&#xff0c;可以高效地分配和合并内存块。伙伴算法是一种按照固定大小分配内存的算法&#xff0c;例如&#xff0c;每个内存块的大小为2的n次幂&a…...

CGAL 根据扫描线方向和角度对法向量进行重定向

目录一、算法原理1、主要函数二、代码实现一、算法原理 最小生成树对法向量定向的结果在具有许多尖锐特征和遮挡的机载点云数据中结果并不理想。scanline_orient_normals()是专门用于具有扫描线特性的点云法向量重定向的替代方法。它充分利用了某些激光雷达扫描器的LAS特性&…...

一个C#开发的开源的快速启动工具

更多开源项目请查看&#xff1a;一个专注推荐.Net开源项目的榜单 平常计算机安装软件比较多、或者工作涉及的文件比较多&#xff0c;很多人都会直接放在桌面&#xff0c;一方面不安全&#xff0c;还不容易查找&#xff0c;这时候我们往往&#xff0c;都会放在其他硬盘内&#x…...

Paddle项目调试记录

PaddlePaddle是百度公司提出的深度学习框架。近年来深度学习在很多机器学习领域都有着非常出色的表现&#xff0c;在图像识别、语音识别、自然语言处理、机器人、网络广告投放、医学自动诊断和金融等领域有着广泛应用。面对繁多的应用场景&#xff0c;深度学习框架有助于建模者…...

3月11日,30秒知全网,精选7个热点

///微盟集团宣布接入百度文心一言 据介绍&#xff0c;微盟SaaS产品和数字营销服务将与文心一言的技术能力实现深度融合&#xff0c;通过AIGC技术&#xff0c;深化微盟在营销AI创意内容生产、智能营销、智能客服、智能经营等方面的布局 ///T3出行与华为云深化业务合作 双方将在…...

C win32基础学习(四)

上一篇我们已经介绍了关于窗口处理函数的知识。本篇我们说一下注册窗口类&#xff0c;创建窗口和显示窗口的内容。 前文 窗口创建过程 定义WinMain函数 定义窗口处理函数(自定义&#xff0c;处理消息) 注册窗口类&#xff08;向操作系统写入一些数据&#xff09; 创建窗口&…...

Java 日期时间API(Java 8及以上)

Java 8及以上版本提供了新的日期时间API&#xff0c;其中包括了LocalDate、LocalTime、LocalDateTime、ZonedDateTime、Duration、Period等类&#xff0c;这些类提供了更加丰富和灵活的日期时间操作方法。 LocalDate LocalDate类表示一个本地日期&#xff0c;不包含时间和时区…...

DHCP的配置

实验目的熟悉DHCP的应用场景掌握DHCP的配置方法实验拓扑DHCP的配置如图15-2所示: 图15-2:DHCP的配置 实验步骤配置IP地址<Huawei>system-view Enter system view, return user view with Ctrl+Z....

JavaWeb14-线程池

目录 1.传统线程的缺点 2.线程池的定义 3.线程池的优点 4.线程池的创建/使用&#xff08;2类7种&#xff09; 4.1.通过Executors&#xff08;执行器&#xff09;自动创建&#xff08;6种&#xff09; ①Executors.newFixedThreadPool&#xff1a;创建⼀个固定⼤⼩的线程池…...

[qiankun+nuxt]子应用请求本地文件报错404

前言 目前公司的前端架构是qiankunnuxt做的微前端项目 问题说明 在子应用中&#xff0c;前端需要模拟一些数据&#xff0c;方便后期演示调整而不需要重新打包 所以将一些数据存储到了本地的json文件中&#xff0c;但是获取时报了404的错误&#xff0c;找不到该文件。 页面报错…...

【Qt网络编程】实现TCP协议通信

文章目录概要&#xff1a;本期主要讲解QT中对于TCP协议通信的实现。一、TCP协议二、Qt中TCP协议处理1.QTcpSocket2.QTcpServer三、Qt实现TCP通信1.客户端2.服务器端结尾概要&#xff1a;本期主要讲解QT中对于TCP协议通信的实现。 一、TCP协议 传输控制协议&#xff08;TCP&am…...

Webpack打包———处理样式资源

基本使用 本质上&#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时&#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)&#xff0c;然后将你项目中所需的每一个模块组合成一个或多个 bundles&a…...

VP记录:Codeforces Round 857 (Div. 2) A~D

传送门:CF A题 Likes: 这道题的题意很变态,十分的难懂,简直就是一坨shit,这场比赛最后被骂是有原因的 简单来说就是对于一个项目,每一个人都能对此加一或者减一,最后问你这个项目每一时刻最大和最小是多少.题目中只说明了只能点赞后才能取消,并没有解释存在取消操作必存在点…...

Docker常用项目实战演练

docker镜像源的修改 linux环境下编辑 /etc/docker/daemon.json vi /etc/docker/daemon.json #如添加如下网易镜像源 { "registry-mirrors": ["http://hub-mirror.c.163.com"] }docker run命令详细解释 日常工作中用的比较多的是docker run命令&#xff…...

Linux进程间通信-FIFO命名管道

Linux进程间通信-FIFO命名管道 1、概述 管道因为没有名称&#xff0c;所以只用于进程间的亲缘通信。为了克服这一缺点&#xff0c;提出了命名管道(FIFO)&#xff0c;又称命名管道、FIFO文件。 FIFO不同于无名管道&#xff0c;它提供与之关联的路径名&#xff0c;该路径名以FIF…...

【Kafka】记录一次基于connect-mirror-maker做的Kafka集群迁移完整过程

文章目录背景环境工具选型实操MM1MM2以MM2集群运行以Standalone模式运行验证附录MM2配置表其他背景 一个测试环境的kafka集群&#xff0c;Topic有360&#xff0c;Partition有2000&#xff0c;部署在虚拟机上&#xff0c;由于多方面原因&#xff0c;要求迁移至k8s容器内&#x…...

实现VOC数据集与COCO数据集格式转换

实现VOC数据集与COCO数据集格式转换2、将voc数据集的xml转化为coco数据集的json格式2、COCO格式的json文件转化为VOC格式的xml文件3、将 txt 文件转换为 Pascal VOC 的 XML 格式<annotation><folder>文件夹目录</folder><filename>图片名.jpg</file…...

常用的密码算法有哪些?

我们将密码算法分为两大类。 对称密码&#xff08;密钥密码&#xff09;——算法只有一个密钥。如果多个参与者都知道该密钥&#xff0c;该密钥 也称为共享密钥。非对称密码&#xff08;公钥密码&#xff09;——参与者对密钥的可见性是非对称的。例如&#xff0c;一些参与者仅…...