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

json-server环境搭建及使用

json-server环境搭建

一个在前端本地运行,可以存储json数据的server。

基于node环境,可以指定一个 json 文件作为 API 的数据源。

文章目录

    • json-server环境搭建
      • 前提
      • 下载安装
      • 监听服务
      • 启动成功
      • 修改端口号
        • 方式一:
        • 方式二:
    • 数据操作
      • 测试数据源
      • 查询数据
        • 获取数据方式
          • 方式一:
          • 方式二:
        • 分页获取数据
        • 排序数据
        • 截取数据
        • 区间数据
    • 配置静态资源服务器

前提

  • 安装 node 环境

下载安装

  • 全局安装json-server
npm install -g json-server

监听服务

  • 在需要的文件夹下执行以下命令,执行成功后,默认会创建 db.json 文件。
json-server --watch db.json

启动成功

  • 根据执行命令,服务已正常监听,我们可以根据以下地址进行访问体验。
  • 可以理解为json-serverdb.json 根节点的每一个 key ,当作一个 router 。我们可以根据这个规则来编写测试。

在这里插入图片描述


  • 在浏览器运行 http://localhost:3000 ,效果如下

在这里插入图片描述


修改端口号

方式一:

  • json-server 默认端口为 3000,可以根据需要自定义端口号。
json-server --watch db.json --port 3006

方式二:

  • 告诉你个可以偷懒的方式吧,如果觉得每次 启动服务 都要执行相关命令,可以在 db.json 同级文件夹新建一个 package.json 文件,然后把以下配置信息放在里面就可以啦。
{"scripts": {"mock": "json-server db.json --port 3006"}
}

  • 注意启动服务的方式:执行以下命令即可。
npm run mock

数据操作

测试数据源

  • 直接复制到所创建的 db.json 文件中
{"subject": [{"id": 1,"name": "JAVA","price": 888 },{"id": 2,"name": "GO","price": 2088},{"id": 3,"name": "VUE","price": 288}]
}

查询数据


获取数据方式

方式一:
  • 直接在 url 后面拼接 id
http://localhost:3006/subject/3

  • 返回数据格式:对象
{id: 3,name: "VUE",price: 288
}

方式二:
  • 也是我们常见 GET 的传参方式,拼接需要查询参数
http://localhost:3006/subject?id=3

  • 返回数据格式:数组
[{id: 3,name: "VUE",price: 288}
]

分页获取数据

  • _page:页码
  • _limit:每页显示数量,如果没有指定,默认每页10条数据。
http://localhost:3006/subject?_page=1&_limit=2

排序数据

  • _sort:排序字段
  • _order:排序方式【asc | desc】,默认asc
http://localhost:3006/subject?_sort=id&_order=desc

截取数据

  • 使用 slice 方式,通过参数 _start 指定开始位置,_end指定结束位置
  • 注意: 是通过 下标 方式截取
  • 也可以结合_limit 指定开始位置算起,往后取n个数据。
http://localhost:3006/subject?_start=3&_end=6http://localhost:3006/subject?_start=3&_limit=6

区间数据

  • _gte: 大于等于
  • _lte: 小于等于
  • _ne: 不等于
  • _like: 模糊查询
http://localhost:3006/subject?id_gte=2&_lte=5http://localhost:3006/subject?name_like=V

配置静态资源服务器

  • 在根目录下创建 json 文件,例 json_server_config.json
  • 在根目录下创建 public 目录,存放静态资源。
{"port": 3006,"watch": true,"static": "./public","read-only": false,"on-cors": true,"no-gzip": false
}
  • 修改 package.json 文件中启动命令
{"name": "my-json-server","version": "1.0.0","description": "","main": "index.js","scripts": {"mock1": "json-server db.json --port 3006","mock": "json-server --c json_server_config.json db.json"},"keywords": [],"author": "","license": "ISC"
}

  • 因为配置文件中指定静态文件的目录,所以访问图片时可以忽略 public 目录。
  • 例:访问图片(public/image):http://localhost:3006/image/test.png

相关文章:

json-server环境搭建及使用

json-server环境搭建 一个在前端本地运行,可以存储json数据的server。 基于node环境,可以指定一个 json 文件作为 API 的数据源。 文章目录json-server环境搭建前提下载安装监听服务启动成功修改端口号方式一:方式二:数据操作测试…...

RabbitMQ运行机制

消息的TTL(Time To Live) 消息的TTL就是消息的存活时间。 • RabbitMQ可以对队列和消息分别设置TTL。 • 对队列设置就是队列没有消费者连着的保留时间,也可以对每一个单独的消息做单独的 设置。超过了这个时间,我们认为这个消息…...

【Spring Cloud Alibaba】(三)OpenFeign扩展点实战 + 源码详解

系列目录 【Spring Cloud Alibaba】(一)微服务介绍 及 Nacos注册中心实战 【Spring Cloud Alibaba】(二)微服务调用组件Feign原理实战 本文目录系列目录前言一、Feign扩展点配置二、OpenFeign扩展点配置1. 通过配置文件配置有效范…...

面向对象设计原则

在面向对象的设计过程中, 我们要对代码进行一个设计, 从而提高一个软件系统的可维护性和可复用性, 那么遵从面向对象的设计原则,可以在进行设计方案时减少错误设计的产生,从不同的角度提升一个软件结构的设计水平。 面向对象有以下七大原则:1.单一职责原…...

2022年“网络安全”赛项湖南省赛选拔赛 任务书

2022年“网络安全”赛项湖南省赛选拔赛 任务书2022年“网络安全”赛项湖南省赛选拔赛 任务书A模块基础设施设置/安全加固(200分)B模块安全事件响应/网络安全数据取证/应用安全(400分)C模块 CTF夺旗-攻击 (200分&#x…...

学习笔记:Java 并发编程⑥_并发工具_JUC

若文章内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系博主删除。 视频链接:https://www.bilibili.com/video/av81461839配套资料:https://pan.baidu.com/s/1lSDty6-hzCWTXFYuqThRPw&am…...

Linux文件隐藏属性(修改与显示):chattr和lsattr

文件除了基本的九个权限以外还有隐藏属性存在,这些隐藏属性对于系统有很大的帮助,尤其是系统安全(Security)上 chattr(配置文件隐藏属性) chattr 【-】【ASacdistu】文件或目录名称 选项与参数&#xff1a…...

广东省基层就业补贴

基层就业补贴链接:https://www.gdzwfw.gov.cn/portal/v2/guide/11440309MB2D27065K4440511108001 一.申请条件: 1、劳动者到中小微企业、个体工商户、社会组织等就业,或到乡镇(街道)、村居社会管理和公共服务岗位就业…...

高压放大器在超声导波钢轨传播中的应用

实验名称:高压放大器在超声导波钢轨传播中的应用研究方向:无损检测测试目的:超声导波具有传播距离远、检测距离长的特点,在钢轨无损检测领域受到越来越多的关注。本文使用有限元仿真方法和现场实验方法,对钢轨各模态超…...

Java字符串常见拼接方式

目录 最常见的方式 StringBuilder.append()和StringBuffer.append() String类下的cocat()方法 String类下的join()方法 StringUtils.join 项目中使用 不建议在 for 循环中使用 “” 进行字符串拼接 通过字符串连接,可以将两个或多个字符串、字符、整数和浮点…...

商城业务:购物车

人生在世如身处荆棘之中,心不动,人不妄动,不动则不伤;如心动则人妄动,伤其身痛其骨,于是体会到世间诸般痛苦。 1、购物车需求 1)、需求描述: - 用户可以在登录状态下将商品添加到购…...

计算机网络学习笔记(一)

网络是由若干接点和连接这些结点的链路组成。 多个网络通过路由器互联起来构成覆盖范围更大的互联网。 普通用户通过ISP接入因特网。 基于ISP的三层结构因特网 相隔较远的两台主机间通信可能需要经过多个ISP。 有电路交换,报文交换,分组交换三种交换方…...

【单目标优化算法】烟花优化算法(Matlab代码实现)

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

微服务项目【秒杀商品展示及商品秒杀】

登录方式调整 第1步:从zmall-common的pom.xml中移除spring-session-data-redis依赖 注意: 1)本次不采用spring-session方式,改用redis直接存储用户登录信息,主要是为了方便之后的jmeter压测; 2&#xff09…...

DIDL3_模型选择、复杂度、过欠拟合的相关概念

模型选择、复杂度、过欠拟合的概念模型选择训练误差和泛化误差验证数据集和测试数据集K-则交叉验证(没有足够多数据时使用)过拟合和欠拟合模型容量模型容量的影响估计模型容量控制模型容量数据复杂度处理过拟合的方法(1)&#xff…...

Android 9.0 去除锁屏界面及SystemUI无sim卡拨打紧急电话控件显示功能实现

1.1概述 在9.0的系统rom定制化开发中,关于SystemUI的定制化功能也是比较多的,在SystemUI的锁屏页面和状态栏提示无sim卡拨打紧急电话控件显示等相关提示 的功能中,在有些systemui的定制中是不需要这些功能的,所以需要从systemui中去掉这些功能提示的,这就需要从systemui中…...

AntDB-M设计之内存结构

亚信科技专注通信行业多年,AntDB数据库从诞生开始,就面对通信级的大数据量应用场景挑战,在性能、稳定性、规模化等方面获得了超过10年的通信核心业务系统验证,性能峰值达到每秒百万的通信核心交易量。AntDB-M(AntDB内存…...

互联网舆情监测公司监测哪些内容,TOOM北京舆情监测公司

互联网舆情监测公司是一种提供舆情监测、分析和管理服务的公司,其业务主要涉及互联网舆情监测、数据分析、报告撰写、危机处理等方面。这些公司通过使用各种技术和工具,帮助客户监测他们在互联网上的声誉和品牌形象,并提供相应的建议和解决方…...

一篇文章带你熟练使用Ansible中的playbook

目录 一、Playbook的功能 二、YAML 1、简介 2、特点 3、语法简介 4、YAML 列表 5、YAML的字典 三、playbook执行命令 四、 Playbook的核心组件 五、vim 设定技巧 练习 一、Playbook的功能 playbook 是由一个或多个play组成的列表 Playboot 文件使用YAML来写的 二、…...

HashedWheelTimer

序言这种算法是一种轮询算法的优化升级,能够以只有一个Timer的情况下处理大量的定时任务.Begin结合HashedWheelTimer的思想根据自然时间1分钟为例,来做大批量的定时任务触发首先定一个长度为60的数组,数组中存放的是Set集合,集合里面是任务详情.当有定时任务刚来的时候判断是否…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐)​​ 在 save_images 方法中,​​删除或注释掉所有与 metadata …...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...