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,可以看到一个完整的接口啦:



相关文章
|
1月前
|
Java 程序员 编译器
作为后端开发,感受下接口带来的魅力!🔥🔥
在一场大厂面试中,小南被问及何时选用接口,何时采用抽象类。一位拥有24K粉丝的博主给出解答:选择取决于需求——接口定义多个类需遵守的契约,而抽象类则用于创建共享实现的基类。有时两者结合使用,通过抽象类实现接口以确保契约并提供通用功能。此外,小南还分享了关于抽象类的深入探讨,包括子类如何正确调用父类构造函数、访问父类成员以及父类不可访问的方法等细节。最后,他提出一个关于接口与抽象类差异的小测验,并邀请读者关注他的开源项目《Java学习进阶指南》,旨在帮助Java开发者更好地掌握核心知识和面试要点。
作为后端开发,感受下接口带来的魅力!🔥🔥
|
30天前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
23天前
|
存储 缓存 关系型数据库
Django后端架构开发:缓存机制,接口缓存、文件缓存、数据库缓存与Memcached缓存
Django后端架构开发:缓存机制,接口缓存、文件缓存、数据库缓存与Memcached缓存
27 0
|
2月前
|
存储 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合
循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合
|
2月前
|
JSON 文字识别 数据格式
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
文本,文识11,解析OCR结果,paddOCR返回的数据,接口返回的数据有code,data,OCR返回是JSON的数据,得到JSON数据先安装依赖,Base64转换工具网站在21.14
|
1月前
|
开发框架 前端开发 API
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理
|
2月前
|
开发框架 前端开发 关系型数据库
使用egg.js开发后端API接口系统 什么是Egg.js
使用egg.js开发后端API接口系统 什么是Egg.js
|
2月前
|
运维 前端开发 API
运维,如何快速查找后端的接口
运维,如何快速查找后端的接口
|
2月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
3月前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
75 6

热门文章

最新文章