day52(vueJS)json-server模拟数据

news2024/11/26 12:17:46
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)
    ..注意,无论是写代码还是拉取更新,都需要保证在自己的分支,当前分支在那个分支,拉取
       到的更新内容和写的代码就留在这个分支,切换到其他分支就没了

在这里插入图片描述

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

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

相关文章

【Vue】VueX仓库

📝个人主页:五敷有你 🔥系列专栏:Vue ⛺️稳中求进,晒太阳 目录 Vue概述 是什么 场景: 优势 构建多组件共享环境 创建一个空仓库 核心概念 - state 状态 1. 提供数据 2.使用数据 ​编辑 …

在虚拟机vm下的Linux系统下 安装redis 超详细

打开Linux后 右键打开终端 1.输入:su root 登录root 密码是123456 2.然后输入:yum -y install gcc-c 安装gcc基础依赖包 3.yum -y install centos-release-scl 4.yum -y install devtoolset-9-gcc devtoolset-9-gcc-c devtoolset-9-binutils //为了编译最新版本的Redis源码 用…

纯手工搭建一个springboot maven项目

前言&#xff1a;idea社区版无法自动搭建项目&#xff0c;手动搭建的经验分析如下&#xff1a; 1 包结构 参考下图&#xff1a; 2 项目结构 3 maven依赖 具体的项目如图&#xff1a; 依据这个结构配置一个springboot 的 pom依赖&#xff1a; <?xml version"1.0…

SanctuaryAI推出Phoenix: 专为工作而设计的人形通用机器人

文章目录 1. Company2. Main2.1 关于凤凰™ (Phoenix)2.2 关于碳™(Carbon)2.3 商业化部署2.4 关于 Sanctuary Corporation 3. My thoughtsReference彩蛋&#xff1a;将手机变为桌面小机器人 唯一入选《时代》杂志 2023 年最佳发明的通用机器人。 称机器人自主做家务的速度和灵…

js SheetJS 合并表格导出到同一个excel中

最近有个需求,我在一个页面显示了4个表格, 然后合并导出到excel文件中 四个表,四个sheet,一个excel文件 最后导出时这样: 实现: 1,页面有个导出的checkbox,勾选则导出,不勾选不处理 2,在一个函数中,集中处理四个表数据获取,并将结果返回出来 //获取数据后返回为…

【C++】递归 1241 - 角谷猜想 1108 - 正整数N转换成一个二进制数

文章目录 一、问题&#xff1a;1241 - 角谷猜想二、问题&#xff1a;1108 - 正整数N转换成一个二进制数三、总结四、感谢 一、问题&#xff1a;1241 - 角谷猜想 类型&#xff1a;有规律的循环、递归。 题目描述&#xff1a; 日本一位中学生发现一个奇妙的定理&#xff0c;请角…

如何判断可编程电子负载是否合格?

可编程电子负载是一种可以模拟实际负载的电子设备&#xff0c;广泛应用于电源、电池、充电器等产品的测试和研发。判断可编程电子负载是否合格&#xff0c;需要从以下几个方面进行考量&#xff1a; 精度是衡量电子负载性能的重要指标&#xff0c;包括电流精度、电压精度、功率精…

ImportError: Could not import docarray python package解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Qt 使用QListView实现简约美观的聊天窗口

今天和大家分享一个使用QListView来展现聊天窗口的历史记录的例子, 因为聊天记录可能会有很多, 所以使用试图-模型的方式更加合理 这是最终效果: ChatHistoryModel继承自QAbstractListModel , ChatHistoryViewDelegate继承自QStyledItemDelegate, 这个例子最关键的就是在QSty…

Keil MDK安装armcc V5编译器

不知道从什么时候开始&#xff0c;Keil MDK默认不支持V5的编译器了&#xff0c;里面默认只有V6的编译器&#xff0c;设置界面跟V5有很大的差异不太熟悉。最可怕的是&#xff0c;之前使用V5编译的工程&#xff0c;换成V6编译器后居然报错...虽然修改一下应该也可以正常编译&…

几种常用的查看Ros话题的命令

1、查看 rqt_tf_tree rosrun rqt_tf_tree rqt_tf_tree 2、查看ros node 关系 rqt_graph 3、列出所有话题 rostopic list 4、查看某一话题的类型 以 /scan 为例 rostopic type /scan 5、查看某个数据类型包含哪些数据 rosmsg show sensor_msgs/LaserScan sensor_…

Gitlab修改仓库权限为public、Internal、Private

Public&#xff08;公开&#xff09;&#xff1a;所有人都可以访问该仓库&#xff1b; Internal&#xff08;内部&#xff09;&#xff1a;同一个GitLab群组或实例内的所有用户都可以访问该仓库&#xff1b; Private&#xff08;私人&#xff09;&#xff1a;仅包括指定成员的用…

2024年最新《国际预警期刊》正式更新!

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、国际期刊预警名单的变化&#xff1f;二、课程案例展示&#xff08;篇幅有限仅展示部分&#xff09;1.【热图系列】2.【九象限图系列】3.【富集分析系列】4.【机…

自动化测试基础——Pytest框架之YAML详解以及Parametrize数据驱动

文章目录 一、YAML详解1.YAML作用2.YAML语法结构3.YAML数据类型3.1.对象3.2.数组3.3.标量 4.YAML的引用5.YAML类型转换 二、YAML的读写与清空1.YAML的读2.YAML的写3.YAML的清空 三、pytest的parametrize简单数据驱动四、pytest的parametrize结合yaml实现数据驱动五、解决pytest…

数据库期末速成100分训练,附练手数据库原件及教程

本文提供下面数据库代码的数据库原件&#xff0c;下载后可使用 教程如下&#xff1a; 1.打开sql sever 2.找到数据库 3.右键数据库点击“附加”&#xff0c;然后点击“添加” 4.导入数据库原件&#xff0c;点击确定 ps&#xff1a;如果没有sqlsever 或者页面编辑器&#x…

基于SSM的农业信息管理系统的设计与实现(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的农业信息管理系统的设计与实现&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;…

JavaScript中的innerHTML、value属性,零基础开发web前端

CSS篇 让一个元素水平垂直居中&#xff0c;到底有多少种方案&#xff1f;浮动布局的优点&#xff0c;缺点&#xff1f;清除浮动的方式&#xff1f;使用display:inline-block会产生的问题&#xff1f;解决方法&#xff1f;布局题&#xff1a;div垂直居中&#xff0c;左右10px&a…

LeNet5实战——衣服分类

搭建模型训练代码&#xff08;数据处理、模型训练、性能指标&#xff09;——> 产生权重w ——>模型结构c、w测试 配置环境 Pycharm刚配置的环境找不到了-CSDN博客 model.py 导入库 import torch from torch import nn from torchsummary import summary 模型搭…

【HarmonyOS】Dev Eco Studio4.0安装教程

目录 下载安装开发工具配置 下载 Dev Eco Studio4.0下载连接→https://developer.huawei.com/consumer/cn/next/deveco-studio/ 安装 点击Next 选择安装目录。点击Next 勾选创建桌面快捷方式和环境变量&#xff0c;点击Next 点击Install&#xff0c;安装 等待安装 选…

android开发视频教程百度网盘,深入浅出Android

基于Linux的pc启动过程 我们都知道&#xff0c;所有的程序软件包括操作系统都是运行在内存中的&#xff0c;然而我们的操作系统一般是存放在硬盘上的&#xff0c;当我们按下开机键的时候&#xff0c;此时内存中什么程序也没有&#xff0c;因此需要借助某种方式&#xff0c;将操…