JS：使用Mock.js生成随机数据，拦截 Ajax 请求

Mock.js生成随机数据，拦截 Ajax 请求

参考文档：https://github.com/nuysoft/Mock/wiki/Getting-Started

语法规范：https://github.com/nuysoft/Mock/wiki/Syntax-Specification

一、Node.js

安装

npm install mockjs

示例

// 使用 Mock
var Mock = require('mockjs')

/**
 * 
 * 数据模板
 * 属性名|生成规则: 属性值
 */
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,
        'name': '@FIRST'
    }]
})

// 输出结果
console.log(JSON.stringify(data, null, 4))

运行结果

{
    "list": [
        {
            "id": 1,
            "name": "Larry"
        },
        {
            "id": 2,
            "name": "Edward"
        },
        {
            "id": 3,
            "name": "Jessica"
        },
        {
            "id": 4,
            "name": "William"
        },
        {
            "id": 5,
            "name": "Christopher"
        },
        {
            "id": 6,
            "name": "Michael"
        },
        {
            "id": 7,
            "name": "Susan"
        },
        {
            "id": 8,
            "name": "Shirley"
        },
        {
            "id": 9,
            "name": "Angela"
        },
        {
            "id": 10,
            "name": "George"
        }
    ]
}

二、浏览器中

使用示例

  {{info.name}}
  {{info.age}}
  {{info.date}}



  // 生成数据
  Mock.mock("http://mockjs", {
    name: "@cname", //模拟名称
    "age|1-100": 100, //模拟年龄(1-100)
    date: "@date('yyyy-MM-dd')", //模拟时间
  });

  const app = new Vue({
    el: "#app",
    data: () => {
      return {
        info: {},
      };
    },

    // http请求拦截
    methods: {
      async getData() {
        const res = await axios.get("http://mockjs");
        this.info = res.data;
      },
    },

    created() {
      this.getData();
    },
  });

更多示例：http://mockjs.com/examples.html

参考 模拟数据----------mock.js----------faker.js