使用json-server来模拟REST API

smartlion 发布于2019-08-20 19:02 / 2339人阅读

摘要：官方地址使用可全局安装，也可针对项目安装。可用开启服务。数据文件格式如下让读书点燃梦想地点滨江星耀城让读书点燃梦想地点滨江星耀城仿京东购物车仿京东购物车修改里面的命令。

在前端开发中，如果后端接口还没有提供，前端拿不到数据，可能就没法继续写一些交互行为的代码。这一问题可通过json-server来很好地解决。本文主要讲如何将json-server和webpack进行整合，基于vue-webpack-boilerplate。

json-server官方地址

使用

1.可全局安装json-server，也可针对项目安装。这里是全局安装json-server。
npm install json-server -g

2.安装完成后，可以在任一目录下建立一个 xxx.json 文件。这里是在src的同级目录新建文件夹mock，在该文件夹内新增文件db.json，文件内容格式如下：

{
activitys: [
  {
    "id": 1,
    "url": "/static/actimg1.jpg",
    "desc": "让读书点燃梦想",
    "place": "地点：滨江星耀城",
    "time": "2017-5-10"
  },
  {
    "id": 2,
    "url": "/static/actimg1.jpg",
    "desc": "让读书点燃梦想",
    "place": "地点：滨江星耀城",
    "time": "2017-5-10"
  }
],
blogs: [
  {
    "id": 1,
    "avatarUrl": "/static/bloglistimg1.jpg",
    "name": "张三",
    "grade": "资深前端工程师",
    "slogan": "学习、分享，共同进步，只有坚持才能获得最后的成功"
  },
  {
    "id": 2,
    "avatarUrl": "/static/bloglistimg1.jpg",
    "name": "张三",
    "grade": "资深前端工程师",
    "slogan": "学习、分享，共同进步，只有坚持才能获得最后的成功"
  }
]
}

3.为了便于之后接入后台 API，所以需要进行代理。在config/index.js文件内增加proxyTable（即图中红线框出来的部分）。图中将所有以/api开头的请求委托给http://localhost:3000 ，即请求/api/activitys/1相当于是请求http://localhost:3000/activitys/1。该参数配置详解见这里

4.在package.json的scripts内新增两行命令。

"mock": "json-server mock/db.json "
"mockdev": "npm run mock | npm run dev"

可用npm run mock开启json-server服务。成功开启见下图：

也可使用npm run mockdev直接运行mock和dev命令。

5.在其他页面可通过/api/XXX/获取数据。

存在的问题

若是要模拟的接口非常多，都往db.json里面添加的话，会导致这个文件变得非常庞大，难以维护。而且其他前端人员也会修改到这个文件，每次合并代码都要考虑冲突问题。

解决方案

每个人各自建立自己模块的数据文件，最终通过代码将多个数据文件合并为一个文件。

1.在mock/下新建server.js，该文件用于将各数据文件内的数据合并后统一输出。内容如下：

const fs = require("fs")
const path = require("path")
const MOCK_DIR = path.resolve(__dirname, "test")

const walk = dir => {
  let results = []
  let list = fs.readdirSync(dir)
  list.forEach(function (file) {
    file = dir + "/" + file
    let stat = fs.statSync(file)
    if (stat && stat.isDirectory()) {
      results = results.concat(walk(file))//若file是文件夹，则遍历获取该文件夹下文件内数据。
    } else if (path.extname(file) === ".js") {
      results.push(file)
    }
  })
  return results
}
const files = walk(MOCK_DIR)
let db = {}
files.forEach(function (file) {
  Object.assign(db, require(file))
})
module.exports = function () {
  return db
}

2.在mock/下新增test文件夹，各前端人员可自行在test/下新增数据文件(xx.js)和文件夹。数据文件格式如下:

module.exports = {
  activitys: [
    {
      "id": 1,
      "url": "/static/actimg1.jpg",
      "desc": "让读书点燃梦想",
      "place": "地点：滨江星耀城",
      "time": "2017-5-10"
    },
    {
      "id": 2,
      "url": "/static/actimg1.jpg",
      "desc": "让读书点燃梦想",
      "place": "地点：滨江星耀城",
      "time": "2017-5-10"
    }
  ],
  works: [
    {
      "id": 1,
      "imgUrl": "/static/workslistimg1.jpg",
      "iconUrl": "/static/workslisticon1.jpg",
      "desc": "仿京东购物车Vue.js"
    },
    {
      "id": 2,
      "imgUrl": "/static/workslistimg1.jpg",
      "iconUrl": "/static/workslisticon1.jpg",
      "desc": "仿京东购物车Vue.js"
    }
  ] 
}

3.修改package.json里面的mock命令。--m mock/post-to-get.js表示添加运行中间件。

"mock": "json-server mock/server.js --m mock/post-to-get.js",

上面代码中的post-to-get.js文件用于将post请求转为get请求。该文件内容如下:

module.exports = (req, res, next) => {
  req.method = "GET"
  next()
}

修改完成后，最终的文件结构如下：

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

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

理解RESTful架构与json-server模拟REST api的使用

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

Atom 2019-08-21 16:24 评论0 收藏0
介绍两大神器！——使用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之后，通过 json-server -h 可以看到如下配置项...

xavier 2019-08-19 18:36 评论0 收藏0
用JSON-server模拟REST API(一) 安装运行

摘要：曹县宣布昨日晚间登日成功长江流域首次发现海豚支持党中央决定抄写党章势在必行为了方便，再创建一个文件，写入然后使用到目录下执行命令，如果成功会出现你的电脑中文件夹所在目录的路径如果不成功请检查文件的格式是否正确。在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。对比过多种mock工具后，我最终...

Sleepy 2019-08-19 18:36 评论0 收藏0
30秒无需编码完成一个REST API服务

摘要：秒内无需编码快速完成一个模拟的服务。这个服务主要是给那些需要快速的模拟原型后端接口的前端人员使用的安装新建一个文件启动服务到这一步秒不到吧，一个完整的就基本完成了。 JSON Server 30秒内无需编码快速完成一个模拟的REST API服务。这个服务主要是给那些需要快速的模拟原型后端接口的前端人员使用的 GitHub：https://github.com/typicode/j.....

amuqiao 2019-08-22 18:17 评论0 收藏0