用JSON-server模拟REST API(一) 安装运行

Sleepy 发布于2019-08-19 18:36 / 962人阅读

摘要：曹县宣布昨日晚间登日成功长江流域首次发现海豚支持党中央决定抄写党章势在必行为了方便，再创建一个文件，写入然后使用到目录下执行命令，如果成功会出现你的电脑中文件夹所在目录的路径如果不成功请检查文件的格式是否正确。

在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。

对比过多种mock工具后，我最终选择了使用 json server 作为工具，因为它足够简单，写少量数据，即可使用。
也因为它足够强大，支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法，如limit，order等。下面我将详细介绍 json server 的使用。

安装

首先你的电脑中需要安装nodejs，建议使用最新版本。然后全局安装json server.

  npm install json-server -g

使用linux和macOS的电脑需要加上sudo

  sudo npm install json-server -g

安装完成后可以用 json-server -h 命令检查是否安装成功，成功后会出现

json-server [options] 

选项：
  --config, -c       Path to config file            [默认值: "json-server.json"]
  --port, -p         Set port                                     [默认值: 3000]
  --host, -H         Set host                                [默认值: "0.0.0.0"]
  --watch, -w        Watch file(s)                                        [布尔]
  --routes, -r       Path to routes file
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                              [布尔]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing                [布尔]
  --no-gzip, --ng    Disable GZIP Content-Encoding                        [布尔]
  --snapshots, -S    Set snapshots directory                       [默认值: "."]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)          [默认值: "id"]
  --quiet, -q        Suppress log messages from output                    [布尔]
  --help, -h         显示帮助信息                                         [布尔]
  --version, -v      显示版本号                                           [布尔]

示例：
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json

https://github.com/typicode/json-server

运行

安装完成后，可以在任一目录下建立一个 xxx.json 文件,例如在 mock/ 文件夹下，建立一个 db.json 文件，并写入以下内容，并在 mock/ 文件夹下执行 json-server db.json -p 3003 。

{
  "news":[
    {
      "id": 1,
      "title": "曹县宣布昨日晚间登日成功",
      "date": "2016-08-12",
      "likes": 55,
      "views": 100086
    },
    {
      "id": 2,
      "title": "长江流域首次发现海豚",
      "date": "2016-08-12",
      "likes": 505,
      "views": 9800
    }
  ],
  "comments":[
    {
      "id": 1,
      "news_id": 1,
      "data": [
        {
          "id": 1,
          "content": "支持党中央决定"
        },
        {
          "id": 2,
          "content": "抄写党章势在必行！"
        }
      ]
    }
  ]
}

为了方便，再创建一个 package.json 文件，写入

{
  "scripts": {
    "mock": "json-server db.json --port 3003"
  }
}

然后使用到 /mock 目录下执行 npm run mock 命令，如果成功会出现

> @ mock /你的电脑中mock文件夹所在目录的路径/mock
> json-server db.json -p 3003


  {^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3003/news
  http://localhost:3003/comments

  Home
  http://localhost:3003

如果不成功请检查 db.json 文件的格式是否正确。

操作数据 GET

这个时候访问 http://localhost:3003/db 可以查看 db.json 文件中所定义的全部数据。
使用浏览器地址栏，jQuery.get 或 fecth({method: "get"}) 访问 http://localhost:3003/news ，则可以看到 news 对象下的数据,以Array格式返回:

[
  {
    "id": 1,
    "title": "曹县宣布昨日晚间登日成功",
    "date": "2016-08-12",
    "likes": 55,
    "views": 100086
  },
  {
    "id": 2,
    "title": "长江流域首次发现海豚",
    "date": "2016-08-12",
    "likes": 505,
    "views": 9800
  }
]

POST

以jquery的 $.ajax 方法举例,以下代码会实时的向 db.json 中的 news 对象push一条新的数据再次用 get 方式访问 http://localhost:3003/news , 就可以看到它了

$.ajax({
    type: "post",
    url: "http://localhost:3003/news",
    data: {
      "id": 3,
      "title": "我是新加入的新闻",
      "date": "2016-08-12",
      "likes": 0,
      "views": 0
    }
  }
)

PUT

同样以jquery的 $.ajax 方法举例,以下代码会实时的对 db.json 中的 news 对象中 id=1 数据进行修改

$.ajax({
    type: "put",
    url: "http://localhost:3003/news/1",
    data: {
      "title": "曹县宣布昨日晚间登日失败",
      "date": "2016-08-12",
      "likes": 55,
      "views": 100086
    }
  }
)

// 结果

[
  {
    "id": 1,
    "title": "曹县宣布昨日晚间登日失败",
    "date": "2016-08-12",
    "likes": 55,
    "views": 100086
  }
]

PATCH 和 DELETE 使用方式同上，就不做演示了。

参考资料

json-server源码： json-server
mockjs源码： mockjs
demo ：示例代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79763.html

介绍两大神器！——使用json-server和faker.js模拟REST API

摘要：今天发现了一个神器在他的帮助下可以在很短的时间内搭建一个然后就可以让前端在不依赖后端的情况下进行开发啦关于什么是设计指南阮一峰简单来说，是一个模块，运行服务器，你可以指定一个文件作为的数据源。更多属性可以查看这里好啦，基本就是这样啦，今天发现了一个神器——json-server!在他的帮助下可以在很短的时间内搭建一个Rest API, 然后就可以让前端在不依赖后端的情况下进行开发啦！...

sarva 2019-08-20 14:47 评论0 收藏0
使用json-server来模拟REST API

摘要：官方地址使用可全局安装，也可针对项目安装。可用开启服务。数据文件格式如下让读书点燃梦想地点滨江星耀城让读书点燃梦想地点滨江星耀城仿京东购物车仿京东购物车修改里面的命令。在前端开发中，如果后端接口还没有提供，前端拿不到数据，可能就没法继续写一些交互行为的代码。这一问题可通过json-server来很好地解决。本文主要讲如何将json-server和webpack进行整合，基于vue-w...

smartlion 2019-08-20 19:02 评论0 收藏0
用JSON-server模拟REST API(三) 进阶使用

摘要：前面演示了如何安装并运行和使用第三方库真实化模拟数据下面将展开更多的配置项和数据操作。示例数据源元小总小把清保住影办历战资和总由共先定制向向圆适者定书她规置斗平相。前面演示了如何安装并运行 json server , 和使用第三方库真实化模拟数据 , 下面将展开更多的配置项和数据操作。配置项在安装好json server之后，通过 json-server -h 可以看到如下配置项...

xavier 2019-08-19 18:36 评论0 收藏0
用JSON-server模拟REST API(二) 动态数据

摘要：上一篇演示了如何安装并运行在这里将使用第三方库让模拟的数据更加丰满和实用。使用动态数据上一篇演示时，使用了作为数据载体，虽然方便，但是如果需要大量的数据，则显得力不从心。上一篇演示了如何安装并运行 json server , 在这里将使用第三方库让模拟的数据更加丰满和实用。使用动态数据上一篇演示时，使用了 db.json 作为数据载体，虽然方便，但是如果需要大量的数据，则显得力不...

weakish 2019-08-19 18:36 评论0 收藏0
理解RESTful架构与json-server模拟REST api的使用

摘要：一什么是架构即的缩写，我们把他翻译为表述性状态传递，是博士在年他的博士论文中提出来的一种软件架构风格。是个无状态的协议，所以状态就保存在服务器端。只要少量的数据就可使用，支持和。同时支持，同时提供一系列的查询方法如。一、什么是RESTful架构？ REST即Representational State Transfer的缩写，我们把他翻译为表述性状态传递，是Roy Fielding博...

Atom 2019-08-21 16:24 评论0 收藏0