day52(vueJS)json-server模拟数据

json-server介绍:::
	JSON Server 是一个用于快速搭建 REST API 的工具,它可以帮助我们在开发过程中快速模拟
一个后端 API 服务器,方便前端开发人员进行接口调试和开发。

	使用 JSON Server,你可以通过创建一个 JSON 文件来定义你的 API 数据,并且 JSON
 Server 会根据这个 JSON 文件创建出对应的 RESTful API 接口。这样在前端开发过程中就可以
使用这些虚拟的接口,而不需要等待后端真实接口的完成。

json-server的介绍以及使用

  • 模拟接口步骤
    • 创建数据
    • 下载插件
    • 打印版本号检查是否下载成功
    • 启动服务器
  • 配置服务器请求代理
  • 使用模拟接口发不同的请求
    • 查询get
    • 新增post
    • 修改--更新patch
    • 删除delete
  • 优化补充点

模拟接口步骤

创建数据

	1.创建db文件夹,该文件夹和src同级
	2.文件夹内创建db.json文件
	3.该文件内写接口数据
	4.配置文件写在db.config.json,里面包含如下语句
	    "watch":true
	    "post":设定的端口号
	    "routes":"db/routes.json"

下载插件

npm i json-server -g

打印版本号检查是否下载成功

json-server --version

启动服务器

json-server + 文件路径

配置服务器请求代理

1.'/xxxx',不能是纯斜杠,需要与路由地址区分,如果混在一起,会造成路由地址跳转的页面刷新显示404

2.发请求时的请求地址如果不写ip地址和端口,就默认是本机本端口,而本机本端口不具备处理请
  求的能力,会显示404,所以需要配置服务器请求代理,将请求转发到指定的目标地址和端口
  
3.注意:rewirte在不需要的情况下可以注掉(不需要的时候尤其不要讲其属性值写成
  ()=>import(''),这种写法会将原本配置好的路径改写,导致代理失效)
  
4.注意:此处代理地址如果是本机的话只能用localhost,不能用127.0.0.1,否则会报504错误

5.按照阐述问题------分析原因------提出解决方案的思路阐述

使用模拟接口发不同的请求

查询get

	1.查询所有
	    直接发请求,不带参数
	2.条件查询
	    将id作为参数携带
	3.分页查询
	    带两个参数:_page:数字代表第n页;_limit:数字代表一页n条
	4.模糊查询
	    数据对象中的某属性名_like:属性值中包含的关键字
	5.查询数据排序
	    两个参数:_sort:按照那个属性排序,_order:升序还是降序,desc降序/asc升序

新增post

参数不带id,其他属性都需要携带在参数中指定赋值

修改–更新patch

1.必须在url拼接id :'/path/'+id
2.参数:将需要更新的属性作为参数带上,属性值为更新的属性
3.put也可以实现更新的效果,但是put会用携带的参数完全替代数据原有的属性,比如原来一百
   个,两个属性替换掉一百个。它容易导致数据丢失,不推荐使用

删除delete

1.必须要在url后面拼接id
2.其他参数可以不带

优化补充点

1.模拟接口每次手动修改完数据需要重启

    ctrl+c关闭,然后 json-server 路径 再重启

2.注意:模拟接口的json文件只有一个,组员在这一个对象中用不同的键值对写自己的接口

3,打开监听:-w   就是-watch,在启动接口的指令中加上这个相当于开启接口监听属性,接口会
   自动监听对json文件的手动更新并在更新后自动重启,不需要在手动重启。具体写法:json-
   server -w 路径
   
4.指定端口:-p   就是-port ,加上这个指令可以指定一个数字作为目标端口号 比如:json-
  server -w 路径 -p 8888
  
5.配置脚本简化复杂指令
    ..在名为package.json的文件中的script对象中添加一条自定义键值对
    ..这个对象是指令简化的位置,添加的键值对为:'简化指令''真正的长指令'
    ..配置好之后使用 npm run +简化指令就可以代替长指令运行

6.自定义配置文件
    ..在文件夹db中添加新的文件:db.config.json  这是配置文件
        ...文件中包括:'db':'文件路径'
        ...'port':端口号(数字)
        ...'route':'指定路由规则文件路径'
            ....路由规则文件:也是一个json文件,文件格式为对象包裹键值对:
                 {'/api/*':'/$1',.....}   服务器端会自动去掉'/api'片段,自动取
                 出'/*'部分在地址中匹配
            ....需要设置地址前缀的地方
                1.二次封装函数的位置,每个函数的地址都需要修改,或者可以直接在请求配置
                  位置修改基准路径:baseURL
                2.服务器请求代理的前缀换成路由规则文件指定的前缀

            ....指定路由规则的意义
                1.在数据量庞大的时候会有大量的路径需要转发,该方法可以为所有路径快速加
                   上统一前缀,方便转发
7.子分支拉取主分支更新内容
    ..git pull + 分支名(origin master)
    ..注意,无论是写代码还是拉取更新,都需要保证在自己的分支,当前分支在那个分支,拉取
       到的更新内容和写的代码就留在这个分支,切换到其他分支就没了

在这里插入图片描述

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

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

相关文章

基于springboot的网上商城系统设计与实现(程序+数据库+文档)

** 🍅点赞收藏关注 → 私信领取本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验,陆续会更新更多优质的Java实战项目,希望你能有所收获,少走一些弯路。🍅关注我不迷路🍅** 目录 一、研…

【QT】重载的信号槽/槽函数做lambda表达式

重载的信号槽 函数指针: int fun(int a,long b) int (*funp)(int, long) fun; 实现回调函数就需要函数指针 信号重载 派生类槽函数发送两个信号 派生类给父类发两个信号 void (SubWidget::*mysigsub)() &SubWidget::sigSub;connect(&subw,mysigsub,t…

农产品采购平台技术解析:Java+SpringBoot+Vue+MySQL

✍✍计算机毕业编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java、…

如何在2.2.1版Aduino IDE中开发ESP32

ESP32芯片集成了WIFI和蓝牙,而且关于生态也很不错,越来越多的学习者和开发者选择此类芯片,而不像用keil开发STM32或者51一样,ESP32虽然也有官方的ESP32-IDF开发软甲,但是经过我个人的实操体验,不适合小白或…

2025汤家凤考研数学,基础视频课程+百度网盘+PDF真题讲解

平时大家都半开玩笑地讲:我数学想要考150分!那索性今天这一期,今天认真和大家聊一下: 想考到考研数学150分,应该如何准备? 如果还有小伙伴不知道在哪看汤神的ke,可以看一下以下 2025汤神全程…

力扣543. 二叉树的直径

Problem: 543. 二叉树的直径 文章目录 题目描述思路复杂度Code 题目描述 思路 1.最大直径 左子树的最大深度 右子树的最大深度; 2.定义一个变量maxDiameter记录最大直径,并编写一个递归函数maxDepth,利用树的后序遍历每次递归求取leftMax&a…

怎样压缩图片大小到kb?超实用技巧!

怎样压缩图片大小到kb?在互联网时代,图片已成为我们日常生活中不可或缺的一部分。然而,随着图片分辨率和质量的提升,它们的文件大小也在不断增加,这不仅占用了大量的存储空间,还可能导致网页加载速度变慢。…

Linux中给复杂命令起别名

目录 1 前言 2 操作步骤 2.1 打开.bashrc 2.2 编辑.bashrc-添加别名 2.3 使别名生效 1 前言 在linux中有些指令会比较长,为了便捷的使用它们,我们就可以采取起别名的方式,具体操作如下。 2 操作步骤 2.1 打开.bashrc 输入如下指令&a…

探索Java中的函数式接口与Streams API的高级用法

引言 在Java中,函数式编程已经不是什么新鲜事物了。从Java 8开始,函数式编程的概念被引入,给我们带来了全新的编程范式。为什么这么多年过去了,咱们还在讨论它?因为,无论是对于老手还是新手程序员来说&…

web前端之uniApp实现选择时间功能

MENU 1、孙子组件1.1、html部分1.2、JavaScript部分1.3、css部分 2、子组件2.1、html部分2.2、JavaScript部分2.3、css部分 3、父组件3.1、html部分3.2、JavaScript部分 4、效果图 1、孙子组件 1.1、html部分 <template><view><checkbox-group change"ch…

如何使用 ArcGIS Pro 统计四川省各市道路长度

在某些时候&#xff0c;我们需要进行分区统计&#xff0c;如果挨个裁剪数据再统计&#xff0c;不仅步骤繁琐、耗时&#xff0c;还会产生一些多余的数据&#xff0c;这里教大家如何在不裁剪数据的情况下统计四川各市的道路长度&#xff0c;希望能对你有所帮助。 数据来源 教程…

【目标检测】1. 目标检测概述

目标检测(Object Detection)实质上上多目标的定位,即在一个图片中定位多个目标物体&#xff0c;包括分类和定位&#xff0c;也就是多个目标分别在哪里?分别属于那个类别? 图像分类常用算法: VGG GoogleNet ResNet 目标检测常用算法&#xff1a; …

It is also possible that a host key has just been changed

问题&#xff1a;ssh失败&#xff0c;提示如上图 分析: ssh的key存在上图里的路径里。 解决&#xff1a;win10删这个文件C:\Users\admin\.ssh\known_hosts , linux删这个文件.ssh\known_hosts ,或者删除这个文件里的制定ip的那一行&#xff0c;例如“106.1.1.22 ecdsa-sha2-…

2.13计算机工作过程

2.三个级别的语言 1)机器语言。又称二进制代码语言&#xff0c;需要编程人员记忆每条指令的二进制编码。机器语言是计算机唯一可以直接识别和执行的语言。 2)汇编语言。汇编语言用英文单词或其缩写代替二进制的指令代码&#xff0c;更容易为人们记忆和理解。使用汇编语言编辑的…

Redis集群(哨兵集群)

一.Sentinel作用和原理: 1.作用 监控:Sentinel会不断监控master和slave是否按预期工作. 自动故障恢复:如果master故障,Sentinel会将一个slave提升为master。当故障实例恢复后也会以新的master为主。 通知&#xff1a;Sentinel充当redis客户端的服务发现来源,当集群发生故障…

uniapp模仿下拉框实现文字联想功能 - uniapp输入联想(官方样式-附源码)

一、效果 废话不多说&#xff0c;上效果图&#xff1a; 在下方的&#xff1a; 在上方的&#xff1a; 二、源码 一般是个输入框&#xff0c;输入关键词&#xff0c;下拉一个搜索列表。 ElementUI有提供<el-autocomplete>&#xff0c;但uniapp官网没提供这么细&#x…

python基于django的药品进销存管理系统elsb2

本系统是通过面向对象的python语言搭建系统框架&#xff0c;通过关系型数据库MySQL存储数据。使用django框架进行药店药品的信息管理&#xff0c;用户只需要通过浏览器访问系统即可获取药店药品信息&#xff0c;并可以在线管理&#xff0c;实现了信息的科学管理与查询统计。本文…

鸿蒙实战开发:数据交互【RPC连接】

概述 本示例展示了同一设备中前后台的数据交互&#xff0c;用户前台选择相应的商品与数目&#xff0c;后台计算出结果&#xff0c;回传给前台展示。 样例展示 基础信息 RPC连接 介绍 本示例使用[ohos.rpc]相关接口&#xff0c;实现了一个前台选择商品和数目&#xff0c;后台…

推荐一本书籍,澳福读后发现投资真谛

在现在的经济环境下&#xff0c;澳福外汇推荐各位投资读一本书籍就会发现投资者的真谛&#xff0c;那就是经济危机爆发前一年&#xff0c;黎巴嫩裔美国商人纳西姆尼古拉斯塔勒布出版的《黑天鹅:极不可能事件的影响》&#xff0c;在书中一书作者用“黑天鹅事件”这个词来指代影响…

一、项目中Camunda的使用

基本依赖请看另一篇文章 camunda学习使用 介绍 开始事件 结束事件 网关 顺序流 任务 用户任务 活动 上面是项目中使用到的一些图形&#xff0c;简单介绍一下 项目集成 依赖 <spring-boot.version>2.5.6</spring-boot.version> <spring-cloud.version>20…