使用本地json-server服务,创建简单的本地api数据

时间: 2020-09-15阅读: 43标签: api

前言

近期在学习 vue 框架,在学习过程中,发现了一个和 mockjs 类似的第三方库: json-server。它不仅可以模拟出完美的接口数据,还可以修改请求的类型来修改本地的数据,是一个非常不错的库,所以分享记录一下使用心得。


快速上手

一.新建存储数据的文件

在电脑上创建一个专属于 json-server 的文件夹,文件夹主要是用于创建和存储 json 数据。例如: "test-json"


二.初始化 package.json

VsCode 编辑器打开 test-json 文件夹,打开终端输入命令行npm init初始化 package.json 文件,输入命令行后一直回车就可以了。

命令:

npm init


三.创建 db.json 数据文件

在 package.json 同级目录下创建一个 db.json,用于设计我们需要的 api 数据。如下所示,我们创建了一个的简简单单接口数据:

{
  "users": [
    {
      "name": "joker",
      "age": 22,
      "sex": "男"
    },
    {
      "name": "tom",
      "age": 24,
      "sex": "男"
    },
    {
      "name": "jerry",
      "age": 18,
      "sex": "男"
    }
  ]
}


四.安装 json-server

打开 IDE 终端,输入命令行npm install json-server --save-dev安装本地的 json-server。

命令:

npm install json-server --save-dev


五.配置 json-server 运行脚本

安装好 json-server 后,我们需要在 package.json 中配置运行启动 json 服务的 script。

1.json-server --watch db.json: 运行 json-server 服务,运行启动本地 api 数据。

2.json-server --watch db.json --port 8888: 运行启动 json-server 服务在本地其他端口(默认端口 3000)。

3.json-server http://jsonplaceholder.typicode.com/db: 运行启动配置远程模式 json-server 服务。

"scripts": {
  "json-server": "json-server --watch db.json --port 8888",
  "json-server:remote": "json-server http://jsonplaceholder.typicode.com/db",
},


六.运行启动服务,获取数据

运行启动服务命令后,打开postman获取本地的api数据,检测本地数据是否运行成功。

来自:https://www.cnblogs.com/BlueBerryCode/p/13808693.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9721

关闭

用于现代JavaScript的Observer API

Observer API(观察者API)释放了Web隐藏的超能力,以创建真正的响应式体验,从懒加载关键内容到非侵入式性能监控。在检测变化方面非常方便,可以用来创建响应式应用。

JavaScript的API设计原则

Js的API设计原则总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正。

Notification API,为你的网页添加桌面通知推送

其实,MDN 的说明已经可以让我们很清楚知道 Notification 的作用。Notification 能够为用户提供异步的桌面消息通知,即使你缩小浏览器或是活动在其他标签页,只要调用该 Api 的标签页没被关闭

超赞的腾讯短网址(微信url.cn短链接)生成api接口

腾讯短网址的应用场景很广,譬如短信营销、邮件推广、微信营销、QQ营销、自媒体推广、渠道推广等,都会用到短网址。究其原因是在于短网址可以降低推广成本、用户记忆成本,提高用户点击率;在特定的场景下推广还能规避关键词,防止域名被拦截

Node.js中Streams

NodeJs流以难以使用而闻名,甚至更难理解。 好吧,我给你带来了好消息 - 现在已经不是这样了。多年来,开发人员创建了许多软件包,其唯一目的是为了更容易的使用流。 但是,在本文中,我将重点介绍NodJs 原生的流API。

scrollIntoView 与 scrollIntoViewIfNeeded API 介绍

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内

webService和Restful

restful是一种架构风格,其核心是面向资源,更简单;而webService底层SOAP协议,主要核心是面向活动;两个都是通过web请求调用接口

React的Context API

但是我们依然间接的使用着它,比如许多官方依赖在使用,如:react-redux, mobx-react,react-router。我们需要它功能的时候,更多是靠第三方依赖库就能实现,而不是自己手动写context。但是,依然需要理解它

Vue 3.0 的 Composition API 尝鲜

虽然 Vue 3.0 尚未发布,但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。

[探索]怎么样的参数能让 JS - API 更灵活

外在决定是否需要了解内在,内在决定是否会一票否决外在。内外结合,好上加好。 开发 API 的时候,把参数的名字和位置确定下来,函数定义就可以说是完成了。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!