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请求
    在这里插入图片描述
    然后启动项目,在控制台中就会打印出来
    在这里插入图片描述

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

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

相关文章

第十六章、【Linux】程序管理与SELinux初探

16.1 什么是程序 (process) 在Linux 系统当中:“触发任何一个事件时,系统都会将他定义成为一个程序,并且给予这个程序一个 ID ,称为 PID,同时依据启发这个程序的使用者与相关属性关系&#xff…

二叉树题目:根据二叉树创建字符串

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题:根据二叉树创建字符串 出处:606. 根据二叉树创建字符串 难度 3 级 题目描述 要求 给你二叉树的根结…

Java的泛型

泛型 泛型又称参数化类型,是Jdk5.0出现的新特性,解决数据类型的安全性问题 在类声明或实例化时只要指定好需要的具体的类型即可 Java泛型可以保证如果程序在编译时没有发出警告,运行时就不会产生ClassCastException异常。同时,代码更加简洁…

基本数据类型c++ 整数型:int, long long等 实数型:float, double等 字符型:char等 布尔型:bool等

整数型:int, long long 实数型:float, double 字符型:char 布尔型:bool 整数型:int, long long 在C编程中,整数型(Integer Types)是一种基本的数据类型,用于表示整数值…

ubuntu 安装 nvidia 驱动

ubuntu 安装 nvidia 驱动 初环境与设备查询型号查询对应的驱动版本安装驱动验证驱动安装结果 本篇文章将介绍ubuntu 安装 nvidia 驱动 初 希望能写一些简单的教程和案例分享给需要的人 环境与设备 系统:ubuntu 设备:Nvidia GeForce RTX 4090 查询型…

Linux C 语言 mosquitto 方式 MQTT 发布消息

1 说明 采用 mosquitto 库,实现对主题发布消息。 其中服务器有做限制,需要对应的 cilent id ,cafile 、certfile 、keyfile 等配置 2 开发环境 采用ubuntu 直接编译调试 安装mosquitto 库 sudo apt install libmosquitto-dev sudo apt-ge…

常见的服务器安全管理漏洞!!!!!

常见的服务器安全管理漏洞!!!!! 企业信息化技术的应用,以不可逆转。随着文件服务器、ERP管理软件等等在企业中生根发芽,应用服务器也逐渐在企业中普及起来。以前在企业中有一台应用服务器已经是…

PyTorch 微调终极指南:第 2 部分 — 提高模型准确性

一、说明 如今,在训练深度学习模型时,通过在自己的数据上微调预训练模型来迁移学习已成为首选方法。通过微调这些模型,我们可以利用他们的专业知识并使其适应我们的特定任务,从而节省宝贵的时间和计算资源。本文分为四个部分&…

亿欧智库:2023中国宠物行业新趋势洞察报告(附下载)

关于报告的所有内容,公众【营销人星球】获取下载查看 核心观点 户外赛道本质上迎合了全球共性需求的增长,从养宠意愿的转化到养宠生活的需求,多层次的需求推动行业发展新趋势 从需求端进行分析,可以将养宠意愿的转化分为三个层…

OSPF 动态路由协议 路由传递

影响OSPF路由选择的因素: 1.OSPF路由的开销值:宽带参考值默认为100. COST1000/接口带宽。此时接口 带宽的值可更改,更改后只改变参考数值,带宽仍然为初始值。 注意:更改COST需要 在路由的入方向,数据的出方…

3分钟了解别人如何用ChatGPT打造独特个人IP(成为网红)的

​想必你也有所察觉,在当前形势下,打造个人IP非常重要。许多有影响力的CEO和网红都在打造自己IP。如果你还没有建立自己的个人IP,那么现在正是开始的时候。而且,相比以前,你甚至都不需要找专业的个人IP顾问了&#xff…

【数据结构OJ题】轮转数组

原题链接:https://leetcode.cn/problems/rotate-array/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 1. 方法一:暴力求解,将数组的第一个元素用临时变量tmp存起来,再将数组其他元素往右挪动一步&…

编译iOS系统可用的FFmpeg

在进行编译之前,需要做一些准备工作安装必备文件: 1 安装 gas-preprocessor FFmpeg-iOS-build-script 自动编译脚本需要使用到 gas-preprocessor . 执行 sudo git clone https://github.com/bigsen/gas-preprocessor.git /usr/local/bin/gas sudo c…

ChatGPT会取代搜索引擎吗?BingChat、GoogleBard与ChatGPT区别

目前暂时不会,ChatGPT为代表的聊天机器人很可能会直接集成到搜索中,而不是取代它。微软已经通过Bing Chat和Bing做到了这一点,它将“聊天”选项卡直接放入Bing搜索的菜单中。Google、百度也分别开始尝试通过其AI生成技术将Google Bard、文心一…

创建好的VMware虚拟机如何连接上外网?MobaX和XShell如何连接虚拟机

配置虚拟机网卡 首先点击VMware菜单栏,编辑-虚拟网络编辑器-更改设置 选择VMnet8-NAT设置,并记住子网IP之后有用 记住网关IP 修改实际创建的虚拟机网卡 修改设置,vi /etc/sysconfig/network-scripts/ifcfg-ens32 修改前: 修…

FineBI 人力资源 专题

此处使用FineBI处理人力资源数据,数据来源于HR_database数据文件,将此文件拷贝到安装目录下 然后配置数据库连接 在【公共数据】中新建一个文件夹,并将之前数据库中需要用到的表放入此处,更新数据。显示如下。 这时候首先要建立…

PCI 简易通讯控制器有黄色感叹号

一、问题描述 设备管理器中,其他设备中显示 “PCI 简易通讯控制器”驱动未安装,显示黄色感叹号: 二、原因分析 右键该驱动,查看属性ID,显示为: PCI \ VEN_8086&DEV_1C3A&SUBSYS…

mapbox结合threeJS载入3d模型,并实现点击事件

https://www.jianshu.com/p/ae8f9b338f80 地址参考代码如下&#xff1a; <!DOCTYPE html> <html> <head><title>Mapbox THREE.js raycaster test</title><meta charsetutf-8><meta name"viewport" content"widthdevice…

react-virtualized可视化区域渲染的使用

介绍 github地址&#xff1a;https://github.com/bvaughn/react-virtualized 实例网址&#xff1a;react-virtualized如果体积太大&#xff0c;可以参考用react-window。 使用 安装&#xff1a; yarn add react-virtualized。在项目入口文件index.js中导入样式文件&#xff…

Positive Technologies:有针对性的攻击占非洲所有攻击的 68%

网络犯罪分子最常攻击的是非洲的金融公司和电信公司 Positive Technologies 分析了 2022–2023 年非洲遇到的各种网络安全威胁&#xff0c;并在圣彼得堡举行的第二届俄罗斯—非洲峰会上介绍了研究结果。根据我们的专家的介绍&#xff0c;非洲金融部门受到的网络攻击最多&#…