用JSON Server构建前端Mock Server

Posted 2021-04-30 西安IT圈

项目开发中前端开发和后端开发通常是并行开发的，通常情况下，前端开发时，后端接口并没开发好，为了减少这种等待，前端开发经常需要在本地模拟后端接口来测试前端效果。本文我们以JSON Server为例来模拟后端接口。

一、安装JSON Server：

Npm install -g json-server

进入安装目录C:\Users\administrator\AppData\Roaming\npm\node_modules\json-server或将该目录的data.json拷到命令行执行目录后启动服务:

Json-server --watch data.json

访问http://localhost:3000

 

现在可以直接按照RESTful规范调用这个接口，并且所做的POST和DELETE等请求，会直接修改data.json的值。

二、整合Webpack Dev Server

在项目中使用JSON Server，还需要做点处理。通常在本地调试的时候我们已经启动了一个静态服务，因此需要代理服务进行跨域（两个服务分别在两个端口上）。对于使用Webpack打包的项目，已经使用了它自带的webpack-dev-server服务，它工程所了proxy参数来解决这个问题。在webpack.config.js做以下配置：

devServer:{

        proxy: {

            '/gm/api/*': {

                target: 'http://localhost:3000',

                secure: false

            }

        }

}

在package.josn中新添加一个scripts:

"scripts": {

    "dev": "webpack-dev-server --inline --hot --no-info",

    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",

    "mock": "node_modules/.bin/json-server --watch mock/db.json --port 3000",

    "mockdev": "npm run mock & npm run dev"

  },

    这样在代码中每次调用/gm/api/issues的时候，都会调用到JSON Server服务去，可以真实模拟线上的接口使用情况。现在可以把所有接口都集中写到一个json文件中去，代码里面线上环境和本地Mock也保持了一致，不需要再来回切换啦！

三、加上Faker

如果我们想在Mock的时候生成更多的随机数据，这个时候就需要faker了！faker.js可以用来产生大量的模拟假数据。

Npm   install  faker lodash -save-dev

在项目中新建一个generate.js文件

module.exports = function(){

  var faker =require("faker");

  vae _ = require("lodash");

  return {

    people: _.times(100,function (n) {

      return {

        id: n,

        name: faker.name.findName(),

        avatar: faker.internet.avatar()

      }

    })

  }

}

使用命令json-server generate.js

生成了100条数据，它也能够生成许多常见的随机数据。

西安IT圈

ID：xa-itq

长按二维码识别并关注