json-server模拟后端接口

简介: json-server模拟后端接口

作为一个前端,在实现项目功能的时候,需要在前端写一个静态的json数据,进行测试,但是有的时候,需要涉及到全模拟请求以及请求回来的过程,实现动态增删改查,这个时候就需要使用到web的API接口神器json-server


json server 作为工具,足够简单,写少量数据,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法。在使用之前先确定安装node和npm最新版本。


1:全局安装json-server

打开cmd,右键以管理员身份运行(我的电脑是win10的,所以需要权限)


输入json-server -h进行测试,查看是否安装成功,出现以下内容说明安装成功。

2:在D盘新建一个文件夹JsonServer

命令行进入新建的文件夹里面。



初始化文件 npm init ,一路回车键。

这个时候,空文件夹里面生成了一个package.json文件。

3:db.json模拟数据

在根目录底下新建db.json文件,写上自己模拟的json数据,后面会要用到进行模拟接口。

json

{
  "users": [
    {
      "name": "王小婷",
      "phone": "123456789",
      "email": "11357097537@qq.com",
      "age": "20",
      "id": 1,
      "companyId": 1
    },
    {
      "name": "祈澈菇凉",
      "phone": "123456789",
       "email": "11357097537@qq.com",
      "age": "30",
      "id": 2,
      "companyId": 2
    },
    {
      "name": "最帅的坏兔子",
      "phone": "123456789",
       "email": "11357097537@qq.com",
      "age": "23",
      "id": 3,
      "companyId": 3
    },
    {
      "name": "安安",
      "phone": "123456789",
      "email": "11357097537@qq.com",
      "age": "45",
      "id": 4,
      "companyId": 3
    }
  ],
  "companies": [
    {
      "id": 1,
      "name": "Apple",
      "description": "Apple lalala!"
    },
    {
      "id": 2,
      "name": "Microsoft",
      "description": "Microsoft lalala!"
    },
    {
      "id": 3,
      "name": "Google",
      "description": "Google lalala!"
    }
  ]
}
4:安装依赖模块

进入项目,在项目里面安装json-server的模块依赖文件,命令如下:

npm install json-server --save

安装完成会发现多了两个文件:


5:修改配置文件

打开package.json文件,将scripts进行修改,如下:

"scripts": {
    "json:server": "json-server --watch db.json"
},

6:运行

完成之后,输入命令,运行:

npm run json:server

在浏览器输入http://localhost:3000/,可以看到以下界面,搭建成功。



现在可以查看一下json接口数据,输入http://localhost:3000/users,可以看到一个完整的接口啦:



相关文章
|
20天前
|
存储 JSON 安全
商品详情(item getAPI接口)json数据格式参考
某东商品详情(item get API接口)的JSON数据格式参考如下
|
24天前
|
JSON API 数据格式
商品详情(item getAPI接口)json数据格式参考
淘宝商品详情(item get API接口)返回的JSON数据格式是一个复杂且灵活的结构,包含多个字段和对象。以下是一个简化的JSON数据格式参考:
|
27天前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应
|
17天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
2月前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
3月前
|
SQL JSON Java
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
本文为Spring Boot增删改查接口的小白入门教程,介绍了项目的构建、配置YML文件、代码编写(包括实体类、Mapper接口、Mapper.xml、Service和Controller)以及使用Postman进行接口测试的方法。同时提供了SQL代码和完整代码的下载链接。
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
|
3月前
|
JSON 数据格式
Blob格式转json格式,拿到后端返回的json数据
文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。
101 0
Blob格式转json格式,拿到后端返回的json数据
|
3月前
|
JSON 前端开发 JavaScript
java中post请求调用下载文件接口浏览器未弹窗而是返回一堆json,为啥
客户端调接口需要返回另存为弹窗,下载文件,但是遇到的问题是接口调用成功且不报错,浏览器F12查看居然返回一堆json,而没有另存为弹窗; > 正确的效果应该是:接口调用成功且浏览器F12不返回任何json,而是弹窗另存为窗口,直接保存文件即可。
143 2
|
4月前
|
Java 程序员 编译器
作为后端开发,感受下接口带来的魅力!🔥🔥
在一场大厂面试中,小南被问及何时选用接口,何时采用抽象类。一位拥有24K粉丝的博主给出解答:选择取决于需求——接口定义多个类需遵守的契约,而抽象类则用于创建共享实现的基类。有时两者结合使用,通过抽象类实现接口以确保契约并提供通用功能。此外,小南还分享了关于抽象类的深入探讨,包括子类如何正确调用父类构造函数、访问父类成员以及父类不可访问的方法等细节。最后,他提出一个关于接口与抽象类差异的小测验,并邀请读者关注他的开源项目《Java学习进阶指南》,旨在帮助Java开发者更好地掌握核心知识和面试要点。
184 3
作为后端开发,感受下接口带来的魅力!🔥🔥
|
4月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
下一篇
无影云桌面