json-server的入门

由于前端开发的时候,需要向后端请求数据,有的时候后端还没有准备好,所以需要使用一些简单的静态数据,但是我们更加希望能够模拟请求以及请求回来的过程,这个时候就需要使用json-server

Json-Server的介绍

json-server是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。 通俗来说, json-server模拟服务端接口数据,一般用在前端人员可以不依赖后端的API开发,而在本地搭建一个JSON服务,快速生成一个REST API风格的后端服务。

Json-Server的下载与安装

npm install -g json-server

在这里插入图片描述

Json-Server的使用

我已经在本地启动了一个vue2项目,现在要做的就json-server的使用了

  1. 新建一个data文件夹,在该文件夹中新建data.json文件,然后在json中新建数据
    在这里插入图片描述
    这个里面就是模拟数据的json文件,json数据其实跟我们原来的对象很像,差别在于它里面只能用双引号,不能用单引号,数字布尔值不用加引号,每一项的最后一项不能加逗号;如下
{
  "userList":[
    {
      "title":"拜登打算宣布不使用核武器",
      "user":"张三",
      "date":"2021-8-8",
      "id":"1" ,
      "check":false
    },
      {
      "title":"中国健儿夺金高燃瞬间回顾",
      "user":"李四",
      "date":"2021-9-9",
      "id":"2" ,
      "check":true
    },
     {
      "title":"全国热力地图出炉",
      "user":"张三",
      "date":"2021-8-8",
      "id":"3" ,
      "check":false
    },
     {
      "title":"美国驻华大师专家分析",
      "user":"张三",
      "date":"2021-8-8",
      "id":"4" ,
      "check":false
    },
     {
      "title":"安德鲁王子遭起诉",
      "user":"环球网",
      "date":"2021-8-11",
      "id":"5" ,
      "check":true
    }
  ]
}
  1. 在data文件下面打开命令行工具,执行
json-server --watch data.json -p 3009

-p是端口号,随便写
在这里插入图片描述
出现笑脸说明数据启动成功,可以直接在浏览器端使用
在这里插入图片描述

  1. 在组件中写入created或者mounted,在这个里面发送axios请求,在组件中导入axios请求
    在这里插入图片描述
    然后启动项目,在控制台中就会打印出来
    在这里插入图片描述

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

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

相关文章

bye 我的博客网站

Bye🙋🙋🙋,我的博客网站。在我的服务器上运行了9个月之久的博客网站要和大家Bye了。 背景 可能很多人不知道我的这个博客网站的存在,好吧,最后一次展示它了,博客网站地址在这里,它…

【unity】ShaderGraph实现等高线和高程渐变设色

【unity】ShaderGraph实现等高线和高程渐变设色 等高线的实现思路 方法一: 通过Position节点得到顶点的高度(y)值,将高度值除去等高距离取余,设定余数的输出边界(step) 方法二: 将…

ElasticSearch详细操作

ElasticSearch搜索引擎详细操作以及概念 文章目录 ElasticSearch搜索引擎详细操作以及概念 1、_cat节点操作1.1、GET/_cat/nodes:查看所有节点1.2、GET/_cat/health:查看es健康状况1.3_、_GET/_cat/master:查看主节点1.4、GET/_cat/indices&a…

STM32F105RCT6 -- ST-Link ITM Trace printf 打印日志

1. STM32 可以配置UASRT,使用串口来打印日志,还有另外一种方式,使用ITM 调试功能来打印日志, 主要使用到的三个函数 core_cm3.h 1.1 发送函数 static __INLINE uint32_t ITM_SendChar(uint32_t ch),相当于串口的发送函…

分享之python 协程

线程和进程的操作是由程序触发系统接口,最后的执行者是系统;协程的操作则是程序员。 协程存在的意义:对于多线程应用,CPU通过切片的方式来切换线程间的执行,线程切换时需要耗时(保存状态,下次继…

CMU 15-445 -- Introduction to Distributed Databases - 19

CMU 15-445 -- Introduction to Distributed Databases - 19 引言System ArchitectureShared MemoryShared DiskShared Nothing Early Distributed Database SystemsDesign IssuesHomogeneous VS. Heterogeneous Database PartitioningNaive Table PartitioningHorizontal Part…

Grafana技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》

阿丹: Prometheus技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》_一单成的博客-CSDN博客 在正确安装了Prometheus之后开始使用并安装Grafana作为Prometheus的仪表盘。 一、拉取镜像 搜索可拉取版本 docker search Grafana拉取镜像 docker pull gra…

数字万用表测量基础知识--DMM的显示位数

概览 DMM(即数字万用表)是一种电气测试和测量仪器,可测量直流和交流信号的电压、电流和电阻。本文介绍如何正确使用和理解数字万用表(DMM)。 DMM的显示位数 数字万用表(DMM)可用于进行各种测量。在选择DMM或理解所使用的DMM时,首…

Lecoode有序数组的平方977

题目建议: 本题关键在于理解双指针思想 题目链接:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 文章讲解:代码随想录 视频讲解: 双指针法经典题目 | LeetCode:977.有序数组的平方_哔哩…

linux配置上网 linux adsl拨号上网设置

Linux里面配置ADSL上网是件很麻烦的事。但配置完成之后就能开机自动拨号上网,可谓十分的方便。支持的系统有Redhat,CentOS,SuSE,FreeBSD,Ubuntu等常见的Linux。 工具/原料 ADSL网络,电信,网通,移动等常见宽带。 Linux系统的安装光…

06-4_Qt 5.9 C++开发指南_MDI应用程序设计

文章目录 1. MDI简介2. 文档窗口类 QFormDoc 的设计3. MDI主窗口设计与子窗口的使用3.1 主窗口界面设计3.2 MDI子窗口的创建与加入3.3 QMdiArea 常用功能函数3.4 MDI的信号 4. 源码4.1 qwmainwindow.h4.2 qwmainwindow.cpp 1. MDI简介 传统的应用程序设计中有多文档界面(Multi…

VBA技术资料MF42:VBA_从Excel中上面的单元格复制公式

【分享成果,随喜正能量】唯有梦想才配让你不安,唯有行动才能解除你的不安.绳锯木断,水滴石穿。也许你现在做的事情很小,只要你能日积月累的坚持下去,才会发现意义非凡。所谓的成功,便是别人失败的时候你还在…

windows永久关闭更新

不要去services.msc 服务里面关闭windowUpdata了,对win11和部分win10根本不管用,下面在教你一招永久关闭(原理不是关闭,只是延长更新时间,时间可以设置百年后,所以和关闭差不多) windows图形化…

手撕数据结构之栈+例题

目录 一、栈的概念及结构 二、栈的头文件及基本框架 三、接口实现 1、对栈的初始化 2、栈的销毁 3、入栈操作 4、出栈操作 5、判断栈是否为空 6、返回栈顶元素 7、遍历栈 四、有效的括号 - 力扣(LeetCode) 题目描述: 思路&#xff…

QT自带PDF库的使用

QT自带PDF库可以方便的打开PDF文件,并将文件解析为QImage,相比网上提供的开源库,QT自带PDF库使用更方便,也更加可靠,然而,QT自带PDF库的使用却不同于其他通用库的使用,具备一定的技巧。 1. 安装…

Session与Cookie的区别(五)

储存状态的方式 小明的故事说完了,该来把上面这一段变成网络的实际案例了。其实在网络世界中问题也是一样的。 前面已经提到过我们会把状态存在 Cookie 里面,让 Request 之间能够变得有关联。 假设我们今天要来做一个会员系统,那我要怎么知道…

UML箭头汇总

参考:http://www.cnblogs.com/damsoft/archive/2016/10/24/5993602.html 1.UML简介 Unified Modeling Language (UML)又称统一建模语言或标准建模语言。 简单说就是以图形方式表现模型,根据不同模型进行分类,在UML 2.0中有13种图&#xff…

青大数据结构【2015】

一、单选 二、简答 5.如果一组关键字,以不同的次序输入后建立起来的二叉排序树是否相同?当中序遍历这些二叉排序树时,其遍历的结果是否相同?为什么? 不同,因为输入次序不同,所放置的位置与上一…

idea打开多个项目需要开多个窗口(恢复询问弹窗)

【版权所有,文章允许转载,但须以链接方式注明源地址,否则追究法律责任】【创作不易,点个赞就是对我最大的支持】 前言 仅作为学习笔记,供大家参考 总结的不错的话,记得点赞收藏关注哦! 使用…

【C++】异常exception

文章目录 1. C语言中传统的处理错误方法2. C中的异常3. 异常的使用3.1 异常的抛出和捕获3.2 异常的重新抛出3.3 异常安全3.4 异常规范 4. 自定义异常体系5. 异常的优缺点 📝 个人主页 :超人不会飞)📑 本文收录专栏:《C的修行之路》…