json-server的入门

news2024/11/26 14:42:51

由于前端开发的时候,需要向后端请求数据,有的时候后端还没有准备好,所以需要使用一些简单的静态数据,但是我们更加希望能够模拟请求以及请求回来的过程,这个时候就需要使用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请求
    在这里插入图片描述
    然后启动项目,在控制台中就会打印出来
    在这里插入图片描述

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

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

相关文章

从小白到大神之路之学习运维第77天-------Kubernetes集群部署下篇

第四阶段 时 间:2023年8月10日 参加人:全班人员 内 容: Kubernetes集群部署下篇 目录 一、安装flannel 二、安装Dashboard UI (一)部署Dashboard (二)开放端口设置 (三&a…

课程管理系统springboot学生教师教务java jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 课程管理系统springboot 软件架构:Spring…

无涯教程-Perl - keys函数

描述 此函数以列表形式返回哈希的所有键。键以随机顺序返回,但实际上,它们与值和每个值使用相同的顺序。 语法 以下是此函数的简单语法- keys HASH返回值 此函数在标量context中返回哈希中的键数,在列表context中返回键列表。 例 以下是显示其基本用法的示例代码- #!/u…

【uniapp】 软键盘弹出后fixed定位被顶上去问题

问题描述 当手机设计的导航栏为fixed定位上去时&#xff0c;输入框获取焦点就会把顶部自定义的导航栏顶到上面去&#xff0c;如下图所示 解决办法 输入框设置 :adjust-position“false” <input type"text" :adjust-position"false" focus"i…

APP稳定性测试神器之Monkey-随机事件测试

一、Monkey 命令基本参数介绍 0、–help : 列出简单的用法 adb shell monkey -help 1、允许启动手机里面所有的 App &#xff0c; 随机操作 1000 次 adb shell monkey 1000 2、-p : 允许启动 App 的包名 启动一个包名的应用&#xff0c;QQ 的包名为&#xff1a; com.tenc…

vscode的ros拓展(插件)无法渲染urdf

文章目录 事件背景资料调查解决方案 事件背景 之前在vscode中一直用得好好的urdf预览功能&#xff0c;突然在某一天&#xff0c;不行了。 执行 URDF Preview之后&#xff0c;虽然弹出了一个URDF Preview的窗口&#xff0c;但是这个窗口里面啥都没有。没有网格、没有模型。 一开…

组合搜索组件文档

ifeng 组合搜索组件文档 组合搜索组件 1. 先展示一下使用效果: 2. 使用方法 第一步: 在views.py中配置和传参 search_group NbSearchGroup(request,models.TransactionRecord, # 传入表Option(charge_type), # 传入choice字段名 )第二步: 添加查询条件 # 查询条件 .fi…

《兴森大求真》重磅来袭!先进电子电路可靠性大揭秘

兴森实验室&#xff0c;让可靠看得见 前言介绍 芯片性能不断增强、先进封装不断演进&#xff0c;导致封装基板信号互连的IO数量和密度不断增加、PCB的层数增加、孔间距减小、厚径比提升&#xff0c;可靠性的挑战正在加剧。 电路板作为各种电子元器件的载体和电路信号传输的枢…

语音秘书:让录音转文字识别软件成为你的智能工作助手

每当在需要写文章的深夜&#xff0c;我的思绪经常跟不上我的笔&#xff0c;即便是说出来用录音机录下&#xff0c;再书写出来&#xff0c;也需要耗费大量时间。这个困扰了我很久的问题终于有了解决的办法&#xff0c;那就是录音转文字软件。它像个语言魔术师&#xff0c;将我所…

数据结构:交换排序

冒泡排序 起泡排序&#xff0c;别名“冒泡排序”&#xff0c;该算法的核心思想是将无序表中的所有记录&#xff0c;通过两两比较关键字&#xff0c;得出升序序列或者降序序列。 算法步骤 比较相邻的元素。如果第一个元素大于第二个元素&#xff0c;就交换它们。对每一对相邻…

【LeetCode】粉刷房子

粉刷房子 题目描述算法分析编程代码 链接: 粉刷房子 题目描述 算法分析 编程代码 **class Solution { public:int minCost(vector<vector<int>>& costs) {int n costs.size();vector<vector<int>> dp(n1,vector<int>(3));for(int i 1;i&…

医疗行业温湿度轻松搞定,这个方法太简单了吧!

在现代医疗体系中&#xff0c;保障患者的安全和舒适性是至关重要的任务之一。而温湿度监控系统的引入&#xff0c;为实现这一目标提供了切实可行的解决方案。 通过精准地监测和管理医疗环境中的温度和湿度&#xff0c;医疗机构能够营造出稳定、卫生、舒适的就医环境&#xff0c…

vue2项目搭建全步骤-超级详细

文章目录 环境配置node配置安装Vue CLI ​搭建新项目vue create 搭建新项目方法一&#xff1a;选择第一个就好&#xff08;Default是自动安装&#xff0c;按下回车键进行选择&#xff09;方法二&#xff1a;配置自定义设置第一步&#xff1a;选择 Manually select features第二…

什么是信息孤岛?如何打破信息孤岛?

一文让你看懂&#xff1a;什么是信息孤岛&#xff1f;信息孤岛形成的原因&#xff1f;以及如何打破信息孤岛&#xff1f; 本文重点结合了企业信息系统的需求&#xff0c;给出了整合企业现有信息系统的方法&#xff0c;能有效解决企业信息孤岛的问题&#xff0c;并帮助企业快速…

【学习FreeRTOS】第1章——FreeRTOS入门

1.裸机与RTOS介绍 1.1.裸机与RTOS引入&#xff08;举例&#xff09; 设定情景&#xff1a;小明同学一边打游戏一边恢复女友消息&#xff0c;中途突然肚子疼要上医院 裸机的抽象表达 当紧急情况时&#xff0c;如果当前正在打游戏&#xff0c;那么小明只能打游戏和回复信息的流…

$bus的emit和on执行顺序

需求&#xff1a; 但是发现弹框组件第一次打开时&#xff0c;接收不到信息&#xff0c;第二次再摊开&#xff0c;就收到消息了。 原因是因为&#xff1a; 是因为全局事件总线必须先执行$on,再执行$emit 所以我们在使用$bus.$emit发送消息时&#xff0c;要使用nextTick包裹&…

删除的照片如何恢复?4个方法图文详解!

“刚刚和男朋友吵架不小心把我们的合照都删除了&#xff0c;照片是保存在电脑里的&#xff0c;现在真的很后悔。有什么方法能帮我恢复这些照片吗&#xff1f;真的求求了&#xff01;” 照片承载着人们的美好回忆和愉快过往。当我们把照片导入电脑中&#xff0c;可以更清晰地查看…

JavaScript应用:五子棋游戏实战开发

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…

在数据链路层扩展以太网

为了避免上一节中形成更大的碰撞域&#xff0c;所以从数据链路层来扩展&#xff1a; 网桥工作在数据链路层&#xff0c;因此网桥具备属于数据链路层范畴的相关能力。   网桥可以识别帧结构。   网桥可以根据帧首部中的目的MAC地址和网桥自身的帧转发表来转发或丢弃所收到的…

IT运维:使用数据分析平台监控PowerStore存储

概述 存储在企业中一直承担着重要的角色&#xff0c;保证数据的安全性更是重中之重。存储的运行是否正常&#xff1f;我们的数据是否安全&#xff1f;存储管理人员的操作是否规范&#xff1f;这些都是企业需要关注的问题。那么该如何确保这些问题能够有效的解决&#xff1f;我们…