day52(vueJS)json-server模拟数据

news/2024/7/27 7:54:30/文章来源:https://blog.csdn.net/weixin_69145757/article/details/136495489
json-server介绍:::JSON Server 是一个用于快速搭建 REST API 的工具,它可以帮助我们在开发过程中快速模拟
一个后端 API 服务器,方便前端开发人员进行接口调试和开发。使用 JSON Server,你可以通过创建一个 JSON 文件来定义你的 API 数据,并且 JSONServer 会根据这个 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',不能是纯斜杠,需要与路由地址区分,如果混在一起,会造成路由地址跳转的页面刷新显示4042.发请求时的请求地址如果不写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 88885.配置脚本简化复杂指令..在名为package.json的文件中的script对象中添加一条自定义键值对..这个对象是指令简化的位置,添加的键值对为:'简化指令''真正的长指令'..配置好之后使用 npm run +简化指令就可以代替长指令运行6.自定义配置文件..在文件夹db中添加新的文件:db.config.json  这是配置文件...文件中包括:'db':'文件路径'...'port':端口号(数字)...'route':'指定路由规则文件路径'....路由规则文件:也是一个json文件,文件格式为对象包裹键值对:{'/api/*':'/$1',.....}   服务器端会自动去掉'/api'片段,自动取出'/*'部分在地址中匹配....需要设置地址前缀的地方1.二次封装函数的位置,每个函数的地址都需要修改,或者可以直接在请求配置位置修改基准路径:baseURL2.服务器请求代理的前缀换成路由规则文件指定的前缀....指定路由规则的意义1.在数据量庞大的时候会有大量的路径需要转发,该方法可以为所有路径快速加上统一前缀,方便转发
7.子分支拉取主分支更新内容..git pull + 分支名(origin master)..注意,无论是写代码还是拉取更新,都需要保证在自己的分支,当前分支在那个分支,拉取到的更新内容和写的代码就留在这个分支,切换到其他分支就没了

在这里插入图片描述

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

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

相关文章

【应用多元统计分析】--多元数据的直观表示(R语言作图)

例1.2 为了研究全国31个省、市、自治区2018年城镇居民生活消费的分布规律,根据调查资料做区域消费类型划分。 指标: 食品x1:人均食品支出(元/人) 衣着x2:人均衣着商品支出(元/人) 居住x3:人均居住支出(元/人) 生活x4…

吼!原来教师这样发布学生成绩,轻松没烦恼

在教育的日常工作中,发布学生成绩往往是一项繁琐而重要的任务。教师们需要确保每位学生及家长能准确、及时地了解到学习成果。然而,传统的纸质成绩单或逐个通知的方式不仅耗时耗力,还容易出错。那么,有没有一种方法能够让教师们轻…

Docker基础教程 - 2 Docker安装

更好的阅读体验:点这里 ( www.doubibiji.com ) 2 Docker安装 Docker 的官网地址:https://www.docker.com/,在官网可以找到 Docker Engine 的安装步骤。 下面进行 Docker 环境的安装,正常情况下 Docker …

大数据核心技术概论

大数据核心技术概述 大数据基石三大论文:GFS(Hadoop HDFS)、BigTable(Apache HBase)、MapReduce(Hadoop MapReduce)。 搜索引擎的核心任务:一是数据采集,也就是网页的爬…

Linux学习笔记——基本操作命令

目录 一、Shell 命令基础1、Shell 简介2、Shell 命令格式3、显示系统信息命令4、Shell 使用技巧 二、Linux 文件及目录管理1、Linux操作系统的目录结构2、文件及目录显示类命令3、文件及目录操作类命令4、文件内容的显示和处理5、文件查找类命令 三、vi、vim 编辑器的使用四、文…

【Linux】文件操作

文章目录 预备知识C语言文件接口fopen()函数w方式a方法 fwrite()fprintf()fputs()fread()fgets()标准输入输出流 系统调用接口标志位文件权限fclose()write()read() 前言:本文探讨的是“打开的”文件。 预备知识 如进程一样,文件 文件属性 文件内容文…

xinput1_3.dll丢失都有什么办法可以有效的解决、xinput1_3.dll导致游戏不能启动怎么办?

使用电脑的过程中是不是会遇到关于某个dll文件丢失的提示,今天想和大家聊的是xinput1_3.dll文件,如果电脑提示xinput1_3.dll丢失有什么办法可以有效的解决,解决办法都有哪些,如果xinput1_3.dll丢失会对电脑有什么影响。&#xff0…

【AI视野·今日Robot 机器人论文速览 第八十三期】Wed, 6 Mar 2024

AI视野今日CS.Robotics 机器人学论文速览 Wed, 6 Mar 2024 Totally 30 papers 👉上期速览✈更多精彩请移步主页 Interesting: 📚SpaceHopper,外星探索多功能三足机器人 (from Robotic Systems Lab, ETH Zurich) Daily Robotics Papers A Safety-Criti…

Java红黑树实现Map简单示例

红黑树(Red-Black Tree)是一种自平衡的二叉搜索树,它是由 Rudolf Bayer 在 1972 年提出的,后来由 Leo J. Guibas 和 Robert Sedgewick 在 1978 年发表的论文中形式化定义。 红黑树具有以下特性: 1.节点颜色&#xff1…

亚信安慧AntDB:数据管理的创新先锋

在亚信安慧AntDB数据库中,其卓越的创新能力得以充分体现,其独特之处在于融合统一与实时处理这两大关键领域。AntDB以其独特的技术和理念,引领着数据库领域的发展潮流,成为众多企业和机构首选的数据库解决方案。在这个信息化时代&a…

AI加速“应用现代化”,金融核心系统转型正当时

数字经济时代,金融机构需要快速感知客户需求,提升产品供给的敏捷度,才能在白热化的竞争环境中抢占先机,而无论是金融机构还是方案提供商,都需要深入思考核心系统现代化的内涵,携手迈出应用现代化的重要一步…

【Qt】初识Qt

文章目录 一. 行业岗位介绍二. 什么是客户端?三. GUI 开发的各自技术方案四. 什么是框架?五. Qt 的发展史五. Qt 支持的系统六. Qt 的优点 一. 行业岗位介绍 二. 什么是客户端? 既然 Qt 是用来进行客户端开发的,那我们就要了解什…

Python遗传算法搜索最优最短路径

程序示例精选 Python遗传算法搜索最优最短路径 如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言 这篇博客针对《Python遗传算法搜索最优最短路径》编写代码,代码整洁,规则&#xff0…

基于状态机的按键消抖实现

摸鱼记录 Day_14 !(^O^)y review 在day_13中以按键状态判断为例学习了状态分析基于状态机的按键消抖原理-CSDN博客 分析得到了下图: 今日任务:完成此过程 !(^O^)y 小梅哥对应视频: 15B 基于状态机的按键消抖Verilog实现_哔哩哔哩…

手回科技:人生的“小雨伞”,能否撑起自己的增长路?

有道是一年之计在于春。新年伊始,多家券商发布研报表达了对2024年保险市场表现的观点。 比如,开源证券表示,政策组合拳带来beta催化,保险业务端和弹性占优;中国银行证券指出,2024年,保险行业景…

[C#]winform基于C2PNet算法实现室内和室外图像去雾

【CP2Net框架】 https://github.com/YuZheng9/C2PNet 【CP2Net介绍】 Abstract 考虑到不适定的性质,发展了单图像去模糊的对比正则化,引入了来自负图像的信息作为下界。然而,对比样本是非一致的,因为阴性通常距离清晰&#xff…

云原生之容器编排实践-ruoyi-cloud项目部署到K8S:Nacosv2.2.3

背景 前面搭建好了 Kubernetes 集群与私有镜像仓库,终于要进入服务编排的实践环节了。本系列拿 ruoyi-cloud 项目进行练手,按照 MySQL , Nacos , Redis , Nginx , Gateway , Auth ,…

Django学习记录——管理员-登录注销的实现

1.管理员案例 1.1管理员数据库 1.1.1 表结构 1.1.2 管理员表的建立 class Admin(models.Model):"""管理员表"""username models.CharField(max_length32, verbose_name"用户名")password models.CharField(max_length64, verbose…

基于Java的快递管理系统(Vue.js+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 数据中心模块2.2 快递类型模块2.3 快递区域模块2.4 快递货架模块2.5 快递档案模块 三、界面展示3.1 登录注册3.2 快递类型3.3 快递区域3.4 快递货架3.5 快递档案3.6 系统基础模块 四、免责说明 一、摘要 1.1 项目介绍 …

Qt 类的前置声明和头文件包含

1. 在头文件中引入另一个类经常有两种写法 1&#xff09;前置声明 2&#xff09;头文件包含 #ifndef FRMCOUPLE2_H #define FRMCOUPLE2_H#include <QWidget> //头文件包含namespace Ui { class frmcouple2; }//前置声明&#xff1a;QPushButton frmchkeyboard…