30秒内实现前端数据mock

·  阅读 1046

前言

数据mock除了mock.js、或者使用花瓶等抓包工具引入本地json文件的方法还是有啥子呢??是不是感觉这些方法使用起来都很麻烦,主要还都不能模拟真实的数据增删改查,哥哥们别急,接下来介绍的这个方法,可以完全模拟真实的接口调用情况。

JSON Server

JSON Server顾名思义就是,起一个本地服务,你可以指定一个 json 文件作为 api 的数据源。官网宣称可以在30秒内用0代码实现一个RESTful风格的 API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。按照RESTful风格的查询方式对接口进行操作,就可以查询到想要的结果.

开搞

1.首先全局安装一下JSON Server.

npm install -g json-server
复制代码

2.在项目中创建json文件.

{
  "users": [
    {
      "name": "寒冰",
      "id": 1
    },
    {
      "name": "剑姬",
      "id": 2
    }
  ]
}
复制代码

3.启动JSON Server,到这里确实如官网所说,用了不到30秒(主要网速要好....)

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "json_server": "json-server --watch db.json --port 3001"
  }
复制代码

4.可以去网页上访问一下看看,很神奇..

5.使用postman对接口进行操作.

比如我想要修改id为1的数据项的name,接下来神奇的事情发生了 对接口进行patch方法之后,我本地的json文件里面的数据也被修改了!!当然也可以使用post增加数据,delete删除数据等等

配合mockjs使用

配合mockjs生成模拟数据

npm install mockjs --save-dev
复制代码

2.新建一个js文件

var Mock = require('mockjs')

module.exports = () => {
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }],
        'goods|1-10': [{
            'name|+1': [
                'iphone',
                'xiaomi',
                '一加',
                '罗老师'
            ]
        }]
    })
    return data
}
复制代码

3.运行server

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "json_server": "json-server --watch db.json --port 3001",
    "json_server_mock": "json-server mock.js --port 3001"
  },
复制代码

完!!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改