使用mock自定义json数据模拟后台接口,使前端独立于后台开发

官网地址:mock官网
有时候前端写完页面之后,后台的数据还没完成,有时候不愿意写一遍静态再等后台的数据,所以记录一下今天学到的自己定义json数据模拟接口的方法.
首先安装mock.js,共有五种方法,较为常用的方法有三种:

node(commonJS)

  #安装
npm install mockjs

var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{      
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

Bower

#安装
npm install -g bower       //安装bower
bower install --save mockjs     //用bower安装mockjs到项目文件夹

//页面引用

效果图

RequireJS (AMD)

// 配置 Mock 路径
require.config({
    paths: {
        mock: 'http://mockjs.com/dist/mock'
    }
})
// 加载 Mock
require(['mock'], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }]
    })
    // 输出结果
  console.log(JSON.stringify(data, null, 4) );
})

// ==>
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}

只记录试验过的三种方法,其他的两种没有试验,可以直接上官网看文档,选用了bower这种的安装方法,适合简单页面的应用